VSCode自动导入Material-UI时如何强制使用全路径导入？

该需求完全可以实现，无需逐行手动修改导入语句，通过分层调整VSCode相关配置，即可让自动导入行为匹配指定的全路径导入要求，可根据实际开发场景选择对应配置方案：

方案1：适配原生TypeScript自动导入（VSCode默认能力，无额外插件依赖） #

• 核心实现逻辑是调整TypeScript语言服务的模块扫描规则，跳过@material-ui/core顶层入口的匹配优先级，优先识别每个组件独立入口下的默认导出：
  1. 修改项目根目录下的tsconfig.json配置，在compilerOptions字段中确认开启如下配置：

     {
       "compilerOptions": {
         "moduleResolution": "node"
       }
     }
     

  2. 打开VSCode设置面板（快捷键Ctrl+,/Cmd+,），搜索TypeScript > Preferences: Import Module Specifier，将选项值设置为non-relative，该规则会让自动导入优先生成非相对路径的模块引用，而非就近匹配的相对路径导入。
  3. 屏蔽顶层入口的自动导入匹配优先级：在VSCode设置中找到Typescript > Preferences: Auto Import File Exclude Patterns配置项，添加排除规则**/node_modules/@material-ui/core/index.d.ts。配置完成后，TS在扫描可自动导入的模块时，将不会把顶层入口文件里导出的所有命名组件作为可选导入选项，只会扫描每个组件独立路径下的默认导出，最终生成的导入语句会自动匹配import Button from "@material-ui/core/Button"的格式。

  配置完成后需要重启TS语言服务生效：按下Ctrl+Shift+P/Cmd+Shift+P调出命令面板，输入TypeScript: Restart TS Server执行即可。

方案2：适配Volar驱动的Vue项目场景 #

• 如果开发的是Vue项目，VSCode的JS/TS语言服务会被Volar接管，需要同步调整Volar的对应配置规则：
  • 在VSCode设置中搜索Volar > Preferences: Import Module Specifier，将选项值设置为non-relative
  • 在Volar的自动导入排除规则中，添加和上文一致的顶层入口排除项**/node_modules/@material-ui/core/index.d.ts

方案3：适配第三方自动导入插件场景 #

• 如果使用unplugin-auto-import、Auto Import - ES6/TS等第三方自动导入插件完成代码补全，可直接在插件配置中自定义导入模板，实现最高优先级的路径规则控制：
  • 以unplugin-auto-import为例，在插件配置项中为每个Material-UI组件绑定对应的全路径导入规则：

    {
      imports: {
        '@material-ui/core/Button': 'Button',
        '@material-ui/core/TextField': 'TextField',
        // 逐组件补充对应全路径规则即可
      }
    }
    

  • 该配置生成的导入路径完全不受语言服务默认规则影响，会严格匹配自定义的全路径格式。

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