Formatting with Biome

[langestefan]

Context: #2799

During the discussion the topic of code formatting came up.

Currently JS is formatted using prettier, but it is relatively slow and discrepancies exist between the different prettier versions used in CI and the vscode extension. The current situation also requires developers to setup and configure their own prettier locally correctly, such that it matches the CI prettier check.

Proposal

A great alternative for prettier is Biome. It has a github CI action, a pre-commit hook and a vscode extension. This should avoid discrepancies between locally formatted files and CI checks.

[fingolfin]

I did a quick experiment, it helped me format your PR. Here is the biome.jsonc (so JSON-with-comment) that I used (the tool created it and I modified to ignore some paths, and to set indentation to "2 spaces".

{
  "$schema": "https://biomejs.dev/schemas/2.3.4/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false,
    "includes": [
      "**",

      // Various build products
      "!!docs/build",

      // Vendored theme stuff
      "!!assets/html/scss/highlightjs",

      // And generated theme stuff
      "!!assets/html/themes",

      // Tests contain a bunch of Markdown and such, so we'll just
      // completely ignore it
      "!!test"
    ]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

I then formatted with this command:

npx @biomejs/biome format --write

[mortenpi]

I'll just note that my preference would be to use the most standard tool (which seems to be Prettier), so you don't have to install a separate formatter for every project. Biome seems to be much less adopted. But on the other hand, if Prettier is also not maintained that well anymore, then..

[fingolfin]

I don't know the JavaScript ecosystem so I have no idea how popular prettier vs biome vs something else is. But looking at https://www.npmjs.com/package/prettier vs https://www.npmjs.com/package/@biomejs/biome indeed clearly shows prettier is downloaded 16x times more often per week -- for Biome it is "only 3.5 million" downloads... so both are pretty popular?

But if there is no up-to-date GitHub action formatting with latest "prettier" that's a rather major point against them. In other words: perhaps prettier v3 is more popular than biome, but my guess would be that prettier v2 is even less popular?

---

However, I just searched on their website and found https://prettier.io/docs/ci which suggests using https://github.com/autofix-ci/action so perhaps we are just using "wrong" GH action. If someone can use that to allow us to switch to using prettier v3 instead of biome or prettier v2, that would also seem fine to me.

Alas the action they suggest requires installing the "autofix.ci GitHub App" from https://autofix.ci -- and it works differently, it automatically pushes "formatting fixes" to pull requests. I am not sure I like that (actually, I wouldn't terribly mind if it happened to my PRs, but in the past I have seen many beginners running into git problems when others modified their PR branches, so I am always careful about that, and having it happen fully automatically seems dangerous. But having the option to automatically fix a PR sounds rather appealing to me -- like, this could be done once as the last step before merging the PR).

That said, I notice the GitHub marketplace lists many more prettier based actions: https://github.com/marketplace?query=prettier

---

In the end I have no strong opinion on whether to use prettier v3 or biome, but I think prettier v2 is strictly inferior to both. (Oh and I just see they have a version 4.0.0 alpha...)

[langestefan]

Biome seems to be much less adopted. But on the other hand, if Prettier is also not maintained that well anymore, then..

I think Biome is part of the recent 'rewrite it in rust' movement (uv, ruff, polars,...) with associated speedups. These tools have exploded in popularity.

I stopped using prettier in my Julia projects as well because it can't handle the Julia flavour of markdown. It will format things like:

!!!info
   Info comment

to:

!!!info
Info comment