If you are new to Angular development and looking to get started and integrate it more closely with your selected code editor, or you are an old hand at Angular development and trying your hand with Sublime Text as a new editor, integrating the two has never been easier.

There are many options for the Angular plugins that are able to smooth your way of developing the Angular apps using Sublime Text. You’ll need to set up the Sublime Text package manager before getting started, and then you have to take a look at the list of plugins here and see if any needful to you!

Setting up Package Control

Most of the Angular plugins will be discussed in this blog. First, you need to set up the Package Control in Sublime Text. This is one of the fairly painless processes. This is one of the most easiest ways of a configuration code even involves copy-pasting.

Steps to setting up package control

Use the key CTRL + ` or use the View > Show Console menu to bring up the integrated Sublime Text console.
Paste the block of the code of Python into the console, that is able to be copied from the Package Control Installation page and follow the instructions there.
The Package Control menus will be set it up once this is done. Now, all you need to do is find and install the packages.

How to Install a Sublime Text Package via Package Control Menus?

Package Control is a breeze. You need to open the Package Control, and select the install menu, then select 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 press the “Enter”, which brings you to the list of all the available packages.
  • You can search for a package by name, then select the package from there, and then press Enter to install that package.

Angular 2 HTML Package

The “Angular 2 HTML” plugin allows augmented HTML syntax for the Sublime Text. You can use the Angular attributes without any syntax highlighting being broken. Moreover, the JavaScript parts of the pages of your code will highlight as JavaScript, too. An incredibly useful addition for the Angular developers.

Angular 2 HTML Package Setup

This plugin can be installed manually via the following steps.

  • You have to close the Sublime Text and navigate via the Command Line to your Sublime Text “Packages” folder in your application installation. This is available at “/Users/{user}/Library/Application Support/Sublime Text 3/Packages” In macOS.
  • Clone the repository into your Packages folder as follows:
    “https://github.com/princemaple/ngx-html-syntax”
  • You have to open once again Sublime Text and check in the “View > Syntax” menu to ensure that Ngx HTML is an option.
  • Additionally, you are having a Sublime Text automatically highlight “.component.html” files with Angular 2 HTML Syntax:
    • Open a “.component.html” file.
    • Select the “View > Syntax > Ngx HTML”.
    • Go to the “Preferences > Settings > Syntax Specific”. Because the current file of your code is using the “Ngx HTML” syntax, it can be open the syntax-specific settings file for “Ngx HTML”. If so, add an extensions entry to the settings panel on the right as follow:
      “extensions”:
      [
      “component.html”
      ]
    • Then Restart Sublime Text. Now, all the “.component.html” files should automatically use the Ngx Syntax plugin.

Angular 2 Snippets

Angular 2 Snippets is one of the main Sublime Text plugins that focus to provide users with the snippets and code completion for Angular. It brings with its most of the autocompletion features that you have essential for your Angular development.

Autocompletion of the code is a bit of the hotbed issue with many Angular developers, who feel that it’s a much curse as a blessing, but, it can be extremely useful.

At the time of writing the code, the snippets and completion categories are available as follows.

Angular Plugins: Snippet Categories

  • Pipe
  • Route
  • Component
  • Service
  • Test
  • Directive
  • Route
  • RouteConfig

Angular Plugins: Completion Categories

  • Lifecycle
  • Routing
  • Pipes
  • Attributes
  • Annotations
  • Decorators
  • Directives

Angular CLI

The Angular CLI plugin is an amazing for any of the Angular devs out there, which permits Angular CLI commands to be run within the Sublime Text. Once it’s installed, Angular CLI commands are able to be found from the command palette.

The Angular CLI can be used for different purposes as following:

  • For Testing.
  • For starting a development server.
  • For generating the components, routes, classes, etc.
  • For Linting.

Angular Plugins: Typescript

TypeScript offers a typed layer over the standard JavaScript, as well as the preferred language for many of the Angular projects. It compiles the code to valid JavaScript, so the true value is to the developer. The TypeScript package for Sublime Text offers an improved experience for the users of TypeScript in the editor.

  • Quick navigation to the symbol or piece of text, easy viewing of TypeScript errors.
  • TypeScript formatting for a line, a selection of code, or an entire document at the top of a shortcut.
  • Project handling is a breeze with the plugin. It permits the creation of new and configured TypeScript projects. It will create “inferred projects” automatically when editing a single TypeScript file, pulling in imported files to make them available to you.

Angular Plugins: Linting

When you are working with Angular and TypeScript, you want your editor to lint your code. SublimeLinter-contrib-tslint is one of the Sublime packages that interfaces between the Sublime Text and tslint software. You need two things previously installed to use this:

  • Install “tslint (npm install -g tslint)”.
  • Install the SublimeLinter 3 plugin via Package Control.
  • Use the SublimeLinter Documentation.
  • Install the Sublime Plugin SublimeLinter-contrib-tslint via the Package Control.

Now you need to configure your linter. You are able to use the tslint docs to get a handle on configuration options for tslint and also look at the SublimeLinter documentation about setting up linter-specific settings.

DocBlockr

DocBlockr is one of the packages for Sublime Text that supports JavaScript and various flavors of it, including TypeScript. While DocBlockr is not unique to Angular or TypeScript, 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 syntaxes 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 an amazing way to save time and to ensure that your code gets documented in a uniform way.

Conclusion

This set of plugins will provide you with at least some Angular plugins that you need to make your Angular development efforts in Sublime a success.