README.md

sort-imports

Sort ES6 imports for JavaScript and TypeScript automatically. Ported from the atom-import-sort package by Renke Grunwald.

Features

Automatically sorts imports on save. You can disable this behavior in the settings and sort imports manually:

1. Launch the Command Palette (Ctrl/Cmd + Shift + P);
2. Enter Sort imports

You can also save the document without saving imports. This could become handy when you have auto saving enabled, but don't want to sort the imports in a particular file:

1. Launch the Command Palette (Ctrl/Cmd + Shift + P);
2. Enter Save file without sorting imports

Extension Settings

This extension has the following settings:

• sort-imports.default-sort-style: sorting style if package.json doesn't have import-sort key (default: eslint).
• sort-imports.on-save: enable/disable auto sorting on save (default: true).
• sort-imports.ignore-type-defs: will not sort .d.ts files by default since import-sort doesn't handle them well (default: true).
• sort-imports.languages: selectively choose the languages which should be sorted (default: ['javascript', 'typescript']).
• sort-imports.cache-package-json-config-checks: The sort config is only checked when config files change as a performance optimization, disable if necessary (default: true).

Obsolete settings

See release notes for version 4

Use a different style or parser

Styles (and parsers) can be configured on a per-project basis including support for different types of files (currently JavaScript and TypeScript).

Just add the following to your package.json and adapt it to your liking:

"importSort": {
  ".js, .jsx, .es6, .es": {
    "parser": "babylon",
    "style": "eslint",
    "options": {}
  },
  ".ts, .tsx": {
    "parser": "typescript",
    "style": "eslint",
    "options": {}
  }
}

The keys are a list of file extensions that map to the parser and style that should be used for files that have any of the listed file extensions.

By default, sort-imports comes with these styles:

• import-sort-style-eslint (default): A style that that is compatible with ESLint's sort-imports rule.

• import-sort-style-module: A style that groups and sorts by module.

• import-sort-style-module-compact: Similar to modules but with fewer groups.

• import-sort-style-module-scoped: A style for import-sort that is focused on modules but with scope support.

• import-sort-style-renke: Renke's personal style.

• import-sort-style-for-react: A style designed for react projects.

PRs with more styles are welcome.

Ignoring files

Sometimes the imports in a certain file should not be sorted. To prevent import-sort from sorting a particular file, just add // import-sort-ignore or /* import-sort-ignore */ to your file. Anwhere in the file is fine.

Troubleshooting

parser.parseImports is not a function

This happens when using Typescript parser (import-sort#72). The solution is to install it manually:

npm i -D import-sort-parser-typescript

Release Notes

6.2.6

• Make package.json prevail over extension configuration

6.2.5

• Ensure current workspace folder can be resolved as an import-sort styles path

6.2.4

• Fix extension loading issue by forcing cosmiconfig version to 5.0.7

6.2.3

• Security upgrade on dependencies
• Safe types checking

6.2.2

• Fix current document workspace folder initialization

6.2.1

• Add missing parsers and styles dependencies

6.2.0

• Add workspace support with several folders and different configurations

6.1.0

• Improve config caching by listening for file changes on config files
• Move from an error toast to a status bar icon and panel. Click the "Sort Imports" text in the lower right to detailed errors.
• Don't sort .d.ts files by default since import-sort handles them incorrectly (you can disable this feature via the new sort-imports.ignore-type-defs configuration option)

6.0.2

• Upgrade import-sort to v6

6.0.0

• Upgrade dependencies

5.1.0

• Add support to importSort additional options (thanks @fsmaia)

5.0.0

• Breaking change moving to module-compact v2

4.1.0

• Implemented by @cliffkoh
  • Introduced sort-imports.default-sort-style, which defaults to eslint. Other possible values are module, module-compact and module-scoped.
  • Introduced sort-imports.cache-package-json-config-checks which defaults to true. When true, will cache calls to import-sort-config thereby improving performance (avoids repeated non-trivial disk lookups and parsing).
  • Fixed bug in Save file without sorting import which caused it to not work.

4.0.0

Update to ease transition from @peterjuras' extension.

• sort-imports.blank-lines-after: removed until a valid implementation is provided
• sort-imports.sort-type: you can now configure your sorting type following with a key in your package.json. Documentation
  • by-module-name: is now "style": "module-compact"
  • by-imported-name: is removed

3.0.0

• Renamed to sort-imports. Renamed config settings to slug-case.
• Fixed blank linkes after imports feature.

2.4.0

• Implemented by @danieloprado: Added setting to selectively choose the languages. Set sortImports.languages to an array of the languages that you want to be sorted, e.g. ['javascript'].
• Bugfixes

2.4.0 (amq-sort-imports fork)

• Import style by-module-name added.
• Added support for blank lines after imports.

2.3.0

• Import sort style module is now included by default alongside the eslint style.

2.2.0

• Added setting to suppress warnings. Set sortImports.suppressWarnings to true to hide warnings if sorting imports fails.

2.1.0

• It is now possible to customize the import sort style. Please refer to the import-sort documentation for more information.

2.0.0

• Added TypeScript support
• Fixed inline comments on import statements
• Thanks to @shalomdotnet for the PR!

1.1.0

• Added 'Save without sorting imports' command

1.0.0

Initial release

Credits

Developed by Peter Juras, maintained by A. Matías Quezada

Thanks

• Special thanks to Renke Grunwald for creating the import-sort module!
• Icon made by Catalin Fertu from www.flaticon.com