Is any way for use Webpack alias like internal path?

[Drezdenozk]

https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md

Seems that only paths like 'src/foo' interpretated like internal.
But if you use Webpack, you can define some "path alias" (in 90% ways it's like '@/....', or '~/....'. It used in many boilerplates). Is there any ways for use Webpack alias as internal? I found only one solutions:

node_modules/eslint-plugin-import/lib/core/importType.js
// change
const externalModuleRegExp = /^\w/;
// to
const externalModuleRegExp = /^(\w)|(@+\/)|(~+\/)/;

[joaovieira]

Same here 👋

#1294 solved it very specifically for @custom/<path> by using the isScoped "hack", but as @Drezdenozk mentioned I use the ~/<path> in multiple projects which are identified as "unknown" (rather than "internal") and ordered at the bottom.

I'd rather not change my aliases because of linting rules, so what do you think is the best approach? Happy to make a PR.

[ljharb]

I’d recommend not using @ not because of linting rules, but because it conflicts with how npm works.

The latest version of this plugin supports specifying an order for “unknown”.

[joaovieira]

@ljharb fantastic! That works for me. Thanks 👍

[mrleblanc101]

The sorting work if I use ~/ but not if I use: @/, can someone help ?
I'm using Nuxt which alias both ~/ and @/ as alias to the source directory.
I've always used @/ and I'd rather not change. https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-alias

This doesnt trigger an error (but it should):

import fr from '@/i18n/fr/plyr.js';
import Plyr from 'plyr';

This trigger and error asking me to put Plyr first (as intended):

import fr from '~/i18n/fr/plyr.js';
import Plyr from 'plyr';

[ljharb]

@mrleblanc101 how do you have the eslint rule configured?

[mrleblanc101]

Yes but it's not changing anything. Maybe my pattern is wrong, I'm not quite sure how this is supposed to work.

'import/order': [
    'error',
    {
        pathGroups: [
            {
                pattern: '@/**',
                group: 'internal',
            },
        ],
    },
],

[ljharb]

What happens if you also group ~/** as "internal?

[mrleblanc101]

@ljharb Whether i have or not the ~/** rule doesn't seem to change anything.
It seem to work either way resulting in this:

'import/order': [
    'error',
    {
        pathGroups: [
            {
                pattern: '~/**',
                group: 'internal',
            },
        ],
    },
],

import Plyr from 'plyr';
import fr from '~/i18n/fr/plyr.js';

[mrleblanc101]

After many trial and error, seems like adding pathGroupsExcludedImportTypes: ['builtin'], did the trick.
I don't know why tho. Just looked at the example in the documentation.

'import/order': [
    'error',
    {
        pathGroups: [
            {
                pattern: '@/**',
                group: 'internal',
            },
        ],
        pathGroupsExcludedImportTypes: ['builtin'],
    },
],