Visual Studio开发React项目代码提示、补全、自动导入失效如何解决

常见诱发原因 #

• React组件文件后缀错误，未使用.jsx/.tsx后缀，语言服务未启动React语法分析逻辑
• React类型定义依赖缺失或安装损坏，语言服务无法识别内置API类型
• 项目缺少jsconfig.json/tsconfig.json配置，语言服务无法建立依赖索引、定位自定义组件路径
• Visual Studio的JavaScript/TypeScript语言服务运行异常，或存在第三方插件冲突
• 项目依赖缓存损坏，导致类型解析失败

修复步骤 #

1. 修正文件后缀
   所有包含JSX标签、React Hooks逻辑的组件文件，必须将后缀从.js改为.jsx（TypeScript项目改为.tsx）。给出的两段示例代码均位于.js后缀文件中，这是该问题最高发的诱因：普通.js文件默认不会加载React专属语法分析规则，既不会识别JSX标签的自动导入，也不会触发useState这类内置API的提示。
2. 安装/修复类型依赖
   在项目根目录打开终端，执行对应命令补全依赖：

• JavaScript项目执行：
  npm install react react-dom && npm install -D @types/react @types/react-dom
• TypeScript项目执行：
  npm install react react-dom && npm install -D typescript @types/react @types/react-dom
  如果之前已经安装过依赖，先删除根目录下的node_modules文件夹、锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），再重新执行安装命令，清除损坏的依赖缓存。

3. 添加项目配置文件
   在项目根目录新建配置文件，给语言服务提供路径解析、语法识别规则：

• JavaScript项目新建jsconfig.json，写入以下基础配置：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

• TypeScript项目检查现有tsconfig.json，确保compilerOptions中包含"jsx": "react-jsx"配置，其余配置和上述内容保持一致即可。配置完成后语言服务会自动扫描src目录下的所有组件，建立索引后即可触发自定义组件的自动导入提示。

注：如果使用React 16及更早版本，将jsx字段值改为"react"即可。

4. 重启语言服务
   点击Visual Studio顶部菜单栏「工具」-「选项」-「文本编辑器」-「JavaScript/TypeScript」-「语言服务」，选择「重启语言服务」，等待10-30秒待索引建立完成后测试功能。
   如果重启后仍未恢复，完全关闭Visual Studio，删除项目根目录下的.vs隐藏文件夹，再重新打开项目加载即可。
5. 排查插件冲突
   打开「扩展」-「管理扩展」，暂时禁用所有第三方代码提示、语法增强类插件，重启VS后测试功能是否恢复，再逐个启用插件定位冲突项。

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