配置ESLint与Prettier实现VS Code保存时自动修复import/no-duplicates错误

问题说明 #

我在VS Code中已安装ESLint和Prettier扩展，开启了「Editor: Format on Save」选项，其他错误都能在保存时自动修复，但import/no-duplicates错误始终无法自动修复。尝试修改.prettierrc和.eslintrc.json后问题仍存在，求正确配置实现该错误的自动修复。

当前配置文件 #

.eslintrc.json #

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "next/core-web-vitals",
    "plugin:react/recommended",
    "airbnb",
    "plugin:@next/next/recommended",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "prettier",
    "import"
  ],
  "rules": {
    "prettier/prettier": ["error"],
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "react/jsx-props-no-spreading": "off",
    "import/extensions": "off",
    "import/no-unresolved": [2, {"ignore": ["^@/", "^~~/", "^/"]}],
    "import/no-duplicates": "error"
  }
}

.prettierrc #

{
  "singleQuote": true,
  "importOrder": ["^[./]", "^components/(.*)$", "^@/" ],
  "importOrderSeparation": true, 
  "importOrderSortSpecifiers": true 
}

解决步骤 #

1. 配置VS Code的自动修复触发规则
   打开VS Code设置（快捷键Ctrl+,），搜索editor.codeActionsOnSave，确保配置包含ESLint自动修复：

   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
     "source.organizeImports": true // 可选，辅助整理导入结构
   }
   

   只依赖「Format on Save」可能只会触发Prettier，而import/no-duplicates是ESLint规则，需要明确让ESLint来处理修复。

2. 修改ESLint规则的修复参数
   在.eslintrc.json的rules里，把import/no-duplicates的配置改成带修复选项的形式：

   "import/no-duplicates": ["error", { "prefer-inline": false }]
   

   这个配置允许ESLint自动合并重复的导入语句，默认情况下该规则的修复功能需要显式启用这个参数。

3. 检查依赖与扩展状态

   • 你的Prettier配置用到了importOrder，这依赖@trivago/prettier-plugin-sort-imports插件，确认已安装：

     npm install @trivago/prettier-plugin-sort-imports --save-dev
     

   • 重启VS Code，确保ESLint和Prettier扩展在当前工作区正常启用（可通过左下角状态栏的ESLint图标检查）。

4. 验证修复效果
   写入一段重复导入的测试代码：

   import Header from '@/components/Header';
   import Header from '@/components/Header';
   

   保存文件，若代码自动合并为单个导入，说明配置生效。

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