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

【问题标题】：How to configure lint-staged to run eslint and prettier scripts如何配置 lint-staged 以运行 eslint 和更漂亮的脚本
【发布时间】：2021-10-09 12:53:28
【问题描述】：

我有这个设置：

// 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还会在所有文件上双重运行并重写所有文件两次。

【问题讨论】：

标签： eslint prettier lint-staged

【解决方案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。

【讨论】：