如何修复VS Code中React项目node模块自动导入为相对路径的问题

问题表现 #

正常第三方依赖导入格式：

import { useNavigate } from "react-router-dom";

异常自动导入格式：

import { useNavigate } from "../../../node_modules/react-router-dom/index";

修复步骤 #

• 检查项目根目录的模块解析配置
  JS项目检查jsconfig.json，TS项目检查tsconfig.json，确保配置符合以下要求：

  {
    "compilerOptions": {
      // 现代构建工具（Vite/CRA 5+）设为"bundler"，旧版工具设为"node"
      "moduleResolution": "bundler",
      "baseUrl": ".",
      "paths": {}
    },
    "include": ["src/**/*"],
    // 必须将node_modules加入排除列表，避免TS服务遍历依赖目录生成路径
    "exclude": ["node_modules", "dist", "build"]
  }
  

  配置修改完成后，按Ctrl+Shift+P（Mac系统按Cmd+Shift+P）调出命令面板，执行TypeScript: Restart TS Server重启语言服务生效。
• 调整VS Code内置导入规则
  打开VS Code设置面板，搜索importModuleSpecifier，将JavaScript > Preferences: Import Module Specifier、TypeScript > Preferences: Import Module Specifier两个选项的值从relative修改为shortest或auto，避免强制生成相对路径。
• 修复依赖安装异常
  若配置调整后仍不生效，删除项目根目录下的node_modules文件夹与对应包管理器的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令，安装完成后重启VS Code即可。
• 排查插件冲突
  禁用近期安装的路径补全、自动导入类第三方插件，这类插件可能覆盖VS Code原生的模块解析逻辑，导致导入路径生成异常，可逐个禁用排查冲突源。

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