Make external package and internal components folder as a separate group

[szulcus]

I have this eslint configuration:

    "import/order": [
      "error",
      {
        "pathGroups": [
          {
            "pattern": "@frontend/components",
            "group": "internal",
            "position": "after"
          },
          {
            "pattern": "~/components/**",
            "group": "internal",
            "position": "after"
          }
        ],
        "groups": [
          "builtin",
          "external",
          "internal",
          "unknown",
          "parent",
          "sibling",
          "index",
          "object",
          "type"
        ]
      }
    ]

I would like all my imports of @frontend/components and ~/components/ ** to be treated as a separate group. How can I do this?

[ljharb]

Can you be more specific about what code you’d like, that this config considers incorrect?

[szulcus]

Can you be more specific about what code you’d like, that this config considers incorrect?

Of course. I want to have all the imports sorted by default, except for components which will always have a line before an empty one, and will be in ~/components/** or @frontend/components. For example:

I have temporarily disabled the option, so it does not report bugs, but generally screams that things from @frontend/components should be above ~/store.

[ljharb]

How come your pathGroups don't account for ~/**, since those are all internal?

Regardling newlines, you may also be interested in the pathGroups.distinctGroup option added in #2395, that will be in the next release.

[szulcus]

How come your pathGroups don't account for ~/**, since those are all internal?

Regardling newlines, you may also be interested in the pathGroups.distinctGroup option added in #2395, that will be in the next release.

I think I do not understand. Is it about something like that?

If so, it still doesn't work 😅

[ljharb]

If you can provide a PR with a failing test case, I can likely solve it more quickly.

[szulcus]

Unfortunately the project and package are reserved, but I don't see any reason to reproduce it. I just want to have all the components separate. In Vue 3, in the <script setup> tag, there is no need to define the components, so I want to have them all in one place.

[ljharb]

@szulcus the reason is that without a reproduction case or regression tests, it can never be fixed - especially since I don't use Vue myself, so I'd have no idea how to set up a test case.

[szulcus]

@szulcus the reason is that without a reproduction case or regression tests, it can never be fixed - especially since I don't use Vue myself, so I'd have no idea how to set up a test case.

I still think it's a pattern bug and doesn't require reproduction, but if you really need it, I created it for you:
Nuxt Bridge ESLint import order reproduction.zip

yarn
yarn dev

File path: ~/pages/index.vue
Environment: Visual Studio Code + Volar extension