T3S: A JavaScript repository from jppellet

TSS Sublime (T3S)

TypeScript plugin for Sublime Text 2 and 3 using TypeScript tools ( https://github.com/clausreinke/typescript-tools )

I'm using the same error icons has SublimeLinter.

I took inspiration from: https://github.com/raph-amiard/sublime-typescript

Next version

A new version of the plugin is currently in developement in the Dev Branch. This new version correct most of the problem of the current version (especially references tracking after project initialisation that in the current version is not working) and have new features. It will be released soon.

Features

TypeScript language auto completion
TypeScript language error highlighting
TypeScript language syntax highlighting
A build System

Dependencies

node.js
tss (https://github.com/clausreinke/typescript-tools) if you set local_tss to false in settings
tsc for the build system that you install via npm install -g typescript (http://www.typescriptlang.org/)

OS

Tested on Windows & Ubuntu & OSX

Known Problems

OSX has currently the path for node hardcoded (default installation directory) du to some environnment PATH for GUI app problem. (OSX path settings added on v0.2.0 dev branch version soon to be released)
Adding reference after loading a project doesn't track them correctly (resolved on v0.2.0 dev branch version soon to be released)

Installation for Sublime Text 3:

Sublime text Package directory:

Click the Preferences > Browse Packages… menu

Without Git:

Download the latest source zip from github and extract the files to your Sublime Text Packages directory, into a new directory named T3S.

With Git:

Clone the repository in your Sublime Text Packages directory.

Installation for Sublime Text 2:

Sublime text Package directory:

Click the Preferences > Browse Packages… menu

Without Git:

Choose ST2 Branch
Download the latest source zip from github and extract the files to your Sublime Text Packages directory, into a new directory named T3S.

With Git:

Clone the repository in your Sublime Text Packages directory.
Checkout ST2 branch using git checkout ST2.

Project Settings:

To use the plugin correctly you need to setup a project either via a .sublimets file or using the sublime-project file.

When using .sublimets or a .sublime-project file, you need to open the folder where your project is with file > open folder or project > open project in Sublime Text.

sublime-project file

You can setup multiple root files You can indicate your typescript root files in your project_name.sublime-project like so :

	"settings":
	{
		"typescript":
		[
			"path/from/project/folder/to/your/root/file_1.ts",
			"path/from/project/folder/to/your/root/file_2.ts",
			...
		]
	}

.sublimets file:

You can setup only one root file. You can create a .sublimets file in the folder containing the typescript root file

	{
		"root":"root_file_name.ts"
	}

If you don't chose either of these solutions the plugin wil launch a process for each file, making them not being able to talk to each other.

Plugin settings:

You can acces the plugin settings from Preferences > Packages Settings > T3S, to modify the settings please copy the default settings inside the user settings one, and make your modification there otherwise your settings will be override by an update of the plugin.

You have 3 settings available:

local_tss: to use the local tss or the command line TSS, the default is using the local_tss
error_on_save_only: to highlight errors only while saving or while typing, the default is showing error highlighting while typing

the build parameters

 {
 	"local_tss":true,
 	"error_on_save_only":false,

 	"build_parameters":{
 		"pre_processing_commands":[],
 		"post_processing_commands":[],
 		"output_dir_path":"none",
 		"concatenate_and_emit_output_file_path":"none",
 		"source_files_root_path":"none",
 		"map_files_root_path":"none",
 		"module_kind":"none",
 		"allow_bool_synonym":false,
 		"allow_import_module_synonym":false,
 		"generate_declaration":false,
 		"no_implicit_any_warning":false,
 		"skip_resolution_and_preprocessing":false,
 		"remove_comments_from_output":false,
 		"generate_source_map":false,
 		"ecmascript_target":"ES3"
 	}
 }

local_tss:

the plugin use a local version of tss situated in the bin folder :

	"local_tss":true

You can use the tss command line tool (check installation method on the tss page) by setting local_tss to false, but with so the plugin will be perhaps behind TSS in terms of update and it could make the plugin not working is there's some api change.

	"local_tss":false

error_on_save_only:

Error highlighting while typing (will lag a bit du to calculation and this cannot be changed):

	"error_on_save_only":false

Error highlighting only shown when saving:

	"error_on_save_only":true

build_parameters:

I've added a build system that take most of the command line parameters of TSC, i'll not explain them here, you can install TSC and look at the parameters via tsc -h

And you also have two extra parameters that are pre_processing_commands and post_processing_commands that give you the opportunity to do command line things before and after tsc compiling

These are the default values:

	"build_parameters":{
		"pre_processing_commands":[],
		"post_processing_commands":[],
		"output_dir_path":"none",
		"concatenate_and_emit_output_file_path":"none",
		"source_files_root_path":"none",
		"map_files_root_path":"none",
		"module_kind":"none",
		"allow_bool_synonym":false,
		"allow_import_module_synonym":false,
		"generate_declaration":false,
		"no_implicit_any_warning":false,
		"skip_resolution_and_preprocessing":false,
		"remove_comments_from_output":false,
		"generate_source_map":false,
		"ecmascript_target":"ES3"
	}

Here's an exemple that do:

One pre processing command : node .settings/.components
The actual compilation with an output dir and amd module : tsc /absolute/path/to/filename.ts --outDir ./.build --module amd

Two post processing commands : node .settings/.silns.js and r.js.cmd -o .settings/.build.js

 "build_parameters":{
 	"pre_processing_commands":[
 		"node .settings/.components"
 	],
 	"post_processing_commands":[
 		"node .settings/.silns.js",
 		"r.js.cmd -o .settings/.build.js"
 	],
 	"output_dir_path":"./.build",
 	"concatenate_and_emit_output_file_path":"none",
 	"source_files_root_path":"none",
 	"map_files_root_path":"none",
 	"module_kind":"amd",
 	"allow_bool_synonym":false,
 	"allow_import_module_synonym":false,
 	"generate_declaration":false,
 	"no_implicit_any_warning":false,
 	"skip_resolution_and_preprocessing":false,
 	"remove_comments_from_output":false,
 	"generate_source_map":false,
 	"ecmascript_target":"ES3"
 }

Commands:

f1 Click on a property, a class, a method etc... then press f1 to have detail about it (doc comments etc...) (sublime text 3 only)
f3 Open a panel to Navigate in file (class,methods,properties, etc...)
f4 Click on a property, a class, a method etc... then press f4 to go to the definition
f5 Reload the current project
ctrl+shift+e Open a panel listing all the errors across all the files of the project
ctrl+shift+K Close all projects (to reinialise just focus on/open a .ts file)

Initialisation:

When you load a .ts file the plugin will initialize the root file or the current file and it can take some time for huge project.

The Sublime Text Status bar will indicate Typescript initializing during this phase and disapear when it's finished

References file

if you change a references file or make a change in a definition file and completion don't show up as it should, please use F5 to reload the project

Show Type: (sublime text 3 only)

you can click on variable or a method and press F1 to have detail about it (doc comments etc...)

Got to definition:

you can click on variable or a method and press F4 to go to the definition

Navigate in file:

you can open a panel by pressing F3 on a file to list class variables and methods tou can then click on an item to scroll towards it

Auto-completion:

You can circle through the function variables (if there's some) like with the snippets with the tab key

Error highlighting:

You can click on highlighted part to see the error description in the status bar

Error Panel:

You have the possibility to open an error panel that will list all the errors accross all your project file with the command ctrl+shift+e You can then click on each row, it'll open or focus the already open file concerned by the error.

Reloading the project:

You have the possibility to reload the project by pressing F5, you can see in the console when the reload is finished

Closing all project:

You have the possibility to close all projects by pressing ctrl+shift+k, you can then reinitialise a project by focusing one of the file of the project

jppellet/T3S

TSS Sublime (T3S)

Next version

Features

Dependencies

OS

Known Problems

Installation for Sublime Text 3:

Sublime text Package directory:

Without Git:

With Git:

Installation for Sublime Text 2:

Sublime text Package directory:

Without Git:

With Git:

Project Settings:

sublime-project file

.sublimets file:

Plugin settings:

local_tss:

error_on_save_only:

build_parameters:

Commands:

Initialisation:

References file

Show Type: (sublime text 3 only)

Got to definition:

Navigate in file:

Auto-completion:

Error highlighting:

Error Panel:

Reloading the project:

Closing all project: