Skip to content

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

License

Notifications You must be signed in to change notification settings

Phaiax/ArcticTypescript

Repository files navigation

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)

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published