VSCode - ESLint, Prettier & Airbnb Setup for Node.js Projects

eslint_prettier_airbnb.md

VSCode - ESLint, Prettier & Airbnb Setup for Node.js Projects

1. Install ESLint & Prettier extensions for VSCode

Optional - Set format on save and any global prettier options

2. Install Packages

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb-base eslint-plugin-node eslint-config-node

3. Create .prettierrc for any prettier rules (semicolons, quotes, etc)

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

4. Create .eslintrc.json file (You can generate with npx eslint --init)

{
  "env": {
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": ["airbnb-base", "prettier", "plugin:node/recommended"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "no-plusplus": "off",
    "no-process-exit": "off",
    "class-methods-use-this": "off"
  }
}

Usage

And an .eslintignore that looks like this: (if not create one)

/node_modules
/reports

Add a command in your package.json to run lint fixes

{
...
  "scripts": {
    ...
    "lintfix": "eslint src --fix --cache", 
    "lint": "eslint **/*.js",
    "lint:fix": "eslint --fix **/*.js"
    ...
  },
}

Start developing.

Any files with extension .js can be linted against ESLint and Prettier recommended rules.

npm run lint

You can automatically fix some problems.

npm run lint:fix

Editor Setup

If you're using Visual Studio Code, you can install the ESLint extension, which will automatically highlight warnings and errors using this boilerplate.

1. Press Ctrl + Shift + X or click the Extensions button
2. Search for ESLint
3. Click the Install button next to the ESLint search result

With this extension, you can also choose to automatically fix/format your code when you save. Add the following to your Visual Studio Code settings.

"eslint.autoFixOnSave": true

This setting only takes effect if files.autoSave is set to off, onFocusChange, or onWindowChange.

Reference

• ESLint Rules - https://eslint.org/docs/rules/
• Prettier Options - https://prettier.io/docs/en/options.html
• Airbnb Style Guide - https://github.com/airbnb/javascript