Sublime Text 3 and modern Javascript

I've recently been learning React, and while doing so have realised that Sublime Text 3's default javascript syntax highlighting leaves a little to be desired when it comes to handling fancy ES6 features and JSX templates. This post is just going to be a quick roundup of what I have done to make my Sublime setup a bit more React-friendly.

Install the 'babel-sublime' plugin

The default Sublime Text JavaScript syntax highlighter is quite conservative in the tokens it recognises and doesn't understand either JSX or ES6 features at all. Fortunately for us there's babel-sublime.

If you have Package Control installed¹, you can just bring up the Sublime command palette with CMD + SHIFT + P, type Install Package and then install the package called 'Babel' by typing its name and pressing Return.

With Babel installed, you will have a new syntax menu option called 'Babel' containing 'JavaScript (Babel)' and 'Regular Expressions (Babel)', which will provide nice highlighting for all sorts of modern JS features.

To set Babel as the default syntax highlighter for JS files, open a .js (or .jsx) file and choose View > Syntax > Open all with current extension as.. > Babel > JavaScript (Babel).

Install JSHint and JSXHint

Now our javascript files are looking nice, but wouldn't it be nice if we could have syntax errors automatically highlighted as we work, too?

To achieve this, we're first going to need a couple of linting tools: jshint and jsxhint. Let's get them installed by running the following commands in your terminal of choice.

1> npm install -g jshint
2> npm install -g jsxhint

Note that the above assumes you have node.js installed in order to have access to npm. If you're on OS X you can install node via homebrew. Just brew install node.

If the installation has worked, you should be able to run both JSHint and JSXHint. If you don't see version numbers printed out when you run the commands below, something is wrong.

1> jshint --version
2jshint v2.6.0
3> jsxhint --version
4JSXHint v0.12.0 (jshint v2.6.0)

Install Sublime Linter and add JSHint support

Now we could just lint our JS files from the command line, but that's a bit of a pain. It'd be far better to have errors shown in Sublime itself. SublimeLinter to the rescue!

First, follow the instructions on the SublimeLinter page to get it installed (essentially just CMD + SHIFT + P, Install Package, SublimeLinter). This gets you the linting 'framework' for Sublime, but it doesn't yet know how to talk to JSHint or JSXHint. For this we need SublimeLinter-jshint and SublimeLinter-jsxhint. Again, these can be installed straight from Package Control.

You'll want to restart Sublime at this point to make sure all your new plugins are loaded and ready.

Configure JSHint

With the linter packages installed, we have everything we need to highlight errors in our JS as we type. All that's left to do is configure exactly which errors we would like to be told about.

There are various ways of doing this, but I found the most straightforward was to use a .jshintrc file. This is a text file containing a simple JSON object describing which JSHint options you want to enable. It can live almost anywhere (JSHint will search upwards from the directory of the file being linted all the way to drive's root directory), but I put mine in my project's root directory; this way, I can have per-project configurations for projects using different coding standards or JS technologies.

My React project's .jshintrc looks like this, but a lot of these options are down to taste or your particular project's coding style:

1{
2    // Environments - these prevent warnings about the use of some global
3    // variables. e.g. 'browser' assumes a 'window' global is available, etc.
4    "browser": true,
5    "browserify": true,
6    "devel": true,
7
8    // Var names must be camelCase or UPPER_CASE
9    "camelcase": true,
10    // Loops and conditionals must have curly brackets
11    "curly": true,
12    // Allow ES6 features
13    "esnext": true,
14    // 4 space indent (does not create warnings)
15    "indent": 4,
16    // Constructor functions must be capitalised
17    "newcap": true,
18    // Prevent use of undefined variables
19    "undef": true,
20    // Warn about unused variables
21    "unused": true
22}

Once your .jshintrc is place, if you do something that violates one of its rules, Sublime will warn you with a little marker in the line-number gutter (and possibly a highlight around the offending token, depending - I think - on your colour scheme). If you place your cursor on the line with the error, an error message will be displayed in the status bar.

For example, using the above config, I can happily do something like this and see no errors:

1var React = require("react");
2
3var Hello = React.createClass({
4  render: function () {
5    return <p>Hello world!</p>;
6  },
7});
8
9React.render(<Hello />, document.getElementById("hello-container"));

But if I was to miss out the last line, I would immediately see a warning telling me that Hello is defined but never used.

That's it! If you got this far, hopefully you're all set for the next, um, ten minutes of javascript development before the next framework rolls up!