Top Angular Plugins for Sublime Text

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.

1. Use the hotkey CTRL + ` or use the View > Show Console menu to bring up the integrated Sublime Text console.
2. Paste the block of Python code into the console, which can be copied from the Package Control Installation page and follow the instructions there.
3. 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:

1. Use the shortcut CMD + Shift + P (CTRL + Shift + P, depending on OS) to open the command palette.
2. Type install package and then press Enter, which brings you to the list of available packages.
3. 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.

1. 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.

2. Clone the repository into your Packages folder with the following:

   git clone https://github.com/princemaple/ngx-html-syntax
   
   

3. 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:

1. Open a .component.html file.

2. Choose View > Syntax > Ngx HTML.

3. 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:

   "extensions":
   [
     "component.html"
   ]
   
   

4. Restart Sublime Text. Now, all .component.html files should automatically use the Ngx Syntax plugin!

Continue reading %Top Angular Plugins for Sublime Text%

by Jeff Smith via SitePoint