Skip to content

martinzima/prettier-plugin-one-line-imports

Repository files navigation

prettier-plugin-one-line-imports

npm version npm downloads License: MIT Prettier

A Prettier plugin that forces TypeScript imports to stay on one line - and get rid of these ugly multi-line statements spanning half your screen.

💡 Motivation

Prettier authors consistently keep ignoring community feedback about the impracticality of multi-line imports that Prettier is forcing on everybody and are even adamant that Prettier should not offer any options to configure this behavior.

See this age-old Github issue from 2019:

💬 Don’t multi-line imports (let them take less space) / Conflict with VSCode’s organizeImports

📸 Showcase

Before (Default Prettier Behavior)

import {
  useState,
  useEffect,
  useCallback,
  useMemo,
  useRef
} from "react";
import type {
  ComponentProps,
  FC,
  ReactElement
} from "react";
import {
  createUser,
  updateUser,
  deleteUser,
  getUserById
} from "@/api/users";

After (With This Plugin)

import { useState, useEffect, useCallback, useMemo, useRef } from "react";
import type { ComponentProps, FC, ReactElement } from "react";
import { createUser, updateUser, deleteUser, getUserById } from "@/api/users";

🚀 Installation

# npm
npm install --save-dev prettier-plugin-one-line-imports

# yarn
yarn add prettier-plugin-one-line-imports --dev

# pnpm
pnpm add -D prettier-plugin-one-line-imports

⚙️ Configuration

Add the plugin to your Prettier configuration:

Option 1: package.json

{
  "prettier": {
    "plugins": ["prettier-plugin-one-line-imports"]
  }
}

Option 2: .prettierrc

{
  "plugins": ["prettier-plugin-one-line-imports"]
}

Option 3: .prettierrc.js

module.exports = {
  plugins: ['prettier-plugin-one-line-imports']
};

💡 Comment Preservation

The plugin intentionally ignores import statements with comments inside like this:

// This stays multi-line because of comments
import {
  // React state management
  useState,
  // Side effects
  useEffect,
  useCallback, // memoized callback
  useMemo,
  useRef // mutable ref
} from "react";

🛠️ Requirements

  • Prettier: Version 3.0.0 or higher

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

About

A Prettier plugin that forces TypeScript imports to stay on one line.

Resources

License

Stars

Watchers

Forks

Packages

No packages published