14

我发现许多博客（包括 lint-staged doc）介绍了一种使用 husky+ lint-staged 的​​方法，如下在 package.json 中定义的代码：

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

由于存在“prettier”和“eslint --fix”都无法修复的错误，我们如何防止这种用法导致错误提交？

4

5 回答 5

24

您确实可以使用 lint-staged 运行多个命令，如果其中一个失败，您将获得正确的退出代码，如下例所示。这通过新的哈士奇钩子系统工作：

在这样的配置中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- 您将收到以下关于 linting 问题的错误：

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 自己的pre-commit钩子失败，因此您的更改不会被提交（如果它们不可修复）。

于 2018-12-07T13:52:30.253 回答
6

我使用的一些文件，以防有人感兴趣：

.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"
    }
}
于 2019-11-06T10:44:38.900 回答
4

配置 husky，lint-staged

安装以下软件包以在提交前运行预提交挂钩

 npm install -D eslint prettier stylelint
  • 更新了 package.json
 "devDependencies": {
    "eslint": "^7.32.0",
    "prettier": "^2.3.2",
    "stylelint": "^13.13.1"
  }

此命令将为以下安装的软件包安装和配置 husky 和 ​​lint-staged

 npx mrm@2 lint-staged

  • 添加了“lint-staged”属性，并将以下包添加到 package.json 中的 devDependencies

  • 此命令还将添加包含预提交挂钩的“.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"
  }
}
  • 更漂亮的配置文件 -> .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
  },
}
  • 您也可以忽略文件以从 linting 中忽略以下文件/目录
- .prettierignore
- .stylelintignore
- .eslintignore
于 2021-08-17T12:21:54.320 回答
1

我认为一个好的实践不仅仅是这些工具。我会利用.editorconfig, ( 不是每个人都使用相同的 IDE/Editor ) 结合良好的eslint设置、测试和格式化脚本。您将需要执行此操作两次，一次是通过 husky 进行挂钩设置，一次是在 CI 中。（CI 会抓住那些试图通过钩子进行 --no-verify 的人）

运行并在根目录下npm install --save-dev husky lint-staged创建一个.lintstagedrc和以及一个。.huskyrc

中一些脚本的示例设置package.json

包.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

当从 husky 钩子调用 lint-staged 时，这将运行我想要运行的命令。如果你想将 --fix 添加到 eslint 命令，你可以在此处附加它。确保您的更漂亮的工具设置为之后处理格式。


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

.huskyrc

显然，您可以通过 husky 在 pre-commit、pre-push 或其他钩子中扩展大量脚本……甚至强制执行提交消息。

{
  "hooks":{
    "pre-commit": "lint-staged && npm run test",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}
于 2021-04-01T21:56:03.973 回答
0

你不能，但你也不能通过定期 linting 来做到这一点。这不会为您提供解决方案，但会指出代码中的任何潜在错误。

于 2018-10-25T08:45:10.520 回答