Auto format on save when autoFormat is set to onSave (this is the default).
Press shortcut keys, default to Alt+Shift+S.
Use Sort Imports/Exports command in the Command Palette (Ctrl+Shift+P).
Right click on editor content and select Sort Imports/Exports.
Extension Settings
All VS Code settings under "tsImportSorter" section and their default values:
// Configuration file name.
"tsImportSorter.configuration.configurationFileName": "import-sorter.json",
// When to auto format imports/exports. Valid values are 'off' or 'onSave'.
"tsImportSorter.configuration.autoFormat": "onSave",
// Whether to format exports as well.
"tsImportSorter.configuration.formatExports": true,
// Disable formatting for files matching regular expressions.
"tsImportSorter.configuration.exclude": ["node_modules"],
// Disable formatting for files matching glob patterns.
"tsImportSorter.configuration.excludeGlob": [],
// Sort import declarations by paths or first names. Valid values are 'paths' or 'names'.
"tsImportSorter.sortImportsBy": "paths",
// Grouping rules for path patterns for imports. {} is the fall-back group.
"tsImportSorter.configuration.groupRules": [
"^react(-dom)?
quot;,
"^@angular/",
"^vuequot;,
{},
"^[@]",
"^[.]"
],
// Sorting rule for import paths. Valid values are 'none' or string array.
"tsImportSorter.configuration.sortRules.paths": ["_", "aA"],
// Sorting rule for imported/exported names. Valid values are 'none' or string array.
"tsImportSorter.configuration.sortRules.names": ["_", "aA"],
// By default all unused imports are removed. Keep some or all them around with this setting if you need.
"tsImportSorter.configuration.keepUnused": [],
// Max binding names per line before wrapping for imports. 0 for no limit.
"tsImportSorter.configuration.maxBindingNamesPerLine": 1,
// Max default and binding names per line before wrapping for imports. 0 for no limit.
"tsImportSorter.configuration.maxDefaultAndBindingNamesPerLine": 2,
// Max binding names per line before wrapping for exports. 0 for no limit.
"tsImportSorter.configuration.maxExportNamesPerLine": 0,
// Max names on wrapped lines. 0 for no limit.
"tsImportSorter.configuration.maxNamesPerWrappedLine": 1,
// Number of empty lines between groups (NOT sub-groups).
"tsImportSorter.configuration.emptyLinesBetweenGroups": 1,
// Number of empty lines after the last import declaration.
"tsImportSorter.configuration.emptyLinesAfterAllImports": 1,
// Whether to remove the last slash when normalizing paths.
"tsImportSorter.configuration.removeLastSlashInPath": false,
// Whether to remove the last 'index' when normalizing paths.
"tsImportSorter.configuration.removeLastIndexInPath": false,
// Whether to enable debug mode and print detailed logs to the output channel.
"tsImportSorter.configuration.development.enableDebug": false,
Configuration
JS/TS Import/Export Sorter reads configurations from the following sources (in precedence from high to low):
Here are all configs in package.json under "importSorter" section and their default values:
{
"importSorter": {
// When to auto format imports/exports. Valid values are 'off' or 'onSave'.
"autoFormat": "onSave",
// Whether to format exports as well.
"formatExports": true,
// Disable formatting for files matching regular expressions.
"exclude": ["node_modules"],
// Disable formatting for files matching glob patterns.
"excludeGlob": [],
// Sort import declarations by paths or first names. Valid values are 'paths' or 'names'.
"sortImportsBy": "paths",
// Grouping rules for path patterns for imports. {} is the fall-back group.
"groupRules": ["^react(-dom)?quot;, "^@angular/", "^vuequot;, {}, "^[@]", "^[.]"],
"sortRules": {
// Sorting rule for import paths. Valid values are 'none' or string array.
"paths": ["_", "aA"],
// Sorting rule for imported/exported names. Valid values are 'none' or string array.
"names": ["_", "aA"]
},
// By default all unused imports are removed. Keep some or all them around with this setting if you need.
"keepUnused": [],
// Max line length before wrapping. 0 for no limit.
"maxLineLength": 80,
// Max binding names per line before wrapping for imports. 0 for no limit.
"maxBindingNamesPerLine": 1,
// Max default and binding names per line before wrapping for imports. 0 for no limit.
"maxDefaultAndBindingNamesPerLine": 2,
// Max binding names per line before wrapping for exports. 0 for no limit.
"maxExportNamesPerLine": 0,
// Max names on wrapped lines. 0 for no limit.
"maxNamesPerWrappedLine": 1,
// Number of empty lines between groups (NOT sub-groups).
"emptyLinesBetweenGroups": 1,
// Number of empty lines after the last import declaration.
"emptyLinesAfterAllImports": 1,
// Whether to remove the last slash when normalizing paths.
"removeLastSlashInPath": false,
// Whether to remove the last 'index' when normalizing paths.
"removeLastIndexInPath": false,
// Number of spaces to replace a TAB.
"tabSize": 2,
// Indent lines with tabs or spaces. Valid values are 'tab' or 'space'.
"tabType": "space",
// Use single or double quotes. Valid values are 'single' or 'double'.
"quoteMark": "single",
// When to add trailing a comma for the last name. Valid values are 'none' or 'multiLine'.
"trailingComma": "multiLine",
// Whether to add semicolons at the end of declarations.
"hasSemicolon": true,
// Whether to end files with a new line.
"insertFinalNewline": true,
// Whether to add spaces between brackets. true for '{ id }' and false for '{id}'.
"bracketSpacing": true
}
}
import-sorter.json has all configs above. Example:
Add path patterns to package.json or import-sorter.json.
All path patterns are merged together instead of overwritten.
Use forward-slash (/) as path separator no matter in MacOS, *nix or Windows.
Add the following comment at the beginning of the source file and keep at least one empty line from the next declaration:
// ts-import-sorter: disable
[Other code]
or
/* ts-import-sorter: disable */
[Other code]
Note:
Excluded paths and file disable-comments are ignored if the formatting is triggered manually, i.e. from Command Palette, editor context menu or shortcut.
To exclude a specific import or export declaration from formatting, please add the following as its leading or trailing comments:
// ts-import-sorter: disable
import Excluded from 'import/sorter';
or
export { Excluded } from 'import/sorter'; /* ts-import-sorter: disable */
To disable formatting for all exports, just set "formatExports": false in the config.
Maximum names per line
Whether to wrap an import declaration is decided by maxBindingNamesPerLine and maxDefaultAndBindingNamesPerLine, as well as maxLineLength.
Whether to wrap an export declaration is decided by maxExportNamesPerLine, as well as maxLineLength.
maxBindingNamesPerLine
For a declaration importing only binding names, this value determines how many names are allowed before wrapping.
For example, if you set:
"maxBindingNamesPerLine": 2,
then
import { A } from 'a'; // No wrap as there is 1 name
import { B, C } from 'b'; // No wrap as there are 2 names
import {
D,
E,
F,
} from 'c'; // Wrapped as there are more than 2 names
maxDefaultAndBindingNamesPerLine
For a declaration importing default and binding names, this value determines how many names are allowed before wrapping.
For example, if you set:
"maxDefaultAndBindingNamesPerLine": 2,
then
import A from 'a'; // No wrap as there is 1 name
import B, { C } from 'b'; // No wrap as there are 2 names
import D, {
E,
F,
} from 'c'; // Wrapped as there are more than 2 names
maxExportNamesPerLine
For export {} or export {} from 'x' declarations, this value determines how many names are allowed before wrapping.
For example, if you set:
"maxExportNamesPerLine": 2,
then
export { A }; // No wrap as there is 1 name
export { B, C } from 'b'; // No wrap as there are 2 names
export {
D,
E,
F,
} from 'c'; // Wrapped as there are more than 2 names
maxNamesPerWrappedLine
If an import/export declaration is wrapped, this value decides how many names there are per line.
For example, if you set:
"maxNamesPerWrappedLine": 2,
then
import {
A, B,
C, D,
E,
} from 'a'; // There are 2 names at most per wrapped line
export {
A, B,
C, D,
E,
}; // There are 2 names at most per wrapped line
Grouping Rules
JS/TS Import/Export Sorter can put imports into different groups separated by empty lines (configurable), based on the rules defined in groupRules.
A grouping rule defines:
Types of imports to apply.
Path pattern to match.
How to sort imports, by paths or first names, inside the group.
Strings are compared case-insensitively, and lower-case goes first in case of a tie.
[, \, ], ^, _ and `(backtick) are in front of letters ([a-zA-Z]).
A sorted array might be ['_', 'a', 'A', 'b', 'B'].
You can also disable sorting by specifying "none" in sortRules, e.g.:
"sortRules": {
"paths": "none",
"names": "none"
}
If you set paths to "none", import declarations will not be sorted.
If you set names to "none", names will not be sorted within an import or export declaration.
Note:
_Setting paths or names to null doesn't disable sorting but uses the fall-back sorting rules, i.e. ["AZ", "_", "az"]._
For more details and how to construct your own rules, please read the Wiki.
Unused Imports Removal
By default all unused imports are removed. In some cases you might want to keep the import even if it's unused. For example to keep import tw from 'twin.macro' you can do the following:
"keepUnused": ["twin.macro"]
This is equivalent to a more verbose version:
"keepUnused": [{ "path": "twin.macro" }]
Another example is import styled, { css } from 'styled-components' and if you want to keep css import while styled is removed if unused, you can achieve that with the following configuration:
