ESLint and Prettier are 2 importants tools in the JS tools belt. How to make them aware of each other? Here is how.

From:

VSCode - ESLint, Prettier & Airbnb Setup

1. Install ESLint & "Prettier - Code formatter" extensions for VSCode

2. Install NPM packages in your project

yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node

Usage of AirBnB's ESLint rules, for example.

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

NB:

npx may propose to use yarn. Say yes
VSCode at the end, may display a popup noticing that "The ESLint extension will use 'node_modules/eslint' for validation'. Say Allow to activate ESLint in VSCode.

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

{
    "extends": [
      "plugin:prettier/recommended"
    ],
    "printWidth": 120,
    "parser": "typescript",
    "semi": false,
    "tabWidth": 2,
    "trailingComma":  "all"
  }

I like this sober configuration with no semicolon.

4. Create .eslintrc.json file (You can generate with eslint --init if you install eslint globally)

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "no-process-exit": "off",
    "object-shorthand": "off",
    "class-methods-use-this": "off"
  }
}

5. Add format on save for VS code

Add this minimal configuration file in .vscode/settings.json

{
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,
    "workbench.colorCustomizations": {
      "statusBar.background": "#63ace5" // Change this color!
    }
  }

PS: colorCustomizations is not necessary but it is handful to add a specific color in the "status bar", to distinguish between multiple instances of VS Code.

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

pom421/ESLint + Prettier + VSCode.md