eslint - 如何配置 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不要运行自定义脚本，否则 glob 会相互冲突。而是直接在 lint-staged 匹配的 glob 上运行 eslint 和 prettier。