Is sort imports by length supported?

[sarat1669]

Is it possible to sort by length along with grouping?

Before:

import Head from "next/head";
import AuthModal from '../../../../../components/Auth/AuthModal';
import { useRouter } from 'next/router';
import Footer2 from "../../../../../components/Footer/Footer2";
import Breadcrumbs from '../../../../../components/Breadcrumbs';
import ImageExplorer from '../../../../../components/brands/Style/ImageExplorer';
import HeaderBrands from "../../../../../components/Header/HeaderBrands";
import moment from 'moment';
import * as StyleCatalogService from '../../../../../services/style-catalog.service';
import { SuperExpandedStyle as IStyle } from '../../../../../types';
import React, { FC, ReactNode, useState } from "react";

After:

import moment from 'moment';
import Head from "next/head";
import { useRouter } from 'next/router';
import React, { FC, ReactNode, useState } from "react";

import Footer2 from "../../../../../components/Footer/Footer2";
import Breadcrumbs from '../../../../../components/Breadcrumbs';
import AuthModal from '../../../../../components/Auth/AuthModal';
import { SuperExpandedStyle as IStyle } from '../../../../../types';
import HeaderBrands from "../../../../../components/Header/HeaderBrands";
import ImageExplorer from '../../../../../components/brands/Style/ImageExplorer';
import * as StyleCatalogService from '../../../../../services/style-catalog.service';

[JounQin]

Not now. I'm personally fine with a PR for this proposal.

[ljharb]

Related to #2401, perhaps.

By length of what? The import names list? The specifier? Both?

It seems like it would be a supremely terrible user experience to have to resort your imports any time you add, remove, or rename a default or named import. I'm not sure I see the value of this sorting mode.

[JounQin]

@ljharb I guess it should be the length of the importee path, "../../../../../components/Footer/Footer2" for example.

[ljharb]

If it's the length of the specifier, then the lines will still not be in a nice aesthetic pyramid (due to varying lengths of the specifiers), so what's the point of that sorting method?

[JounQin]

I reread the issue content, it seems to be the whole length of the import statement.

[JounQin]

It seems like it would be a supremely terrible user experience to have to resort your imports any time you add, remove, or rename a default or named import. I'm not sure I see the value of this sorting mode.

It seems to be true to me now.

But I was finding a rule to ensure the order of import names list, so that it could be easier reduce conflict on merging. (I don't remember if there is already a rule proposal for it, if not I'd like to create one. HDYT?)

And for this issue, I agree we don't want to resort when modifying the import statement.

And also, it is hard to tell what is the whole length to be, it can be different by modified from other formatter and rules, then it makes it difficult to be stable fixed. Or for the worst part, it could be always unstable for some cases.

So I think the proposed rule should be rejected.

[ljharb]

I think eslint's own https://eslint.org/docs/latest/rules/sort-imports rule handles that.

Seems like all (three) of us are in agreement.

[JounQin]

@ljharb Does sort-imports support TypeScript?

[ljharb]

If not, I'd expect the TS eslint plugin to provide a replacement.