https://github.com/dmtrkovalenko/eslint-plugin-pretty-imports
Do you hate chaos in javascript imports?
https://github.com/dmtrkovalenko/eslint-plugin-pretty-imports
Last synced: about 1 year ago
JSON representation
Do you hate chaos in javascript imports?
- Host: GitHub
- URL: https://github.com/dmtrkovalenko/eslint-plugin-pretty-imports
- Owner: dmtrKovalenko
- License: mit
- Created: 2019-03-31T09:16:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-04-11T23:04:53.000Z (about 1 year ago)
- Last Synced: 2025-04-13T08:18:26.025Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 2.17 MB
- Stars: 205
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pretty-imports
> Opinionated Imports Sorter
[](https://www.npmjs.org/package/eslint-plugin-pretty-imports)
[](https://codecov.io/gh/dmtrKovalenko/eslint-plugin-pretty-imports)
[](https://circleci.com/gh/dmtrKovalenko/eslint-plugin-pretty-imports)
[](https://github.com/prettier/prettier)
No more mixes of default and named imports. Automatically prettify and sort your import statements.
> 🌟 Perfectly works in addition to [prettier](https://github.com/prettier/prettier) and [typescript](https://www.typescriptlang.org/).
## 😨 Before
```js
import * as React from "react";
import { runKeyHandler } from "../../_shared/hooks/useKeyDown";
import * as PropTypes from "prop-types";
import DayWrapper from "./DayWrapper";
import CalendarHeader from "./CalendarHeader";
import { Theme } from "@material-ui/core";
import { IconButtonProps } from "@material-ui/core/IconButton";
import CircularProgress from "@material-ui/core/CircularProgress";
import SlideTransition, { SlideDirection } from "./SlideTransition";
import { withStyles, WithStyles } from "@material-ui/core/styles";
import { findClosestEnabledDate } from "../../_helpers/date-utils";
// TODO smth
import Day from "./Day";
import { withUtils, WithUtilsProps } from "../../_shared/WithUtils";
```
## 😊 After
```js
import * as React from "react";
import * as PropTypes from "prop-types";
// TODO smth
import Day from "./Day";
import DayWrapper from "./DayWrapper";
import CalendarHeader from "./CalendarHeader";
import CircularProgress from "@material-ui/core/CircularProgress";
import SlideTransition, { SlideDirection } from "./SlideTransition";
import { Theme } from "@material-ui/core";
import { runKeyHandler } from "../../_shared/hooks/useKeyDown";
import { IconButtonProps } from "@material-ui/core/IconButton";
import { withStyles, WithStyles } from "@material-ui/core/styles";
import { findClosestEnabledDate } from "../../_helpers/date-utils";
import { withUtils, WithUtilsProps } from "../../_shared/WithUtils";
```
## 💿 Installation
```
npm install eslint-plugin-pretty-imports --save-dev
yarn add --dev eslint-plugin-pretty-imports
```
**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-pretty-imports` globally.
## 🌚 Usage
Add `pretty-imports` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
```json
{
"plugins": ["pretty-imports"],
"rules": {
"pretty-imports/sorted": "warn"
}
}
```
## 🦆 Sorting
A little about the sorting logic. This package takes the import type as a first parameter to sort. We sort import groups in the following order:
1. `import 'anyfile'`
2. `import * as anything from 'anywhere'`
3. `import default from 'anywhere'`
4. `import { anything } from 'anywhere`
And then we are sorting imports **by line length** inside each group. It needs only to improve the visual readability of the imports section. This behavior can be disabled by `"no-line-length-sort"` rule option.
## 🔧 Customization
This plugin provides only 1 rule, that fully takes care of your imports. But you can also customize the behavior thanks to eslint rule options.
```json
"rules": {
"pretty-imports/sorted": ["warn", "sort-by-specifiers-length"]
}
```
Here is a list of available options
- `sort-by-specifiers-length` – sorts imports not by line length, but firstly by import specifier length
Example
```js
import { one } from "someLongImport.tsx"; // so this imports comes before
import { longSpecifier } from "b.js";
import { longSpecifier } from "longImport.js";
```
- `no-line-length-sort` — disable sorting of same-type imports by line length
Example
```js
import * as React from "react";
// imports of one category won't be sorted inside by line length
import { longSpecifier } from "longImport.js";
import { longSpecifier } from "b.js";
```