从Next.js迁移到CRA后自动导入优先匹配react-router而非react-router-dom问题

问题根因说明 #

• react-router是react-router-dom的内置子依赖，即使你没有主动安装，node_modules中也会存在该包，VSCode默认自动导入会扫描整个node_modules目录，因此会出现在推荐列表中
• 自动导入频繁失效大概率是编辑器没有正确识别项目的源码路径规则

解决步骤 #

1. 屏蔽react-router的自动导入推荐 #

打开VSCode的配置文件settings.json（可通过快捷键Ctrl+Shift+P/Cmd+Shift+P搜索「Preferences: Open Settings (JSON)」打开），添加以下配置：

// JS项目屏蔽react-router的自动导入
"javascript.preferences.autoImportFileExcludePatterns": ["**/react-router"],
// 如果后续会用到TS也可以加上这行
"typescript.preferences.autoImportFileExcludePatterns": ["**/react-router"]

配置保存后重载窗口即可生效，后续自动导入不会再出现react-router的相关选项。

2. 修复自动导入失效问题 #

步骤1：补充ESLint配置

修改package.json中的eslintConfig部分，补全导入识别的扩展名配置：

{
    "eslintConfig": {
        // 其他原有配置不变
        "settings": {
            "import/resolver": {
                "node": {
                    "paths": ["src"],
                    // 新增以下扩展名配置
                    "extensions": [".js", ".jsx", ".json"]
                }
            },
            // 可选添加：优化内部导入优先级
            "import/internal-regex": "^src/"
        }
        // 其他原有配置不变
    }
}

步骤2：添加jsconfig.json

在项目根目录新建jsconfig.json文件，写入以下内容，告诉VSCode项目的源码根路径：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src/**/*"]
}

步骤3：重载编辑器

配置完成后，按快捷键Ctrl+Shift+P/Cmd+Shift+P，选择「Developer: Reload Window」重载VSCode窗口，再重启ESLint服务器即可。

可选排查项 #

如果以上操作后仍然有问题，可以执行以下操作：

• 删除项目的node_modules文件夹、package-lock.json/yarn.lock文件，重新执行npm install/yarn install安装依赖
• 禁用非官方的第三方自动导入VSCode插件，避免插件冲突
• 检查VSCode官方的「JavaScript and TypeScript」插件是否为最新版本

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