配置eslint-plugin-simple-import-sort后React导入仍触发排序错误求助

我在配置.eslint.js文件时，通过eslint-plugin-simple-import-sort将React相关包设置为首个导入分组，但即便React导入语句已位于文件顶部，仍触发报错：

Line 1:1: Run autofix to sort these imports! simple-import-sort/imports

参考网上教程后仍未找到问题所在，相关代码及配置如下：

导入代码：

import React, { useRef, useState } from "react";

.eslint.js配置：

module.exports = {
    env: {
      ...
    },
    extends: [
      ...
    ],
    parser: "@babel/eslint-parser",
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        ecmaVersion: 6,
        sourceType: "module",
        requireConfigFile: false,
        "babelOptions": {
            "presets": ["@babel/preset-react"]
        },
        "sourceType": "module"
    },
    plugins: [
        "react",
        "import",
        "simple-import-sort"
    ],
    root: true,
    rules: {
        ...
        "simple-import-sort/imports": "error",
        "simple-import-sort/exports": "error"
    },
    settings: {
        react: {
            version: "detect"
        }
    },
    "overrides": [
        {
            "files": [
                "*.js",
                "*.jsx",
            ],
            "rules": {
                "simple-import-sort/imports": [
                    "error",
                    {
                        "groups": [
                            // Packages `react` related packages come first.
                            ["^react"],
                        ]
                    }
                ]
            }
        }
    ]
};

问题原因 #

你的overrides配置中仅定义了["^react"]这一个导入分组，但simple-import-sort要求所有导入必须匹配到至少一个分组。即使当前只有React的导入，插件也会因为分组规则不完整，判定导入排序不符合要求，从而抛出错误。

解决方法 #

1. 补充完整的导入分组规则，覆盖所有可能的导入类型，示例如下：

   "overrides": [
       {
           "files": ["*.js", "*.jsx"],
           "rules": {
               "simple-import-sort/imports": [
                   "error",
                   {
                       "groups": [
                           // React 及其他第三方包放在最前面
                           ["^react", "^@?\\w"],
                           // 项目内部模块（如@别名、components目录）
                           ["^(@|components)(/.*)?"],
                           // 父级目录导入
                           ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
                           // 同级目录导入
                           ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
                           // 样式文件导入
                           ["^.+\\.s?css$"]
                       ]
                   }
               ]
           }
       }
   ]
   

2. 确保overrides中的simple-import-sort/imports规则是完整的分组定义，不要只保留React一项。
3. 运行eslint --fix命令让插件自动调整导入排序，验证报错是否消失。

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