Sublime text editor is quite a familiar name amongst the developer community (both novices and professionals). It has been developed with cross platform support for editing source code and text.

Although current version (Sublime text 3) is in beta stage, it is faster than version 2 and comes with loads of functionality. It natively supports wide array of programming and markup languages, and community-built free sublime text editor plugins have taken its functionality to a new height.

Many developers stick to this editor because of vast repository of plugins. In this article we’ll focus on some of the plugins which are most useful to JavaScript developers.

Linting

Linting tools help developers to detect error, syntactic discrepancies and potential problems. It can also be used to make sure that the project corresponds to a certain coding guideline.

SublimeLinter-eslint

It supports Sublime Text 3 version and provides an interface to ESLint to operate with files having “JavaScript” syntax. SublimeLinter 3, Node.js, npm and eslint are the prerequisite for installing this plugin. It encompasses plethora of rules with options to also customize them. Exact option will be given to you to write into the configuration file in order to to turn off every warning and error. One important thing to note here is that this plugin is the only one to support JSX and support for ES6 is far more superior in comparison to other plugins.

Usage: Depending on the SublimeLinter configuration, code will be linted while editing or saving. This can be configured by using Choose Lint Mode command.

Sublime-JSHint

JSHint Gutter plugin is compatible with both Sublime Text 2 and 3. Allows developers to check JavaScript code for dreadful errors and coding conventions. This plugin can also be configured to show hint in the gutter and work smoothly with project specific .jshintrc files. It relies on JSHint, a fork of JSLint. As the linter is written in JavaScript, Node.js is required to interpret JavaScript code outside the browser.

Usage: Ctrl+alt+J for Windows or Cmd+Option+J if you’re on a Mac. You can also right click, select JSHint and click on Lint Code. Another way is to open a JavaScript file, open the console in Sublime Text from View, then Show Console, and type view.run_command("jshint"). It is recommended to set up own key combo for this by going to Preferences -> Key Bindings – User, and adding a command like { "keys": ["ctrl+shift+j"], "command": "jshint" } in that array.

Formatting

Formatting tools are used to beautify the code blocks and format them to make them more readable.

Sublime-jsfmt

This plugin supports both of the versions of Sublime Text and automatically formats JavaScript code according to a particular style. The developer doesn’t need to read warnings and fix the formatting issue manually. In can be installed via the package manager by selecting jsfmt in the drop down menu.

Usage: Project specific .jsfmtrc file can be placed in the root directory of the project for configurations. It can be accessed through the following path: Preferences -> Package Settings -> Sublime JSFMT. Apart from this, there is a provision to set up keyboard short cut by going to Preferences -> Key Bindings – User and adding { "keys": ["ctrl+q"], "command": "format_javascript" } in the array.

JsFormat

It has support for both of the versions of Sublime Text. This JavaScript formatting plugin uses command line formatter from jsbeautifier in the background to format whole js, json file or only the selected portion of a file. Project specific configuration can also be done by .jsbeautifyrc file settings. Apart from this, white-space and formatting styles are also customizable.

Usage: The default key binding is ctrl+alt+f for Windows and cmd+option+f on Mac. Plugin uses uses tab/indent settings configured with the standard translate_tabs_to_spaces and tab_size sublime settings.

Code Analysis

These are the code inference engines used for expediting development process by providing code auto-completion, function argument hints, etc.

Tern for Sublime

This code-analysis plugin for JavaScript has been developed to integrate with code editors for intelligent JavaScript editing. It comes with some nifty features like:

• Auto-completion on variables and properties
• Function argument hints
• Querying the type of an expression
• Automatic re-factoring

You need to make sure that Node.js and npm are installed before proceeding to install this plugin.

Usage: Simply use alt+. to jump to the definition of the thing that the cursor is pointing at and alt+, to jump back to where you were when executing the previous alt+. command. Finally, alt+space to select all references to a particular variable in the current file.

Syntax Highlighting

In this section, we’ll go through a syntax highlighter plugin.

JavaScriptNext

This plugin is a superb JavaScript syntax highlighter. Apart from improving syntax-highlight for ES5, it also supports new ES6 syntax such as modules, succinct methods, arrow functions, classes, and generators. It can be installed via the Package Control by selecting JavaScript Next from the drop down.

Usage: In order to use this plugin for an individual JavaScript file, you can change the setting in the view -> syntax -> JavaScriptNext.To set this as default JavaScript syntax, open a javascript file, then select View -> Syntax -> Open all with current extension as... -> JavascriptNext. The ColorScheme can also be changed by selecting one from Preferences -> Color Scheme -> JavaScriptNext.

Documentation

Now we’ll check out a plugin that makes it quite easy to write code comments and documentations.

sublime-jsdocs

DocBlockr plugin supports both Sublime text 2 and 3 for JavaScript including ES6 specifications. It can be installed via by simply selecting DocBlockr in the package control. This plugin is highly configurable and lets you automatically complete comments, extend comments, decorate comments, add documentation pertaining to variables and functions.

Usage: Write and /** and press enter or tab to create new line and close the comment. While writing documentation for function, you’ll see that it tries to make intelligent guess about the return value and in case of variable, it tries to determine the type of variable from its name.

Plugins for JavaScript Libraries

You can install plugins for some of the popular JavaScript libraries like AngularJS and jQuery. Also, some plugins help you to speed up the development process by providing code snippets. For example JQuery snippet plugin can be installed for jQuery development.

Conclusion

In this article we covered some of the useful plugins for JavaScript developers. Please feel free to share the any other handy plugin in the comments section and help out the developer community.