如何调整VSCode自动导入优先级 使React包优先于preact-hook被导入

以下三种方案可根据你的实际场景选择：

方案1：直接排除preact相关路径的自动导入（推荐，无特殊需求优先用这个） #

在项目根目录创建.vscode/settings.json文件（如果已存在直接修改），添加以下配置：

{
  // TypeScript 自动导入排除规则
  "typescript.preferences.autoImportFileExcludePatterns": [
    "**/preact/**",
    "**/preact-hook/**"
  ],
  // 如果项目同时用到JavaScript，补充下面的配置
  "javascript.preferences.autoImportFileExcludePatterns": [
    "**/preact/**",
    "**/preact-hook/**"
  ]
}

配置后VSCode的自动导入列表将不再出现preact相关的导入选项，直接默认从react包导入hooks。

方案2：通过tsconfig路径映射强制优先读取react包 #

如果你的项目确实需要用到preact，不能完全排除它的自动导入，可以在tsconfig.json中添加路径映射，让TypeScript优先索引项目安装的react包：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "react": ["./node_modules/react"],
      "react/jsx-runtime": ["./node_modules/react/jsx-runtime"],
      "react/*": ["./node_modules/react/*"]
    }
  }
}

配置后自动导入时会优先匹配paths中指定的react路径，排在其他同源API的导入选项之前。

方案3：切换为工作区TypeScript版本 #

如果上述配置不生效，大概率是VSCode使用了内置的TypeScript版本，和项目依赖的TS版本模块索引规则不一致导致的：

• 打开项目内任意.ts/.tsx文件
• 点击编辑器右下角的TypeScript版本号
• 在弹出的选项中选择「使用工作区版本」即可

#

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