WittCode💻

VSCode and ESLint Setup

By

Combine ESLint and VSCode for some helpful code style/quality highlighting, learn what ESLint is, and how to configure ESLint and VSCode.

Table of Contents 📖

What is ESLint?

ESLint is a tool that analyzes JavaScript code for problems, whether it be code quality or style issues, by following a set of configurable/customizable rules. ESLint is most commonly used to ensure consistent code quality and style throughout a project. For example, the following code has a few inconsistencies when it comes to style.

const myVar = "hello there";

const myVar2 = 'hello there';

function sayHello(name) {
    return 'Hello ' + name + '!';
}

function sayGoodBye(name) {
    return 'Goodbye ' + name + '!';
}

sayHello()

sayGoodBye();

Here, the first variable uses double quotes for a string declaration while the second variable uses single. Also, the function sayHello is called without a semi-colon on the end while the function sayGoodBye has a semi-colon. We could use ESLint and VSCode to point these inconsistencies out to us by underlining or highlighting them.

Creating a JavaScript Project

To begin our setup, lets create a directory to hold our JavaScript code and ESLint configuration.

mkdir eslint-vscode
cd eslint-vscode

Now, lets initialize our project as an npm project by running npm init.

npm init -y

The command npm init transforms our directory into an npm package by creating a package.json file. This package.json file will hold important information about our project such as the fact that it uses ESLint. The "-y" argument provided to npm init provides default values to package.json. Finally, create an index.js file inside this project and paste in the code from the beginning of the article.

Install and Configure ESLint

Now lets install ESLint, which is simply an npm package. Lets install it as a development dependency by tagging on --save-dev.

npm install eslint --save-dev

We want to install ESLint as a development dependency because it is used while developing a project, but it is not needed for the program to run out in production. Now, we can set up an ESLint configuration file by running the following command.

npm init @eslint/config

This ESLint configuration file will be used to configure ESLint. The contents of this configuration file, and hence behavior of ESLint, will be determined by the answers to a series of prompts that appear after running this command. The first one asks what we would like to use ESLint for.

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

We want to use it to check syntax, find problems, and enforce code style, the third option. Next, ESLint asks us what type of modules our project uses. For this project, we will be using CommonJS (require/exports), the second option.

? What type of modules does your project use? … 
  JavaScript modules (import/export)
▸ CommonJS (require/exports)
  None of these

We are then asked for a framework that our project uses. We aren't using any frameworks for this demonstration so select none of these or the third option.

? Which framework does your project use? … 
  React
  Vue.js
▸ None of these

Our project will not use TypeScript, so select No for the next option.

? Does your project use TypeScript? ‣ No / Yes

For this demonstration, our code will be run with Node, not the browser. Here, we have to deselect the browser and select Node. To do this, press space when the cursor is over browser to deselect it, and then press space over Node to select it.

? Where does your code run?
✔ Browser
✔ Node

We will also be using a popular style guide and not a custom style for this demonstration. So select use a popular style guide.

? How would you like to define a style for your project?
▸   Use a popular style guide
    Answer questions about your style

This popular style guide will just be a standard style guide.

? Which style guide do you want to follow? … 
    Airbnb: https://github.com/airbnb/javascript
▸   Standard: https://github.com/standard/standard
    Google: https://github.com/google/eslint-config-google
    XO: https://github.com/xojs/eslint-config-xo

The format of this style guide will be JavaScript.

? What format do you want your config file to be in? 
▸   JavaScript
    YAML
    JSON

We will then be prompted to install some development dependencies that are required to make our selections work. Select yes to install them and then select npm as the package manager.

Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:

eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 
eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0

? Would you like to install them now? ‣ No / Yes

? Which package manager do you want to use? … 
▸   npm
    yarn
    pnpm

After following these steps, we should have a .eslintrc.js file created for us. The .eslintrc.js file should look like this.

module.exports = {
    env: {
        commonjs: true,
        es2021: true,
        node: true
    },
    extends: [
        'standard'
    ],
    parserOptions: {
        ecmaVersion: 'latest'
    },
    rules: {
    }
}

The file .eslintrc.js exports an object that is used to configure ESLint. Each key and property in this file tells ESLint what the syntax and style of our code should be.

Running ESLint against Project Directory

Now that we have ESLint installed and configured, we can create a script to run it against certain files or directories. Inside package.json, add the following under scripts.

"lint": "eslint ./"

This command runs our current folder (specified by ./) through ESLint to check for errors based on our .eslintrc.js configuration file. To run this command, provide this to the terminal.

npm run lint

The output should have the following in it.

✖ 13 problems (13 errors, 0 warnings)
11 errors and 0 warnings potentially fixable with the `--fix` option.

This lets us know of all the code styling and quality issues present in our project.

Install ESLint Extension

So we can run ESLint against our project manually to point out some code style and quality issues, but it would be easier to know about these issues without having to run this command. To do this, lets integrate ESLint into VSCode so we can get some useful highlighting features. First, we need to install the ESLint extension. Click the extensions tab in VSCode, type in ESLint, and install the one published by Microsoft.

Image

Now if we go back to our index.js file we can see all sorts of underlining that doesn't follow our ESLint configuration.

Image

Changing VSCode Settings

We can further edit how VSCode interacts with ESLint by changing VSCode's settings. VSCode can be configured at two scopes: user settings and workspace settings. User settings apply globally to any instance of VSCode that is opened while workspace settings apply only to the opened project. In this tutorial, we will work with workspace settings. To do this, open the command pallete of VSCode by going to view and then command pallete. Then type in the following.

Preferences: Open Workspace Settings (JSON)

This is essentially a JSON version of the workspace settings GUI in VSCode. We can use this to configure how the ESLint plugin works with VSCode. For example, instead of manually fixing everything that ESLint finds wrong, we can make VSCode fix these errors for us automatically upon save. Add the following to the settings.json file.

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

Now, make a change inside the index.js file, save, and watch most of the underlining disappear. For those that don't disappear, we can hover over them and see what the issue is, look at the error, and then look over a list of ways to fix the error.

Image

Summary

But there we have it! The plugin system of VSCode is one of my favorite things about it and adding ESLint to projects can make us feel a lot better about the consistency of our code style. If this article was helpful, please share it, consider donating at the top of the page, and subscribing to my YouTube channel WittCode.