Visual Studio code Organize imports feature

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


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


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.