როგორ დავამყარე წესრიგი პროექტში, სადაც პირდაპირი ხელების ტყე იყო (პარამეტრები tslint, prettier და ა.შ.)

კიდევ ერთხელ გამარჯობა. დარჩით კონტაქტზე. ომელნიცკი სერგეიდღეს მე გაგიზიარებთ ჩემს ერთ-ერთ თავის ტკივილს, კერძოდ - რა უნდა გააკეთოთ, როდესაც პროექტს წერს სხვადასხვა დონის პროგრამისტი მრავალი კუთხოვანი აპლიკაციის მაგალითის გამოყენებით.

ისე მოხდა, რომ დიდი ხნის განმავლობაში მხოლოდ ჩემს გუნდთან ერთად ვმუშაობდი, სადაც დიდი ხნის წინ შევთანხმდით დიზაინის, კომენტარების, ჩაღრმავებების და ა.შ. წესებზე. შევეჩვიეთ მათ და ბედნიერად ვცხოვრობდით. ჩემი სიხარულით, სტატიაც კი გამოვაქვეყნე ჰაბრზე. ჩვენი კოდის სტილიასე რომ, რაღაც ჯადოსნური მიზნით, tslint მხოლოდ წინასწარი დადასტურებისთვის გამოვიყენეთ.

შემდეგ კი გავიზარდეთ. გამოჩნდა ახალი პროექტი მემკვიდრეობით მიღებული კოდით და მას ახალი დეველოპერები, 4 კარგი თანამოაზრე. შემდეგ კი რაღაც არასწორად წარიმართა.

ვფიქრობ, ბევრმა იცის, რომ მემკვიდრეობით მიღებული კოდით მუშაობა სახალისო არ არის. მე მხოლოდ ერთი პროექტი მახსოვს, რომლითაც აღფრთოვანებული ვიყავი და დანარჩენი... მაშ, რაზე ვსაუბრობდი?) ოჰ, კი.

გულწრფელად რომ ვთქვათ, პროექტის არქიტექტურა სასურველს არ წარმოადგენდა, კომენტარები და აკრეფა კი უბრალოდ ოცნებად იქცა. რაღაც მომენტში დეპრესიაში ჩავვარდი, რადგან დიზაინის წესებთან დაკავშირებული ჩვენი დოკუმენტაცია არ მუშაობდა, კომენტარები არ იწერებოდა, აკრეფა - რა არის ეს?). რაღაც უნდა გაკეთებულიყო ამასთან დაკავშირებით.

მათთვის, ვისაც არ შეუძლია ყველა ეტაპის ერთდროულად შესწავლა:

• ჩვენ tslint დავყავით რბილ წესებად (წინასწარი დადასტურებისთვის) და მკაცრ წესებად (ide-სთვის, რათა დეველოპერებს შეახსენონ, რა დაავიწყდათ).

• ვარ დამოკიდებული hard tslint-ის მიერ შესაძლო წესების წინასწარ დადასტურებაზე.

• დაწერა წესები უფრო ლამაზი ადამიანებისთვის

• დაირაზე ცეკვავდა, რომ ლინტები გაეშვა ლინტებით დადგმული

ნაბიჯი პირველი: გაყავი და იბატონე

როდესაც ლინტერის წესების გამკაცრების იდეა მომივიდა თავში, გადავწყვიტე, რომ თავს ჩამოვიხრჩობდით. კოდი მემკვიდრეობით მიიღება. მისი გაგებაა საჭირო და ასეთ ტომში შეიძლება დამარხულიყავი. გადაწყდა, რომ IDE-სთვის მეორე ლინტერი შეგვექმნა, რომელიც თვალში საცემი იქნებოდა და მეთოდებისა და თვისებებისთვის jsdoc-ის დაწერას, ინტერფეისების ან წარუმატებელი onPush-ის დაწერას და ა.შ.

ასე რომ, root-ში დავიწყეთ 2 tslin ფაილის ქონა:

tsconfig.json

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      200
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [
      false,
      "ignore-params"
    ],
    "no-duplicate-imports": true,
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-redundant-jsdoc": true,
    "no-shadowed-variable": false,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": [
      true,
      "ignore-comments",
      "ignore-jsdoc"
    ],
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-use-before-declare": false,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": false,
    "semicolon": [
      true,
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
    "no-output-on-prefix": false,
    "no-inputs-metadata-property": true,
    "no-outputs-metadata-property": true,
    "no-host-metadata-property": true,
    "no-input-rename": false,
    "no-output-rename": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true,
    "no-consecutive-blank-lines": true
  }
}

tslint.ide_only.json

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "completed-docs": [
      true,
      {
        "properties": true,
        "methods": true
      }
    ],
    "no-angle-bracket-type-assertion": true,
    "no-any": true,
    "prefer-output-readonly": true,
    "prefer-on-push-component-change-detection": true,
    "array-type": [
      true,
      "array"
    ],
    "typedef": [
      true,
      "call-signature",
      "arrow-call-signature"
    ],
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      200
    ],
    "member-access": [
      true,
      "check-parameter-property",
      "check-accessor"
    ],
    "member-ordering": [
      true,
      {
        "order": [
          "public-static-field",
          "protected-static-field",
          "private-static-field",
          "public-instance-field",
          "protected-instance-field",
          "private-instance-field",
          "constructor",
          "public-static-method",
          "protected-static-method",
          "private-static-method",
          "public-instance-method",
          "protected-instance-method",
          "private-instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": true,
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-duplicate-switch-case": true,
    "no-eval": true,
    "no-inferrable-types": [
      false,
      "ignore-params"
    ],
    "no-duplicate-imports": true,
    "one-variable-per-declaration": true,
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "prefer-template": [
      true,
      "allow-single-concat"
    ],
    "ordered-imports": true,
    "no-redundant-jsdoc": true,
    "no-shadowed-variable": false,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": [
      true,
      "ignore-comments",
      "ignore-jsdoc"
    ],
    "ban": [
      true,
      {
        "name": [
          "Object",
          "assign"
        ],
        "message": "Используйте cloneDeep (lodash) для копирования объекта"
      }
    ],
    "max-classes-per-file": [
      true,
      1
    ],
    "cyclomatic-complexity": [
      true,
      6
    ],
    "static-this": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": false,
    "semicolon": [
      true,
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
    "no-output-on-prefix": false,
    "no-inputs-metadata-property": true,
    "no-outputs-metadata-property": true,
    "no-host-metadata-property": true,
    "no-input-rename": false,
    "no-output-rename": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true,
    "no-consecutive-blank-lines": true
  }
}

ფაილში src/tslint სტანდარტული tslint ID-თი ჩავანაცვლეთ

src/tslint.json

{
    "extends": "../tslint.ide_only.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "app",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            "app",
            "kebab-case"
        ]
    }
}

და გამოვასწორეთ ჩვენი linter-ის გაშვების პრობლემა package.json სკრიპტებში.

ng lint --tslint-config ./tslint.json --fix`

რის შემდეგაც დავიწყეთ ხაზგასმული ნივთებისგან თავის ჩამოკიდება, რომელთა გამოსწორებაც საჭირო იყო.

ნაბიჯი მეორე - რამდენიმე რამის გამოსწორება

tslint-ს წესები აქვს has fixer. მაშ ასე, გამოვიყენოთ.

tslint --project tslint.ide_only.json --fix --force

აქ ჩვენ ვასრულებთ Hard Linter წესებს ხელმისაწვდომი პარამეტრების ავტომატური კორექტირებით და ვეუბნებით ამ ბრძანებას, რომ არ დააბრუნოს შეცდომები (ჩვენი მიზანი აქ ავტომატური კორექტირებაა).

ნაბიჯი მესამე: ლამაზად დაწერეთ

როდესაც ყველა თავისებურად წერს, საბოლოოდ ეს დამღლელი ხდება. კოდი ისე უნდა დაიწეროს, რომ ჩანდეს, თითქოს მას ერთი ადამიანი აკეთებს. ამისთვის მე დავურთე უფრო ლამაზი, შემდეგი პარამეტრებით:

.prettierr.yaml

printWidth: 200     # Максимальное кол-во символов в строке
tabWidth: 2         # Пробелов в Табе
singleQuote: true   # Использовать одинарные кавычки
trailingComma: all  # Использовать запятые где возможно
arrowParens: always # Стрелочные ф-ии выглядят (x) => x
overrides:
  - files: "*.ts"   # Проверка файлов *.ts
    options:
      parser: typescript  # Язык в файлах *.ts

და დავამატე ბრძანება: prettier --write --config .prettierr.yaml

ნაბიჯი მეოთხე - და როგორ უნდა დაიწყოთ ეს ყველაფერი?

ახლა კი უფრო დეტალურად განვიხილოთ, თუ როგორ გავუშვათ ეს ყველაფერი. იმისათვის, რომ ეს ყველაფერი იმუშაოს, ჩვენ უნდა გადმოვწეროთ შემდეგი ბიბლიოთეკები:

npm i -D prettier lint-staged husky

husky-ის დახმარებით ჩვენი ბრძანებების გაშვებას git hook-ზე - pre-commit დავკიდებთ. lint-staged გაუშვებს ბრძანებებს ჩვენთვის შეცვლილი ფაილების მიხედვით (და ასევე ჩაანაცვლებს ამ ფაილებს ჩვენს ბრძანებებში).

ასევე მინდა დაუყოვნებლივ გამოვყო პრობლემა, რომელსაც წავაწყდი. ჩვენს პროექტში ჩვენ ვიყენებთ ng lint-ს. როდესაც მას lint-staged-თან ერთად ვიყენებთ, ჩვენს ბრძანებას ემატება მოდიფიცირებული ფაილები. ng lint-ს ამისთვის აქვს გასაღები. --files, მაგრამ როგორც მე მესმის, ის ფაილების ერთობლიობას ვერ ხედავს და თითოეულ ფაილს ეს გასაღები უნდა დაუმატოს. ამისათვის ფაილის შექმნა მომიწია:

lint.sh

#!/bin/bash

PROJECT=$1
shift
SOURCES=$@
DESTINATIONS=""
DELIMITER=""

for src in $SOURCES
do
    DELIMITER=" --files "
    DESTINATIONS="$DESTINATIONS$DELIMITER${src}"
done

ng lint $PROJECT --tslint-config ./tslint.json $DESTINATIONS

ამ ფაილის გასაშვებად, პროექტის სახელი უნდა გადავიტანოთ. ის ფაილშია. angular.json პროექტის საკუთრებაში. ჩემს შემთხვევაში ეს არის partner-account и partner-account-e2eპირველი მჭირდება.

დავუბრუნდეთ დაყენებას. ჩვენი package.json ახლა ასე გამოიყურება:

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged --relative"
    }
  },
  "lint-staged": {
    "*.{ts,js}": [
      "prettier --write --config .prettierr.yaml",
      "tslint --project tslint.ide_only.json --fix --force",
      "sh lint.sh partner-account",
      "git add"
    ],
    "*.{html,scss,css}": [
      "prettier --write --config .prettierr.yaml",
      "git add"
    ]
  },

შენიშვნა lint-staged --relative... Პარამეტრი --relative სავალდებულოა იქ. ახლა, როდესაც ჩვენ ვაფიქსირებთ, ის იწყება lint-stagedის თავის მხრივ ირჩევს ფაილებს და მათზე დამოკიდებული ბრძანებების სიას იწყებს.

სამწუხაროდ, ეს კოდის მიმოხილვას არ აუქმებს, თუმცა ის გაცილებით უფრო მკაფიო გახდა. აღვნიშნავ, რომ დეველოპერებისთვის წვდომის მოდიფიკატორების, მეთოდებისა და თვისებების აღწერის შესახებ შეხსენება ნაკლებად ხდება და მათი ნამუშევარი ერთი სტილით დაიწერა (თითქმის 😀).

P.S. - მადლობა ჩვენს PM-ს სურათებისთვის.

წყარო: www.habr.com