清理Angular中的代码。烹饪ESLint，codelyzer，stylelint，沙哑，短绒和更漂亮

如果您不必在团队中工作，那么也许您没有使用这些东西，甚至有人都不知道它们。独自工作，您就是自己的老板。

他们开始团队合作后，情况就发生了巨大变化。如果没有协议，那么每个人都将以他可以的方式开始编写代码。即使您确实聚在一起，在项目上用文字讨论代码风格，甚至在某个地方写下来，这很可能也无助于解决问题，这就是原因。

一个人不是机器人，他容易犯错误，特别是在没有限制的情况下。随意编写代码，其他人以某种方式对其进行整理。即使您尝试遵守所有规则并不仅仔细检查您的代码，而且还仔细检查同事的代码，这也不能保证可以识别所有错误的100％。

  — , , . , . , , . .

, , . Angular- .

, , Angular, Angular , :

npm install -g @angular/cli #      @angular/cli
ng new angular-linters-sample

TSLint (deprecated)

, Angular CLI, TSLint. npm run lint, CLI ng lint, codestyle.

: ( , ).

TSLint: Angular-

styleguide, Angular-.

TSLint . , TSLint.

, TSLint deprecated, ESLint ( ).

Codelyzer

TSLint, , , TypeScript, Angular- , Angular.

  —  codelyzer, Angular CLI. codelyzer npm run lint. tslint.json, TSLint codelyzer rulesDirectory.

ESLint

TSLint deprecated, Angular- ESLint. , , , .

( Angular 9.0.5) ESLint Angular , CLI TSLint codelyzer. , codelyzer ESLint angular-eslint: builder — schematic .
ESLint eslint-plugin-typescript.

Nx, 9.1 @nrwl/linter, ESLint.

@tinkoff/linters, Tinkoff. ESLint, — TSLint.

, , ESLint, .

Stylelint

? .  —  stylelint. , . — .

stylelint, :

npm install stylelint stylelint-config-standard --save-dev

.stylelintrc ( ):

{
 "extends": "stylelint-config-standard",
 "rules": {
   "at-rule-empty-line-before": null
 }
}

package.json, :

"scripts": {
 ...
 "lint-css": "stylelint src/**/*.css"
 ...
}

, app.component.css , no-empty-source, .

Stylelint: Angular-

Husky

,   . , husky, Git Hooks.
, - , pre-commit.
pre-push. , pre-commit .

.   , npm run lint.
husky:

npm install husky --save-dev

.huskyrc ( package.json, ):

{
 "hooks": {
   "pre-commit": "npm run lint"
 }
}

:

Husky:

, ng lint, lint, package.json.
:

Husky → pre-commit hook → npm run lint → ng lint

, , .

Lint-staged

husky, , , codestyle.

, , , - - ( codestyle, !). , , , , .

, , , . . , , ,   —  staged ( git ).

.
lint-staged:

npm install lint-staged --save-dev

.lintstagedrc ( ). , js ts, — css:

{
 "*.{js,ts}": "npm run lint",
 "*.css": "npm run lint-css"
}

husky, pre-commit. lint-staged, , :

{
 "hooks": {
   "pre-commit": "lint-staged"
 }
}

:

Husky → pre-commit hook → lint-staged
→ tslint
→ stylelint

Prettier

Prettier , .
, ?

:

• Prettier (auto fix). , TSLint , . Has Fixer . stylelint: , , --fix. prettier , .
• “” . .
• , ESLint, TSLint, stylelint.
• IDE.
• .
• .

:

• . , .
• HTML.

, prettier , . , , , — - “” . , , — , , .

.
Prettier TSLint stylelint:

npm install prettier tslint-config-prettier tslint-plugin-prettier stylelint-config-prettier stylelint-prettier --save-dev

TSLint tslint.json:

{
 "extends": [
   "tslint-config-prettier",
   "tslint-plugin-prettier",
   "codelyzer"
 ],
 "rules": {
   "prettier": true
 }
}

: ESLint/TSLint Prettier , .
, — Prettier.
stylelint .stylelintrc:

{
 "extends": ["stylelint-prettier/recommended"]
}

Prettier .prettierrc:

{
 "trailingComma": "es5",
 "tabWidth": 2,
 "semi": true,
 "singleQuote": true
}

, :

npx tslint-config-prettier-check ./tslint.json
npx stylelint-config-prettier-check

prettier package.json:

"scripts": {
 ...
 "prettier": "prettier --write src/**/*.{js,ts,css}",
 ...
}

lint-staged, Prettier :

{
 "*.{js,json,md,html}": [
   "prettier --write"
 ],
 "*.css": [
   "prettier --write",
   "npm run lint-css"
 ],
 "*.ts": [
   "prettier --write",
   "npm run lint"
 ]
}

Prettier , :

npm run prettier

, .

, Angular, — . Angular, .

, , .

@tinkoff/linters, .
, , .