如何正确配置lint-staged.config.js解决预提交钩子执行失败问题

1. lint-staged.config.js加载失败：配置文件中依赖shell-quote包，但项目未安装该依赖，导致配置无法读取，lint-staged自动 fallback 到package.json中的配置。
2. .gitignore格式化报错：Prettier默认没有针对.gitignore文件的解析器，直接执行prettier --write会触发解析器缺失错误。
3. 配置冲突：项目同时存在package.json中的lint-staged字段和独立的lint-staged.config.js，导致执行逻辑混乱。

步骤1：安装缺失依赖 #

先安装shell-quote解决配置文件加载问题：

npm install shell-quote --save-dev

步骤2：统一lint-staged配置（二选一） #

方案A：保留lint-staged.config.js，移除package.json中的配置 #

1. 打开package.json，删除以下字段：

"lint-staged": {
  "*.gitignore": "prettier --write"
},

2. 修改lint-staged.config.js，添加.gitignore的处理逻辑（或直接忽略）：
   • 若需要格式化.gitignore：

     const escape = require('shell-quote').quote
     const isWin = process.platform === 'win32'
     
     module.exports = {
       '**/*.{js,jsx,ts,tsx,json,md,mdx,css,html,yml,yaml,scss,sass}': filenames => {
         const escapedFileNames = filenames
           .map(filename => `"${isWin ? filename : escape([filename])}"`)
           .join(' ')
         return [
           `prettier --ignore-path='.gitignore' --write ${escapedFileNames}`,
           `git add ${escapedFileNames}`,
         ]
       },
       '**/*.gitignore': filenames => {
         const escapedFileNames = filenames
           .map(filename => `"${isWin ? filename : escape([filename])}"`)
           .join(' ')
         return [
           `prettier --parser gitignore --write ${escapedFileNames}`,
           `git add ${escapedFileNames}`,
         ]
       }
     }
     

   • 若不需要格式化.gitignore，直接跳过该文件的规则即可。

方案B：使用package.json配置，删除lint-staged.config.js #

1. 删除项目根目录下的lint-staged.config.js文件。
2. 修改package.json中的lint-staged配置：

"lint-staged": {
  "**/*.{js,jsx,ts,tsx,json,md,mdx,css,html,yml,yaml,scss,sass}": [
    "prettier --ignore-path='.gitignore' --write",
    "git add"
  ],
  "**/*.gitignore": [
    "prettier --parser gitignore --write",
    "git add"
  ]
},

步骤3：验证配置 #

执行以下命令测试配置是否正常：

npx lint-staged --dry-run

无报错后，尝试提交代码验证预提交钩子功能。

在项目根目录添加.prettierrc文件，统一配置解析器规则，避免每次命令行指定：

{
  "overrides": [
    {
      "files": "*.gitignore",
      "options": {
        "parser": "gitignore"
      }
    }
  ]
}

内容的提问来源于stack exchange，提问作者Yuri Silva