How to fix Prettier and Oxfmt conflicts in VS Code and Zed

When I tried to use Oxfmt as my formatter in editors like Zed and VS Code, I ran into a problem: I couldn't use it alongside Prettier. After exploring possible workarounds, I concluded that using Bun as the formatter seems to be the best approach. Here's how to set it up.

The problem

Zed comes with Prettier built in and uses it as the default formatter. To use Oxfmt instead, you need to add the following configuration:

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

However, with this setting, Zed stops using Prettier. In projects that use Prettier, Zed ignores .prettierrc.json and formats files using Oxfmt's default settings. Without this setting, Zed ignores .oxfmtrc.json in projects that use Oxfmt and formats files using Prettier's default settings.

This isn't a problem if you only work on projects that use one formatter. However, if you regularly switch between projects that use Prettier and those that use Oxfmt, you can't use both formatters with the same editor configuration.

Zed does let you override global settings through a project's .zed/settings.json file. You could keep Prettier as the global formatter, since it's more widely used, and configure Oxfmt at the project level wherever you need it.

That approach works for projects you maintain yourself, but you can't just add Zed-specific configuration files to projects maintained by others.

I've only tested this in Zed, but I suspect VS Code has a similar problem.

The solution

After discussing this problem with ChatGPT, I concluded that using Bun as the formatter seems to be a good solution.

In v1.4.4, Bun introduced the bun fmt command, which offers compatibility with both Prettier and Oxfmt. In projects with a .prettierrc.json file, bun fmt behaves like a Prettier-compatible formatter. In projects with a .oxfmtrc.json file, it behaves like an Oxfmt-compatible formatter.

This means you can use bun fmt to format files according to each project's configuration, regardless of whether the project uses Prettier or Oxfmt.

Although bun fmt aims to be compatible with both Prettier and Oxfmt, it doesn't use either formatter internally. As a result, some edge cases may produce different formatting results. I expect such cases to be rare, though, and most projects likely check formatting in CI, so I don't consider this a major concern.

In Zed, install Bun v1.4.4 or later on your system and add the following configuration to use Bun as the formatter:

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

For VS Code, install an extension such as Simple LSP Client and register Bun as a language server for formatting. VS Code's Simple LSP Client doesn't seem to load PowerShell profiles, so if you manage Bun with mise or a similar tool, you'll need to specify the absolute path to the Bun binary.

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
}

Conclusion

I've covered how to work around the conflict between Prettier and Oxfmt in editors like Zed and VS Code.

With the default editor configuration, you can't use Prettier and Oxfmt together across projects. By configuring bun fmt as your formatter, you can effectively work with both without changing your editor settings for each project.