Limpia el código en Angular. Cocinar ESLint, codelyzer, stylelint, husky, pelusa y más bonita

Si no ha tenido que trabajar en equipo, quizás no esté usando estas cosas y alguien ni siquiera las conozca. Trabajando solo, eres tu propio jefe.

Tan pronto como comenzaron a trabajar en equipo, la situación cambia dramáticamente. Si no hay acuerdo, entonces todos comienzan a escribir el código en el estilo que pueden. E incluso si aún se reúnen y discuten el estilo de código del proyecto en palabras e incluso escriben en algún lugar, lo más probable es que esto no ayude a resolver el problema, y ​​he aquí por qué.

Una persona no es un robot y es propenso a cometer errores, especialmente si no hay restricciones. Escriba el código a su gusto, otros lo resolverán de alguna manera. Incluso si intenta seguir todas las reglas y verificar cuidadosamente no solo su código, sino también el código de sus colegas, esto no garantiza que será posible identificar el 100% de todos los errores.

  — , , . , . , , . .

, , . 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, .
, , .