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.
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
import {
useState,
useEffect,
useCallback,
useMemo,
useRef
} from "react";
import type {
ComponentProps,
FC,
ReactElement
} from "react";
import {
createUser,
updateUser,
deleteUser,
getUserById
} from "@/api/users";import { useState, useEffect, useCallback, useMemo, useRef } from "react";
import type { ComponentProps, FC, ReactElement } from "react";
import { createUser, updateUser, deleteUser, getUserById } from "@/api/users";# 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-importsAdd the plugin to your Prettier configuration:
{
"prettier": {
"plugins": ["prettier-plugin-one-line-imports"]
}
}{
"plugins": ["prettier-plugin-one-line-imports"]
}module.exports = {
plugins: ['prettier-plugin-one-line-imports']
};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";- Prettier: Version 3.0.0 or higher
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.