A Prettier plugin to always force TypeScript imports on one line (and get rid of these ugly multi-line statements spanning half your screen).
npm install prettier-plugin-one-line-importstypescript
import {
useState,
useEffect,
useCallback,
useMemo,
useRef
} from "react";
import type {
ComponentProps,
FC,
ReactElement
} from "react";
import {
createUser,
updateUser,
deleteUser,
getUserById
} from "@/api/users";
`
$3
`typescript
import { useState, useEffect, useCallback, useMemo, useRef } from "react";
import type { ComponentProps, FC, ReactElement } from "react";
import { createUser, updateUser, deleteUser, getUserById } from "@/api/users";
`
๐ Installation
`bash
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:
$3
`json
{
"prettier": {
"plugins": ["prettier-plugin-one-line-imports"]
}
}
`
$3
`json
{
"plugins": ["prettier-plugin-one-line-imports"]
}
`
$3
`javascript
module.exports = {
plugins: ['prettier-plugin-one-line-imports']
};
`
๐ก Comment Preservation
The plugin intentionally ignores import statements with comments inside like this:
`typescript
// This stays multi-line because of comments
import {
// React state management
useState,
// Side effects
useEffect,
useCallback, // memoized callback
useMemo,
useRef // mutable ref
} from "react";
``