如何配置VSCode同名符号自动导入，指定正确的导入源？

可以通过以下几种方式配置正确的导入源，满足你的需求：

1. 配置路径映射强制导入源 #

在项目的tsconfig.json（TypeScript项目）或jsconfig.json（JavaScript项目）中添加路径映射，让编辑器优先识别makeStyles的正确导入位置：

{
  "compilerOptions": {
    "paths": {
      "makeStyles": ["@mui/styles/makeStyles"],
      "@mui/styles/makeStyles": ["@mui/styles/makeStyles"]
    }
  }
}

配置后，VSCode的自动导入功能会优先选择@mui/styles作为makeStyles的导入源。

2. 用ESLint规则限制错误导入 #

通过ESLint规则禁止从@mui/material导入makeStyles，同时强制使用正确的源：
安装eslint-plugin-import后，在.eslintrc.json中添加规则：

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "@mui/material",
            "importNames": ["makeStyles"],
            "message": "请从@mui/styles导入makeStyles"
          }
        ]
      }
    ]
  }
}

这样不仅能阻止错误导入，还会在编码时给出提示，配合editor.codeActionsOnSave的ESLint修复功能，能自动修正错误导入。

3. 自定义代码片段快速插入正确导入 #

如果不想依赖自动导入，可以在VSCode中创建自定义代码片段，快速插入正确的导入语句：

1. 打开「文件>首选项>用户代码片段」，选择对应语言（如JavaScript或TypeScript）
2. 添加以下片段：

{
  "Import makeStyles from @mui/styles": {
    "prefix": "makestyles",
    "body": ["import { makeStyles } from '@mui/styles';"],
    "description": "插入makeStyles的正确导入语句"
  }
}

之后输入makestyles即可快速生成正确的导入。

关于你提到的「参考其他文件的符号导入源」：VSCode的自动导入默认会优先选择项目中已广泛使用的导入源，如果项目内已有大量从@mui/styles导入的makeStyles仍出现错误导入，大概率是@mui/material的类型定义优先级更高，此时用路径映射的方法可以覆盖编辑器的默认识别逻辑。

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