Posted onMay 25, 2021 • Edited onApr 10, 2024

Setting up ESLint + Prettier

Disclaimer: This is not intended as a step-by-step tutorial. It's just a suggestion of implementation of basic opinionated rules.

Install Prettier

npm install prettier --save-dev

Create the.prettierrc file.

{"printWidth":80,"singleQuote":true,"useTabs":false,"tabWidth":2,"semi":true,"bracketSpacing":true,"trailingComma":"es5","jsxSingleQuote":false,"bracketSameLine":true,"arrowParens":"always","endOfLine":"crlf","singleAttributePerLine":true}

Install ESlint and Dependencies

npm install --save-dev eslint eslint-config-prettier @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest`

Create the.eslintrc.json file.

{"env":{"browser":true,"es2021":true},"extends":["eslint:recommended","plugin:@typescript-eslint/recommended","prettier"],"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":12,"sourceType":"module"},"plugins":["@typescript-eslint"],"rules":{"indent":["error",2,{"SwitchCase":1}],"linebreak-style":["error","windows"],"quotes":["error","single",{"avoidEscape":true}],"semi":["error","always"],"curly":["error","multi-line"]}}

Create the.eslintignore file.

# Add folders, files, and glob patterns# which should be ignored by the linter /node_modules/dist

Set up scripts (package.json)

"scripts":{"ng":"ng","start":"ng serve","build":"ng build","lint":"eslint . --quiet","lint:fix":"eslint . --fix"}

VSCode Extensions

Install Prettier - Code formatter [VSCode Extension]

Name: Prettier - Code formatter
Publisher: Prettier
VS Marketplace Link:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Set Prettier as your default code formatter

On VSCode, open yoursettings.json file and add the following configurations.

"editor.defaultFormatter":"esbenp.prettier-vscode","[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"}

Install ESLint [VSCode Extension]

Name: ESLint
Publisher: Dirk Baeumer
VS Marketplace Link:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Setup Library Execution

The ESLint plugin requires permission to execute the local ESLint installation from yournode_modules. Open the command palette (F1 orCtrl + Shift + P) and selectESLint: Manage Library Execution to open the dialog for your project and confirm with 'Accept'.