prettier-plugin-sort-imports

prettier-plugin-sort-imports copied to clipboard

Add the possibility to control the separation of import groups as mentioned in #36

Motivation: You want to move "React imports" always to the top and only add a separator between node_modules imports and local imports.

import thirdParty from 'third-party';
import React, { FC } from 'react';
import {localstuff} from '../localstuff';
import otherthing from '@core/otherthing';
export const bla = "..."

should be formatted as

import React, { FC } from 'react';
import thirdParty from 'third-party';

import otherthing from '@core/otherthing';
import { localstuff } from '../localstuff';

export const bla = "..."

You can do this by specifying empty strings in importOrder in .prettierrc:

{
 "importOrder": [
    "^react",
    "^(?!(react|@core/))\\w+",
    "",  // use empty strings to separate groups with empty lines
    "^@(core|ui)/",
    "^."
  ]
}

Hi @ayusharma, any feedback highly appreciated. Is there any chance that this PR gets accepted or should I use a fork?

Hi @atombrenner, I really appreciate your efforts here. Sorry, We do not agree with this approach, This plugin's idea is to keep the separation between only third and local imports. Please proceed with your fork. I do not think this implementation fulfil the general idea.

I'll re-open this PR due to the fact that it can help a lot of people and solve lot's of issues. Considering v3, the idea is to either add new special words or options to the current one to create groupings.

This PR gives more flexibility and does not break previous behaviours. (unless you put empty lines)

Any chance we can get this merged soon 🙏

For those who need this, it has been released in a fork, https://github.com/IanVS/prettier-plugin-sort-imports/releases/tag/v3.4.0.

You can use regex for grouping specific libraries like => importOrder: ['((^|, )(react|react-native))+$', '<THIRD_PARTY_MODULES>', ... ],

It's clear there's a fair amount of support for this one, any ideas on ETA?