如何在VSCode中设置优先自动导入Shadcn组件而非Radix/UI？

1. 确保项目路径别名与TypeScript配置正确 #

首先在tsconfig.json或jsconfig.json中配置路径别名，让VSCode能识别本地shadcn组件的位置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/ui/*": ["components/ui/*"],
      "@/components/ui": ["components/ui/index.ts"] // 若有根index导出可添加
    },
    "include": ["components/ui/**/*", "app/**/*", "pages/**/*"] // 确保包含shadcn组件目录
  }
}

同时，建议在components/ui目录下创建index.ts文件，统一导出所有shadcn组件（能提升自动导入的识别效率）：

// components/ui/index.ts
export { Button } from './button';
export { Input } from './input';
export { Card } from './card';
// 按需添加已安装的shadcn组件

2. 调整VSCode的TypeScript导入偏好 #

打开VSCode设置（快捷键Ctrl+,或Cmd+,），搜索并修改以下配置：

• typescript.preferences.importModuleSpecifierPreference：设置为project-relative，让VSCode优先选择项目内的路径别名/相对路径，而非npm包。
• typescript.preferences.importModuleSpecifier：设置为non-relative，强制使用路径别名（如@/components/ui）而非相对路径导入。
• typescript.preferences.preferStrictAutoImports：设置为false，避免TypeScript只导入类型定义而忽略实际组件。

也可以直接在.vscode/settings.json中写入配置：

{
  "typescript.preferences.importModuleSpecifierPreference": "project-relative",
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.preferStrictAutoImports": false
}

3. 排除不必要的自动导入来源（可选） #

如果上述设置后仍存在优先级问题，可以让VSCode忽略@radix-ui和lucide-react的自动导入建议，在.vscode/settings.json中添加：

{
  "typescript.preferences.autoImportFileExcludePatterns": [
    "**/@radix-ui/**",
    "**/lucide-react/**"
  ]
}

注意：此操作会完全屏蔽这些包的自动导入，若需手动导入Radix基础组件，需取消该设置。

4. 重启VSCode并刷新TypeScript服务 #

完成配置后，重启VSCode，或按下Ctrl+Shift+P（或Cmd+Shift+P）执行TypeScript: Restart TS Server，确保所有配置生效。

之后使用「快速修复」添加缺失导入时，VSCode会优先选择本地@/components/ui下的shadcn组件，而非Radix或lucide的原生包。

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