VS Code中useState导入异常、setter高亮失效问题求助

问题现象 #

• 导入useState时，VS Code不再自动补全正确语句import { useState } from "react";，仅弹出两个异常路径选项：

  import { useState } from "react/cjs/react.production.min";
  import { useState } from "react/cjs/react.development";
  

• 编写const [thisVar, setThisVar] = useState(0);时，原本会黄色高亮的setThisVar不再高亮，VS Code无法识别其为函数类型
• 现有代码可正常运行，但每次手动修正导入路径繁琐，且担心存在深层配置问题

已尝试的无效操作 #

• 安装「JavaScript and TypeScript Nightly」扩展
• 更新至最新版@types/react

修复方案 #

1. 调整VS Code的TypeScript版本设置 #

VS Code默认优先使用项目本地的TypeScript版本，版本不兼容会引发此类问题：

• 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入TypeScript: Select TypeScript Version
• 选择「Use Workspace Version」，确保项目本地typescript版本与@types/react版本匹配（可查看package.json确认版本兼容性）

2. 检查并重置JS/TS语言服务配置 #

• 打开VS Code设置（Ctrl+, / Cmd+,），搜索javascript.suggest.autoImports和typescript.suggest.autoImports，确保这两个选项处于勾选状态
• 搜索typescript.preferences.importModuleSpecifier，设置为non-relative或shortest，让导入路径优先使用根模块而非具体文件路径
• 若配置无异常，可重启TS服务：打开命令面板，输入TypeScript: Restart TS Server

3. 排查ESLint/Prettier配置冲突 #

虽然ESLint/Prettier本身不直接管控自动导入，但版本更新可能导致配置异常：

• 检查项目根目录的.eslintrc/.eslintrc.js、.prettierrc等配置文件，确认没有强制修改导入路径的自定义规则
• 暂时禁用ESLint和Prettier扩展，重启VS Code后测试自动导入是否恢复，以此排查是否为扩展冲突

4. 清理VS Code缓存 #

• 关闭VS Code，删除对应路径的缓存文件：
  • Windows：%APPDATA%\Code\Cache 和 %APPDATA%\Code\CachedData
  • macOS：~/Library/Application Support/Code/Cache 和 ~/Library/Application Support/Code/CachedData
  • Linux：~/.config/Code/Cache 和 ~/.config/Code/CachedData
• 重启VS Code后重新打开项目测试

5. 重新安装依赖包 #

• 删除项目的node_modules文件夹和package-lock.json/yarn.lock文件
• 重新执行npm install或yarn install，确保React包及其类型文件安装完整

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