Custom sort order

[williamboman]

I think it would be nice to be able to add a custom sort function to allow for a customized sort order.

[lencioni]

This is an interesting idea. Can you help me understand your use case a little more?

[williamboman]

On 📱 so short answer: it's not sorting my imports the way I want it to. I could give you a more thorough explanation with examples later if you want

[lencioni]

Yes, examples would be useful!

[williamboman]

So,

<imports from package "react" specifically>
<imports from 3rd party packages>

<imports from core packages>

<imports from local packages>

is sort of how I want to sort my imports. Preferably with whitespace. Now, with sortImports: true all these are intertwined.

[monovertex]

Do you have the groupImports option turned on, @williamboman? And importDevDependencies as well?

[williamboman]

Do you have the groupImports option turned on, @williamboman? And importDevDependencies as well?

{
  sortImports: true,
  groupImports: true
}

is my configuration when trying this feature.

---

Actually, after playing around a bit with the configuration I noticed that

{
  sortImports: false,
  groupImports: true
}

is good enough for what I want. (it would be nice if I could write my own sorting function to sort things exactly like in https://github.com/Galooshi/import-js/issues/508#issuecomment-410679647 - but it's way more than what I often need)

[nickpresta]

To add, the ideal (for me) is the following sort order:

import React from 'react'; // these should always be first. Prefer React to be first.
import PropTypes from 'prop-types'; // because they're "absolute" packages from node_modules

import { Grid } from '../../something'; // this is a relative import and an "edit distance" of 2 away from my current file. It should be its own group.

import { Button, ButtonTypes, Icon, IconTypes } from '../something'; // this is a relative import and an "edit distance" of 1 away from my current file. It should be its own group

// It would be "fine" to group all imports with an edit distance >0 as well

import Heading from './components/Heading'; // this has a named export and is relative to my current file and an "edit distance" of 0
import List from './components/List'; // same here. The order of `Heading` and `List` doesn't really matter, IMO.

import './styles.scss'; // edit distance of 0 without any value being imported. specifically a stylesheet so I prefer it last.

The case around "edit distance" determining the grouping seems general enough but the specifics around React being first and stylesheets being last are specific to my setup.