Spike: Biome for linting and formatting

[praseodym]

Draft to evaluate whether we should continue with Biome.

Biome is a super fast linter and formatter for web projects (written in Rust!). On my machine it can lint and format Abacus in about 130ms, whereas Prettier takes 3.8s and ESLint takes 13.7s.

The Biome configuration consists of formatting and linting configuration. The formatting configuration was created by automatically migrating from Prettier and some manual tweaks. The current configuration matches our Prettier config quite well, npx @biomejs/biome format only reports 8 files that would be reformatted.

Automatic migration of the linting configuration created a very verbose file, so I chose to write it by hand. I enabled the recommended rules and then disabled ones that report many errors. npx @biomejs/biome lint currently reports 46 issues that we still need to fix or ignore (for now). Eventually most of the currently disabled lints should also be re-enabled to fix (potential) issues in our codebase.

A disadvantage is that Biome doesn't (yet) support every lint rule that we have currently configured in ESLint, in particular the library-specific ones from the Storybook and Playwright plugins are not available. We could consider keeping ESLint around for just these rules.

To try out locally:

• Check out this branch
• Run npm ci to install Biome
• Install the first-party extension in VS Code, IntelliJ/RustRover, Zed or one of the third-party extensions
  • For Zed, configure the LSP config_path as frontend/biome.config
• Change some code to experience how fast Biome can lint
• Check out remaining findings from npx @biomejs/biome check
• Remove disabled lints from biome.json to check out other findings that we missed with ESLint

To evaluate:

• Do we think Biome has advantages for our project?
• If so, do we want to keep ESLint around for lint rules that are not supported by Biome?

Remaining work if we want to continue with Biome:

• Apply format fixes
• Fix remaining lint issues (or suppress them, or disable the rule)
• Decide if we want to keep ESLint for lints that are not covered by Biome
• Configure GitHub Actions to use Biome instead of Prettier and ESLint
• Configure Lefthook
• Remove Prettier config
• Remove ESLint config (or parts of config covered by Biome)
• Decide if there are optional Biome rules that we want to enable (see icons on e.g. the Biome JavaScript Rules docs)

Relates to #1008

[github-actions]

Sigrid maintainability feedback

💭️ You did not change any files that are measured by Sigrid

---

View this system in Sigrid

[github-actions]

PDF Diff Summary

Comparing against base branch: main

File	Status
model-n-10-2.pdf	✅ No changes
model-na-14-2-bijlage1.pdf	✅ No changes
model-na-14-2.pdf	✅ No changes
model-na-31-2-bijlage1.pdf	✅ No changes
model-na-31-2-inlegvel.pdf	✅ No changes
model-na-31-2.pdf	✅ No changes
model-p-2a.pdf	✅ No changes

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.40%. Comparing base (a53268f) to head (875873b).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2561      +/-   ##
==========================================
+ Coverage   92.38%   92.40%   +0.01%     
==========================================
  Files         385      385              
  Lines       28782    28782              
  Branches     2721     2722       +1     
==========================================
+ Hits        26591    26595       +4     
+ Misses       2097     2093       -4     
  Partials       94       94              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[oliver3]

Good to see that it has support for linting JSON files as well!

  "overrides": [
    {
      "includes": [
        "src/i18n/locales/**/*.json"
      ],
      "assist": {
        "enabled": true,
        "actions": {
          "source": { "useSortedKeys": "on"}
        }
      }
    },

[oliver3]

I think it is a good idea to switch to Biome for our project because of its speed and combining linting and formatting in one tool and the (recommended) rules seem to uncover some more potential issues.

Having separate dedicated ESLint configs for the remaining use cases (storybook, playwright) would be nice if it does not slow the whole process down again (lefthook, CI).

One extra suggestion: let's use JSONC for the config so that we can also add comments for the choices we make regarding rules etc.