prettier-plugin-adjust-imports
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

Prettier plugin adjust imports

A prettier plugin to sort import declarations through the alias to relatives if necessary.

The Problem

When your IDE automatically imports any component or variable, it does not always do it well and often imports through a very long alias, something that lies very nearby in the same alias branch. As a result import look ugly and can produce cyclic dependency.

Solution

// src/pages/admin/users/UsersView/UsersView.tsx

// before
import { UsersTable } from "@pages/admin/users/UsersView/components";
import { UsersViewProps } from '@pages/admin/users/UsersView/UsersView.types';
import { RolesTable } from '@pages/admin/roles/RolesView/components';

// after plugin do its job
import { UsersTable } from './components';
import { UsersViewProps } from './UsersView.types';
import { RolesTable } from '../../roles/RolesView/components';

Install

npm install -D prettier-plugin-adjust-imports

or, using yarn

yarn add -D prettier-plugin-adjust-imports

Usage

Add plugin in prettier config file.

module.exports = {
  "plugins": ["prettier-plugin-adjust-imports"]
}

Add config to project root.
It is not required. You can do it only if you need.

// adjust-imports-plugin.config.json
{
  "aliases": {
    "@shared": ["components/shared"],
    "@features": ["components/features"]
  },
  "ascendingDepth": 0,
  "descendingDepth": 0
}
Name Required Initial value Description
aliases false {} Your project aliases. You only need it if you don't have tsconfig.json in your project root.
ascendingDepth false 0 The maximum nesting level above the source file. 0 means no limits.
descendingDepth false 0 The maximum nesting level below the source file. 0 means no limits.

Package Sidebar

Install

npm i prettier-plugin-adjust-imports

Weekly Downloads

1

Version

0.2.2

License

ISC

Unpacked Size

30.8 kB

Total Files

51

Last publish

Collaborators

  • crmapache