|
| 1 | +# prettier-plugin-sorted |
| 2 | + |
| 3 | +[](https://github.com/ifiokjr/prettier-plugin-sorted/actions?query=workflow%3A%22Node+CI%22) |
| 4 | +[![Version][version]][npm] |
| 5 | +[![Weekly Downloads][downloads-badge]][npm] |
| 6 | +[![Typed Codebase][typescript]](./src/index.ts) |
| 7 | +![MIT License][license] |
| 8 | +[](https://github.com/semantic-release/semantic-release) |
| 9 | + |
| 10 | +<br /> |
| 11 | + |
| 12 | +> An elegant prettier plugin for sorting your imports. It automatically checks you typescript tsconfig configuration and sorts aliases by default. |
| 13 | +
|
| 14 | +<br /> |
| 15 | + |
| 16 | +## Table of Contents |
| 17 | + |
| 18 | +- [prettier-plugin-sorted](#prettier-plugin-sorted) |
| 19 | + - [Table of Contents](#table-of-contents) |
| 20 | + - [Usage](#usage) |
| 21 | + - [Setup](#setup) |
| 22 | + - [Versioning](#versioning) |
| 23 | + - [License](#license) |
| 24 | + - [Contributors](#contributors) |
| 25 | + - [Acknowledgements](#acknowledgements) |
| 26 | + |
| 27 | +## Usage |
| 28 | + |
| 29 | +`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. |
| 30 | + |
| 31 | +Sort the modules in the following order. |
| 32 | + |
| 33 | +- 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';` |
| 34 | +- Node module imports. `import { join } from 'path';` |
| 35 | +- Absolute module imports (but not aliased). `import main from 'main';` |
| 36 | +- Aliased imports taken from the `tsconfig.json` and `extraAliases` setting, but excluding `ignoredAliases`. |
| 37 | +- Relative module imports. |
| 38 | +- 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. |
| 39 | + |
| 40 | +An example is shown below. |
| 41 | + |
| 42 | +```ts |
| 43 | +// Imports with no members are left unsorted since they may have side effects. |
| 44 | +import 'dotenv'; |
| 45 | +import './my-side-effect'; |
| 46 | +import 'firebase/auth'; |
| 47 | + |
| 48 | +// Built in node module imports come next |
| 49 | +import { join } from 'path'; |
| 50 | + |
| 51 | +// Absolute imports |
| 52 | +import Awesome from 'awesome-package'; |
| 53 | +import { B, C } from 'bcde'; |
| 54 | + |
| 55 | +// Aliased imports |
| 56 | +import MyAlias from '@my-alias'; |
| 57 | +import { Simple } from 'simple'; |
| 58 | + |
| 59 | +// Relative imports |
| 60 | +import { DeepRelative } from '../../deep/relative'; |
| 61 | +import Relative from './relative'; |
| 62 | + |
| 63 | +// Bottom imports |
| 64 | +import Bottom from '@bottom'; |
| 65 | +import { relativeBottom } from './relative/bottom'; |
| 66 | +``` |
| 67 | + |
| 68 | +<br /> |
| 69 | + |
| 70 | +### Setup |
| 71 | + |
| 72 | +First, install the plugin and the required parser: |
| 73 | + |
| 74 | +```bash |
| 75 | +npm install --save-dev prettier-plugin-sorted prettier |
| 76 | +``` |
| 77 | + |
| 78 | +Or if you're using Yarn. |
| 79 | + |
| 80 | +```bash |
| 81 | +yarn add -D prettier-plugin-sorted prettier |
| 82 | +``` |
| 83 | + |
| 84 | +Add the plugin to your `prettier` configuration. |
| 85 | + |
| 86 | +`.prettierrc.json` |
| 87 | + |
| 88 | +```json |
| 89 | +{ |
| 90 | + "plugins": ["prettier-plugin-sorted"] |
| 91 | +} |
| 92 | +``` |
| 93 | + |
| 94 | +Or inside your project's `package.json` file. |
| 95 | + |
| 96 | +```json |
| 97 | +{ |
| 98 | + "prettier": { |
| 99 | + "plugins": ["prettier-plugin-sorted"] |
| 100 | + } |
| 101 | +} |
| 102 | +``` |
| 103 | + |
| 104 | +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). |
| 105 | + |
| 106 | +```json5 |
| 107 | +"importSort": { |
| 108 | + ".js, jsx, .ts, .tsx": { |
| 109 | + "options": { |
| 110 | + "cacheStrategy": "directory", |
| 111 | + "wildcardAtStart": false, |
| 112 | + "extraAliases": [], |
| 113 | + "ignoredAliases": [], |
| 114 | + "bottomAliases": [] |
| 115 | + } |
| 116 | + } |
| 117 | +} |
| 118 | +``` |
| 119 | + |
| 120 | +<br /> |
| 121 | + |
| 122 | +## Versioning |
| 123 | + |
| 124 | +This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the |
| 125 | +[tags on this repository](https://github.com/ifiokjr/prettier-plugin-sorted/tags). |
| 126 | + |
| 127 | +<br /> |
| 128 | + |
| 129 | +## License |
| 130 | + |
| 131 | +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details |
| 132 | + |
| 133 | +<!-- prettier-ignore-start --> |
| 134 | +<!-- markdownlint-disable --> |
| 135 | + |
| 136 | +## Contributors |
| 137 | + |
| 138 | +<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> |
| 139 | + |
| 140 | +<!-- ALL-CONTRIBUTORS-LIST:END --> |
| 141 | + |
| 142 | +<!-- markdownlint-enable --> |
| 143 | +<!-- prettier-ignore-end --> |
| 144 | + |
| 145 | +[version]: https://flat.badgen.net/npm/v/prettier-plugin-sorted |
| 146 | +[npm]: https://npmjs.com/package/prettier-plugin-sorted |
| 147 | +[license]: https://flat.badgen.net/badge/license/MIT/purple |
| 148 | +[size]: https://bundlephobia.com/result?p=#prettier-plugin-sorted |
| 149 | +[size-badge]: https://flat.badgen.net/bundlephobia/minzip/prettier-plugin-sorted |
| 150 | +[typescript]: https://flat.badgen.net/badge/icon/TypeScript/?icon=typescript&label&labelColor=blue&color=555555 |
| 151 | +[downloads-badge]: https://badgen.net/npm/dw/prettier-plugin-sorted/red?icon=npm |
| 152 | + |
| 153 | +## Acknowledgements |
| 154 | + |
| 155 | +- 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. |
0 commit comments