VS CodeやZedなどのエディターでPrettierとOxfmtが共存できない問題の対処法

ZedやVS CodeでフォーマッターとしてOxfmtを使おうとしたところ、Prettierと共存できないという問題に直面しました。対処法として、Bunをフォーマッターとして指定するのがよさそうという結論になったので、詳しくまとめました。

問題の詳細

ZedはフォーマッターとしてPrettierを組み込んでおり、デフォルトではPrettierでフォーマットします。フォーマッターとしてOxfmtを使いたい場合は、次のように設定します。

1
{
2
    "formatter": {
3
        "language_server": {
4
            "name": "oxfmt"
5
        }
6
    }
7
}

しかし、これを設定するとPrettierが無効化されので、Prettierを使用しているプロジェクトでは.prettierrc.jsonが無視され、Oxfmtのデフォルトの設定でフォーマットされてしまいます。反対に、この設定をしないとOxfmtを使用しているプロジェクトでは.oxfmtrc.jsonが無視され、Prettierのデフォルトの設定でフォーマットされます。

どちらか片方のプロジェクトしか扱わない場合は問題ありませんが、普段扱っているプロジェクトのフォーマッターがPrettierとOxfmtで混在している場合には、併用できないという問題が生じます。

一応、Zedはプロジェクトの.zed/settings.jsonで設定を上書きます。そのため、広く使われているPrettierをグローバル設定のフォーマッターにして、Oxfmtを使っているプロジェクトではプロジェクト設定でOxfmtを使うように構成できます。

自分で管理しているプロジェクトではそれで問題ありませんが、他人の管理するプロジェクトでは勝手にZedの設定を追加するわけにもいきません。

Zedでしか確認していませんが、おそらくVS Codeでも同様の問題が生じると思われます。

対処法

この問題についてChatGPTと議論していたところ、フォーマッターとしてBunを設定するのがよさそうという結論になりました。

Bunはv1.4.4でPrettierとOxfmtの両方と互換性のあるbun fmtコマンドを導入しました。bun fmtは、.prettierrc.jsonのあるプロジェクトではPrettier互換のフォーマッターとして振る舞います。また、.oxfmtrc.jsonのあるプロジェクトではOxfmt互換のフォーマッターとして振る舞います。

つまりbun fmtを使えば、プロジェクトがPrettierとOxfmtのどちらを使用しているかにかかわらず、設定を読み込んでフォーマットできるということになります。

なお、bun fmtはPrettierとOxfmtの両方と互換性があることになっていますが、内部でそれらを使っているわけではないので、エッジケースで異なるフォーマット結果になる可能性は否定できません。それでも、そのようなケースはまれでしょうし、ほとんどのプロジェクトはCIでフォーマットをチェックしていると思うので大きな問題はないと考えます。

Zedの場合は、システムにBun v1.4.4以降をインストールして次のように設定することで、Bunをフォーマッターとして利用できます。

1
{
2
    "formatter": {
3
        "external": {
4
            "command": "bun",
5
            "arguments": ["fmt", "--no-script", "--stdin-filepath", "{buffer_path}"]
6
        }
7
    }
8
}

VS Codeでは、Simple LSP Clientのような拡張機能をインストールして、Bunをフォーマット用の言語サーバーとして登録します。VS CodeのSimple LSP ClientではPowerShellのプロファイルが読み込まれないようで、miseなどでBunを管理している場合はバイナリーの絶対パスを指定する必要がありました。

1
{
2
    "simpleLspClient.formatters": {
3
        "bun": {
4
            "cmd": [
5
                "bun",
6
                "fmt",
7
                "--no-script",
8
                "--stdin-filepath",
9
                "${file}"
10
            ],
11
            "filetypes": [
12
                "javascript",
13
                "javascriptreact",
14
                "typescript",
15
                "typescriptreact",
16
                "json",
17
                "jsonc",
18
                "css",
19
                "scss",
20
                "less",
21
                "html",
22
                "markdown",
23
                "yaml"
24
            ]
25
        }
26
    },
27
    "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc][css][scss][less][html][markdown][yaml]": {
28
        "editor.defaultFormatter": "wdomitrz.simple-lsp-client",
29
        "editor.formatOnSave": true
30
    }
31
}

まとめ

ZedやVS CodeでPrettierとOxfmtが共存できない問題の対処法について解説しました。

通常の設定ではPrettierとOxfmtを共存させられないので、bun fmtコマンドをフォーマッターとして指定することで、実質的にそれらを共存させられます。