pretty-imports
Opinionated Imports Sorter
No more mixes of default and named imports. Automatically prettify and sort your import statements.
🌟 Perfectly works in addition to prettier and typescript.
😨 Before
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
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:
{
"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:
import 'anyfile'
import * as anything from 'anywhere'
import default from 'anywhere'
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.
"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 lengthExample
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 lengthExample
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";