VS Code中无TypeScript检查的React项目如何启用导入自动补全

问题现象 #

非TypeScript开发的React项目中，VS Code编写代码时不弹出组件导入候选提示，自动补全失效：
补全失效示意图

• 当jsconfig.json设置"checkJs": false时，自动补全完全不可用
• 设置"checkJs": true后自动补全恢复正常：
  开启checkJs后补全正常示意图
• 开启checkJs: true后项目中出现大量TypeScript类型报错，不符合纯JS项目开发需求：
  开启checkJs后报错示意图
• 此前在.vscode/settings.json中添加TS/JS校验禁用配置未生效

现有配置 #

初始jsconfig.json #

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "esnext",
    "module": "esnext",
    "types": ["node", "jest"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": false
  },
  "include": [".", "src"]
}

未生效的VS Code配置 #

{
  "tslint.enable":false,
  "typescript.validate.enable": false,
  "javascript.validate.enable": false
}

项目基础信息 #

基于Create React App 5.0.0搭建，React版本17.0.2，使用ESLint做代码规范校验，未集成TypeScript。

解决方案 #

方案一：调整jsconfig配置（推荐） #

VS Code内置的JS/TS语言服务需要开启checkJs才会全量扫描项目内的模块导出，构建补全索引。不需要关闭语言服务校验，只要在jsconfig.json中关闭所有严格类型检查规则，即可在保留自动补全的同时，不显示冗余的类型报错。
修改后的完整jsconfig.json配置：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "types": ["node", "jest"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": true,
    // 关闭所有严格类型检查规则，消除TS报错
    "strict": false,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "strictFunctionTypes": false,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "build", "public"]
}

配置说明：原include配置扫描整个根目录，会把node_modules、构建产物等无关文件纳入索引，拖慢语言服务响应速度，调整为仅扫描src源码目录即可，同时通过exclude排除无关目录。
配置完成后，打开VS Code命令面板（快捷键Ctrl+Shift+P / Mac端Cmd+Shift+P），执行TypeScript: Restart TS Server重启语言服务即可生效。

方案二：修正VS Code设置 #

如果不想修改checkJs配置，可以补全VS Code的校验禁用配置，之前的配置缺少自动导入和诊断开关，完整配置如下，写入项目根目录.vscode/settings.json：

{
  "tslint.enable": false,
  "typescript.validate.enable": false,
  "javascript.validate.enable": false,
  // 关闭JS/TS诊断建议
  "javascript.suggestionActions.enabled": false,
  "typescript.suggestionActions.enabled": false,
  // 强制开启JS/TS自动导入补全
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  // 统一导入路径规则
  "javascript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.importModuleSpecifier": "relative"
}

修改完成后同样重启TS Server即可。

额外排查项 #

如果配置完成后补全仍未生效，逐一检查以下项：

• 确认VS Code内置的JavaScript and TypeScript Language Features扩展处于启用状态，未被第三方代码补全插件禁用
• 项目根目录不要存在空的tsconfig.json文件，会覆盖jsconfig.json的配置优先级
• React组件文件统一使用.jsx后缀，.js后缀文件内的JSX语法可能无法被语言服务正确识别，影响补全索引构建

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