ESLint 按包名称对导入进行排序

Question

我正在尝试按包名称对导入进行排序，但根据文档中提供的内容，似乎不支持它。

有办法让它发挥作用吗？

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

上面的代码失败是因为它希望BrowserModule位于第一行。但我希望这被认为是正确的，因为我想按包名称订购。

这是我的 ESLint 配置。

"sort-imports": [
            "error",
            {
                "ignoreCase": true,
                "ignoreDeclarationSort": false,
                "ignoreMemberSort": false,
                "memberSyntaxSortOrder": [
                        "none",
                        "all",
                        "multiple",
                        "single"
                ],
                "allowSeparatedGroups": true
            }
        ],

Answer 1

我正在使用eslint-plugin-import并且它支持此类功能。贴出我的配置供参考。它将强制 React 导入始终是第一个，然后是开头的导入@my_org，然后根据组的顺序配置其余的

"import/order": [
      "error",
      {
        "alphabetize": {
          caseInsensitive: true,
          order: "asc",
        },
        "groups": ["external", "builtin", "parent", ["sibling", "index"]],
        "newlines-between": "never",
        "pathGroups": [
          {
            group: "external",
            pattern: "react",
            position: "before",
          },
          {
            group: "external",
            pattern: "@my_org/**",
            position: "after",
          },
        ],
        "pathGroupsExcludedImportTypes": ["builtin"],
      },
    ],

Answer 2

基本 ESLint 规则只是不支持它 - 它按名称排序。

您可以使用不同的排序规则，例如此处的排序规则。

https://www.npmjs.com/package/eslint-plugin-simple-import-sort