Hur jag organiserade projektet, där skogen av fria händer (inställningar för tslint, prettier, etc.)

Och återigen, hej. Här är vi Serhij Omelnytskyj. Idag kommer jag att dela med mig av en av mina huvudvärkare, nämligen - vad man ska göra när ett projekt skrivs av många programmerare på olika nivåer, med exempel på en Angular-applikation.

Det har blivit så, att jag under lång tid endast har arbetat med mitt team, där vi länge har enats om regler för formatering, kommentering, indrag och så vidare. Vi har blivit vana vid dem och levt i harmoni och lycka. Av glädje publicerade jag till och med en artikel på Habr om vår kodstandard. Så vi använde något magiskt, bara tslint vid pre-commit.

Och här växte vi. En ny projektt med ärvd kod dök upp, och till det en ny grupp utvecklare - fyra duktiga killar. Och här började det gå snett.

Jag tror många vet att det inte är roligt att arbeta med ärvd kod. Av det jag minns har jag bara fått ett projekt som jag tyckte om, resten... Så vad pratade jag om?) Åh ja.

Ärligt talat, arkitekturen i projektet lämnade mycket kvar att önska, och kommentarer och typning var nästan en dröm. Vid något tillfälle kände jag mig nedslagen av att vår dokumentation om formateringsreglerna inte fungerade, kommentarer skrivs inte, typ - vad är detta?). Här var det dags att göra något.

För den som inte kan vänta med att få veta alla steg i förväg:

• Vi delade upp tslint i mjuka regler (för pre-commit) och strikta regler (för ide, för att påminna om vad utvecklarna glömde göra)

• Vi lade till automatisk fixering för möjliga regler från den strikta tslint vid pre-commit

• Vi skrev regler för prettier

• Vi dansade med trumman för att få igång ng lint med lint-staged

Steg ett - dela och härska

När jag fick idén att skärpa linterns regler tänkte jag att vi skulle hänga oss. Koden är ju ärvd. Man behöver förstå den, och i sådan omfattning kan man fastna. Beslutet fattades att skapa en andra linter för ide, som skulle irritera ögonen och få folk att skriva jsdoc för metoder och egenskaper, skriva gränssnitt eller det olyckliga onPush, och så vidare.

Så i roten låg det två tslint-filer:

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": "Använd cloneDeep (lodash) för att kopiera objekt"
      }
    ],
    "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
  }
}

I filen src/tslint Vi har ersatt standard tslint med 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`

Efter det började vi få problem med understrukna saker som behövde rättas.

Steg två — fixa ett par punkter

Tslint har regler för har fixer. Så låt oss använda det.

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

Här kör vi hårda linter-regler med automatisk korrigering för tillgängliga parametrar och säger att det här kommandot inte ska returnera några fel (vår målsättning är trots allt att göra automatiska korrigeringar).

Steg tre — skriv vackert

När varje person skriver på sitt eget sätt blir det tröttande i slutändan. Koden bör skrivas så att det verkar som om en enda person gör det. För detta har jag lagt till prettier med följande inställningar:

.prettierr.yaml

printWidth: 200     # Maximalt antal tecken per rad
tabWidth: 2         # mellanslag i tab
singleQuote: true   # Använda enkla citattecken
trailingComma: all  # Använda komman där det är möjligt
arrowParens: always # Pilfunktioner ser ut som (x) => x
overrides:
  - files: "*.ts"   # Kontroll av *.ts-filer
    options:
      parser: typescript  # Språk i *.ts-filer

Och jag lade till kommandot: prettier --write --config .prettierr.yaml

Steg fyra — Och hur tänker du köra allt detta?

Låt oss nu gå igenom hur man kör allt detta detaljerat. För att det ska fungera behöver vi ladda ner följande bibliotek:

npm i -D prettier lint-staged husky

Med husky kopplar vi körningen av våra kommandon till git-hooks — pre-commit. lint-staged kommer att köra våra kommandon beroende på ändrade filer (och också inkludera dessa filer i våra kommandon).

Jag skulle också vilja belysa ett problem som jag stötte på. I vårt projekt använder vi ng lint. När vi använder det tillsammans med lint-staged, läggs de ändrade filerna till i vårt kommando. Ng lint har en flagga för detta --files, men som jag förstod det, ser den inte ett paket av filer och den behöver den här flaggan läggas till för varje fil. För detta var jag tvungen att skapa en fil:

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

För att köra den här filen måste vi ange projektets namn. Det finns i filen angular.json i projektattributet. I mitt fall är det partner-account och partner-account-e2e. Jag behöver den första.

Tillbaka till inställningen. Vår package.json ser nu ut så här:

  "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"
    ]
  },

Observera lint-staged --relative. Parametern --relative är obligatorisk. Nu körs lint-staged. Den plockar ut filerna och kör beroende på dem en lista med kommandon.

Tyvärr upphäver detta inte kodgranskningen, men den har blivit mycket renare. Jag märker att jag numera sällan påminner utvecklarna om åtkomstmodifierare, metodbeskrivningar och attribut, och deras kreativitet har skrivits i en enhetlig stil (nästan 😀 ).

P.S. — Tack för bilderna till vår PM.

Källa: habr.com