Configuring Sublime Text 3 for Modern ES6 JS Projects

Learn how to configure Sublime Text 3 to have IntelliSense, Eclipse/JetBrains style keybindings and ES6 Syntax highlighting

Whilst working on a Node project at a recent client, their development team was using Sublime Text 3 as their IDE of choice and that they wanted the whole team to be working on a very similar stack. I just don’t buy it when a developer says they need a certain IDE to do their job so there was no complaints from me. Powerful and complex IDEs can be a great time saver and everybody has their favourites, but needing a specific IDE is a warning sign that the user is over-dependent on it and is perhaps missing some core skills and knowledge, particularly relating to modern build tools or application compilation.

My main gripes with Sublime when I got started were that the vanilla installation is missing some time saving features which I feel are essential in modern IDEs for JS development:

• Autocomplete was pretty naive, and didn’t support CommonJS or ES6 modules. The autocomplete basically just analyses the current file and even then it provides quite limited analysis
• Even when there was autocomplete available, the function completion and information features were weak
• No support out of the box for ES6 syntax
• The key bindings felt a bit laborious

Not being happy putting up with these issues, I set about resolving them.

Admittedly the key bindings gripe is purely personal preference, but if you’re coming from an Eclipse based IDE, not having “.” trigger the autocomplete suggestion box is enough to slowly drive you insane.

Getting Started

First of all you need to install the Package Control to make the rest of this tutorial a breeze.

1. Open the Command Palette using ctrl + shift + p
2. Type Package Control and hit Enter on the option to install package control

From now on, to bring up the package installer, simply open the Command Palette with ctrl + shift + p, and type “install package” and hit enter on the Package Control: Install Package option. This will bring up a search box you can use to find packages.

Improved IntelliSense

IntelliSense covers general autocomplete and inline function information such as function metadata, parameter information and return values. Luckily the tern_for_sublime package does a great job of utilizing TernJS to provide excellent autocomplete features.

1. Bring up the package installer
2. Type Tern and Hit Enter on the Install Package: tern_for_sublime option
3. Select Yes, Allow when prompted for whether tern_for_sublime should install Tern

4. Add a file to the project root called .tern-project and make sure it looks like this:

Consult the TernJS Manual for other available libraries, learning about loading certain files by default using loadEagerly and configuring plugins. If you have a lot of NPM dependencies, you may encounter Sublime performance issues. To rectify this, in your config file you may need to exclude the node_modules directory and explicitly include certain subdirectories within it.

Now when you use ES6 imports or require a module in Node, Sublime should be able to provide auto-completion for that module. Furthermore, you should get some handy auto-completion for any libraries you included in the libs array —to test this try getting suggestions for document

Improved Function Completion and JSDoc support

Once you have tern_for_sublime working correctly, setting up the tooltip display is simple. Just go to Preferences > Package Settings > Tern > Settings (User) and paste the following in this file:

After saving the file, when you click on a function or request suggestions, you’ll get a fancy looking tooltip that can read your JSDocs!

Note: I strongly recommend installing DocBlockr via Package Control for generating Doc Blocks as it’s a huge time saver.

ES6 Syntax Highlighting

Sublime doesn’t have Syntax highlighting for ES6 JS by default. Install the babel-sublime package

1. Bring up the package installer
2. In the search box type Babel and Hit Enter on the Babel package
3. Enable the Babel Syntax for Javascript by opening a JS file (or JSX if required) and in the Sublime Menu go to View > Syntax > Open all with current extension as… > Babel > JavaScript (Babel)

That’s it! Sublime will now understand and provide syntax highlighting for ES6 Javascript

Testing it out

All that’s left is prove our changes work. In your Sublime project, create 3 files:

• index.js
• Calculator.js
• Logger.js

and make sure they look like these:

If everything has worked, when you request suggestions for an imported module, you should get something like this:

Behold auto-complete in all it’s glory!

Even better, when you click on the parameters inside the add or logMessage calls in index.js, you should get something which looks like this:

Who needs WebStorm??

Eclipse/JetBrains Style Key Bindings (dot auto-complete)

The default auto complete trigger in Sublime is ctrl + space. Coming from an Eclipse based IDE background, this felt unnatural to me and I was craving ‘dot’ autocomplete trigger. Luckily in Sublime this is very simple to set up:

1. Open Preferences > Settings
2. In the new Window that opens, in the right hand pane Preferences.sublime.settings – User add the auto_complete_triggers as shown below (you can just leave any other settings as they are)

Now when you hit “.” you should see autocomplete suggestions.

Eclipse/JetBrains Style Key Bindings (ctrl + click jump to definition)

The default go to definition shortcut in Sublime is F12. To change this to ctrl + left mouse click you need to add a new mousemap file to your Sublime installation. Luckily doing this is very simple.

1. On your file system, navigate to wherever the mousemaps are kept on your OS*
2. Create a file named Default (Windows).sublime-mousemap (replace Windows with OSX or Linux depending on your OS)
3. Set the contents of that file to the following:

*The location of where your mousemap files should be kept varies based on your OS. At the time of writing, these are:

• Windows:C:\Users\YOUR_USER\AppData\Roaming\Sublime Text 3\Packages\User
• OSX/Linux:~/.config/sublime-text-3/Packages/User

Suggestions

If you have any suggestions or nice tips for using Sublime or must have plugins when developing JS based applications, let me know in the comments!