angular-linting-and-formatting.md

Linting (ESLint) and Formatting (Prettier) in Angular

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…

Links

• Videos:

  • Prettier EsLint Configuration in Angular Application 📺
  • You're (Probably) Using Prettier Wrong 📺

• Ultimate Angular + Prettier Cheatsheet 🔗

.prettierrc.json

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 🔗

.eslintrc.json

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	-
	``	-

.prettierignore

?

.editorconfig

# 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