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:

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:

install-extension

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:

extensions-list

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

eslint-install

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:

"eslint.enable": true

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:

 "eslint.options": { 
                        "rules": {
                            "eqeqeq": [2, "allow-null"]
                        }
                    }

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:

"eslint.enable": true,
"eslint.options": { 
                    "rules": {
                        "eqeqeq": [2, "allow-null"]
                    }
                }  

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

lint-error

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.

Rey Bango

7 Comments

  1. Hi Rey, thanks for your article – it motivated to try Code again. Unfortunately Code still feels slow, finding files doesn’t work at all (maybe I have to wait for the indexing?) and installing extentions needs more then 1 minute to find the extensions.
    Sometimes the extension list is not opened at all, so I guess it took to long?
    The ESLint extension could be interesting – but I found no way to configure globals? e.g. “globals”: {“jQuery”: true}.
    If I try to save this option, I get an Error: (options.goblad || []).reduce is not a function?

    • Hey Harry, I’m not sure why you’re experiencing performance issues. I know that Code launches very quickly for me and finding the extensions was very fast. I’ll make sure to send your comment along to the team but could you reply here with a little more info about your setup?

      As for the ESLint extension, I know that’s a 3rd party developer who created it so I would urge you to contact him to see what’s going on with it. We’re really trying to allow the community to extend Code in the way they see as valuable and with that you’ll run into these scenarios.

      • Well my setup is really nothing special, I have a brand new Windows 10 PC with 16 GB of RAM and fast SSD. But maybe I misunderstood ctrl+p: I will only find recently opened files? Code can not work with projects (as Sublime)? FInding the extensions got faster – it takes about 10 – 20 sec now to open the dropdown. I will contact the ESLint extension developer and ask for configuration help.

        • Thank you Harry. That info, especially the OS, was really important before sending it out to the team. And yea Code doesn’t support projects like Sublime, something that I wish it did and I miss from Sublime. Let me see if I can get you some feedback.

  2. Hi there. I’ve noticed that VS Code doesn’t seem to see/use my .eslintrc file in the root of my working directory. Do I need a particular setting to use this? I have the extension installed and enabled.

Comments are closed.