Order local files by relative path

[nunocasteleira]

Discussed in https://github.com/trivago/prettier-plugin-sort-imports/discussions/126

^{Originally posted by nunocasteleira February 4, 2022} With "importOrder": ["^react$", "^react", "<THIRD_PARTY_MODULES>", "^@.*", "^[./]"] I get the following:

import React from 'react';
import { useHistory } from 'react-router-dom';
import classNames from 'classnames';
import { Container, Link, Typography } from '@material-ui/core';
import { ReactComponent as Illustration} from '../../../../assets/svg/illustration.svg';
import { RoutePaths } from '../../../App/Router/RouterConstants';
import Button from '../../../Shared/Button/Button';
import useStyles from './Component.style';

I would like to get the following:

import React from 'react';
import { useHistory } from 'react-router-dom';
import classNames from 'classnames';
import { Container, Link, Typography } from '@material-ui/core';
import useStyles from './Component.style';
import { RoutePaths } from '../../../App/Router/RouterConstants';
import Button from '../../../Shared/Button/Button';
import { ReactComponent as Illustration} from '../../../../assets/svg/illustration.svg';

What can I do? Thanks!

[fbartho]

I too would expect relative-paths to have a consistent ordering.

I think there's a secondary ask above where @nunocasteleira may also want control over how the relative-path specifiers compare to each other (./Foo should it be above or below ../Bar?).

[nunocasteleira]

@fbartho is absolutely right. I would like ./Foo to come before ../Bar, and then come ../../Bar and ../../Foo.

[tanmayairbase]

I guess we could do "^[.]\\/", "^\.\.\\/", instead of (or before) "^[./]"?

[nunocasteleira]

Thanks for your comment, @tanmayairbase, but it doesn't do what I'm looking for. "^\.\.\\/" this escaped string throws an error and that approach relies on specifying every relative path ad infinity.

[condemil]

You can separate imports that starts with ./ and ../ into two separate groups:

"importOrder": ["^react$", "^react", "<THIRD_PARTY_MODULES>", "^@.*", "^./(.*)", "^../(.*)"]

[jgarciamccausland]

@nunocasteleira did you find a solution that works?

[nunocasteleira]

@nunocasteleira did you find a solution that works?

no, I didn't :/

[jgarciamccausland]

So we ended up using somewhat of a workaround with: "importOrder": ["^react$", "^react", "<THIRD_PARTY_MODULES>", "^@.*$", "^./(.*)", "^[./]"],

It will have ./ imports before ../ but still have nested ../../ imports backward. So something like the following:

./Bar
./Foo
../../../Bar
../../../Foo
../../Bar
../../Foo
../Bar
../Foo

Not ideal but we decided to roll with it for now.

[skyf0l]

Still no mitigations yet?