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:

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.

"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

  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

  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";