loading...

ESLint + Prettifier VSCode Lean Setup

jengfad profile image Jennifer Fadriquela ・2 min read

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
Enter fullscreen mode Exit fullscreen mode
  • 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": { }
}
Enter fullscreen mode Exit fullscreen mode
  • Create .eslintignore from root directory with contents:
node_modules
dist
Enter fullscreen mode Exit fullscreen mode
  • (Optional) Add eslint script to package.json. This enables you to execute lint script on npm cli.
{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}
Enter fullscreen mode Exit fullscreen mode

Run in cli: npm run lint

  • Install prettier via npm cli
npm install --save-dev prettier
Enter fullscreen mode Exit fullscreen mode
  • Create .prettierrc on root directory with contents:
{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}
Enter fullscreen mode Exit fullscreen mode
  • (Optional) Add prettier script to package.json.
{
  "scripts": {
    ...
    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write"
  }
}
Enter fullscreen mode Exit fullscreen mode

Run in cli: npm run prettier-format

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

Alt TextAlt Text

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

Alt Text

  • Add below configuration (if not yet existing)
// Default (format when you paste)
"editor.formatOnPaste": true,
// Default (format when you save)
"editor.formatOnSave": true,
Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide