Term | Tool | Explanation | Use | Docs |
---|---|---|---|---|
🔦 Linter | ESLint |
- Runs a set of discrete rules - Slower - Explicit logic for edge cases |
Code quality (bug catching) | 📑 |
🧹 Formatter | Prettier |
- Reformats in one pass - Faster - Can't find and fix bugs |
Code Formatting | 📑 |
- eslintconfigprettier -> Prettier -> Lint
Linters have two categories of rules:
- (
Prettier
takes care of these) Formatting rules: eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style… - Code-quality rules: eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…
-
Videos:
Step | Command | Description |
---|---|---|
1 | ng add @angular-eslint/schematics |
- |
2 | npm install prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-dev |
- |
3 | - Create file .prettierrc.json - Include .prettierignore if necessary |
- |
Then, include this file:
// .prettierrc.json
{
"tabWidth": 2,
"useTabs": true,
"singleQuote": true,
"semi": true,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "es5",
"bracketSameLine": false,
"printWidth": 80
}
- Prettier Configuration File 🔗
Then, modify .eslintrc.json
as follows:
// .eslintrc.json
// Code...
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:prettier/recommended"
],
// ...Code
Use these tools with the following commands:
Step | Using dependencies | Description |
---|---|---|
ng lint |
- | |
ng lint --fix |
- | |
`` | - |
?
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = false
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false