تنظيف الرمز في الزاوي. الطبخ ESLint ، codelyzer ، stylelint ، أجش ، لينت ستيدج وأجمل

إذا لم تكن مضطرًا للعمل في فريق ، فربما لا تستخدم هذه الأشياء ، ولا أحد يعرف عنها. العمل بمفردك ، أنت رئيسك في العمل.

بمجرد أن بدأوا العمل في فريق ، تغير الوضع بشكل كبير. إذا لم يكن هناك اتفاق ، يبدأ الجميع في كتابة التعليمات البرمجية بالأسلوب الذي يستطيعه. وحتى إذا كنت لا تزال تجتمع معًا وتناقش نمط الكود في الكلمات الموجودة في المشروع وحتى تدوّن في مكان ما ، فمن المحتمل ألا يساعد ذلك في حل المشكلة ، وإليك السبب.

الشخص ليس روبوتًا ، وهو عرضة لارتكاب الأخطاء ، خاصة إذا لم تكن هناك قيود. اكتب الرمز كما تريد ، والبعض الآخر ترتيبه بطريقة أو بأخرى. حتى إذا حاولت اتباع جميع القواعد والتحقق بعناية ليس فقط من التعليمات البرمجية الخاصة بك ، ولكن أيضًا من كود الزملاء ، فهذا لا يضمن أنه سيكون من الممكن تحديد 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, .

, , .

@tinkoff/linters, .
, , .