VSCode中JS文件导入TS模块时自动补全失效、无类型报错问题求助

核心原因 #

你当前的TypeScript配置没有开启JS文件处理权限，也没有将JS文件纳入TS语言服务的扫描范围：

1. compilerOptions中未开启allowJs配置，TypeScript默认会忽略所有JS文件，不会对JS文件做类型解析、补全、校验
2. include配置项仅覆盖了.ts、.tsx、.vue后缀的文件，项目内的JS文件不在TS服务的处理范围内，自然无法触发TS导出模块的自动补全和错误提示

修复步骤 #

• 第一步：修改tsconfig.json的compilerOptions字段，新增JS支持配置：

  {
    "compilerOptions": {
      // 保留原有其他配置不变，新增以下2项
      "allowJs": true, // 允许TS服务处理JS文件
      "checkJs": true // 可选配置，开启后会对JS文件做类型校验，调用不存在的方法时会抛出错误提示
    }
  }
  

• 第二步：修改include字段，将JS文件纳入扫描范围：

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.js", // 新增，匹配src目录下所有JS文件
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "tests/**/*.js" // 可选，测试目录下有JS文件可添加
  ]
  

• 第三步：重启TS服务生效：按下Ctrl+Shift+P（Mac系统为Cmd+Shift+P）调出命令面板，执行「TypeScript: 重新加载TS项目」命令，或直接重启VSCode即可。

可选方案 #

如果你不需要全局开启所有JS文件的类型校验，可以不用加checkJs配置，只在需要类型提示的JS文件顶部添加// @ts-check注释，即可单独为该文件开启TS类型能力。

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