My attempt at clarifying the steps to getting up and running with ESLint and Airbnb's configuration inside of VSCode.

Setting up ESLint + Airbnb + Prettier in VSCode.md

Setting up ESLint + Airbnb + Prettier in VSCode

(Step #1) – VSCode extensions & settings

• Install the ESLint extension in VSCode.
  • This actually parses the Javascript you write and applies syntax and semantic rules.
• Install the Prettier code formatter extension in VSCode.
  • All this does is format the code you've written to look nice. No syntax checking or parsing of your Javascript. If you don't install this, you'll still get all the benefits of linting and VSCode's built-in formatter.

To use ESLint and Prettier in VSCode, you need to configure it so that they don't get in the way of each other. ESLint will do the syntax/semantic fixing, and after it has done its thing, Prettier will format the already linted and fixed code.

• Make sure you have the following in your settings.json for VSCode.

  • Settings for ESLint

    {
      // ... 
      // ESLint settings
      "eslint.enable": true,
      "eslint.packageManager": "npm",
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      // ....
    }

  • Settings for Prettier

    { 
      // ...
      // Prettier config
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true,
      // ...
    }

Another Tip: VSCode by default will try to validate your javascript with it's own intellisense. This can be annoying because you'll have hover messages from both ESLint and VSCode itself that say the same thing. To disable VSCode's built-in Javascript validation, add the following to your settings file:

{
	// ...
	"javascript.validate.enable": false,
	// ...
}

Note: More on VSCode settings

---

(Step #2) – Installing ESLint with NPM

You can install ESLint globally, and/or locally for each project. I recommend installing both globally and locally on project-by-project basis.

• To install ESLint globally, run npm install -g eslint

  • This will install ESLint globally, which is nice because you'll retain basic linting inside VSCode even if you haven't initialized the open folder as an npm pacakge with npm init.

• To install ESLint locally per project, run npm i -D eslint

  • Note: Make sure you have initialized the directory in which you're running this command using npm init before installing ESLint locally.

  • This will install ESLint locally for the project, and will result in a monstrous 30MB node_modules directory being created inside your root directory. If the directory is under source control, VSCode might freak out and tell you there are too many changes to track. Add the following to your .gitignore (create it if it doesn't exist) to correct this:

    node_modules/

Note: More on .gitignore files

---

(Step #3) – Setting up Airbnb's ESLint configuration

For ESLint to work, it requires a configuration file named .eslintrc to be present in the root directory of your project (the name has a few variations, but we're using this one). Create the file on the same level as your package.json.

To extend Airbnb's configuration inside of your own, we'll need to install Airbnb's ESLint configuration. You can run the following command in your project's root directory (the one with the package.json and .eslintrc) to install the config:

npx install-peerdeps --dev eslint-config-airbnb

After you've installed the configuration, you should edit your .eslintrc to contain the following:

// Put this in your .eslintrc

{
  "env": {
    "es2020": true
  },
  "parserOptions": {
    "ecmaVersion": 2020, // we're using the latest version of JS
    "ecmaFeatures": { // this is only so that it works if you're using React
      "jsx": true
    }
  },
  // this is where you'll extend the airbnb ESLint config we just installed.
  // I've also extended the prettier config, which is optional.
  "extends": ["airbnb", "prettier"],
  
  "rules": {
    // you can override any rules here.
    // I get annoyed by all the "Unused function" linting errors, so I usually add this.
    "no-unused-vars": "warn"
  }
}

Note: More on ESLint configuration & rules

---

We're done!

You may need to reload VSCode for ESLint to register the new .eslintrc configuration, but after that you should be linting successfully upon typing and prettifying upon saving the document.

If you're still having trouble, try disabling all other VSCode extensions to make sure none of them are interfering with the linting/formatting setup.