ESLint 插件导入未正确排序

Question

我正在尝试对我的 Angular 应用程序中的导入进行排序。我安装并配置了eslint-plugin-import但它似乎不起作用或者我做错了什么

我想像这样对导入进行排序：

1. 所有角度导入
2. 所有 RxJS 导入
3. 所有其他库（还没有正确的模式）
4. 我的内部图书馆
5. 组件的所有相对路径（fe.../组件、./组件）

在这个示例中，我以随机顺序使用带有虚拟导入的现有组件来检查 eslint --fix 是否有效。我把它粘贴在下面：

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import {
    SomeComponentOne,
    SomeComponentTwo,
    SomeComponentThree,
    SomeComponentFour,
} from '@internal-library';
import { SomeModelOne } from './model/some-model-one';
import { SomeModelTwo } from './model/some-model-two';
import { SomeModelThree } from './model/some-model-three';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { SomeComponentOne } from './components/some-component-one';
import { SomeComponentTwo } from './components/some-component-two';
import { map, tap } from 'rxjs/operators';
import { SomeComponentThree } from '../components/some-component-three';
import { SomeComponentFour } from './components/some-component-four';
import { AboutMe } from '../models/about-me';
import { SomeModelFour } from './model/some-model-four';
import { SomeComponentFive } from './components/some-component-five';
import { HttpResponse } from '@angular/common/http';

它应该看起来像这样：

// 1. All angular imports
import { HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';

// 2. All RxJS imports
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

// 3. All other libraries imports
import { TranslateModule } from '@ngx-translate/core';

// 4. My internal library
import {
    SomeComponentOne,
    SomeComponentTwo,
    SomeComponentThree,
    SomeComponentFour,
} from '@internal-library';

// 5. All relative imports
import { AboutMe } from '../models/about-me';
import { SomeComponentThree } from '../components/some-component-three';
import { SomeModelOne } from './model/some-model-one';
import { SomeModelTwo } from './model/some-model-two';
import { SomeModelThree } from './model/some-model-three';
import { SomeComponentFour } from './components/some-component-four';
import { SomeModelFour } from './model/some-model-four';
import { SomeComponentFive } from './components/some-component-five';
import { SomeComponentOne } from './components/some-component-one';
import { SomeComponentTwo } from './components/some-component-two';

但在eslint --fix file-name它看起来像这样之后：

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

import { MatSlideToggleModule } from '@angular/material/slide-toggle';

import { MatTooltipModule } from '@angular/material/tooltip';

import { TranslateModule } from '@ngx-translate/core';

import { map, tap } from 'rxjs/operators';

import { HttpResponse } from '@angular/common/http';

import {
    SomeComponentOne,
    SomeComponentTwo,
    SomeComponentThree,
    SomeComponentFour,
} from '@internal-library';

import { SomeComponentFive } from './components/some-component-five';
import { SomeComponentOne } from './components/some-component-one';
import { SomeComponentTwo } from './components/some-component-two';

import { SomeModelThree } from './model/some-model-three';
import { SomeComponentFour } from './components/some-component-four';


import { SomeModelFour } from './model/some-model-four';
import { AboutMe } from '../models/about-me';
import { SomeComponentThree } from '../components/some-component-three';
import { SomeModelOne } from './model/some-model-one';
import { SomeModelTwo } from './model/some-model-two';

这是各种示例之一，在其他文件中它可能看起来不同，但事实是排序无法正常工作。下面我粘贴我的配置：

package-json：

...
"devDependencies": {
    "@angular-eslint/builder": "13.2.1",
    "@angular-eslint/eslint-plugin": "13.2.1",
    "@angular-eslint/eslint-plugin-template": "13.2.1",
    "@angular-eslint/schematics": "13.2.1",
    "@angular-eslint/template-parser": "13.2.1",
    "@typescript-eslint/eslint-plugin": "5.17.0",
    "@typescript-eslint/parser": "^5.17.0",
    "eslint": "^8.12.0",
    "eslint-import-resolver-typescript": "^3.2.7",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsdoc": "latest",
    "eslint-plugin-prefer-arrow": "latest",
    "eslint-plugin-unused-imports": "^2.0.0",
    "typescript": "~4.6.3"
}
...

.eslintrc.json：

...
"parser": "@typescript-eslint/parser",
"parserOptions": {
    "project": ["tsconfig.json", "e2e/tsconfig.json"],
    "createDefaultProgram": true
},
"extends": [
    "plugin:import/typescript",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/recommended",
    "plugin:@angular-eslint/ng-cli-compat",
    "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
    "plugin:@angular-eslint/template/process-inline-templates"
],
"plugins": ["@angular-eslint", "unused-imports", "import"],
"rules": {
    "unused-imports/no-unused-imports": "error",
    "import/no-unresolved": "error",
    "import/namespace": ["error", { "allowComputed": true }],
    "import/order": [
        "error",
        {
            "newlines-between": "always-and-inside-groups",
            "groups": ["external", "internal", ["parent", "sibling", "index"], "builtin"],
            "pathGroups": [
                {
                    "pattern": "@angular/**",
                    "group": "external"
                },
                {
                    "pattern": "(rxjs|rxjs/**)",
                    "group": "external"
                },
                {
                    "pattern": "@ngx-translate/**",
                    "group": "external"
                }
            ],
            "pathGroupsExcludedImportTypes": ["type", "object"]
        }
    ]
},
"settings": {
    "import/internal-regex": "@internal-library",
    "import/external-module-folders": ["node_modules"],
    "import/parsers": {
        "@typescript-eslint/parser": [".ts"]
    },
    "import/resolver": {
        "typescript": {
            "alwaysTryTypes": true,
            "project": [
                "tsconfig.json",
                "projects/first-application/e2e/tsconfig.json",
                "projects/second-application/e2e/tsconfig.json"
            ]
        },
        "node": {
            "extensions": [".ts"]
        }
    }
}
...

另外值得一提的是，我在 pathGroups 模式 fe 中尝试了各种方法。minimatch 模式**/@angular/**/*或正则表达式^@angular\/*，但似乎对我不起作用

附加信息：

代码编辑器：Visual Studio Code

我有一个存储库，其中包括内部库和其他两个应用程序（这就是我有 3 个tsconfig.json文件的原因）。我在特定文件和整个应用程序上测试了此配置和其他配置。结果相同

我很乐意提供帮助。与此斗争了好几天，甚至无法挂钩某些东西，没有任何进展：/

Answer 1

好吧，我解决了这个问题。问题是 eslint 无法解析打字稿别名，这就是它随机排序导入的原因，所以我需要安装eslint-import-resolver-alias并重新配置.eslintrc.json配置

现在看起来是这样的：

package.json

...
"devDependencies": {
    "@angular-eslint/builder": "13.2.1",
    "@angular-eslint/eslint-plugin": "13.2.1",
    "@angular-eslint/eslint-plugin-template": "13.2.1",
    "@angular-eslint/schematics": "13.2.1",
    "@angular-eslint/template-parser": "13.2.1",
    "@typescript-eslint/eslint-plugin": "5.17.0",
    "@typescript-eslint/parser": "^5.17.0",
    "eslint": "^8.12.0",
    "eslint-import-resolver-alias": "^1.1.2", // <-- added this package
    "eslint-import-resolver-typescript": "^3.2.7",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsdoc": "latest",
    "eslint-plugin-prefer-arrow": "latest",
    "eslint-plugin-unused-imports": "^2.0.0",
    "typescript": "~4.6.3"
}
...

.eslintrc.json

...
"parser": "@typescript-eslint/parser",
"parserOptions": {
    "project": ["tsconfig.json", "e2e/tsconfig.json"],
    "createDefaultProgram": true
},
"extends": [
    "plugin:import/typescript",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/recommended",
    "plugin:@angular-eslint/ng-cli-compat",
    "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
    "plugin:@angular-eslint/template/process-inline-templates"
],
"plugins": ["@angular-eslint", "unused-imports", "import"],
"rules": {
    "import/no-unresolved": "error",
    "import/namespace": ["error", { "allowComputed": true }],
    "import/order": [
        "error",
        {
            "newlines-between": "always", // <-- Changed configuration here to get proper imports order I want
            "groups": [ // <-- Changed configuration here to get proper imports order I want
                "internal", // angular imports - configured in 'import/internal-regex'
                "unknown", // rxjs imports
                "external", // all libraries imports - configured in 'import/external-module-folders'
                "builtin", // internal-library imports
                ["parent", "sibling", "index"] // relative paths
            ],
            "pathGroups": [ // <-- Changed configuration here to get proper imports order I want
                {
                    "pattern": "rxjs",
                    "group": "unknown"
                },
                {
                    "pattern": "rxjs/**",
                    "group": "unknown"
                },
                {
                    "pattern": "@internal-library",
                    "group": "builtin"
                }
            ],
            "pathGroupsExcludedImportTypes": ["type", "object"]
        }
    ]
},
"settings": {
    "import/internal-regex": "@angular/", // <-- Changed configuration here to get proper imports order I want
    "import/external-module-folders": ["node_modules"],
    "import/parsers": {
        "@typescript-eslint/parser": [".ts"]
    },
    "import/resolver": {
        "alias": true, // <-- Added this line to handle TS aliases
        "typescript": {
            "alwaysTryTypes": true,
            "project": [
                "tsconfig.json", 
                "projects/first-application/e2e/tsconfig.json", 
                "projects/second-application/e2e/tsconfig.json"
            ]
        },
        "node": {
            "extensions": [".ts"]
        }
    }
}
...

从现在开始，根据上面的例子，它工作得很好