Top Angular Plugins for Sublime Text

Jeff Smith
Jeff Smith
Share

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!

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:

  1. Install tslint (npm install -g tslint).
  2. Install the SublimeLinter 3 plugin via Package Control.
  3. Use the SublimeLinter Documentation. (Follow the steps “Finding a linter executable” through “Validating your path” to ensure that SublimeLinter can see your tslint package.)
  4. 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!

Frequently Asked Questions (FAQs) about Angular Plugins for Sublime Text

What are the benefits of using Angular plugins for Sublime Text?

Angular plugins for Sublime Text offer a variety of benefits. They provide a more efficient coding experience by offering features like code completion, snippets, and syntax highlighting. This can significantly speed up your development process. Additionally, these plugins often come with built-in error checking, which can help you catch and fix mistakes early on. They also offer seamless integration with Angular, making it easier to work with this popular framework.

How do I install Angular plugins for Sublime Text?

Installing Angular plugins for Sublime Text is a straightforward process. You first need to install Package Control, which is the package manager for Sublime Text. Once you have Package Control installed, you can easily search for and install Angular plugins directly from the Sublime Text editor. Some popular Angular plugins include AngularJS, Angular 2, and Angular CLI.

Can I use Angular plugins for Sublime Text with other programming languages?

Yes, you can use Angular plugins for Sublime Text with other programming languages. However, these plugins are specifically designed to enhance the development experience with Angular. They provide features like code completion, snippets, and syntax highlighting that are tailored to Angular. If you’re working with a different programming language, you might want to look for plugins specifically designed for that language.

Are there any free Angular plugins for Sublime Text?

Yes, there are many free Angular plugins for Sublime Text. Some popular free plugins include AngularJS, Angular 2, and Angular CLI. These plugins offer a variety of features to enhance your development experience with Angular, including code completion, snippets, and syntax highlighting.

How do I update Angular plugins for Sublime Text?

Updating Angular plugins for Sublime Text is easy. You can use the Package Control manager to check for updates and install them. It’s a good idea to keep your plugins up to date to ensure you’re benefiting from the latest features and bug fixes.

Can I use Angular plugins for Sublime Text on different operating systems?

Yes, you can use Angular plugins for Sublime Text on different operating systems. Sublime Text is a cross-platform text editor, which means it works on Windows, Mac, and Linux. The plugins you install should work across all these platforms.

What are some alternatives to Angular plugins for Sublime Text?

There are many alternatives to Angular plugins for Sublime Text. Some popular alternatives include plugins for other text editors like Visual Studio Code, Atom, and Brackets. These plugins offer similar features, including code completion, snippets, and syntax highlighting.

How do I uninstall Angular plugins for Sublime Text?

Uninstalling Angular plugins for Sublime Text is a simple process. You can use the Package Control manager to remove any plugins you no longer need. Just search for the plugin you want to remove and select the ‘Remove Package’ option.

Can I customize Angular plugins for Sublime Text?

Yes, you can customize Angular plugins for Sublime Text. Many plugins offer a variety of settings that you can adjust to suit your personal coding style and preferences. You can usually access these settings through the Sublime Text editor.

Are there any resources to help me get started with Angular plugins for Sublime Text?

Yes, there are many resources available to help you get started with Angular plugins for Sublime Text. The official Sublime Text and Angular documentation are great places to start. There are also many tutorials and guides available online that can walk you through the process of installing and using these plugins.