Setup Linting & Formatting

.eslintrc.json

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "semi": "error"
  }
}

.prettierrc.json

{
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none",
  "endOfLine": "auto"
}

eslint-and-prettier.md

In order to lint and format you code automatically, you'll need to complete the following steps:

Install node modules

Open terminal to project workspace

# Init this project as a node project
# `-y` skips prompts and accepts all defaults
npm init -y

# Install eslint and prettier as dev dependencies
npm install --save-dev eslint prettier

Install VSCode plugins

Install and Enable ESLint and Prettier Plugins in vscode.

CTRL + SHIFT + P > "Reload Window" to restart VSCode

Lastly, add the three files to your project:

.vscode/settings.json

This file tells vscode how to manage specific file types. It goes in the .vscode folder in a file named settings.json.

.eslintrc.json

This file tells eslint how to behave. It goes in the root of your project.

.prettierrc.json

This file tells prettier how to behave. It goes in the root of your project.

settings.json

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true
  }
}