build: replace prettier with biome

[anonrig]

Summary

This PR replaces Prettier and several Eslint rules with Biome for reduced CI times for faster linting & formatting. Linting and formatting now takes 44 seconds, compared to master branch with 95 seconds.

Here's a list of caveats with the proposed changes:

• Biome has 2 unique bugs which led to adding biome-ignore format in several files. The issues are tracked on Biome repository.
  • 📝 arrowParentheses asNeeds breaks the code biomejs/biome#1106
  • 📝 Switch with fall through cases with comment gets fixed wrongly biomejs/biome#1112
• eslint-config-sentry requires and installs prettier. Therefore, removing from sentry repository package.json causes an error. We eventually need to make prettier optional in the upstream repository.

Why Biome?

I recommend reading the Philosophy behind Biome.

• Biome has a built-in linter (similar to Eslint) and has tons of lint rules.
• Biome has a formatter which is ~95% similar to Prettier. There are some differences between Prettier that's documented here
• Biome has a built-in import sorting/ordering
• Biome has a built-in LSP, VScode and IntelliJ extension.. It has third-part plugins for nevoid, helix, doc.nvim and sublime text.
• Biome has a Github actions that doesn't depend on Node.js to be run.
• Biome supports JS, TS, JSX, JSON, JSONC and CSS. And has Markdown and CSS in their roadmap.
• Biome supports extensible/shareable configuration files. Similar to eslint-config-sentry we should share Biome config.
• Biome supports pre-commit hooks.

Impact

⚠️ The following results are taken on my work M2 machine. The results will be a lot different on shared VM such as GitHub Actions. Please use this as a baseline and execute the following scripts on your own machine.

Before

Duration

It takes 95 seconds to run yarn lint which includes prettier with eslint. In order

yarn lint  95.66s user 4.21s system 159% cpu 1:02.74 total

Time consuming Eslint rules

The following shows the top 10 most time spent rules in Eslint. In order to reproduce the following on your local, please run TIMING=10 yarn lint

Rule                                                          | Time (ms) | Relative
:-------------------------------------------------------------|----------:|--------:
prettier/prettier                                             | 21383.555 |    45.6%
import/default                                                |  6131.662 |    13.1%
import/no-unresolved                                          |  3002.880 |     6.4%
@typescript-eslint/naming-convention                          |  2618.324 |     5.6%
react/no-direct-mutation-state                                |  1669.827 |     3.6%
no-lookahead-lookbehind-regexp/no-lookahead-lookbehind-regexp |  1287.728 |     2.7%
import/no-nodejs-modules                                      |  1058.123 |     2.3%
@typescript-eslint/no-redeclare                               |   889.496 |     1.9%
react/sort-comp                                               |   599.328 |     1.3%
react/no-typos                                                |   578.446 |     1.2%

After

Duration

It takes 44 seconds to run yarn lint command, and only 531ms is spent on Biome. Ideally moving more linting rules to Biome will reduce the linting speed.

yarn lint  44.17s user 2.54s system 151% cpu 30.738 total

Remaining Eslint rules

The following shows the top 10 most time spent rules in Eslint. In order to reproduce the following on your local, please run TIMING=10 yarn lint:js

Rule                                                          | Time (ms) | Relative
:-------------------------------------------------------------|----------:|--------:
import/no-duplicates                                          |  3262.210 |    23.3%
@typescript-eslint/naming-convention                          |  2395.588 |    17.1%
react/no-direct-mutation-state                                |  1504.342 |    10.8%
no-lookahead-lookbehind-regexp/no-lookahead-lookbehind-regexp |  1127.794 |     8.1%
react/sort-comp                                               |   608.894 |     4.4%
react/function-component-definition                           |   491.970 |     3.5%
simple-import-sort/imports                                    |   455.786 |     3.3%
react/jsx-fragments                                           |   297.780 |     2.1%
jest/no-large-snapshots                                       |   252.458 |     1.8%
react/no-deprecated                                           |   187.937 |     1.3%

[github-actions]

🚨 Warning: This pull request contains Frontend and Backend changes!

It's discouraged to make changes to Sentry's Frontend and Backend in a single pull request. The Frontend and Backend are not atomically deployed. If the changes are interdependent of each other, they must be separated into two pull requests and be made forward or backwards compatible, such that the Backend or Frontend can be safely deployed independently.

Have questions? Please ask in the #discuss-dev-infra channel.

[asottile-sentry]

[getsantry]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[mitsuhiko]

Is there a reason we did not merge this? (Or the other one)

[anonrig]

Is there a reason we did not merge this? (Or the other one)

I couldn't find anybody to land this and later help me track the health of the release, in case there is a bug.