ESLint + Visual Studio Code: Editor integration For The Win
Coding is complicated — there are loads of best practices to remember, guidelines to follow and ‘known issues’ to avoid — so it helps to have a ‘helping hand’ while you work.
ESLint — https://eslint.org/
ESLint is an extendible linter — or code checking tool — that can be set up as a standalone tool or integrated into the Visual Studio Code editor.
‘A linter or lint refers to tools that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.’ [Wikipedia]
With ESLint properly configured in your editor, your development experience can be almost as-if you’re continually pair-programming with (an insufferably polite and knowledgeable) know-it-all. And as daunting as that might be, it’ll help you produce better quality code and teach you as you work.
Configuring Visual Studio Code with ESLint
First, a preamble: I’m going to start by setting up a React project using
create-react-app, which gives me a
package.json at the root of the project and manages dependencies through NPM.
To get a new project set up, run the following commands:
First, install create-react-app:
npm i -g create-react-app
Then, to create a new project:
And when we want to, we can run the project like so:
Setting up ESLint
ESLint could be installed globally, but for better portability and resilience let’s add it, and some plugins and settings, to the project, with the following command:
npm install --save-dev \
With all of those plugins installed, my
package.json file looks like this:
The package.json file with ESLint configs and plugins
Strictly speaking, the necessary plugins for adding ESLint is only actually eslint, but I’ve added the other plugins in this example because they’re the ones I’m currently using in my active projects.
Alongside these npm packages, we’ll also add a configuration file to the root of the project, called
.eslintrc, which looks like this:
My .eslintrc file
This tells ESLint to import the airbnb, prettier and jsx-a11y configurations (that we installed in the previous command) as a starting point, and gives us a springboard from which to extend the configuration in the future.
To run eslint against our code we can use the following command:
npx eslint src/App.js
Which gives the following output in the terminal:
Test output from the terminal
To make things a little easier to run, we can also add this command to the scripts section of the
package.json file, making it look like this:
The scripts section of the package.json file
It’s already pretty neat to be able to run ESLint and highlight issues with our code like this, but what really takes it to the next level is editor integration.
Integrating with Visual Studio Code
The ESLint plugin can be installed from the Visual Studio Marketplace, and gives easy integration with Visual Studio Code.
What does it actually do though? It adds inline code error highlighting, which transforms your editing experience (as illustrated below)
On the left: Without ESLint integration, On the right: With ESLint integration
With the plugin set up, rather than having the ESLint as a task that needs to be invoked manually, it runs automatically, displays the results inline with your code, and updates as you type so you get the kind of user experience you’d expect from a spell-checker but with the complexity of your ESLint rules.
It’s not all about inline validation though, there’s also some sweet integration with the rest of the editor, such as the ‘Problems’ panel:
(above) ESLint integration with the ‘Problems’ panel
Seeing this editor integration does rely on having the correct plugin installed though, which can be a bit of a tedious task to maintain if you’re on a development team. To assist with this, we can add a VSCode extensions configuration file, which will prompt Visual Studio Code to suggest the installation of extensions when appropriate.
Create a file called
extensions.json in a directory named
.vscode in the root of the project, with the following content:
The official documentation for this feature can be found here:
What makes ESLint cool is that it’s something that can be extended to check for more than just logical code errors, it can check for things like accessibility issues or inconsistent code formatting, which is why I’ve added react-jsx-a11y and the prettier plugins to plugins list.
And with all of that setup, you can experience what it’s like to Pair Program with a stickler for consistency and best practices, without actually having to be pairing.