Menu
Getting started with TypeScript and Sublime Text 04 March 2015 Comments Posted in JavaScript, Open Source, TypeScript, Sublime Text. UPDATED: This post has been rewritten around the official TypeScript plugin. Typescript is awesome, period. TypeScript, in case you don't know, is a superset of JavaScript that allows you to use Object Oriented principles in order to write code that can be. Today, that is really really easy to do, thanks to Package Control and Microsoft, who is now providing a first class plug-in for Sublime Text to enable & light up TypeScript. Step 1: Install Package Control.
The plugin uses an IO wrapper around the TypeScript language services to provide an enhanced Sublime Text experience when working with TypeScript code.
Sublime Text 3 Package Control and Plugins Setup. How to Install Sublime Text 3: Step 1: First of all download the sublime text 3. Step 2: Than Install Sublime text 3 and enter your license key to activate your sublime text editor 3. Step 3: All Things are done! TypeScript gives us all the benefits of ES6, plus more productivity, and responsive support from the TypeScript team.” — Dylan Schiemann, Co-founder - Dojo Toolkit, CEO - SitePen “TypeScript is a smart choice when writing a modern web- or JavaScript-based application.
Requirements
The plug-in uses Node.js to run the TypeScript server. The plug-in looks for node in the PATH environment variable (which is inherited from Sublime).
If the
node_path
setting is present, this will override the PATH environment variable and the plug-in will use the value of the node_path
setting as the node executable to run.See more information in our Tips and Known Issues wiki page.Note: Using different versions of TypeScript
This plugin can be configured to load an alternate version of TypeScript.This is typically useful for trying out nightly builds, or prototyping with custom builds.To do that, update the
Settings - User
file with the following:Installation
If using Package Control for Sublime Text, simply install the
TypeScript
package.Alternatively, you can clone the repo directly into your Sublime plugin folder. For example, for Sublime Text 3 on a Mac this would look something like:
And on Windows:
(
--depth 1
downloads only the current version to reduce the clone size.)Note if you are using the portable version of Sublime Text, the location will be different. (See http://docs.sublimetext.info/en/latest/basic_concepts.html#the-data-directory for more info).IMPORTANT If you already have a package called
TypeScript
installed, either remove this first, or clone this repo to a different folder, else module name resolution can break the plugin.Platform support
OS:
The plugin has identical behavior across Windows, Mac, and Linux;
Sublime Text version:
The plugin supports both ST2 and ST3. However, some features are only available in ST3:
- Tool tips
- Error list
![Install typescript plugin for sublime text 3 on mac Install typescript plugin for sublime text 3 on mac](/uploads/1/2/6/0/126081909/750103828.png)
On Windows with ST2, you may see a 'plugin delay' message upon startup. This happens because ST2 does not call 'plugin_loaded()', so the TypeScript server process is started from within an event handler.
Where possible, the use of a Sublime Text 3 build >= 3070 is recommended, as this provides a popup API used for tool tips.
Features
The below features are available via the keyboard shortcuts shown, or via the Command Palette (^ means the
ctrl
key):Install Typescript Plugin For Sublime Text 3 On Mac
Feature | Shortcut |
---|---|
Rename | ^T ^M |
Find references | ^T ^R |
Next reference | ^T ^N |
Prev reference | ^T ^P |
Format document | ^T ^F |
Format selection | ^T ^F |
Format line | ^; |
Format braces | ^ Shift ] |
Navigate to symbol | ^ Alt R |
Go to definition | ^T^D or F12 |
Trigger completion | ^Space |
Trigger signature help | Alt+, |
See previous signature in the tooltip | Alt + up |
See next signature in the tooltip | Alt + down |
Paste and format | ^V or ⌘V |
Quick info | ^T ^Q |
Build | (Win)^B or F7 , (OSX) ⌘B or F7 |
Error list | (via Command Palette) |
The 'format on key' feature is disabled by default, which formats the current line after typing
;
, }
or enter
.To enable it, go to Preferences
-> Package Settings
-> TypeScript
-> Plugin Settings - User
, and add 'typescript_auto_format': true
to the json file.For further information about the keyboard shortcuts, please refer to the
Default.sublime-keymap
file for common shortcuts andDefault (OSX).sublime-keymap
,Default (Windows).sublime-keymap
,Default (Linux).sublime-keymap
for OS-specific shortcuts.Other settings
These settings can be overridden in
Packages/User/TypeScript.sublime-settings
, which you can open by going to Preferences
-> Package Settings
-> TypeScript
-> TypeScript Settings - User
.error_color
: the color of the squiggly lines drawn underneath type errors; either an empty string for the default color, or one of'region.redish'
,'region.orangish'
,'region.yellowish'
,'region.greenish'
,'region.bluish'
,'region.purplish'
,'region.pinkish'
quick_info_popup_max_width
: the max width of the quick info popup, default 1024
Project System
The plugin supports two kinds of projects:
Inferred project
For loose TS files opened in Sublime, the plugin will create an inferred project and include every file that the current file refers to.
Configured project
The plugin also supports representing a TypeScript project via a tsconfig.json file. If a file of this name is detected in a parent directory, then its settings will be used by the plugin.
Screenshots
- Project error list
- Signature popup (Requires Sublime Text 3 build >= 3070)
- Navigate to symbol
- Format
- Rename
- Find all references
- Quick info
- Build configured project
- Build loose file
Reporting Issues
Issues are being tracked via the GitHub Issues page for the project, and tagged with the appropriate issue type. Please do log issues for any bugs you find or enhancements you would like to see (after searching to see if such as issue already exists). We are excited to get your feedback and work with the community to make this plugin as awesome as possible.
Note about .tmLanguage
related issues
As the TypeScript and TypeScriptReact
.tmLanguage
definition files are shared across multiple editors including Sublime Text, Atom-TypeScript, and Visual Studio Code, we decided to create a dedicated repo for these files to combine the efforts for improvement.The new repo is at https://github.com/Microsoft/TypeScript-TmLanguage, and all future tmLanguage-related issues will be tracked there and ported back to this repo.Tips and Known Issues
See tips and known issues in the wiki page.
Posted by4 years ago
Archived
Hi!
I've known about TypeScript for a long time, but had not decided to give it a try until I spent hours finding a bug which would probably not occur if I was using TS. So I started to dig in and learn the basics and I really liked it so I started on setting up an editor to work with.
I know TS has great support in Microsoft tools, but that's not an option since I'm a mac user and I also tend to avoid IDEs. My current workflow is just fine with sublime and I'm currently trying to learn vim where in sublime I got some basic functionality to work after trying 3 or 4 packages. But in vim, I can't setup a basic workflow, although it would be nice, I don't need all the autocomplete visual studio is offering, I just want automatic error reporting on save, something similar to error tab in VS.
If anyone has experience with this, I'd love to hear how it's done and see your .vimrc (if using vim).
13 comments