Custom sort order
williamboman opened this issue · comments
I think it would be nice to be able to add a custom sort function to allow for a customized sort order.
This is an interesting idea. Can you help me understand your use case a little more?
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
Yes, examples would be useful!
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.
Do you have the groupImports
option turned on, @williamboman? And importDevDependencies
as well?
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 #508 (comment) - but it's way more than what I often need)
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.