Import Organizer
A VS Code extension that automatically sorts and organizes JS/TS imports based on a fully customizable configuration file. Unlike the built-in VS Code organizer, this extension gives you granular control over import grouping, ordering, and formatting.
Features
- Organize imports in a single file, a directory, or the entire project
- Group imports into named blocks (react, utils, components, etc.)
- Sort imports alphabetically within each block
- Replace long relative paths with a special identifier (
../../components/Foo → @/components/Foo)
- Add separator comments between import blocks
- Preserve linting directives (
@ts-ignore, @ts-expect-error, eslint-disable, biome-ignore, etc.)
- Organize on save
- Exclude folders (including nested paths like
api/generated) and specific files
- Right-click context menu integration for files and directories
Commands
| Command |
Description |
Import Organizer: Organize file |
Organize imports in the current file |
Import Organizer: Organize directory |
Organize imports in a directory |
Import Organizer: Organize all |
Organize imports in the project |
All commands are available from the command palette (Cmd+Shift+P) and the explorer context menu (right-click).
Configuration
Create a .sorterconfig.json file at the root of your project or in the .vscode folder. The extension works with default settings if no config is found, but a config file is recommended.
Config options
| Parameter |
Type |
Default |
Description |
root |
string |
"src" |
Source folder path. Files outside this folder are ignored |
organizeOnSave |
boolean |
true |
Organize imports on file save |
showErrorMessages |
boolean |
false |
Show error messages in notifications |
specialIdentifier |
string |
"@" |
String used for absolute import paths |
replaceLongPathBySpecialIdentifier |
boolean |
true |
Replace long relative paths with the special identifier |
longPathLength |
number |
3 |
Minimum ../ depth before replacing with special identifier |
addSeparatorLineAfterImports |
boolean |
true |
Add a comment separator line after the import block |
separatorCharacter |
string |
"-" |
Character used in the separator line (-, _, or =) |
separatorLineLength |
number |
70 |
Length of the separator line |
breakLineAfterBlock |
boolean |
false |
Add an empty line between each import block |
excludedFolders |
string[] |
[".git", "node_modules", ...] |
Folders to skip. Supports nested paths (e.g. api/generated) |
excludedFiles |
string[] |
[] |
Files to skip by name (e.g. routeTree.gen.ts) |
allowedExtensions |
string[] |
["js", "jsx", "ts", "tsx"] |
File extensions to process |
addLibrariesToOthers |
boolean |
true |
Place unmatched library imports in the "others" block |
blocks |
Block[] |
(see below) |
Import block definitions |
Block
| Parameter |
Type |
Description |
name |
string |
Block name, used as the comment header |
displayName |
boolean |
Whether to display the block name as a comment. Defaults to true |
libraries |
string[] |
Library names to match. Supports wildcards (e.g. @mui/*, node:*) |
folders |
string[] |
Folder paths relative to root. Imports from subdirectories are matched |
Example config
{
"root": "./src",
"organizeOnSave": true,
"specialIdentifier": "@",
"replaceLongPathBySpecialIdentifier": true,
"longPathLength": 3,
"addSeparatorLineAfterImports": true,
"separatorCharacter": "-",
"separatorLineLength": 70,
"breakLineAfterBlock": true,
"excludedFolders": [".git", "node_modules", "dist", "build", "api/generated"],
"excludedFiles": ["routeTree.gen.ts"],
"allowedExtensions": ["js", "jsx", "ts", "tsx"],
"addLibrariesToOthers": true,
"blocks": [
{
"name": "react",
"displayName": false,
"libraries": ["react", "prop-types"]
},
{
"name": "router",
"displayName": true,
"libraries": ["react-router", "react-router-dom", "@tanstack/react-router"]
},
{
"name": "hooks",
"displayName": true,
"folders": ["hooks"]
},
{
"name": "components",
"displayName": true,
"folders": ["components"]
},
{
"name": "types",
"displayName": true,
"folders": ["types"]
}
]
}
Example output
import React, { useState } from 'react';
// router
import { useNavigate } from 'react-router-dom';
// hooks
import { useAuth } from '@/hooks/useAuth';
// components
import { Button } from '@/components/Button';
import { Header } from '@/components/Header';
// types
import type { User } from '@/types/user';
// ----------------------------------------------------------------------
License
MIT
