prettierのラッパーパッケージを作成した話 ~prettier-diffcheck~
TL;DR
prettier-diffcheckは、Prettierによるコード整形前後の差分をdiff形式で表示するためのラッパーツールです。
ファイルを実際に変更することなく、Prettierがコードにどのような修正を加えるのかを事前に視覚的に確認できます。
これにより、意図しない変更を避け、安心してPrettierを導入・運用できるようになります。
作成のきっかけ
Javaでコードフォーマッターの導入を検討していた際Prettierに出会いました。
調べてみるとプラグインを導入することでJavaソースコードもフォーマットできることを知り使ってみることにしました。
Prettier自体は素晴らしいツールなのですが、具体的にどのような変更を加えてくれるのかをdiff形式で事前に確認したくなりました。
Prettier自体にはwriteオプションをつけずに実行することで、整形後の内容を標準出力で確認する機能はあります。しかし、この方法だと既存のコードと整形後のコードの差分を見るということはできません。
checkコマンドもありますが、こちらはフォーマットルールに沿わないファイルの一覧を表示するだけです。
prettierについて
Prettierは、JavaScript、TypeScript、CSS、HTMLなど様々な言語に対応したコードフォーマッターです。コードを解析し、独自のルールに基づいて整形することで、記述者の間でばらつきがちなコードスタイルを統一する目的で利用されます。
作ったパッケージの紹介
prettier-diffcheckは、Prettierのラッパーツールであり、フォーマット前後の差分をdiff形式で表示するためのパッケージです。ファイルを実際に変更することなく、Prettierがどのような変更を加えるかを手軽に確認できるようになります。
使い方
prettier-diffcheckは、以下の形式でコマンドラインから使用できます。
単一ファイル:
npx prettier-diffcheck src/index.js
複数ファイル:
npx prettier-diffcheck src/index.js lib/utils.js
グロブパターン（再帰的）:
npx prettier-diffcheck "src/**/*.js"
出力例
実行すると、以下のようにフォーマットが必要なファイルの差分がdiff形式で表示されます。
⚠ src/example.js needs formatting:
===================================================================
@@ -1,3 +1,3 @@
-const foo={a:1,b:2};
-function bar(){return "hello";}
+const foo = { a: 1, b: 2 };
+function bar() {
+ return "hello";
+}
Formatting Summary:
Total files: 1
✓ Already formatted: 0
⚠ Needs formatting: 1
まとめ
今回初めてnpmパッケージを作成しました。
最初はJavaのソースコードを書いていた時にフォーマッターを導入したいという気持ちからツールを探していただけだったのですが、いつの間にか横道にそれてツールの作成をしていました。
今まではツールを探して導入し開発環境を快適にすることが楽しかったですが、ツール自体を自作して開発環境を改善するのも楽しいですね。
最後になりますが、Prettierを管理されているすべてのエンジニアの方に感謝の気持ちを申し上げます。
Discussion