Tutorial

Linting on Save with Visual Studio Code and ESLint

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

We need style guides to write consistent, reusable and clean code. But when you have been working 10 hours a day on a project for the past 3 months it’s hard to notice an extra indentation in your code or a single quote instead of a double quote.

That’s what linters are for. They are here to yell at you “THIS CODE IS UGLY GO FIX IT”. I personally do not enjoy getting yelled at. That’s why I use auto-save linting.

Auto-save linting corrects my documents as I press the save button.

Linting Setup

First, I would recommend installing the amazing ESLint extension available in Visual Studio Code’s marketplace.

We all have different preferences and needs for our projects. This is not an ESLint lesson. If you’re not familiar with ESLint, I would recommend to install their CLI tool globally.

$ npm install -g eslint
# Or for yarn users
$ yarn global add eslint

Now we can do the CLI walk-through.

# First initialize your project
$ npm init
# Then we can use the walk-through
$ eslint --init

You should see something like this:

eslint init


Now let’s create a JavaScript file with ugly code:

dirty code which I can't show in alt attribute with annotations from vscode

You can see that helloYou is underlined. If I hover it I can see the following message: “‘helloYou’ is assigned a value but never used”. This is because the rule .eslint(no-unused-vars) is activated and tells me to use the variable.

This can be fixed if I write:

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

// I am using the variable helloYou
console.log(helloYou)

You can see that there are other problems with this code that ESLint is not pointing out.

Adding Rules

In Alligator.io posts, the guideline is that we have to use single quotes and semi-colons in our code. eslint --init created a file called eslintrc.js (or .yml or .json if that’s the option you selected).

Module: .eslintrc.js
module.exports = {
  'env': {
    'browser': true,
    'es6': true,
    'node': true
  },
  'extends': 'eslint:recommended',
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly'
  },
  'parserOptions': {
    'ecmaVersion': 2018,
    'sourceType': 'module'
  },
  'rules': {
  }
};

The rules section is empty so let’s fill it up.

module.exports = {
  // ...
  'rules': {
    // we only want single quotes
    'quotes': ['error', 'single'],
    // we want to force semicolons
    'semi': ['error', 'always'],
    // we use 2 spaces to indent our code
    'indent': ['error', 2],
    // we want to avoid useless spaces
    'no-multi-spaces': ['error']
  }
}

If we go back to our JavaScript file, we’ll see all our linting errors being marked.

If you have the ESLint extension installed you can use CTRL + SHIFT + P to open the Command Palette. Then search for “ESLint fix all auto-fixable Problems” and press enter.

Now my dirty code looks like this:

const helloYou = (name)=> {
  name = 'you' || name ;
  console.log('hello' + name + '!' );
};

console.log(helloYou());

Beautiful!

Adding VSCode Autosave

Sometimes I forget to run the auto-fix command. But I never (almost) forget to save my files. Thankfully we can setup ESLint to run auto-fix every time I run CTRL + S.

For ESLint to work correctly on file same, you must change the VSCode preferences. Go to File > Preferences > Settings > Workplace and try to find:

Editor: Code Actions On Save
Code action kinds to be run on save.

Edit in settings.json

Then click settings.json. Or you can create a .vscode folder and create a file called settings.json inside.

$ mkdir .vscode
$ touch .vscode/settings.json
# Or for windows users
$ new-item .vscode/settings.json

In settings.json paste the following code.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]
 }

Now all you need to to is save your files to automatically apply your linting rules (as long as they are auto-fixable).

Creative Commons License