Limpe o código em Angular. Cozinha ESLint, codelyzer, stylelint, husky, com fiapos e mais bonita

Se você não teve que trabalhar em equipe, talvez não esteja usando essas coisas e alguém nem as saiba. Trabalhando sozinho, você é seu próprio chefe.

Assim que começaram a trabalhar em equipe, a situação muda drasticamente. Se não houver acordo, todos começarão a escrever o código da maneira que puder. E mesmo que você ainda se reúna e discuta o estilo de código em palavras no projeto e até escreva em algum lugar, isso provavelmente não ajudará a resolver o problema, e aqui está o porquê.

Uma pessoa não é um robô e é propensa a cometer erros, especialmente se não houver restrições. Escreva o código como quiser, outros de alguma forma resolvem isso. Mesmo se você tentar seguir todas as regras e verificar cuidadosamente não apenas o seu código, mas também o código dos colegas, isso não garante que será possível identificar 100% de todos os erros.

  — , , . , . , , . .

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