Mar 27, 2017 TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular. Mar 14, 2018 TypeScript Plugin for Sublime Text. 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. Sublime Text 2 is one of the best and revered text editor out there. Already laden with features, we still need to install plugins in Sublime Text 2 to suit it up according to our needs. Is there a better text editor for Mac than Sublime Text 3? Update Cancel. Ad by Hotjar. You may get more out of a PHP specific IDE or if you are writing with typeScript, you may like the new features of Visual Studio. What are the top 10 Sublime Text 3 plugins? What are the text editors in Linux?
This article covers a number of Angular plugins for the Sublime Text text editor.
Whether you’re new to Angular (version 2+) development, and looking to get started with it and integrate it more closely with your code editor of choice, or you’re an old hand at Angular development and you’re trying your hand with Sublime Text as a new editor, integrating the two has never been easier.
There are lots of options for Angular plugins that can smooth your way developing Angular apps using Sublime Text. You’ll need to set up the Sublime Text package manager (called “Package Control”) prior to getting started, and then you can take a look at the list of plugins here and see if any meet your needs!
Setting up Package Control
In order to use most of the Angular plugins that will be discussed in this article, you’ll first need to set up Package Control in Sublime Text. This is a fairly painless process. The easiest way involves copy-pasting a configuration code.
- Use the hotkey CTRL + ` or use the View > Show Console menu to bring up the integrated Sublime Text console.
- Paste the block of Python code into the console, which can be copied from the Package Control Installation page and follow the instructions there.
- Once this is done, the Package Control menus will be set up! Now, all you’ll need to do is find and install your packages.
Installing a Sublime Text Package via Package Control Menus
Using Package Control is a breeze. You’ll need to open Package Control, select the install menu, and then choose and install a package:
- Use the shortcut CMD + Shift + P (CTRL + Shift + P, depending on OS) to open the command palette.
- Type
install package
and then pressEnter
, which brings you to the list of available packages. - Search for the package by name, select the package, then press Enter to install.
Angular 2 HTML Package
The Angular 2 HTML plugin provides augmented HTML syntax for Sublime Text. You’ll be able to use Angular attributes without syntax highlighting being broken. Additionally, the JavaScript parts of your pages will also highlight as JavaScript. A small but incredibly useful addition for Angular developers.
Angular 2 HTML Package Setup
At the time of this writing, this plugin was not present in Package Control, but can be installed manually via the following steps.
- Close Sublime Text and navigate via the Command Line to your Sublime Text 3 “Packages” folder in your application installation. In macOS, this is at
/Users/{user}/Library/Application Support/Sublime Text 3/Packages
. - Clone the repository into your Packages folder with the following:
- Re-open Sublime Text 3, and check in the View > Syntax menu to ensure that Ngx HTML is an option.
Additionally, you can have Sublime Text automatically highlight
.component.html
files with Angular 2 HTML Syntax:- Open a
.component.html
file. - Choose View > Syntax > Ngx HTML.
- Go to Preferences > Settings > Syntax Specific. Because your current file is using the Ngx HTML syntax, it should open the syntax-specific settings file for Ngx HTML. If so, add an extensions entry to the settings panel on the right:
- Restart Sublime Text. Now, all
.component.html
files should automatically use the Ngx Syntax plugin!
Angular 2 Snippets
Angular 2 Snippets is a Sublime Text plugin that aims to provide users with snippets and code completion for Angular. It brings with it most of the autocompletion features that you would need for your Angular development. Autocompletion of code is a bit of a hotbed issue with many developers, who feel that it’s as much a curse as a blessing, but nonetheless, it can be extremely useful.
At the time of writing, the following snippets and completion categories were available. (For a current list, or for more details about the items in each category, see the plugin’s GitHub README.)
Angular Plugins: Snippet Categories
- Component
- Directive
- Service
- Pipe
- RouteConfig
- Route
- Test
Angular Plugins: Completion Categories
- Annotations
- Decorators
- Lifecycle
- Routing
- Directives
- Attributes
- Pipes
Angular CLI
The Angular CLI plugin is fantastic for any Angular devs out there, allowing Angular CLI commands to be run from within Sublime Text. Once installed, Angular CLI commands can be found from the command palette. The Angular CLI can be used for a variety of purposes:
- to generate components, classes, routes, and more
- for testing
- for linting
- for starting a development server
… and much more!
Angular Plugins: Typescript
TypeScript provides a typed layer over standard JavaScript, and is the preferred language for many Angular projects. It compiles to valid JavaScript, so the true value is to the developer. The TypeScript package for Sublime Text offers an improved experience for TypeScript users in the editor.
- TypeScript formatting for a line, a selection of code, or an entire document at the tap of a shortcut.
- Quick navigation to a symbol or piece of text, easy viewing of TypeScript errors.
- Project handling is a breeze with the plugin. It allows for the creation of new, configured TypeScript projects. It will also automatically create “inferred projects” when editing a single TypeScript file, pulling in imported files to make them available to you.
Angular Plugins: Linting
Who doesn’t need code listing? When you’re working with Angular and TypeScript, you’ll want your editor to lint your code. SublimeLinter-contrib-tslint is a Sublime package that interfaces between the
tslint
software and Sublime Text. In order to use it, you’ll need two things previously installed:- Install
tslint
(npm install -g tslint
). - Install the SublimeLinter 3 plugin via Package Control.
- Use the SublimeLinter Documentation. (Follow the steps “Finding a linter executable” through “Validating your path” to ensure that SublimeLinter can see your tslint package.)
- Finally, install the Sublime Plugin
SublimeLinter-contrib-tslint
via Package Control.
You’re all set. Now you just need to configure your linter. You can use the tslint docs to get a handle on configuration options for tslint (which you’ll want to include in a
tslint.json
file in your project). Also look at the SublimeLinter documentation about setting up linter-specific settings.DocBlockr
DocBlockr is a package for Sublime Text that supports JavaScript and a variety of flavors of it, including TypeScript. While DocBlockr is not unique to TypeScript or Angular, it’s definitely usable there and provides a service that shouldn’t be discounted. DocBlockr is a plugin that assists developers in writing docblocks. It autocompletes the syntax for docblocks in order to save your precious time, and even goes so far as to autogenerate function and variable docblock templates as well. It’s a fantastic way both to save time and to ensure that your code gets documented in a uniform way.
Conclusion
Hopefully this set of plugins will provide you with at least some of the Angular plugins you need to make your Angular development efforts in Sublime a success. Have you used any of the above, or have any feedback about plugins that weren’t mentioned? Tweet us @sitepointjs and let us know!
The plugin uses an IO wrapper around the TypeScript language services to provide an enhanced Sublime Text experience when working with TypeScript code.
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
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):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
Sublime Typescript Syntax
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.Install Typescript Plugin For Sublime Text 3 On Mac
Tips and Known Issues
Sublime Java Plugin
See tips and known issues in the wiki page.