ESLint原生sort-imports规则无法按包名排序导入，如何解决？

ESLint 原生sort-imports规则默认按照导入的标识符名称排序，而非你需要的*导入源（包名）*排序。你示例中BrowserModule首字母排序早于NgModule，因此原生规则要求将@angular/platform-browser的导入行放在首位，和你的预期不符。原生规则本身不支持按包名排序的能力，需要使用扩展插件实现。

方案一：使用 eslint-plugin-import 插件的 import/order 规则（全项目通用） #

这是前端生态中最常用的导入排序方案，支持按包名字典序排序、自定义导入分组等灵活能力，配置步骤如下：

• 安装插件：
  npm install eslint-plugin-import --save-dev
• 修改 ESLint 配置：

1. 关闭原生sort-imports的声明排序校验避免冲突，将现有配置中的ignoreDeclarationSort改为true，或直接移除原生sort-imports规则配置
2. 新增import/order规则配置：

"plugins": ["import"],
"rules": {
  "import/order": [
    "error",
    {
      "alphabetize": {
        "order": "asc",
        "caseInsensitive": true
      },
      "newlines-between": "always",
      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"]
    }
  ]
}

上述配置会自动按导入源的字典序排序，你的示例中@angular/core会因为包名排序早于@angular/platform-browser被判定为合法。newlines-between和groups参数可根据你的业务需求调整，用来控制不同类型导入（内置模块、第三方模块、项目内部模块等）的排序和换行规则。

方案二：使用 @typescript-eslint 扩展规则（仅 TypeScript 项目适用） #

如果你的项目是 TypeScript 栈，可以使用@typescript-eslint提供的sort-imports规则，它在原生规则基础上扩展了按导入源排序的能力，配置步骤如下：

• 安装插件（若已安装可跳过）：
  npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
• 修改 ESLint 配置：

"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"rules": {
  "sort-imports": "off",
  "@typescript-eslint/sort-imports": [
    "error",
    {
      "ignoreCase": true,
      "ignoreDeclarationSort": false,
      "ignoreMemberSort": false,
      "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
      "allowSeparatedGroups": true,
      // 核心配置：指定按导入源排序
      "sortImportsBy": "source"
    }
  ]
}

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