DEV Community

Jennifer Fadriquela
Jennifer Fadriquela

Posted on

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
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 (0)