Wenn Sie nicht in einem Team arbeiten mussten, verwenden Sie diese Dinge möglicherweise nicht und jemand weiß nicht einmal davon. Wenn Sie alleine arbeiten, sind Sie Ihr eigener Chef.
Sobald sie anfangen, in einem Team zu arbeiten, ändert sich die Situation dramatisch. Wenn es keine Einigung gibt, beginnt jeder, Code in dem Stil zu schreiben, den er kann. Und selbst wenn Sie immer noch zusammenkommen und den Codestil des Projekts in Worten diskutieren und sogar irgendwo aufschreiben, wird dies höchstwahrscheinlich nicht zur Lösung des Problems beitragen, und hier ist der Grund dafür.
Eine Person ist kein Roboter und neigt dazu, Fehler zu machen, insbesondere wenn es keine Einschränkungen gibt. Schreiben Sie den Code nach Belieben, andere klären ihn irgendwie. Selbst wenn Sie versuchen, alle Regeln zu befolgen und nicht nur Ihren Code, sondern auch den Code der Kollegen sorgfältig zu überprüfen, garantiert dies nicht, dass 100% aller Fehler identifiziert werden können.
  — , , . , . , , . .
, , . Angular- .
, , Angular, Angular , :
npm install -g @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.
- .
- .
:
, 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, .
, , .