如何配置vue-tsc使其与lint-staged（暂存文件）正常协作？

问题复盘 #

之前尝试的两种方案都存在明显问题：

• 方案1仅将暂存文件加入tsconfig的include，导致组件导入的其他文件无法被TS识别，抛出导入/类型声明错误
• 方案2模仿项目tsconfig，但当前写法未正确继承路径映射配置，必然引发大量路径解析错误

解决思路 #

无需动态生成临时tsconfig，直接复用项目原有的tsconfig.app.json，让vue-tsc基于该配置仅检查指定的暂存文件——既保留项目的路径映射等核心配置，又能让TS正确解析依赖文件，同时只关注我们修改过的代码。

修改后的.lintstagedrc.js代码：

function typeCheckStagedFiles(files) {
  // 过滤出src目录下需要检查的Vue/TS/JS文件
  const targetFiles = files.filter(file => /src\/.*\.(vue|ts|js)$/.test(file));
  if (!targetFiles.length) return;

  // 基于项目原有配置，仅对指定文件执行类型检查，不生成编译产物
  return `vue-tsc --noEmit --project tsconfig.app.json ${targetFiles.join(' ')}`;
}

module.exports = {
  "src/**/*.{ts,cts,mts,js,cjs,mjs,vue}": [
    "prettier --write",
    "eslint --fix --max-warnings 0"
  ],
  "src/**/*.{vue,ts,js}": [typeCheckStagedFiles]
};

方案优势 #

• 路径映射完全生效：直接复用项目原tsconfig，paths中@/*这类别名配置正常工作，不会出现导入路径错误
• 依赖文件可被识别：原tsconfig的include已覆盖整个src目录，TS会自动解析暂存文件依赖的其他项目文件，但仅对指定的暂存文件执行类型检查
• 逻辑简洁高效：避免了临时配置文件的生成与维护，减少不必要的文件IO操作

补充建议 #

• 若担心历史类型问题积累，可在CI中添加每周一次的全量类型检查任务，逐步修复旧代码的类型错误
• 可给vue-tsc追加--skipLibCheck参数，跳过第三方库的类型检查，提升执行速度

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