import/order ignores pathGroups order

[grech-ca]

eslint ignores the order in which imports are listed

example imports:

import React from 'react';

import Test from "components/Test";  
import Api from "pages/api";

eslint must throw an error saying that import from "pages/api" must be over "components/Test" and also be separated with a new line but it ignores this

eslint-plugin-import and eslint-import-resolver-typescript are already installed so I'm sure that I made a mistake somewhere, but where?

eslint rule:

"import/order": ["error", {
  "newlines-between": "always-and-inside-groups",
  "groups": ["builtin", "external", "internal"],
  "pathGroups": [
    {
      "pattern": "react",
      "group": "external",
      "position": "before"
    },
    {
      "pattern": "~/**",
      "group": "external",
      "position": "before"
    },
    {
      "pattern": "~/pages/**",
      "group": "internal"
    },
    {
      "pattern": "~/components/**",
      "group": "internal"
    },
    {
      "pattern": "~/startup/**",
      "group": "internal"
    },
    {
      "pattern": "~/hooks/**",
      "group": "internal"
    },
    {
      "pattern": "~/helpers/**",
      "group": "internal"
    },
    {
      "pattern": "~/generated/**",
      "group": "internal"
    },
    {
      "pattern": "~/styles/**",
      "group": "internal"
    }
  ],
  "pathGroupsExcludedImportTypes": ["react"],
  "alphabetize": {
    "order": "asc",
    "caseInsensitive": true
  }
}]

Project structure:

[ljharb]

Your config has ~/pages but your code example just has pages/.

Can you make a repro repo?

[ludwig-pro]

I think there is a bug when ESLint load the config, so config-validator.js :

Configuration for rule "import/order" is invalid:
	Value {"newlines-between":"always","groups":[["builtin","external"],["internal","index","sibling","parent"]],"alphabetize":{"order":"asc","caseInsensitive":true},"pathGroups":[{"pattern":"~/**","group":"internal"}],"pathGroupsExcludedImportTypes":[]} should NOT have additional properties.

[ludwig-pro]

maybe related to #1682

[yuri-sakharov]

Doesn't work .scss order

"import/order": ["error", {
            "groups": ["external", ["internal", "parent", "sibling", "index"], "unknown"],
            "pathGroups": [
                {
                    "pattern": "*.scss",
                    "patternOptions": { "matchBase": true },
                    "group": "unknown",
                    "position": "after"
                }
            ],
            "pathGroupsExcludedImportTypes": [],
            "newlines-between": "always"
        }],

result is still same

import './AvatarsGroup.scss';
import { Avatar } from 'components/Avatar';
import { PlusIndicator } from 'components/PlusIndicator';

Any ideas?

[ludwig-pro]

look at the ESLint output in vscode if there is any mistake with your config.

for me, autofix works again after cleaning extends / plugins (there are conflits somethings)

[yuri-sakharov]

@ludwig-pro thank you for response and looks like there is issues with it #1239

[vileen]

Doesn't work .scss order

"import/order": ["error", {
            "groups": ["external", ["internal", "parent", "sibling", "index"], "unknown"],
            "pathGroups": [
                {
                    "pattern": "*.scss",
                    "patternOptions": { "matchBase": true },
                    "group": "unknown",
                    "position": "after"
                }
            ],
            "pathGroupsExcludedImportTypes": [],
            "newlines-between": "always"
        }],

result is still same

import './AvatarsGroup.scss';
import { Avatar } from 'components/Avatar';
import { PlusIndicator } from 'components/PlusIndicator';

Any ideas?

Try this:

{
  pattern: '{.,..}/**/*.scss',
  group: 'object',
  position: 'after',
},

and include warnOnUnassignedImports: true, since those scss (and more) are treated as unassigned files

[Space1nvader]

in one of the answers on stackoverflow it was written:

"After some research, it seems that eslint community does not want to add auto-sorting for unassigned imports due to the fact, that they might depend on import order. That is the reason, why your snippet of pathGroups does not work"

original:
https://stackoverflow.com/questions/69814021/eslint-import-order-rule-does-not-work-with-scss-files

anyway you can use css-modules for fix that problem:
example:
import styles from '../../styles.scss';

[drugoi]

If anyone expires the same error with custom d.ts files for react-select, here is the solution:

    'import/order': [
      'error',
      {
        pathGroups: [
          {
            pattern: 'react-select',
            patternOptions: { matchBase: true },
            group: 'external'
          }
        ],
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'index',
          'sibling',
        ],
      },
    ],

Note the patternOptions parameter for minimatch.