ESLint 按包名排序导入答案

【问题标题】：ESLint sort imports by package nameESLint 按包名排序导入
【发布时间】：2021-12-15 09:31:42
【问题描述】：

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

有没有办法让它工作？

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
            }
        ],

【问题讨论】：

标签： typescript eslint typescript-eslint

【解决方案1】：

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

您可以使用与此处相同的不同排序规则。

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

【讨论】：

【解决方案2】：

我正在使用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"],
      },
    ],

【讨论】：