ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Arctic​Typescript

by Phaiax ST3

TS 1.4+: completion, error highlighting, build, snippets, quickinfo, ...

Details

Installs

  • Total 34K
  • Win 18K
  • Mac 9K
  • Linux 6K
Dec 21 Dec 20 Dec 19 Dec 18 Dec 17 Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4 Dec 3 Dec 2 Dec 1 Nov 30 Nov 29 Nov 28 Nov 27 Nov 26 Nov 25 Nov 24 Nov 23 Nov 22 Nov 21 Nov 20 Nov 19 Nov 18 Nov 17 Nov 16 Nov 15 Nov 14 Nov 13 Nov 12 Nov 11 Nov 10 Nov 9 Nov 8 Nov 7 Nov 6
Windows 3 3 3 0 0 0 0 2 0 0 1 1 1 0 2 2 1 0 1 1 2 0 3 1 0 0 0 0 0 0 2 0 2 2 3 0 0 0 0 2 3 0 1 0 0 2
Mac 0 2 3 2 1 0 0 0 0 0 1 0 1 0 0 2 2 1 1 0 2 1 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 1
Linux 0 1 0 0 0 0 0 0 0 0 1 0 0 0 1 0 0 1 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

ArcticTypescript

  • Wizzard for project creation (create .ts file to activate).
  • syntax highlighting
  • auto completion
  • live error highlighting
  • fast access to errors via shortcuts and clicks
  • refactoring (beta)
  • jump to declaration
  • quick info
  • build system for Typescript 1.5
  • view build result.js
  • snippets
  • filesGlob support (on_save only)

Errors? See Common Errors and Solutions first, then issue a bug report.

Images of ArcticTypescript

Commands and Shortcuts

Shortcut Action
Ctrl+ Space trigger code completion.
Alt + Shift + E E error view
Alt + Shift + E H jump to 1st error
Alt + Shift + E J jump to 2nd error
Alt + Shift + E K jump to 3rd error
Alt + Shift + E L jump to 4th error
F1 show details about type under cursor
F2 refactor under cursor
(beta: enable in settings first)
F4 jump to declaration
F8 or Ctrl+B Build the project.
Shift+F5 reload (do this if autocompletion
is missing something or after
tsconfig.json changes)
  • Goto Anything -> “ArcticTypescript: Terminate All Builds” if build is stuck
  • snippets: see below

Example Projects

Settings

You need to configure typescript using a tsconfig.json file. Place this file in your project folder or at least in some parent folder of your source files.

Minimal Example tsconfig.json:

{
    "compilerOptions": {
        "out": "out.js",
        "sourceMap": true,
        "target": "es5"
    },
    "files": [
        "main.ts"
    ],
}

"files" : [] : Define the files which should be compiled. At least 1 file is required. You only need to specify the file from the top / root of your internal reference tree (your main.ts). But it does no harm to specify more files. Alternative: use "filesGlob" : [] (see below)

More compilerOptions:

  • target (string) 'es3'|'es5' (default) | 'es6'
  • module (string) 'amd'|'commonjs' (default)
  • declaration (boolean) Generates corresponding .d.ts file
  • out (filepath) Concatenate and emit a single file
  • outDir (folderpath) Redirect output structure to this directory
  • noImplicitAny (boolean) Error on inferred any type
  • removeComments (boolean) Do not emit comments in output
  • sourceMap (boolean) Generates SourceMaps (.map files)
  • removeComments (boolean) Do not emit comments to output.
  • sourceRoot (folder) Optionally specifies the location where debugger should locate TypeScript source files after deployment
  • mapRoot (folder) Optionally Specifies the location where debugger should locate map files after deployment
  • preserveConstEnums (boolean) Do not erase const enum declarations in generated code.
  • suppressImplicitAnyIndexErrors (boolean) Suppress noImplicitAny errors for indexing objects lacking index signatures.

All pathes are relative to tsconfig.json. These are exactly the options for the typescript compiler: Refer to tsc --help.

Decide between:

  • out='outfile.js' : Then use /// <reference path="second.ts" /> to spread your code. Example
  • outDir='built/' and module='amd': Use import s = require('second') to spread your code. Example

filesGlob

Atom-TypeScript provides a feature called filesGlob. ArcticTypescript mimics that feature. Create a filesGlob list next to the files list. Everytime you save tsconfig.json the files will be updated. Example:

{
    "compilerOptions": { },
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.ts"
    ]
}

ArcticTypescript settings

You can configure ArcticTypescript as well (type, default):

  • enable_refactoring (boolean, false) Disabled by default (still beta)
  • activate_build_system (boolean, true)
  • auto_complete (boolean, true)
  • node_path (string, null) If null, then nodejs must be in $PATH
  • tsc_path (string, null) If null, it will search a node_modules dir with typescript installed or use ArcticTypescript's tsc
  • error_on_save_only (boolean, false)
  • build_on_save (boolean, false)
  • show_build_file (boolean, false) show the compiled output after build
  • pre_processing_commands ([string], [])
  • post_processing_commands ([string], [])

Where to store these settings:

  • For personal settings across all typescript projects:
    • GUI: Menu -> Preferences -> “Settings - User” -> ['ArcticTypescript'][KEY]. This is the file <sublime config dir>/Packages/User/Preferences.sublime-settings.
    • GUI Menu -> Preferences -> Package Settings -> ArcticTypescript -> “Settings - User” -> [KEY]. This is the file <sublime config dir>/Packages/User/ArcticTypescript.sublime-settings.
  • For personal, project specific settings
    • GUI: Menu -> Project -> “Edit Project” -> ['settings']['ArcticTypescript'][KEY]. This is the file <ProjectSettings>.sublime-settings.
  • If you are not part of a team or for settings for everyone or for project specific settings if you don't have created a sublime project
    • tsconfig.json ['ArcticTypescript'][KEY]

Example Settings in project file mytsproject.sublime-settings:

{
    "folders":
    [
        {
            "file_exclude_patterns": ["*~"],
            "follow_symlinks": true,
            "path": "."
        }
    ],
    "settings":
    {
        "ArcticTypescript": {
            "pre_processing_commands": ["node .settings/.components"]
            "post_processing_commands": [
                "node .settings/.silns.js",
                "r.js.cmd -o .settings/.build.js",
                "cat ${tsconfig}",
                "echo a\\\\nbc | cat"
            ]
        }
    }
}

The working directory for all commands is ${tsconfig_path}. They will be executed using subprocess.Popen(cmd, shell=True). shell=True -> You can use pipes, …

You can use variables for the string values:

  • Sublime Variables
  • All your compilerOptions, e.g. ${outDir}
  • ${platform} : sys.platform = “linux” | “darwin” | “nt”
  • ${tsconfig} : the path to tsconfig.json
  • ${tsconfig_path} : the folder of tsconfig.json

Snippets

Type <trigger> and press TAB to insert snippet: <trigger>: feature

  • typescriptsnippets : Print this list into file as short reference.
  • .
  • cls : class with constructor
  • ctor : constructor
  • get : public getter
  • set : public setter
  • prop : public getter and setter
  • met : public class method
  • .
  • imp : import a = require('b')
  • ref : /// <reference path="a" />
  • .
  • do : do while loop
  • for : for (…; i++) {…}
  • forl : for (… .length; i++) {…}
  • forb : for (…; i--) {…} backwards loop (faster?)
  • forin: for … in … loop
  • .
  • f : function a(b) {c}
  • r0 : return false;
  • r1 : return true;
  • ret : return a;
  • .
  • ie : if … else …
  • if : if …
  • .
  • log : console.log();
  • to : setTimeout(() => {}, 500);
  • sw : switch … case: … default:
  • thr : throw "";

Installation

You need Sublime Text 3, Package Control for Sublime 3, node.js, and optionally Typescript (ArcticTypescript also provides a compiler).

Install ArcticTypescript: Open Sublime –> Goto Anything –> Package Control: Install Package –> ArcticTypescript

Install the AutoFileName plugin for completion of /// <reference path="xxx" />

Credits

Typescript tools for codecompletion and live errors. I'm using the same error icons as SublimeLinter. I took inspiration from Atom TypeScript.

Notes for Upgraders / People which used T3S before

This is a clone of the Typescript T3S Plugin, but with a lots of changes. If you switch to ArcticTypescript, please:

  • read this readme
  • uninstall T3S
  • delete the *.sublime-workspace files in your projects
  • close all file tabs in your old T3S Projects
  • update your key binding overrides, The new key is 'ArcticTypescript'

Compatibility

Sublime Text 2 is not supported anymore: Use the T3S plugin instead of this one for Sublime Text 2 users.

Build system may not work if you have installed typescript < 1.5 your projects node_modules / package.json. Workaround until typescript 1.5 is installed: Set the dependency in package.json to "typescript": "git+ssh://git@github.com:Microsoft/TypeScript.git".

Important Changes

v0.7.0: * Variable replacements for post or pre processing commands now require curly braces: ${tsconfig} * Typescript 1.5 beta

v0.6.0:

  • Dropped .sublimets, x.sublime-project. Compiler options belong to tsconfig.json
  • Many internal changes. Report if something is broken.
  • README rewrite
  • ProjectWizzard
  • filesGlob

v0.5.0:

  • You will need a new config file called tsconfig.json
  • Updated to TS 1.5 via typescript-tools (switching to tsserver will come soon)
  • Dropped support for Outline view, since typescript-tools has dropped support for this. This feature will come back again with tsserver.

v0.4.0:

  • build system: (relative) paths with spaces are now enclosed in “” automatically
  • > If you used additional “” to workaround the issue, you have to remove them, refer to messages/0.4.0.txt

v0.3.0:

  • relative root files now have a different base directory
  • The default shortcut to switch to the error view changed to: CTRL + ALT + E
  • There are 4 new shortcuts to jump to the first four Errors: CTRL + ALT + E + H (or J, K, L)