如何将 lint-staged 配置为运行 eslint 和 prettier 脚本

Question

我有这个设置：

// package.json

...
  "scripts": {
    ...
    "lint": "eslint --fix {src,test}/**/*.{js,ts,jsx,tsx} --no-error-on-unmatched-pattern",
    "style": "prettier --write {src,test}/**/* ./*.{json,*.json} !package-lock.json -u --no-error-on-unmatched-pattern",
...
  "lint-staged": {
    "lint-staged": {
      "{src,test}/**/*.{js,ts,jsx,tsx}": [
        "npm run lint",
        "npm run style"
      ],
      "!**/*.{js,ts,jsx,tsx}": "npm run style"
    },
  }
...

问题是无论 glob 匹配什么文件，prettier 都会运行，prettier 也会对所有文件加倍运行并重写所有文件两次。

Answer 1

使用lint-staged时不能使用double glob表达式，会引起冲突。

// package.json

...
  "scripts": {
    ...
    "lint": "eslint --fix {src,test}/**/*.{js,ts,jsx,tsx} --no-error-on-unmatched-pattern",
    "style": "prettier --write {src,test}/**/* ./*.{json,*.json} !package-lock.json -u --no-error-on-unmatched-pattern",
...
  "lint-staged": {
    "lint-staged": {
      "{src,test}/**/*.{js,ts,jsx,tsx}": [
        "eslint --fix",
        "prettier --write -u"
      ],
      "!**/*.{js,ts,jsx,tsx}": "prettier --write -u"
    },
  }
...

prettier --write -u 和 eslint --fix 当你运行宁 lint-staged 时，不要运行你的自定义脚本，否则 globs 与一个冲突其他。相反，只是运行 eslint 和 prettier 直接在由 lint-staged 匹配的 glob 上。

如何将 lint-staged 配置为 运行 eslint 和 prettier 脚本

How to configure lint-staged to run eslint and prettier scripts

eslint

prettier

lint-staged

如何将 lint-staged 配置为运行 eslint 和 prettier 脚本