🥇직접 손을 많이 쓴 프로젝트(tslint 설정, prettier 등)에 어떻게 질서를 가져왔는가

다시 안녕하세요. 연락하다 오멜니츠키 세르게이. 오늘은 제가 골치 아픈 문제 중 하나, 즉 Angular 애플리케이션의 예를 사용하여 많은 다단계 프로그래머가 프로젝트를 작성할 때 어떻게 해야 하는지에 대해 공유하겠습니다.

그래서 나는 오랫동안 서식, 주석 달기, 들여쓰기 등의 규칙에 대해 오랫동안 합의해 온 우리 팀과만 일했습니다. 그들은 그들에게 익숙해졌고 우호적이고 행복하게 살았습니다. 이를 축하하기 위해 Habr에 기사를 게재하기도 했습니다. 우리의 코드 스타일. 따라서 마법같은 일을 하기 위해 우리는 사전 커밋에서만 tslint를 사용했습니다.

그리고 우리는 성장했습니다. 레거시 코드를 사용하는 새로운 프로젝트가 등장했고, 그 외에도 4명의 좋은 동료들이 새로운 개발자로 합류했습니다. 그리고 일이 계획대로 진행되지 않았습니다.

많은 사람들이 레거시 코드로 작업하는 것이 재미없다는 것을 알고 있다고 생각합니다. 제 기억으로는 기뻤던 프로젝트가 딱 하나 있었는데 나머지는... 그럼 무슨 말을 하는 걸까요?) 아 그렇군요.

솔직히 말해서 프로젝트의 아키텍처는 아쉬운 점이 많았고 우리는 댓글과 타이핑만을 꿈꿨습니다. 어느 시점에서 나는 디자인 규칙에 따른 문서가 작동하지 않고 댓글이 작성되지 않았기 때문에 우울해졌습니다. "이게 뭐죠?). 이에 대해 뭔가 조치를 취해야 했습니다.

모든 단계를 한 번에 배우고 싶은 분들을 위해:

우리는 tslint를 소프트 규칙(사전 커밋용)과 하드 규칙(개발자가 잊어버린 작업을 상기시키기 위해)으로 나누었습니다.
하드 tslint에서 사전 커밋까지 가능한 규칙의 자동 수정을 추가했습니다.
더 예뻐지기 위한 규칙을 썼습니다
우리는 탬버린과 함께 춤을 추며 lint-staged로 ng lint를 발사했습니다.

XNUMX단계 - 분열과 정복

린터의 규칙을 강화하자는 생각이 들었을 때 나는 우리가 목을 매야겠다고 생각했습니다. 코드는 레거시입니다. 당신은 그것을 이해해야하지만 그러한 볼륨에서는 당신 자신을 묻을 수 있습니다. ide에 대한 두 번째 linter를 만들기로 결정했는데, 이는 눈에 거슬리고 메소드 및 속성에 대해 jsdoc를 작성하고, 인터페이스 또는 불행한 onPush 등을 작성하도록 강요합니다.

그래서 루트에서 우리는 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를 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 스크립트에서 linter의 시작을 수정했습니다.

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

그 이후로 우리는 바로잡아야 할 점을 강조하는 일을 그만두기 시작했습니다.

XNUMX단계 - 몇 가지 문제 수정

tslint에는 다음과 같은 규칙이 있습니다. has fixer. 그럼 사용해 봅시다.

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

여기서는 사용 가능한 매개변수를 자동 수정하는 하드 린터 규칙을 실행하고 이 명령에 오류를 반환하지 않도록 지시합니다(여기서 우리의 목표는 결국 자동 수정을 수행하는 것입니다).

XNUMX단계 - 아름답게 쓰기

다들 자기 방식대로 글을 쓰다 보면 결국 지루해지거든요. 코드는 마치 한 사람이 하는 것처럼 작성되어야 합니다. 이를 위해 다음 설정으로 Pretier를 설치했습니다.

.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

XNUMX단계 - 이 모든 것을 어떻게 시작할 예정입니까?

이제 이 모든 것을 시작하는 방법을 자세히 살펴보겠습니다. 이것이 작동하려면 다음 라이브러리를 다운로드해야 합니다.

npm i -D prettier lint-staged husky

Husky를 사용하여 git 후크에서 명령 실행을 중단합니다(사전 커밋). 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. 그런 다음 파일을 선택하고 해당 파일에 따라 명령 목록을 실행합니다.

아쉽게도 코드 검토가 취소되지는 않지만 훨씬 깔끔해졌습니다. 개발자에게 액세스 한정자, 메서드 및 속성 설명에 대해 덜 자주 상기시키기 시작했고 그들의 작업이 동일한 스타일로 작성되기 시작했다는 점에 주목하겠습니다(거의 😀).

추신 - PM에게 사진을 보내주셔서 감사합니다.

출처 : habr.com

직접적인 손의 숲이 있는 프로젝트에서 물건을 정리하는 방법(tslint, prettier 등 설정)

XNUMX단계 - 분열과 정복

XNUMX단계 - 몇 가지 문제 수정

XNUMX단계 - 아름답게 쓰기

XNUMX단계 - 이 모든 것을 어떻게 시작할 예정입니까?