Javascript Refractor: Sort Imports

This extension is still in alpha.

This extension is for sorting ES6 imports for Javascript files (.js, .jsx, .ts, .tsx) using Renke's excellent import-sort tool. Sorting happens in-place and overwrites the file with sorted imports.

This extension also installs import-sort-cli and import-sort-style-eslint packages as devDependencies in the project.

Installation

1. Open the file palette Ctrl+P (Cmd+P on Mac) and enter the following command,

   ext install developertejasjadhav.javascript-refactor--sort-imports
   

2. Install the required parser for your language.

   # Using NPM
   npm install --save-dev import-sort-parser-babylon # For Javascript
   npm install --save-dev import-sort-parser-typescript # For Typescript
   
   # Using Yarn
   yarn add --dev import-sort-parser-babylon # For Javascript
   yarn add --dev import-sort-parser-typescript # For Typescript
   

3. Create a .importsortrc.js file in the root of your project.

   module.exports = {
     // Only for Javascript.
     '.js, .jsx': {
       parser: 'babylon',
     },
   
     // Only for Typescript.
     '.ts, .tsx': {
       parser: 'typescript',
     },
   }
   

Usage

1. Open the Javascript file in the editor.
2. Open the command palette Ctrl+Shift+P and enter Javascript Refactor: Sort Imports.

Change sort style

By default, the sorting happens using import-sort-style-eslint. You can choose any available style on Github.

1. Install the import style,

   # Using NPM
   npm install --save-dev import-sort-style-<your style>
   
   # Using Yarn
   yarn add --dev import-sort-style-<your style>
   

2. Edit the .importsortrc.js file in your project root.

3. Add the style parameter for the extensions,

   module.exports = {
     '.js, .jsx, .ts, .tsx': {
       style: '<your style>'
     }
   }
   

Changelog