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 selectPreferences: 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.
Top comments (0)