Jika Anda tidak harus bekerja dalam tim, maka mungkin Anda tidak menggunakan hal-hal ini, dan seseorang bahkan tidak mengetahuinya. Bekerja sendiri, Anda adalah bos Anda sendiri.
Begitu mereka mulai bekerja dalam tim, situasinya berubah secara dramatis. Jika tidak ada kesepakatan, maka semua orang mulai menulis kode dengan gaya yang dia bisa. Dan bahkan jika Anda masih berkumpul dan mendiskusikan gaya kode dalam kata-kata di proyek dan bahkan menulis di suatu tempat, kemungkinan besar ini tidak akan membantu untuk menyelesaikan masalah, dan inilah sebabnya.
Seseorang bukan robot, dan dia cenderung melakukan kesalahan, terutama jika tidak ada batasan. Tulis kode sesuka Anda, orang lain entah bagaimana memilahnya. Bahkan jika Anda mencoba mengikuti semua peraturan dan dengan cermat memeriksa tidak hanya kode Anda, tetapi juga kode rekan kerja, ini tidak menjamin bahwa akan mungkin untuk mengidentifikasi 100% dari semua kesalahan.
— , , . , . , , . .
, , . 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, .
, , .