Sublime Text is a powerful application that should be in every developer’s toolbox. It is a cross-platform, highly customized, advanced text editor that strikes a good balance between a powerful integrated development environment (which is notoriously resource-intensive) and a command line editor like Vim or Emacs (which is very expensive to learn).

One of the things that makes Sublime so powerful is its extensible plug-in architecture. Developers can easily extend Sublime’s core functionality by adding new features such as code completion and embedding remote interface documentation. Sublime Text does not come with plugins that can be enabled – they are usually installed through a third-party package manager, called package Manager for short. To install the package manager for Sublime Text, follow the installation tutorial on the website.

For JavaScript developers, this article briefly introduces ten Sublime plug-ins, each of which can help you improve your workflow and increase your productivity. Well, let’s take a look!

1. Babel

The first thing I want to introduce is the Babel plug-in. Add syntax highlighting to your ES6/2015 and React JSX code. The first thing to do after installing the plug-in is to set it to the default syntax for.es6,.jsx, and.js files. However, if you are working with ES3/5, there is one last file you should pay attention to and do not compile your code using Babel.

If you haven’t had the fun of Babel yet, I highly recommend you try it. It allows you to compile ES6/2015 and JSX code into ES5. And it does a good job of integrating popular build tools and command-line tools. Of course, it doesn’t support traditional browsers, but if you want to support IE10 or lower you can check out the instructions on their attached documentation page.

Unfortunately, the Babel plug-in does not allow ES6 code to be compiled within Sublime. For those who want to implement this feature, I recommend you look at Compile Selected ES6.

Review images

2. JSHint

Sublime’s JSHint plugin is next. JSHint is a JavaScript detector that looks at your code and verifies that it has the right style and syntax to avoid common errors. JSHint is essential whether you are a novice or a veteran. See JSHint’s About page for more information.

In order for JSHint to work properly in SublimeText, you need to install JSHint globally via NPM:

If you are not sure how to do this, check out the tutorial here in Getting Started with the Node Package Manager.

Once NPM’s JSHint module and SublimeText’s JSHint plugin are installed, you can easily use JSHint by opening the JavaScript file, Then press Ctrl + J (Alt + J on Linux/Windows). Alternatively, you can turn on the JSHint function from the menu.

If you’ve already installed a plugin but want a more obvious hint where there’s an error, go to the JSHint Gutter. Or, if you want to try JSHint before installing NPM packages and plug-ins, JSHint.com has a great online interaction tool where you can paste code into to get real-time feedback.

Review images

3. JsFormat

JsFormat is based on JS Beautifier, which helps you automatically format JavaScript and JSON. If you only want to format JSON strings with it, it’s worth having. But for me, the biggest advantage is when I need to read other developers’ code, even code I wrote a long time ago.

This code is often unreadable, and a uniform formatting code style would be very helpful. Although formatting tools are not for everyone, they use a uniform structure in the code, which is very useful for developers to read the code. The inspector will notice this, but they don’t have to do everything and don’t automatically format the code. Code formatting tools can save a lot of time and solve a lot of headaches.

Once installed, use JSFormat, open your JS file and press Ctrl + Alt + F on Windows/Linux or Ctrl + ⌥ + F on Mac. Alternatively, you can use the menu bar.

You might be thinking, “But what if I don’t like the way it formats JavaScript?”

Good news! JsFormat is highly configurable based on JS Beautifier Settings. You can adjust these Settings in Preferences -> Package Settings -> JsFormat -> settings-default in SublimeText 3.

You can then set your favorite JSON format.

Review images

4. DocBlockr

Adding comments to code can sometimes be a pain. I hardly know anyone who enjoys adding comments, but it’s absolutely necessary. DocBlockr helps ease the pain by adding succinct comments. Once DocBlockr is installed, all you need to do is type /* or /** at the beginning of the line and it will do the rest for you. If you use /** on a method, it generates comments in JSDoc format. If you’ve never used a tool like this, DocBlockr makes you feel like you could write code without it before.

DocBlockr also supports many other languages, including: CoffeeScript, TypeScript, PHP, ActionScript, Haxe, Java, Apex, Groovy, Objective C, C++, and Rust.

Review images

5. SideBar Enhancements

To be fair, SublimeText has only a few options in the side file tree. In a nutshell, Sidebarenhslovakia solves this problem. Apparently, the plugin provides a “move to trash” option for files and folders, “use… Open options and clipboard-related options. It also lets you open files in your browser, copy files in Data: URI Base64 (which makes it easy to embed images in CSS), and provide a range of search operations. It nicely integrates SideBarGit with the ability to provide Git commands directly in the sidebar, which is an additional feature.

As the JavaScript code base grows, it is essential to navigate your project and manipulate the files in your project in an intelligent way. So this plug-in is essential.

Review images

6. AngularJS

Developed by the Angular-UI team, it is probably one of the larger (but very useful) recommended plug-ins on the list. Its features include:

  • Auto-complete AngularJS directives (ng-model, ng-repeat, etc.)
  • Automatically complete your custom commands
  • Quickly view the panels of directives, Controllers and filters
  • Relevant fragment
  • Core instruction document

Angular is such a large library that I find it very useful. It has a number of Settings options that can be viewed on the project home page.

To take advantage of the Syntax highlighting feature of this plugin, you can change the View type of your HTML file: View -> Syntax -> HTML (angular.js)

Review images

7. TypeScript

TypeScript is a superset of JavaScript that can be compiled into plain JavaScript. This may not matter to the average developer, except for a small announcement in March that Angular 2 will be built on typescript. This means that if you use Angular and intend to continue using Angular2, the plugin must be installed.

This plug-in, supported by Microsoft, adds code auto-completion, proper syntax highlighting, code formatting, and extended navigation capabilities for TypeScript projects. It also comes with a build system that allows you to compile TypeScript into JavaScript.

To compile, go to Tools -> Build System and select TypeScript. Then open the file with the suffix.ts and select Tools -> Build, or press Ctrl + B. You might ask for the build parameters, and then the plugin will output the compiled JavaScript file in the same directory. The only caveat is that you need to install Node.

In the plug-in’s own words, it provides “the enhanced experience of programming with TypeScript in Sublime Text.” This is indeed true, and it was a big surprise to developers on the bloated IDEs mentioned earlier.

Review images

8. Handlebars

If you’re using ember.js or just Handlebars as your template language of choice, you can’t go without it. Without it, you might strip out all the syntax highlighting.

In addition to syntax highlighting (which works on individual template files and inline templates in script tags), it provides the ability to convert variables into expressions using the TAB key. For example, entering X-temp and pressing TAB yields:

Or, type ifel and press TAB, and you’ll get:

Pretty convenient, right?

There is a complete list of code snippets on the project home page.

Review images

9. Better CoffeeScript

Better CoffeeScript is an offshoot of the original coffeescript-sublime-Plugin (which unfortunately seems to have been abandoned by its developers and only works on SublimeText 2)

This plug-in provides much-needed syntax highlighting for CoffeeScript developers, and it doesn’t stop there. Sublime provides commands (via the command palette or various shortcuts) for syntax checking, compiling files, and displaying compiled files. It also provides a number of code snippets and a compilation system that uses CAKE (a simplified version of Make in CoffeeScript).

You can browse through more of the plugin’s Settings and options on the project home page.

Review images

10. jQuery

I know jQuery seems out of date in many places right now, but it’s still very useful if you’re not building an interactive website or if you just want to add functionality to an existing application.

This plugin provides additional syntax highlighting and almost all jquery methods as code snippets. Enter the method name to select the matching snippet – it’s that simple! I really like this feature because it saves me from memorizing all the method signatures and constantly looking through the jQuery API documentation.

For example, typing $.a lets me select $.ajax(), which automatically extends to the following code:

$.ajax({

url:‘/path/to/file’,

type:‘default GET (Other values: POST)’,

dataType:‘default: Intelligent Guess (Other values: xml, json, script, or html)’,

data:{param1:‘value1’},

.done(function(){

console.log(“success”);

.fail(function(){

console.log(“error”);

.always(function(){

console.log(“complete”);

});

Very nice! That’s great!

Review images

conclusion

So far, we’ve covered ten Sublime plug-ins that are essential for JavaScript development. I hope you’ll try one or two of them out and let me know in the comments how they go. Or MAYBE I didn’t list your favorite plug-ins. Please let me know and I’ll consider adding it to this list.

Before we go, a reminder that Sublime Text is not free. It has an unlimited trial version (the screen prompts from time to time), but costs $70 a user. If you spend most of your working day working with this text editor, I think it’s a very worthwhile investment.