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.

Top comments (0)

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. 👀

Join the Hackathon <-