はじめに
この記事では、Prettier のプラグインである prettier-plugin-organize-imports を特定のファイルのみ無効にする方法を記載します。
prettier-plugin-organize-imports では、import の並び替えや未使用の import の削除が自動できます。
ただ、場合によっては、意図的に import の並び順を指定したいケースも思います。例えば、React 向けのコンポーネントライブラリである Mantine では、指定された import 順にしないと、スタイルが適用されないこともあります。
上記のケースなどに対応するため prettier-plugin-organize-imports には、特定のファイルで
開発環境
開発環境は以下の通りです。
- Windows 11
- React 18.3.1
- TypeScript 5.5.2
- Vite 5.4.10
- Prettier 3.3.3
- prettier-plugin-organize-imports 4.1.0
- @mantine/core 7.13.5
- @mantine/hooks 7.13.5
- PostCSS 8.4.47
prettier-plugin-organize-imports のインストールと設定
まずは prettier-plugin-organize-imports のインストールと設定方法を記載します。
以下のコマンドで prettier-plugin-organize-imports をインストールします。
npm install --save-dev prettier-plugin-organize-imports
次に .prettierrc で prettier-plugin-organize-imports を読み込みます。
.prettierrc
{
"plugins": ["prettier-plugin-organize-imports"]
}
以上で設定は完了です。
動作確認をします。
保存時に自動で import 順が変わります。
prettier-plugin-organize-imports を特定のファイルのみ無効にする
無効にしたいファイルへ // organize-imports-ignore もしくは // tslint:disable:ordered-imports と記載することで無効にできます。
App.tsx
// organize-imports-ignore
import "@mantine/core/styles.css";
import { Center, MantineProvider, Stepper, StepperStep } from "@mantine/core";
import classes from "./css_modules/Stepper.module.css";
動作確認をします。
保存しても import 順は変わりません。
