https://github.com/ifiokjr/prettier-plugin-sorted
Sort your JavaScript and TypeScript imports with prettier with automatic alias support
https://github.com/ifiokjr/prettier-plugin-sorted
Last synced: about 2 months ago
JSON representation
Sort your JavaScript and TypeScript imports with prettier with automatic alias support
- Host: GitHub
- URL: https://github.com/ifiokjr/prettier-plugin-sorted
- Owner: ifiokjr
- License: mit
- Created: 2020-03-14T10:18:22.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T09:59:41.000Z (over 2 years ago)
- Last Synced: 2025-03-25T09:49:29.246Z (2 months ago)
- Language: TypeScript
- Size: 1.36 MB
- Stars: 19
- Watchers: 2
- Forks: 2
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# prettier-plugin-sorted
[](https://github.com/ifiokjr/prettier-plugin-sorted/actions?query=workflow%3A%22Node+CI%22)
[![Version][version]][npm]
[![Weekly Downloads][downloads-badge]][npm]
[![Typed Codebase][typescript]](./src/index.ts)
![MIT License][license]
[](https://github.com/semantic-release/semantic-release)
[](#contributors-)
> An elegant prettier plugin for sorting your imports. It automatically checks you typescript tsconfig configuration and sorts aliases by default.
## Table of Contents
- [prettier-plugin-sorted](#prettier-plugin-sorted)
- [Table of Contents](#table-of-contents)
- [Usage](#usage)
- [Setup](#setup)
- [Demo](#demo)
- [Versioning](#versioning)
- [License](#license)
- [Contributors](#contributors)
- [Acknowledgements](#acknowledgements)
## Usage
`prettier-plugin-sorted` is a [`prettier`](https://prettier.io) 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.
```ts
// 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:
```bash
npm install --save-dev prettier-plugin-sorted prettier
```
Or if you're using Yarn.
```bash
yarn add -D prettier-plugin-sorted prettier
```
Add the plugin to your `prettier` configuration.
`.prettierrc.json`
```json
{
"plugins": ["prettier-plugin-sorted"]
}
```
Or inside your project's `package.json` file.
```json
{
"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**](https://github.com/ifiokjr/import-sort-style-custom#options).
```json5
"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.
## Versioning
This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the
[tags on this repository](https://github.com/ifiokjr/prettier-plugin-sorted/tags).
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
## Contributors
Ifiok Jr.
💻
Guy Gascoigne-Piggford
💻
[version]: https://flat.badgen.net/npm/v/prettier-plugin-sorted
[npm]: https://npmjs.com/package/prettier-plugin-sorted
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=#prettier-plugin-sorted
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/prettier-plugin-sorted
[typescript]: https://flat.badgen.net/badge/icon/TypeScript/?icon=typescript&label&labelColor=blue&color=555555
[downloads-badge]: https://badgen.net/npm/dw/prettier-plugin-sorted/red?icon=npm
## Acknowledgements
- This plugin builds on the good work of [`prettier-plugin-import-sort`](https://github.com/ggascoigne/prettier-plugin-import-sort/blob/master/src/index.js) with a sharper focus on typescript projects.