Skip to content

Sort your JavaScript and TypeScript imports with prettier with automatic alias support

License

Notifications You must be signed in to change notification settings

ifiokjr/prettier-plugin-sorted

Repository files navigation

prettier-plugin-sorted

GitHub Actions Build Status Version Weekly Downloads Typed Codebase MIT License semantic-release

All Contributors


An elegant prettier plugin for sorting your imports. It automatically checks you typescript tsconfig configuration and sorts aliases by default.


Table of Contents

Usage

prettier-plugin-sorted is a prettier plugin for automatically sorting all you JavaScript and TypeScript imports. It uses import-sort and allows for a zero configuration setup which should be sufficient for most setups.

Sort the modules in the following order.

  • Imports with no members are left unsorted at the top of the file. These tend to have side effects and their order is important. import 'tolu';
  • Node module imports. import { join } from 'path';
  • Absolute module imports (but not aliased). import main from 'main';
  • Aliased imports taken from the tsconfig.json and extraAliases setting, but excluding ignoredAliases.
  • Relative module imports.
  • Bottom imports, which are set in the settings object as bottomAliases. These group together absolute paths with relative, placing the absolute paths above the relative.

An example is shown below.

// Imports with no members are left unsorted since they may have side effects.
import 'dotenv';
import './my-side-effect';
import 'firebase/auth';

// Built in node module imports come next
import { join } from 'path';

// Absolute imports
import Awesome from 'awesome-package';
import { B, C } from 'bcde';

// Aliased imports
import MyAlias from '@my-alias';
import { Simple } from 'simple';

// Relative imports
import { DeepRelative } from '../../deep/relative';
import Relative from './relative';

// Bottom imports
import Bottom from '@bottom';
import { relativeBottom } from './relative/bottom';

Setup

First, install the plugin and the required parser:

npm install --save-dev prettier-plugin-sorted prettier

Or if you're using Yarn.

yarn add -D prettier-plugin-sorted prettier

Add the plugin to your prettier configuration.

.prettierrc.json

{
  "plugins": ["prettier-plugin-sorted"]
}

Or inside your project's package.json file.

{
  "prettier": {
    "plugins": ["prettier-plugin-sorted"]
  }
}

If you would like to customise the setup you can add the importSort field to you package.json file. A better explanation on what each configuration option does is available here.

"importSort": {
  ".js, jsx, .ts, .tsx": {
    "options": {
      "cacheStrategy": "directory",
      "wildcardAtStart": false,
      "extraAliases": [],
      "ignoredAliases": [],
      "bottomAliases": []
    }
  }
}

Demo

The following animated flow shows what it's like when this is setup with prettier in your editor.

Demo Screen flow


Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.


License

This project is licensed under the MIT License - see the LICENSE file for details

Contributors


Ifiok Jr.

💻

Guy Gascoigne-Piggford

💻

Acknowledgements

About

Sort your JavaScript and TypeScript imports with prettier with automatic alias support

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published