React/Next.js项目lint-staged错误提示及未格式化问题咨询

原因 #

• 匹配模式语法不符合规范：你在package.json里写的src/**/*.{js|jsx|ts|tsx|json|css|md|html|scss}用了管道符|分隔文件后缀，但lint-staged依赖的glob语法中，大括号内的多值分隔符是逗号,，不是管道符。lint-staged无法识别管道符分隔的多后缀，误以为大括号里是单一的字符串值，所以弹出了错误提示。
• 提示的“格式化”仅为运行时临时处理：这个黄色提示只是lint-staged在执行命令前，临时修正了内存中的匹配模式，不会主动修改你package.json里的配置内容，所以你查看文件时还是原来的写法。

解决方法 #

1. 修正lint-staged的匹配模式，将管道符替换为逗号，改成glob语法支持的多后缀写法：

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,md,html,scss}": [
    "prettier --write",
    "eslint --fix"
  ]
}

2. 优化eslint命令：原来的eslint --fix src/会强制检查整个src目录，改成eslint --fix后，lint-staged会只将当前暂存的符合匹配规则的文件传给eslint，执行更精准高效。

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