如何修复ES Lint自动修复警告？构建时本地导入告警求助

问题根源 #

你遇到的本地导入警告，是因为启用了simple-import-sort插件的simple-import-sort/imports和simple-import-sort/exports规则。这些规则要求导入/导出语句必须按照预设逻辑排序（比如第三方包在前、本地文件在后，或按路径、字母顺序分组），你的代码导入顺序不符合规则，因此触发了警告。

自动修复方法 #

命令行一键修复 #

在项目根目录执行对应命令，ESLint会自动修复所有可自动修复的警告（包括导入排序问题）：

• npm用户：npm run lint -- --fix
• yarn用户：yarn lint --fix
• 直接调用ESLint：npx eslint . --fix

IDE实时修复 #

如果使用VS Code，安装ESLint插件后，在设置中开启「Editor: Fix On Save」，保存文件时会自动修复导入排序问题。

自定义导入排序规则（可选） #

如果默认排序逻辑不符合需求，可以在.eslintrc.json中自定义分组规则，示例如下：

{
  "extends": "next",
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/imports": [
      "warn",
      {
        "groups": [
          // 优先排序react、next等核心库
          ["^react", "^next"],
          // 其他第三方库
          ["^[a-z]"],
          // 本地绝对路径导入（如@/开头的路径）
          ["^@/"],
          // 相对路径导入
          ["^\\./", "^\\../"]
        ]
      }
    ],
    "simple-import-sort/exports": "warn",
    "react-hooks/exhaustive-deps": "error"
  }
}

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