ESLint + Prettifier VSCode Lean Setup

A basic VSCode setup of ESLint + Prettifier that includes configuration for automatic linting/fixing upon filesave. I listed out steps from khalilstemmler's articles about ESLint and Prettier integration to Typescript and merged them to a compact setup.

• Install lint and other lint plugins via npm cli

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

• Create .eslintrc from root directory with contents:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { }
}

• Create .eslintignore from root directory with contents:

node_modules
dist

• (Optional) Add eslint script to package.json. This enables you to execute lint script on npm cli.

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}

Run in cli: npm run lint

• Install prettier via npm cli

npm install --save-dev prettier

• Create .prettierrc on root directory with contents:

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}

• (Optional) Add prettier script to package.json.

{
  "scripts": {
    ...
    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write"
  }
}

Run in cli: npm run prettier-format

• Install Prettier and Eslint from VSCode Extensions Ctrl + Shift + X.

• Set the defaults via CTRL + Shift + P then select Preferences: Open Settings (JSON)

• Add below configuration (if not yet existing)

// Default (format when you paste)
"editor.formatOnPaste": true,
// Default (format when you save)
"editor.formatOnSave": true,

You can now either run the scripts via cli or choose to lint every time you save changes on your code.