Zenn
✨

@ianvs/prettier-plugin-sort-imports のオプションが v.4.0.0 で色々変更されたので書いておく

2023/06/08に公開
JavaScript
TypeScript
Prettier
tech

注意

@trivago/prettier-plugin-sort-imports
ではなく
@ianvs/prettier-plugin-sort-imports
についての記事です。

@ianvs/prettier-plugin-sort-imports は @trivago/prettier-plugin-sort-imports をもとに作られたもの。

背景

Prettier 用の @ianvs/prettier-plugin-sort-imports プラグインをよく使っています。
このたび 2023/05/26 リリースの v.4.0.0 から大多数のオプションの削除・入れ替えが行われました。

オプション名などで検索しても、これに触れた日本語記事が無かったので、行われた変更と対策を書いておきます。

※ 参照元 Breaking Changes
https://github.com/IanVS/prettier-plugin-sort-imports/releases/tag/v4.0.0

削除されたオプション

importOrderBuiltinModulesToTop

→ 常に Trueに

削除に合わせて、"<BUILTIN_MODULES>" というスペシャルワードが追加されました。
Top以外に変更したい場合は、importOrderで特定の位置に設定できます。

例

▼ prettier.config.cjs

  importOrder: [
    "^~/(.*)$",
    "^[./]",
    "<BUILTIN_MODULES>"
  ],

▼ sample.ts

import * as fs from "fs"
import { prisma } from "@acme/db";
import { env } from "../env.mjs";

↓ Prettier実行

import { prisma } from "@acme/db";

import { env } from "../env.mjs";
import * as fs from "fs";

importOrderSeparation

→ importOrderに "" を指定するように統一されました。

例

▼ prettier.config.cjs

  importOrder: [
    "^~/(.*)$",
    "", // ← これ
    "^[./]",
    "", // ← これ
    "<BUILTIN_MODULES>"
  ],

importOrderCaseInsensitive

→ 大文字小文字は常に区別しないようになりました。

importOrderGroupNamespaceSpecifiers

→ 代替は今のところ無いとのこと。復活を望む場合はIssueで声を上げる必要あり。

importOrderSortSpecifiers

→ 常にonの動きになるとのこと。

importOrderMergeDuplicateImports

→ こちらも常にonの動きに。

importOrderCombineTypeAndValueImports

→ 常にonの動きに（影響を受けるのはFlow）
→ TypeScriptとしては "importOrderTypeScriptVersion" というオプションに置換。バージョンを指定してあげると、適切なimport構文にしてくれます。

例

▼ prettier.config.cjs

    importOrderTypeScriptVersion: '5.0.0',

※ import {type foo} という構文のサポートに応じたオプションとのことですが、具体的な動きは未確認。

まとめ

特に気にする必要があるのは

  • importOrderBuiltinModulesToTop
  • importOrderSeparation
  • importOrderCombineTypeAndValueImports

の3つですね。
それ以外は単純に削除で良さそう。

通して見てみますと、設定の一貫性の保持・機能性の向上など、良い変更が取り込まれていますので、積極的にバージョンアップしたいですね！👍

Discussion