Autofixes and Formatting with Biome.js and TypeScript in Zed for React Development

Enable Zed to use Biome.js for formatting and auto-fixing

Zed is getting some hype in the software development space. At the time of writing, the editor is still in beta. It will be interesting to see how Zed evolves as more developers provide feedback during the beta testing.

However, some of us like to live on the edge and try things early. For those, I would like to provide my current solution, albeit not the one I wish for, since we are circumventing a proper LSP integration, which Biome.js thankfully provides out of the box.

It's important to note that the current solution may be considered "hacky" due to the lack of a proper LSP integration, which Biome.js offers seamlessly.

Formatting

For barebones formatting functionality, we can use those settings to replace the eslint-formatter with Biome, you can start by configuring the barebones formatting functionality using the settings provided.

Note: Zed likes to use the stdout of your formatter to apply it to the corresponding file. Therefore, if we are going to format the input file, we should not write to it directly; we need to provide the correctly formatted output of the input file are stdout, so that Zed can apply it properly.

// settings.json
{
  // ...
  "language_overrides": {
    "TypeScript": {
      "formatter": {
        "external": {
          // consider `npx/pnpx/bunx @biomejs/biome` as an alternative, if you do not like to use a local binary
          "command": "node_modules/.bin/biome",
          "arguments": [
            "format",
            // --use-server // if you like to
            // biome 1.5.3 just needs a file path with the right extension; the name doesn't matter
            "--stdin-file-path=something.ts",
            "<",
            "{buffer_path}"
          ]
        }
      }
    },
    "TSX": {
      "formatter": {
        "external": {
          "command": "node_modules/.bin/biome",
          "arguments": [
            "format",
            "--stdin-file-path=something.tsx",
            "<",
            "{buffer_path}"
          ]
        }
      }
    }
  }
}

For smoother integration, consider adding the --use-server flag to leverage a running biome daemon in the background. This optimization will enhance efficiency in formatting with Biome.js seamlessly.

Linting and Autofixes

Like in eslint, Biome.js offers some functionality to autofix some issues it encounters on its own. To find those errors via the CLI, we can execute biome lint <file path>.

To apply those suggestions while saving your file, the corresponding command line prompt would be biome check --apply for applying everything that Biome.js considers safe, and biome check --apply-unsafe for unsafe changes respectively.

Applying this insight to our settings.json it would look like this:

{
  // ...
  "TSX": {
      "formatter": {
        "external": {
          "command": "node_modules/.bin/biome",
          "arguments": [
            "check", // formatting, autofixes, and import grouping
            "--apply-unsafe", // allow dangerous autofixes
            "--stdin-file-path=something.tsx",
            "<",
            "{buffer_path}"
          ]
        }
      }
    }
  // ...
}

That's it! Personally, as mentioned above, the LSP functionality for in-editor linting is still missing and I hope the future integration and documentation of a proper Custom-LSP or Plugin-System system will address this limitation for a more robust development experience with Zed.

And, as fate has it, the developers of Zed launched plugin support at the time of writing this article (Twitter).