Adding ESLint to the Microsoft VS Code Editor

I’ve switched from Sublime to Microsoft’s new Visual Studio Code editor. Yeah, yeah you’re probably saying, “you work for Microsoft so you have to”. I actually don’t and Sublime was my primary editor until the November release of VS Code which added a boatload of features including extensions. On top of that, VS Code is cross-platform so it runs on OS X which is what I use day-to-day. The extension ecosystem really sealed the deal for me because it allowed the community to build the features that they needed. This is something that Sublime does really well so seeing it come to VS Code means richer functionality will be available in short order.

I was working on some code today and was busting my head trying to figure out why a bit of data I was sending over in a request wasn’t being evaluated properly in a conditional expression. After a bit of time banging my head I realized I fell victim to JavaScript’s type coercion by using the “==” equality operator instead of the type-safe “===” operator. It was a silly mistake that would’ve easily been caught had I had a linter turned on in my editor. So I tweeted about it and got this reply:

@reybango there's a jshint rule for that. ;)

— Adam Tuttle (@AdamTuttle) December 17, 2015

So true, Adam. I’m actually partial to ESLint since it’s actively maintained by the awesome Nicholas Zakas and with extensions now available for VS Code, I went ahead and installed the ESLint extension.

Installing the Extension

Installing an extension in VS Code is incredibly easy. Within the editor, you press the F1 key which opens up a dialog:

Notice that I started typing in the word “extension” and it provided me with the option to install a new extension or show a list of installed extensions. Selecting “Install Extension” generates an initial list of extensions to pick from:

This list can be filtered down by typing in what you’re looking for. In this case, I wanted the ESLint extension:

If you look closely you’ll see a little cloud icon on the lower right-hand side of the ESLint entry. That means it’s available for installation. Just click on the entry and the install will start. Once it’s done, you’ll get a success message and be prompted to restart the editor.

Configuring ESLint

First, I’m assuming you have ESLint already installed on your system. If you don’t, you’ll need to do so by following the ESLint getting started guide. Once you’ve installed it and ensured it’s running, you can now turn it on and configure it in VS Code.

The process is very straightforward and involves making some small updates to the editor’s user settings. To start, click on the Code->Preferences->User Settings menu option to open the user settings configuration. The first setting you need to enter is:

[code language=”javascript”]
"eslint.enable": true
[/code]

This enables linting of your code in realtime within your editor. From there, you need to start setting the options you want for ESLint. In my case, I was specifically interested in the “Require === and !== (eqeqeq)” rule which enforces the use of type-safe equality operators. To set this, I added the following to my user settings:

[code language=”javascript”]
"eslint.options": {
"rules": {
"eqeqeq": [2, "allow-null"]
}
}
[/code]

This ensures that I’ll be notified if I use a non-type-safe equality operator but also provides some flexibility in evaluating null and undefined. The whole thing looked like this:

[code language=”javascript”]
"eslint.enable": true,
"eslint.options": {
"rules": {
"eqeqeq": [2, "allow-null"]
}
}
[/code]

As soon as I saved this and went back into my code, I was able to review the error messages generated by ESLint:

Extensions FTW

As you can see, the installation process for extensions is trivial and more importantly, the extension ecosystem is growing. There’s event extensions that offer Vim keyboard bindings for you diehard Vim fans.

If you haven’t taken a look at VS Code yet, you really should. It’s a solid, extensible editor that works on Windows, Mac OS X and Linux. Yep, you read that last part right; it’s cross-platform. Download it and take it for a spin.