Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

import/order ignores pathGroups order

See original GitHub issue

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:

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:7 (1 by maintainers)

Top GitHub Comments

1reaction

vileencommented, Jan 30, 2022

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

0reactions

yuri-sakharovcommented, Feb 6, 2021

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

Top Results From Across the Web

import/order ignores pathGroups order · Issue #1982 - GitHub

eslint ignores the order in which imports are listed example imports: import React from 'react'; import Test from "components/Test"; ...

eslint import/order breaks down when using typescript aliases

As you can see, I'm using the pathGroups to tell eslint that the proper position of any import that starts with ~/ is...

How to quickly configure ESLint for import sorting

How to quickly configure ESlint for import sorting using sort-imports and eslint-plugin-import with the import/orders rule.

node_modules/eslint-plugin-import/docs/rules/order.md

import/order : Enforce a convention in module import order ... Unassigned imports are ignored, as the order they are imported in may be ......

Rule: ordered-imports - Palantir Open Source

Requires that import statements be alphabetized and grouped. Enforce a consistent ordering for ES6 imports: Named imports must be alphabetized (i.e. “import {A, ......