Это правильный способ использовать хаски + ворс?

Я обнаружил, что во многих блогах (в том числе в документах с lint-staged) представлен такой способ использования husky+ lint-staged, как в следующем коде, определенном в package.json:

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.js": ["prettier --write","eslint --fix", "git add"]
  }
}

Так как существуют ошибки, которые не могут исправить ни "prettier", ни "eslint --fix", как мы можем предотвратить плохой коммит при таком использовании?

5 ответов

Вы действительно можете запустить несколько команд с помощью lint-staged, и если одна из них завершится неудачно, вы получите правильный код завершения, как показано в примере ниже. Это работает через новую систему хаски ( https://github.com/typicode/husky):

С такой конфигурацией в package.json:

"husky": { "hooks": { "pre-commit": "lint-staged" }, "lint-staged": { "src/**/*.{js,jsx,ts,tsx,json,css}": [ "prettier --write", "eslint --fix src/", "tslint --fix --project .", "git add" ] },
Конфигурация работает prettier, eslint and tslint - вы получите следующую ошибку при проблемах с линтингом:

husky > pre-commit (node v8.12.0) ↓ Stashing changes... [skipped] → No partially staged files found... ❯ Running linters... ❯ Running tasks for src/**/*.{js,jsx,ts,tsx,json,css} ✖ prettier --write eslint --fix src/ tslint --fix --project . git add ✖ prettier --write found some errors. Please fix them and try committing again. ... husky > pre-commit hook failed (add --no-verify to bypass)

Последняя строка показывает вам, что Git's pre-commit перехватить не удалось, и поэтому ваши изменения не будут зафиксированы (если они не исправимы).

Некоторые файлы, которые я использую, на случай, если кому-то будет интересно:

//.prettierrc

{
  "printWidth": 120,
  "proseWrap": "preserve",
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "trailingComma": "es5"
}

//.lintstagedrc

{
  "**/*.+(js|md)": [
    "prettier --write",
    "eslint --fix src/",
    "git add"
  ]
}

//.prettierignore

node_modules
coverage

//.huskyrc

{
    "hooks": {
      "pre-commit": "lint-staged"
    }
}

Настроить хаски, без ворса

Установите следующие пакеты для запуска хуков перед фиксацией перед фиксацией

       npm install -D eslint prettier stylelint
  • Обновлен package.json
       "devDependencies": {
    "eslint": "^7.32.0",
    "prettier": "^2.3.2",
    "stylelint": "^13.13.1"
  }

Эта команда установит и настроит хаски и lint-staged для следующих установленных пакетов

       npx mrm@2 lint-staged 
  • Добавлено свойство "lint-staged", и следующие пакеты добавляются в devDependencies в package.json

  • Эта команда также добавит папку .husky, которая будет содержать хук предварительной фиксации.

       "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.css": "stylelint --fix",
    "*.{js,css,md}": "prettier --write"
  }

 "devDependencies": {
    ...
    "husky": ">=6",
    "lint-staged": ">=10",
    ...
  }

  "scripts": {
    ...
    "prepare": "husky install"
  },

Файлы конфигурации

  • Файл конфигурации Stylelint -> .stylelintrc
      {
  "plugins": [
    <CAN_HAVE_PLUGINS> LIKE ("stylelint-order","stylelint-scss") AND FOLLOWING PROPERTIES OVERRIDDEN IN "rules {...}"
  ],
  "rules": {
    "indentation": 2,
    "unit-allowed-list": [
      "em",
      "rem",
      "px",
      "%"
    ],
    "order/properties-order": [
      [
        "width",
        "height"
      ],
    "order/properties-alphabetical-order": null,
    "unit-case": "lower",
    "property-case": "lower",
    "string-quotes": "single"
  }
}
  • Файл конфигурации Prettier -> .prettierrc {"singleQuote": true, "trailingComma": "all", "printWidth": 120, "tabWidth": 4, "useTabs": true, "semi": false}

  • Файл конфигурации Eslint -> "eslintrc.json"

      {
  "extends": ["eslint:recommended"],
  "parser": "babel-eslint",
  "plugins": [
      <PLUGINS>
  ],
  "rules": {
  ...
   "no-delete-var": "error",
    "no-dupe-args": "error",
    "no-dupe-class-members": "error",
    "no-dupe-keys": "error",
    "no-duplicate-case": "error",
    ...
    <MORE_RULES_DEFINED>
  },
  "env": {
    "es2021": true,
    "node": true
  },
}

  • Вы также можете игнорировать файлы, чтобы игнорировать следующие файлы / каталог из линтинга
      - .prettierignore
- .stylelintignore
- .eslintignore 

Я думаю, что хорошая практика - это немного больше, чем просто эти инструменты. Я бы использовал .editorconfig, (Не все используют одну и ту же IDE / Editor) в сочетании с хорошим eslintнастройка, тестирование и скрипт форматирования. Вам нужно будет сделать это дважды, один раз в настройке хуков через хаски ... и один раз в CI. (CI поймает людей, которые пытаются --no-verify через крючок)

Запустить npm install --save-dev husky lint-staged и создать .lintstagedrc а также .huskyrc в корне.

Пример настройки некоторых скриптов в package.json

package.json

В этом примере у меня есть lint, prettier и сценарий форматирования. И обратите внимание, что я игнорирую файлы в моем .gitignore для форматирования.

         "format": "npm run pretty -- --write",
    "lint": "eslint --ignore-path .gitignore --ext .js --ext .jsx .",
    "pretty": "prettier --ignore-path .gitignore \"**/*.+(js|json|md)\"",

.lintstagedrc

Это запустит команды, которые я хочу запустить, когда lint-staged вызывается из хука хаски. Если вы хотите добавить --fix к команде eslint, вы можете добавить его здесь. Убедитесь, что ваш более красивый инструмент настроен на обработку форматирования впоследствии.

      
{
  "*.+(js|jsx)":[
    "eslint"
  ],
  "*.+(js|json|md)":[
    "prettier --write"
  ]
}

.huskyrc

Очевидно, вы можете расширить тонну скриптов в pre-commit, pre-push или других хуках с помощью хаски ... даже принудительно коммитить сообщения.

      {
  "hooks":{
    "pre-commit": "lint-staged && npm run test",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

Вы не можете, но вы не можете сделать это с помощью регулярного линтинга. Это не даст вам решения, но укажет на возможные ошибки в вашем коде.

Другие вопросы по тегам