Feature request: disable organize import on specific lines

[danitrod]

I like using the auto organize imports on save feature ("editor.codeActionsOnSave": {"source.organizeImports": true} on settings.json), but I had to disable it for some specific cases for which the import organization would break my code.

For instance, take this React JS file

import 'react-app-polyfill/ie11';
import React from 'react';

const app = () => {
  return <div></div>;
};

The React Polyfill import specifically requires to be the first line in the file to provide Internet Explorer compatibility sucessfully. However, if you save the file with import organizing active, the import React from 'react'; line jumps to the top, breaking React Polyfill's functionality. I had to disable the functionality in my settings.json to work around the issue.

What I propose is some kind of comment-disabling feature, like so:

// vs-code-organize-imports-disable-next-line
import 'react-app-polyfill/ie11';
import React from 'react';

const app = () => {
  return <div></div>;
};

This has also been mentioned as an issue previously: microsoft/vscode#78553 (comment)

[clementoriol]

Having the same issue when importing global css files that needs to be kept in a specific order :

import "styles/globals.css"; // Default styles
import "@theme/styles/globals.css"; // Theme overrides

They get reorganized in the wrong order, which leads me to having to disable the organize import feature for the all project, which is a shame :(

Being able to ignore a file would solve issues like this.

[ShaunLWM]

Would be a good feature to be implemented.
If you were to use nanoid in React Native, you would need to import
import "react-native-get-random-values"; at the top of your file before any other imports.
Organizing imports would push this down causing your build to throw an error.

[paul-vd]

Running into the same problem with this feature, stylings importing in the incorrect order, and polyfills moving down the import chain, reference.

[tkruczek]

Would be great to have such option. I'm running into this issue when dotenv config needs to be executed before specific imports.

[zoechi]

Just run into this in this context angular/angular#40977 (comment)
The import has to be the first line otherwise it causes an error.

[rgoldfinger-quizlet]

+1 for this feature. In Next.js, import order matters when importing CSS files.

[Sayakie]

+1 for this awesome feature! I need this importing CSS files in React.

[v1d3rm3]

+1 i need 'reflect-metadata' to be the first lib in my file

[abumalick]

@RyanCavanaugh What kind of Feedback are we waiting for?

This feature is very important when we use reorganize import automatically on save. It happens often in projects that we must import something before other imports. I have to use 'Save without formatting' every time I work on a file where the import order is important, it is boring and also difficult to remember for all team members that they should not change the order of imports in that specific file

Here are some use cases

• Importing i18n configuration in your entry file before any other component
• imports files with mocks in test files before the files that are mocked
• CSS order
• polyfills

[edzis]

I need it to respect requirements of https://github.com/welldone-software/why-did-you-render

Create a wdyr.js file and import it as the first import in your application.

[jasonLTaylor88]

+1 for this feature. I need it to maintain order of imports when using FullCalendar in Next JS projects with next-transpile-modules package

[RyanCavanaugh]

What does it mean to disable the sorting of one item in a list? e.g. if I wrote

import E from "E";
// organize-imports-disable-next-line
import D from "D";
import C from "C";
import B from "B";
import A from "A";

and "sort" this list, what is the new order?

[danitrod]

Good point. Perhaps pinning an import to the top of the file, as opposed to disabling organizing it, then? Then the others can be normally sorted?

[abumalick]

I would even say 'pinning one or multiple imports to the top of the file without changing their order'. I believe that this would handle all the use cases that were cited here.

Something like:

import E from "E";
import D from "D";
// organize-imports-disable-above
import C from "C";
import B from "B";
import A from "A";

[mcm-ham]

It's probably easier to disable for file, in which case this feature request could cover this scenario microsoft/vscode#35350

[jonit-dev]

Any updates on this one?

In Inversify, I must have import "reflect-metadata"; as the top import for my server.ts file. Changing this breaks the whole server.

[andrewnick]

+1 we also need polyfills at the top of the import list.

[FacundoVazquez]

+1

[RyanCavanaugh]

Can the people +1ing this answer the above question? #41494 (comment)

[edzis]

What does it mean to disable the sorting of one item in a list? e.g. if I wrote

import E from "E";
import D from "D";
// organize-imports-disable-above
import A from "A";
import B from "B";
import C from "C";

---

Causes 3 groups that each need to be sorted independently:

• everything else above the comment
• the comment and it's next line
• everything else below the next line

When processing imports you start with one import group and at each comment:

• close the current group
• create an close group with the comment and it's import
• open another group and continue

---

In:

import H from "H";
// organize-imports-disable-next-line
import G from "G";
import F from "F";
import E from "E";
// organize-imports-disable-next-line
import D from "D";
import C from "C";
import B from "B";
import A from "A";

-
import H from "H";
-
// organize-imports-disable-next-line
import G from "G";
-
import E from "E";
import F from "F";
-
// organize-imports-disable-next-line
import D from "D";
-
import A from "A";
import B from "B";
import C from "C";
-

[mfulton26]

I too would like this. e.g. I need to make sure react-app-polyfill/stable comes first in my imports but I want the rest of my imports to be sorted after it.

[RyanCavanaugh]

What would folks think if we implemented the rule that each block of newline-contiguous imports sorted independently?
e.g.

import c from "C";

import d from "D";
import a from "A";
import b from "B";

would sort to

import c from "C";

import a from "A";
import b from "B";
import d from "D";

[robertn702]

@RyanCavanaugh My concern with the proposed contiguous-imports solution is how it would effect automatic imports. Which group would automatic imports be added to? It gets more confusing when you have more than two groups.

I like the previously proposed solution of disabling above/below as others have mentioned since it seems that users typically want imports pinned to the top or the bottom (can't speak for everyone, but this has been my experience). It also makes it clear that automatic imports would be added in between the organize-imports-disable-above organize-imports-disable-below comments.

import b from "B"
import a from "A"
// organize-imports-disable-above
import e from "E"
import f from "F" // <-- automatic imports get added and organized in this group
import g from "G"
// organize-imports-disable-below
import d from "D"
import c from "C"

[edzis]

I am in favor of @RyanCavanaugh's suggestion because this gives benefits in multiple real world cases I am aware of.
I have not stumbled upon the need to pin dependencies to the bottom for me to justify the extra overhead of what @robertn702 suggests.
But I have cases where imports have to be at the top as well as an urge to visually separate blocks of imports that auto-organize messes up.

[santialbo]

I like @RyanCavanaugh's proposal a lot. It's clean and easy to understand. No need for ugly comments.

@robertn702 Automatic imports get added to the last group, which is what is needed in 99% of the cases, as the first groups are usually polyfills. If it's not the case, you can always move the import manually.

[jakebailey]

Yes, sticking entirely new auto-imports at the bottom was the simple method we came up with in our design meeting; of course if it's not a fully "new" import (e.g. adding a new import from an already imported module), there's no ambiguity, which helps.

[RyanCavanaugh]

Happy to take a PR for "automatically create sort groups based on newlines" behavior

[MQuy]

hi @RyanCavanaugh, based on your suggestion above, I create an solution for sort groups based on newlines. It would be great to have your feedback 😀 (if you think it is ok, I will add more test cases).

PR: #48330

[alexjball]

Is this integrated into recent versions of VS Code? Organize Imports collapses groups in 1.67.1 using typescript@4.6.4.

[jakebailey]

No, this is in TS 4.7; the release candidate came out yesterday. If you install the nightly JS/TS extension in VS Code (or install the RC and set VS Code to use the workspace TS), you should see this working.

[Rlamotte]

Hi.

Thanks for the amazing update !

Do you know if there is a way to enable such the same parameter to export organizing?

By default, "organizeImports" also organize exports.
It seems I have the same problem when trying to make group of exports, which are sometimes dependant of previous export (and which should not be reorder globally) :

Example - Before

export d from "D";
export a from "A";
export b from "B";

export c from "C"; //depends on D

Current behaviour

export a from "A";
export b from "B";
export c from "C";  //depends on D which is not currently exported => causes a build error
export d from "D";

Desired behaviour

export a from "A";
export b from "B";
export d from "D";

export c from "C";  //depends on D => no error

Edit : if needed, i can move this request to another issue?

[RyanCavanaugh]

@Rlamotte please open a new issue. Thanks!

[chrishj59]

NextJs 13 app directory needs 'use client' as the 1st line but VC Code moves until after the import statements. How do stop the move?

[hazae41]

To avoid the following issue #42873, I import some "unused" types like this

import type { Unused } from "some-dep"

But I am also using source.organizeImports on save, and it removes that line as it is not explicitly used in the code (it's still implicitly used)

I do not want it to remove that line

One fix I have is that I write the following to explicitly use the type

type Unuseds = Unused | ...

Now source.organizeImports no longer removes the import, but it's ugly and now VSCode greys this line out since the Unuseds type is now unused