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 your settings.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 your node_modules. Open the command palette (F1 or Ctrl + Shift + P) and select ESLint: Manage Library Execution to open the dialog for your project and confirm with 'Accept'.
Troubleshooting
ESLint not working in VSCode? Help build a troubleshooting checklist!
Top comments (0)