这是使用赫斯基+ lint-staged的正确方式吗？

Question

我发现许多博客(包括lint-staged文档)介绍了这样一种使用husky+ lint-staged的方法，如package.json中定义的以下代码：

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

既然有“更漂亮的”和"eslint -- fix“都不能修复的错误，我们如何通过这样的用法防止不好的提交？

Answer 1

您确实可以使用lint-staged运行多个命令，如果其中一个命令失败，您将获得正确的退出代码，如下面的示例所示。这是通过新的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 -您将得到以下有关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钩子失败了，因此您的更改不会被提交(如果它们不可修复的话)。

Answer 2

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

.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"
    }
}

Answer 3

配置赫斯基、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"属性，并将以下包添加到package.json

中的devDependencies

• 此命令还将添加'.husky'文件夹，该文件夹将包含pre-commit

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

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

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

配置文件

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

"eslintrc.json"的

• Eslint配置文件

{
  "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

中忽略要忽略的以下文件/dir

- .prettierignore
- .stylelintignore
- .eslintignore