React+TS项目lint-staged调用prettier不结束及tsc报错解决方案问询

问题1：lint-staged.config.js配置下yarn fix-format:staged命令不终止 #

根因 #

你在配置中对.js/.ts类文件使用了函数返回命令数组的写法，lint-staged会将匹配到的暂存文件列表作为参数传入该函数，但你没有手动将文件路径拼接到返回的命令中。prettier --write如果没有接收到文件路径参数，会进入等待标准输入的模式，导致进程一直挂起不终止。

修复方法 #

修改lint-staged.config.js，手动将文件路径拼接到需要接收文件的命令中，注意tsc校验不要传文件参数（避免忽略tsconfig配置）：

module.exports = {
  '**/*.{js,jsx,ts,tsx}': (filenames) => [
    // tsc不接收文件参数，直接按tsconfig全量校验，读取jsx等配置
    'yarn check-types',
    // 手动拼接文件路径给eslint
    `yarn fix-eslint:staged ${filenames.join(' ')}`,
    // 手动拼接文件路径给prettier，避免等待stdin
    `yarn fix-format:staged ${filenames.join(' ')}`
  ],
  '**/*.css': (filenames) => [`yarn fix-stylelint:css ${filenames.join(' ')}`]
};

问题2：配置迁移到package.json后yarn check-types报Cannot use JSX unless the '--jsx' flag is provided错误 #

根因 #

package.json中使用数组配置lint-staged时，lint-staged会自动将匹配到的所有暂存文件路径追加到每一条命令末尾。当你执行yarn check-types时，实际执行的命令是tsc --pretty --noEmit xxx.tsx yyy.ts ...，tsc如果直接接收文件参数，默认会忽略tsconfig.json中的配置，包括你设置的jsx相关编译选项，因此报错。

修复方法 #

任选一种即可：

• 方案1：修改check-types脚本，明确指定读取tsconfig配置，即便后续追加文件参数也不会生效
  修改package.json的scripts字段：

  "check-types": "tsc --pretty --noEmit -p tsconfig.json",
  

• 方案2：如果不想全量校验TS类型（大项目全量校验速度慢），可以使用tsc-files工具，仅校验传入的暂存文件同时保留tsconfig配置：
  1. 安装依赖：yarn add -D tsc-files
  2. 修改scripts：

  "check-types": "tsc-files --pretty --noEmit",
  

额外注意事项 #

• 请确保你的package.json中存在check-eslint:staged脚本，且值为eslint，否则fix-eslint:staged命令会执行失败
• 如果项目TS类型校验较慢，推荐使用方案2的tsc-files仅校验暂存文件，提升pre-commit钩子执行速度

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