VS Code中正常运行的TS/TSX代码显示红色下划线如何修复

按以下顺序逐一排查，基本能覆盖所有场景：

• 首先补装项目本地TypeScript依赖
  克隆仓库后如果依赖安装不全，本地node_modules里没有TS包，VS Code就只能调用自带的全局TS版本，版本切换列表自然只有一个选项。在项目根目录执行对应包管理工具的安装命令：

  # npm 用户
  npm install typescript --save-dev
  # yarn 用户
  yarn add typescript --dev
  # pnpm 用户
  pnpm add typescript -D
  

  安装完成后彻底关闭VS Code（结束后台进程再重新打开），打开任意.ts/.tsx文件，点击右下角状态栏的TypeScript版本号，此时就能看到工作区本地的TS版本选项，切换到工作区版本即可。
• 校验工作区路径与TS配置
  如果是monorepo多包仓库，确认VS Code打开的根目录是包含对应项目tsconfig.json的层级，不要打开上层无TS配置的父目录。如果tsconfig.json不在项目根目录，打开VS Code设置搜索typescript.tsdk，将配置值修改为项目内node_modules/typescript/lib的绝对路径，再重启TS服务。
• 重启TS语言服务清理缓存
  按快捷键Ctrl+Shift+P（macOS系统按Cmd+Shift+P）调出命令面板，输入TypeScript: Restart TS Server回车执行，等待10秒左右让服务重新加载，检查红线是否消失。如果仍有异常，可删除项目下的.vscode缓存文件夹（有自定义配置提前备份），同时删除node_modules和对应包管理工具的锁文件，重新执行依赖安装后重启VS Code。
• 补全React类型定义包
  部分构建工具（如Vite、Next.js）内置了运行时的类型兜底，缺类型包时本地启动不会报错，但VS Code校验会全量飘红。执行命令安装对应类型包即可：

  npm install @types/react @types/react-dom --save-dev
  

注意：必须为每个项目单独安装本地TypeScript依赖，不要依赖全局安装的TS版本做校验，否则会因为版本和项目配置不匹配，持续出现构建正常但编辑器飘红的问题。

内容的提问来源于stack exchange，提问作者N.Nicko