Это правильный способ использовать хаски + ворс?
Я обнаружил, что во многих блогах (в том числе в документах с 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"
}
}
Вы не можете, но вы не можете сделать это с помощью регулярного линтинга. Это не даст вам решения, но укажет на возможные ошибки в вашем коде.