概要
prettierよりもはやいと噂のdprintに移行しようとした。
eslintのimport/orderとの組み合わせが悪く、うまく使えなかった。
インストール
私の環境はbunを使っているので下記でインストール
bun i -D dprint
初期設定を行う
npx dprint init
initではプラグインの選択を問われる。
それぞれ意味がわからなかったのでChatGPTに解説してもらった
✅ チェック済みのもの（初期選択）
| プラグイン名 | 対象 | 説明 |
|---|---|---|
| dprint-plugin-json | .json |
JSONファイルの整形（Prettierと同等） |
| dprint-plugin-markdown | .md |
Markdownファイルの整形（見出し・インデント・コードブロックなど） |
| dprint-plugin-toml | .toml |
TOMLファイル用の整形。Rustや設定ファイルに使われる |
| g-plane/malva |
.js, .ts, .jsx, .tsx
|
TypeScript / JavaScript 用フォーマッター。Prettierライクで高速。dprint公式ではないが人気 |
| g-plane/markup_fmt |
.html, .xml, .svg
|
HTML系マークアップの整形。インデントなどを整理 |
| g-plane/pretty_yaml |
.yaml, .yml
|
YAMLファイルの整形。特に設定ファイルで役立つ |
❌ チェックされていないもの（必要に応じて）
| プラグイン名 | 対象 | 説明 |
|---|---|---|
| dprint-plugin-dockerfile | Dockerfile |
Dockerfile専用の整形ツール |
| dprint-plugin-biome |
.js, .ts, .json など |
Biome（旧Rome）製フォーマッターをdprint経由で使用可能にするブリッジ |
| dprint-plugin-ruff | .py |
Python用フォーマッター。Ruffと連携。PrettierのPython版として高速化志向 |
| dprint-plugin-jupyter | .ipynb |
Jupyter Notebookファイルの整形 |
| g-plane/pretty_graphql | .graphql |
GraphQLスキーマやクエリの整形に使う |
💡補足：g-plane って何？
-
g-planeは個人開発者（@g-plane）がメンテナンスしている人気の dprint 拡張プラグイン群。 -
特に JS/TS 対応の
malvaや、pretty_yamlは品質が高く、公式がカバーしていない領域を補っている
設定
prettierの設定とdprintの設定を見比べる。デフォルトと異なるのsingleQuoteの設定くらい。
prettierの設定
.prettierrc
{
"semi": true,
"arrowParens": "always",
"singleQuote": true,
"trailingComma": "all",
"useTabs": false
}
dprintのデフォルト設定確認
結論
dprint.json
{
"typescript": {
"quoteStyle": "preferSingle",
"binaryExpression.operatorPosition": "sameLine"
},
"json": {
},
"markdown": {
},
"toml": {
},
"malva": {
},
"markup": {
},
"yaml": {
},
"excludes": [
"**/node_modules",
"**/*-lock.json",
".DS_Store",
"**/package-lock.json",
"**/bun.lock",
"**/.turbo",
"**/dist"
],
"plugins": [
"https://plugins.dprint.dev/typescript-0.95.1.wasm",
"https://plugins.dprint.dev/json-0.20.0.wasm",
"https://plugins.dprint.dev/markdown-0.18.0.wasm",
"https://plugins.dprint.dev/toml-0.7.0.wasm",
"https://plugins.dprint.dev/g-plane/malva-v0.12.1.wasm",
"https://plugins.dprint.dev/g-plane/markup_fmt-v0.20.0.wasm",
"https://plugins.dprint.dev/g-plane/pretty_yaml-v0.5.1.wasm"
]
}
VSCode設定
dprint.dprintの拡張を導入。
.vscode/settings.json
"[typescript]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.defaultFormatter": "dprint.dprint",
"editor.formatOnSave": true,
},
"[typescriptreact]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.defaultFormatter": "dprint.dprint",
"editor.formatOnSave": true,
},
ESLintとの競合
eslint-plugin-importとdprintのソート順が合わない問題が発生した。
dprintがソートするとeslintでエラーが出てしまう。
また、eslintのmaxlenが100でdprintが120など微妙に会っていない。
今回は、ソート順に深いこだわりはないのでeslint-plugin-importをアンインストールしてdprintに任せることにした。
しようと思った。
アンインストールしても、import/orderのlintエラーが残り続ける現象に遭遇。
今回はあきらめることに。
ぼやき
prettier-vscodeが改行コード変換してくれないバグが4年間ほっとかれてるので、できれば移行したかったが。。 issue