Visual Studio code Organize imports feature

Question

On version 1.23 of visual studio code, the 'Organize imports' feature was added. This is a very helpful feature as it handles the imports itself, but I'd like to be able to configure it.

The functionalities I'd like to know if are available for this feature are:

• Is it possible to configure the order the imports are sorted? I'd like to configure external libraries (angular, rxjs) before my local imports
• Also, is it possible to add a line breaker between imports of different sources?
• On my project I have a max-line lenght configuration, but the import plugin doesn't seem to respect this. Shouldn't it?

I'm asking this questions because there is no configuration information available on VSCode page, only informing this is available.

Thanks!

Answer 1

No, these more advanced options are not supported as of VS Code 1.24.

Max line length is tracked by this issue

External imports should generally come before internal imports. If you are using absolute paths, this may not be true, see this issue

Our end goal with imports is to that you never have to manually manage your imports or even look at them, so more advanced sorting/styling is out of scope

Answer 2

On VSCode open ⇧⌘P or Ctrl+Shift+P then

"Preferences: Configure Language Specific Settings..."

and add

"[typescript]": {
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

}

Credits to this source

Answer 3

There is an update to the Organize Imports function in vscode v1.68. See v1.68 Release Note: Group-aware Organize Imports.

Organize imports for JavaScript and TypeScript lets you quickly clean up your list of imports. When run, it both removes unused imports and also sorts the imports alphabetically.

However some codebases like having some degree of manual control over how their imports are organized. Grouping external vs internal imports is one of the most common examples of this:

[Starting with this...]

// local code
import * as bbb from "./bbb";
import * as ccc from "./ccc";
import * as aaa from "./aaa";

// built-ins
import * as path from "path";
import * as child_process from "child_process"
import * as fs from "fs";
// some code...

[Organize Imports will now produce this:]

With TypeScript 4.7 however, Organize Imports is now a group-aware. Running it on the above code looks a little bit more like what you’d expect:

// local code
import * as aaa from "./aaa";
import * as bbb from "./bbb";
import * as ccc from "./ccc";

// built-ins
import * as child_process from "child_process";
import * as fs from "fs";
import * as path from "path";
// some code...

So you should be able to "group" your imports - separate by newline or comment and get them sorted only within each group.