🎅🏽 🌒 📴 कोणीय में कोड को साफ करें। कुकिंग ईएसलिंट, कोडलीजर, स्टाइललिंट, हस्की, लिंट-स्टेज्ड और प्रीटीयर ▶️ 🕺🏽 👩🏾‍⚕️

यदि आपको एक टीम में काम नहीं करना पड़ा है, तो शायद आप इन चीजों का उपयोग नहीं कर रहे हैं, और किसी को उनके बारे में पता भी नहीं है। अकेले काम करते हुए, आप अपने खुद के मालिक हैं।

जैसे ही उन्होंने एक टीम में काम करना शुरू किया, स्थिति नाटकीय रूप से बदल जाती है। यदि कोई समझौता नहीं है, तो हर कोई उस शैली में कोड लिखना शुरू कर देता है जो वह कर सकता है। और यहां तक कि अगर आप अभी भी एक साथ मिलते हैं और इस परियोजना पर कोडेक्स की चर्चा शब्दों में करते हैं और यहां तक कि नीचे कहीं लिखते हैं, तो यह सबसे अधिक समस्या को हल करने में मदद नहीं करेगा, और यहां क्यों है।

एक व्यक्ति रोबोट नहीं है, और वह गलतियाँ करने के लिए प्रवृत्त है, खासकर अगर कोई प्रतिबंध नहीं हैं। कृपया कोड लिखें जैसा आप चाहते हैं, अन्य किसी तरह से इसे सुलझा लें। यहां तक कि अगर आप सभी नियमों का पालन करने की कोशिश करते हैं और ध्यान से न केवल अपने कोड, बल्कि सहयोगियों के कोड की भी जांच करते हैं, तो यह गारंटी नहीं देता है कि सभी त्रुटियों की 100% पहचान करना संभव होगा।

— , , . , . , , . .

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