如何配置lint-staged以运行eslint和更漂亮的脚本

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时，不能使用双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"
    },
  }
...

在运行lint-staged时只需使用prettier --write -u和eslint --fix，不要运行您的自定义脚本，否则globs会相互冲突。相反，只需直接在与lint-staged匹配的glob上运行eslint和更漂亮即可。