はじめに
こんにちは！ソフトウェアエンジニアの種岡です。
私たちのチームでは、TypeScriptを使用して開発を行っており、Prettierというコードフォーマッターを利用し、チーム内でコーディングスタイル統一に大変重宝しています。
そんなフォーマッター界隈で、Rust製で爆速で動作すると噂のdprintが良いということで試してみたところ、驚くべきことが起きました！
Prettierでは、コードフォーマッティングに 7.69秒 かかっていたのですが
dprintを使うことでわずか 0.47秒 で完了するようになりました🚀🚀🚀
なんと、 10倍以上速い とういう結果に！
コードフォーマットは、Gitのpre-commitフックやGitHub Actionsで日々活用しており、普段の開発作業の裏側でコードの品質を支えてくれているありがたい存在です。
この速度改善により、開発プロセスの中で発生する待ち時間が短縮され、より効率的な開発作業に取り組むことができるのが嬉しいですし、インストールや設定も非常に簡単なのも魅力的です。
また、既存のコードフォーマッターからの移行コストが気になるとは思いますが、Microsoft社がTypeScriptのプロジェクトにdprintを採用したりと大きなプロジェクトでの実績も増えてきているので、試してみる価値はあると思います！
なお前回は、同様にRustで書かれたPythonのLinterであるRuffについての記事も掲載しています！ぜひこちらの記事も合わせてご覧ください！
dprintとは？
dprintはRust製の高速で動作するコードフォーマッターです。
TypeScript, JavaScript, JSON, Markdown, TOML, Dockerfileなど複数言語に対応しています。
こちらに
This project is under active early development. I recommend you check its output to ensure it's doing its job correctly and only run this on code that has been checked into source control.
とあるように現在も活発に開発されている様子が伺えます。
ブラウザ上で動作するPlaygroundもあるので、どんな感じかを試してみるのをオススメします。
使い方
インストール
こちらを参考にしてdprintをインストールします。
$ npm install dprint
設定ファイルの生成
dprint initを実行すると以下のプロンプトが表示されます。
dprintではコードフォーマット対象の言語をプラグインの追加という形で定義します。
$ npx dprint init Select plugins (use the spacebar to select/deselect and then press enter when finished): > [x] dprint-plugin-typescript [x] dprint-plugin-json [x] dprint-plugin-markdown [x] dprint-plugin-toml [ ] dprint-plugin-dockerfile
追加したいプラグインを選択するとdprint.jsonが生成されます。
以下生成されたdprint.jsonの中身です。
{
"typescript": {
},
"json": {
},
"markdown": {
},
"toml": {
},
"excludes": [
"**/node_modules",
"**/*-lock.json"
],
"plugins": [
"https://plugins.dprint.dev/typescript-0.88.3.wasm",
"https://plugins.dprint.dev/json-0.19.0.wasm",
"https://plugins.dprint.dev/markdown-0.16.2.wasm",
"https://plugins.dprint.dev/toml-0.5.4.wasm"
]
}
実行
dprint check を実行することで、dprintによって整形される部分を確認できます。
$ npx dprint check from /dprint-test/README.md: 1 1| #·はじめまして 2 2| 3|- 4|- 3 5|  4 6|
dprint fmt を実行することでフォーマットされます。
設定
コードフォーマットの設定オプションは言語ごとに公式HPに記載されているので、チームの流儀に合わせて適宜定義します。
以下はTypeScriptに対して設定オプションを追加している例になります。
特定のファイルだけコードフォーマット対象にしたい場合は includes を使い、対象外にしたいディレクトリなどは excludes を使って表現できます。
{ "lineWidth": 100, "typescript": { "quoteStyle": "preferSingle", "quoteProps": "asNeeded", "semiColons": "always" }, "json": {}, "markdown": {}, "toml": {}, "includes": ["**/*.{ts,tsx,js,jsx,cjs,mjs,json,md,toml,html,graphql,yml}"], "excludes": [ "**/node_modules", "**/*-lock.json", ], "plugins": [ "https://plugins.dprint.dev/typescript-0.88.3.wasm", "https://plugins.dprint.dev/json-0.19.0.wasm", "https://plugins.dprint.dev/markdown-0.16.2.wasm", "https://plugins.dprint.dev/toml-0.5.4.wasm" ] }
Prettierからの移行について
既存プロダクトで Prettier を使っていた場合は、いきなりdprintへの移行はコストは高いと思います。
そんな悩みにdprintは Prettierプラグイン を用意してくれており、とりあえずdprint経由でPrettierを動かすことで移行のハードルを下げることができます。
dprint経由でもファイルを並行でフォーマットするので速いとのことで、実際にやってみたら 4倍ぐらい 速かったです🚀
GitHub Action
自前でdprint checkを実行するのも良し、Marketplaceで配布されているdprint check actionアクションを利用するも良しです。
check実行後に返ってくるExit Codesはこちらが参考になります。
エディター拡張機能
VSCode と IntelliJ は拡張機能が用意されているので、一緒に拡張機能を入れておくと開発が捗ります。
おわりに
dprintを導入することで高速にコードフォーマットすることができました。
precommit時にPrettierを実行させていたので、コミットするまで微妙に待たされる時間がありましたが、dprintでは高速で処理されるので待ち時間がなくなりとっても嬉しいです。
チリツモではありますが、毎日実行している部分でもありますし、月単位にするとかなりの時間を節約できたと思えるので、その時間を別の開発時間に活用できると考えるとお得です。
今自分がいるチームはプロダクトリリース前だったので、Prettierからの移行はスムーズに進めることができました。(dprintにしたことで出てくる変更はありましたが大きな問題にはならず)
これからプロダクト開発を始める場合やまだリリース前の場合は是非検討してみるのをオススメします。
