Как подредактирах проекта, където имаше много неразбории (настройки tslint, prettier и т.н.)

Отново здравейте. На линия. Сергей Омелницки. Днес ще споделя с вас една от моите главоболия, а именно — какво да правим, когато проект се пише от много програмисти с различни умения на примера на приложение с angular.

Както често става, дълго време работех само с моя екип, където отдавна бяхме се споразумели относно правилата за оформление, коментиране, отстояния и т.н. Привикнахме към тях и живеехме в хармония и щастие. От радост дори публикувах статия в Хабр относно нашия кодстайл. Затова от някакво магично влияние използвахме единствено tslint на пре-комит.

И тук вече пораснахме. Появи се нов проект с наследен код, а с него нови разработчици — четирима добри млади мъже. И нещата постепенно започнаха да не вървят по план.

Мисля, че много от вас знаят, че работата с наследен код не е удоволствие. В моята практика само един проект ми е харесал истински, а останалото… За какво говорех?) Ах да.

Откровено казано, архитектурата на проекта оставяше много да се желае, а коментарите и типовете само мечтаехме за тях. В един момент започнах да се чудя, защо нашата документация по правилата за оформление не работи, коментарите не се пишат, тип — какво значи това?). Е, с него трябваше да направим нещо.

За тези, които нямат търпение да узнаят всички стъпки наведнъж:

• Разделихме tslint на меки правила (за pre-commit) и строги правила (за IDE, за да напомня на разработчиците какво не са направили)

• Добавихме автофикс за възможните правила от строгия tslint към pre-commit

• Написахме правила за prettier

• Танцувахме с тъпан, за да стартираме ng lint с lint-staged

Стъпка първа — разделяй и владей

Когато ми хрумна идеята да стегна правилата на линтера, помислих, че ще се провалим. Кодът е наследен. Нужно е да се разбира, а в такъв обем може да се затъне. Беше решено да създадем втори линтер за IDE, който да дразни очите и да принуждава да пишем jsdoc за методите и свойствата, да пишем интерфейси или онези проклети onPush и т.н.

В корена ни се появиха 2 tslint файла:

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 с ide

src/tslint.json

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

И поправил запуск нашего линтера в скритах package.json

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

След което започнахме да се опипваме с подчертаните неща, които трябва да поправим.

Стъпка втора — коригирайте няколко момента

tslint има правила с has fixer. Нека се възползваме.

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

Тук стартираме правилата на стриктния линтер с автоматично фиксиране на наличните параметри и указваме, че тази команда да не връща грешки (все пак целта ни е да направим автопоправка).

Стъпка трета — пиши красиво

Когато всеки пише по свой собствен стил, в крайна сметка става уморително. Кодът трябва да бъде написан така, че да изглежда, сякаш е създаден от един човек. За това добавих prettier с следните настройки:

.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 в свойството project. В моя случай това е partner-account и partner-account-e2e. Нужен ми е 1-ят.

Връщам се към настройката. Нашият 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.

Източник: habr.com