eslint+prettierからeslint+dprintに移行しようとしてあきらめたメモ

# 概要
prettierよりもはやいと噂のdprintに移行しようとした。

eslintの`import/order`との組み合わせが悪く、うまく使えなかった。

[あきらめたプルリク](https://github.com/hibohiboo/odyssage/pull/90)


# インストール

[dprint公式](https://dprint.dev/setup/)

私の環境は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](https://github.com/g-plane)）がメンテナンスしている人気の dprint 拡張プラグイン群。
    
*   特に JS/TS 対応の `malva` や、 `pretty_yaml` は品質が高く、公式がカバーしていない領域を補っている

# 設定
prettierの設定とdprintの設定を見比べる。デフォルトと異なるのsingleQuoteの設定くらい。

## prettierの設定

```json:.prettierrc
{
  "semi": true,
  "arrowParens": "always",
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false
}
```

## dprintのデフォルト設定確認
[Config](https://dprint.dev/config/)
[Typescriptで設定可能な値](https://dprint.dev/plugins/typescript/config/)

## 結論

```diff: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](https://marketplace.visualstudio.com/items?itemName=dprint.dprint)の拡張を導入。


```diff:.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](https://www.npmjs.com/package/eslint-plugin-import)とdprintのソート順が合わない問題が発生した。
dprintがソートするとeslintでエラーが出てしまう。

また、eslintのmaxlenが100でdprintが120など微妙に会っていない。

今回は、ソート順に深いこだわりはないので`eslint-plugin-import`をアンインストールして`dprint`に任せることにした。
しようと思った。
アンインストールしても、`import/order`のlintエラーが残り続ける現象に遭遇。

今回はあきらめることに。

# ぼやき
prettier-vscodeが改行コード変換してくれないバグが4年間ほっとかれてるので、できれば移行したかったが。。 [issue](https://github.com/prettier/prettier-vscode/issues/1327)

# 参考

[次世代のFormatter「dprint」を試してみた](https://zenn.dev/riya_amemiya/articles/3cfb09104804be)