lint-staged: 当你的项目文件发生变化的时候执行

一个前端经常用到的命令
更新于: 2023-08-14 08:17:24

一句话

这个命令只关心 git 里此次发生变化的内容。

安装

yarn add --dev lint-staged

配置

  • lint-staged 在你的对象 package.json
  • .lintstagedrc JSON或YML格式的文件
  • lint-staged.config.js JS格式的文件
  • 使用--config或-c标志传递配置文件

命令行

关于这个命令的所有，可能有更新，可以使用 npx lint-staged --help 获取最新命令

❯ npx lint-staged --help
用法: lint-staged [options]

Options:
  -V, --version                      输出版本号
  --allow-empty                      当任务撤消所有分阶段的更改时允许空提交（默认值：false）
  -c, --config [path]                配置文件的路径
  -d, --debug                        打印其他调试信息（默认值：false）
  -p, --concurrent <parallel tasks>  要同时运行的任务数，或者为false则要连续运行任务（默认值：true）
  -q, --quiet                        自己的控制台输出（默认值：false）
  -r, --relative                     将相对文件路径传递给任务（默认值：false）
  -x, --shell                        跳过任务解析以更好地支持shell（默认值：false）
  -h, --help                         输出用法信息

配置文件

  • package.json
  • .lingstagerc
  • 其它

package.json 里的配置。

{
  "lint-staged": {
    "*": "your-cmd"
  }
}

添加 .lingstagerc 的实际配置。

{
  "*": "your-cmd"
}

实战

一个项目中的实际配置如下。

  • 😂 husky: 我现在已经不写在 package.json 里了
{
  "name": "My project",
  "version": "0.1.0",
  "scripts": {
    "my-custom-script": "linter --arg1 --arg2"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js}": [
      "eslint --cache --fix",
      "prettier --write"
    ],
    "*.css": [
      "stylelint --cache --fix",
      "prettier --write"
    ]
  }
}

参考