ESLint plugin import not sorting properly

Question

I am trying to sort my imports in my Angular application. I installed and configured eslint-plugin-import but it seems not working or I'm doing something incorrectly

I want to sort my imports like this:

1. All angular imports
2. All RxJS imports
3. All other libraries (don't have proper pattern yet)
4. My internal library
5. All relative paths to components (fe. ../component, ./component)

For this example I used existing component with dummy imports in random order to check if eslint --fix works. I paste it below:

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';

It should look like that:

// 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';

But instead after eslint --fix file-name it looks something like that:

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';

It's one of various examples and in other files it may look different but the fact is that sorting is not working properly. Below I paste my configuration for this:

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"]
        }
    }
}
...

Also worth to mention is that I tried various thing in pathGroups' pattern, fe. minimatch pattern **/@angular/**/* or regex ^@angular\/* but nothing seems to work for me

Additional information:

Code editor: Visual Studio Code

I have repo which include internal library and two other applications (that's why I have 3 tsconfig.json files). I tested this and other configuration on specific file and on whole app. Same result

I'll be glad for help. Fighting with this for days and can't even hook to something, no progress :/

Answer 1

Okay, I solved this. The problem was that eslint couldn't resolve typescript aliases and that's why it sorts imports randomly, so I needed to install eslint-import-resolver-alias and re-configure .eslintrc.json config

Now it looks like that:

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"]
        }
    }
}
...

And from now it's working fine based on example above