Setting up ESLint + Prettier

#linting #eslint #prettier #typescript

Disclaimer: This is not intended as a step-by-step tutorial. It's just a suggestion of implementation of basic opinionated rules.

Install Prettier

npm install prettier --save-dev

Create the .prettierrc file.

{
  "printWidth": 80,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "trailingComma": "es5",
  "jsxSingleQuote": false,
  "bracketSameLine": true,
  "arrowParens": "always",
  "endOfLine": "crlf",
  "singleAttributePerLine": true
}

Install ESlint and Dependencies

npm install --save-dev eslint eslint-config-prettier @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest`

Create the .eslintrc.json file.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "linebreak-style": ["error", "windows"],
    "quotes": ["error", "single", { "avoidEscape": true }],
    "semi": ["error", "always"],
    "curly": ["error", "multi-line"]
  }
}

Create the .eslintignore file.

# Add folders, files, and glob patterns
# which should be ignored by the linter 
/node_modules
/dist

Set up scripts (package.json)

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "lint": "eslint . --quiet",
  "lint:fix": "eslint . --fix"
}

VSCode Extensions

Install Prettier - Code formatter [VSCode Extension]

Name: Prettier - Code formatter
Publisher: Prettier
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Set Prettier as your default code formatter

On VSCode, open your settings.json file and add the following configurations.

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Install ESLint [VSCode Extension]

Name: ESLint
Publisher: Dirk Baeumer
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Setup Library Execution

The ESLint plugin requires permission to execute the local ESLint installation from your node_modules. Open the command palette (F1 or Ctrl + Shift + P) and select ESLint: Manage Library Execution to open the dialog for your project and confirm with 'Accept'.