Add a feature which warns if a path can be resolved to something less complex

[alasdairhurst]

For example, if have an import x from
'../../../x/y/z' and it can be written more consisely: import x from 'z' (if you are in '/x/y') there should be a rule letting me know. This should be auto-fixable as well.
A better example for this could be when aliases are used and you have things like this all around your tests:

import * as authActions from '../../../../../src/components/pages/authentication/actions';

since the components dir is in my webpack config as an alias, it should warn me because i can write

import * as authActions from 'components/pages/authentication/actions';

instead.

[alasdairhurst]

If this gets a good response, i wouldn't mind implementing it myself.

[ljharb]

Duplicate of #776.

[alasdairhurst]

@ljharb almost, but not the same use case. #776 does not mention anything to do with aliases. In this case the path is perfectly valid, but i can still write it shorter. #776 seems to be about figuring out valid paths from invalid ones.

[ljharb]

#776 is about warning when excessive directory traversals are used in valid paths only.

So you want a linting rule that forces use of webpack aliases when they are configured?

I'm -1 on that rule mainly because I think webpack aliases are a horrible idea, but I won't block if other collabs think it would be useful.

[alasdairhurst]

@ljharb I wouldn't say that it would be forcing webpack aliases. It's perfectly possible to have a webpack alias which is a longer path than the relative path. In this case the relative path should be preferred.

use-shortest-path or something? I'm sure configuration could be added to choose if (webpack) aliases are tested against or not.

[ljharb]

Is there any utility for this rule when not using webpack aliases?

[alasdairhurst]

@ljharb not that i know of. Although i just started looking for one today.

[benmosher]

I'm a minus one on this as well. Sounds like a job for a Webpack-specific ESLint plugin. (which could totally use eslint-module-utils + the Webpack resolver, no need to duplicate those)

Thanks!

[danny-andrews]

@alasdairhurst You can force alias use by restricting all uses of ../* using the core rule no-restricted-imports! See my comment here!

Note: this won't handle enforcing using one alias over another to make the path shorter. E.g. my-app/components/MyComponent vs components/MyComponent, but I think using multiple aliases is a bad idea anyway and causes more trouble than its worth. In my experience, using one alias at your src root gives you the most bang for your buck.