import-sort-style-custom

import-sort-style-custom

Sort your imports taking into account your aliased tsconfig paths and other custom options. These paths are treated as internal imports.

Table of Contents

• import-sort-style-custom
  • Table of Contents
  • Usage
  • Demo
    • Setup
    • Options
    • Prettier
  • Versioning
  • License
  • Contributors

Usage

import-sort-style-custom is designed to be used with import-sort and provide a customisable way for ordering imports when aliases are also used for internal imports.

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 available 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';

Demo

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

Setup

First, install the plugin and the required parser:

npm install --save-dev import-sort-style-custom import-sort-parser-typescript

or

yarn add -D import-sort-style-custom import-sort-parser-typescript

Add the following to your package.json file.

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

Options

Property	Type	Default	Description
ignoreTsConfig	boolean	false	When true will not search for any tsconfig.json. This might provide a slight performance boost. This options takes precedence over the other tsconfig options.
tsconfigName	string	'tsconfig.json'	The name to use when searching for a TsConfig.
tsconfigFilePath	string	undefined	A direct path to the tsconfig file relative to the cwd.
cacheStrategy	'directory' or 'never' or 'always'	'directory'	Determines how often to check for a new parent tsconfig file. By default it will check every time the directory changes. If you only have one tsconfig.json file for the whole project with consistent it makes sense to update this to 'never'.
wildcardAtStart	boolean	false	When true will allow patterns which start with a * character.
spaceAfterAliases	boolean	true	When true this will insert a space after the alias section causing the relative imports to appear as a separate block.
extraAliases	string[]	[]	Extra patterns that should be recognised as internal aliases. The pattern is the same as tsconfig files support supporting * as the wildcard character.
ignoredAliases	string[]	[]	Ignore all paths that match this pattern. This takes preference over any matching aliases. If a module path matches the alias but doesn't The pattern is the same as tsconfig files support supporting * as the wildcard character.
bottomAliases	string[]	[]	Files matching this pattern will be moved to a special group at the end of the imports. The pattern is the same as tsconfig files support supporting * as the wildcard character.

Prettier

This package is included by default in the prettier-plugin-sorted package. It's two steps to get setup.

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

or

yarn add -D prettier prettier-plugin-sorted

Add the plugin to your prettier configuration.

.prettierrc

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

The following is optional, for the times when you want to customise your setup.

Add the following configuration to your package.json, with any options you'd also like to add.

"importSort": {
  ".js,.jsx,.ts,.tsx": {
    "options": {
      "tsconfigFilePath": "./tsconfig.json"
    }
  }
}

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