If you have not had to work in a team, then perhaps you are not using these things, and someone does not even know about them. Working alone, you are your own boss.
As soon as they started working in a team, the situation changes dramatically. If there is no agreement, then everyone starts writing code in the style that he can. And even if you still get together and discuss the codestyle in words on the project and even write down somewhere, this most likely will not help to solve the problem, and here's why.
A person is not a robot, and he is prone to make mistakes, especially if there are no restrictions. Write the code as you please, others somehow sort it out. Even if you try to follow all the rules and carefully check not only your code, but also the code of colleagues, this does not guarantee that it will be possible to identify 100% of all errors.
To help solve such problems, there are special utilities - linters, which are able to automatically not only check, but in some cases correct the code you wrote in accordance with the rules. You can take the rules ready, or you can write your own. Also, in addition to the linters themselves, additional tools will be considered in this article. In conjunction with linters, they will give even more effective results in supporting your code.
Training
Immediately, I note that the configuration examples are quite simple and not suitable for use in production, only key points are considered. But you will find a link to the Angular project with a ready-made configuration at the end of the article.
, , 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, .
, , .