build(build-tools): Use biome for formatting instead of prettier
Summary
Converts build-tools to use biome for formatting instead of prettier. Biome is a web toolkit written in Rust. It includes a JS/TS formatter that is much faster than prettier. Biome formats all of build tools in ~50ms.
Limitations
- Biome does not format a handful of "protected files" including package.json and tsconfig.json (!!!). I imagine this will change in the future. For now, prettier is still used to format ONLY package.json and tsconfig.json.
- It's not clear how well the biome VSCode extension works compared to the prettier one. Format on save should continue to work, but I haven't tested exhaustively.
- fluid-build does not cache the results of format:biome tasks because it has no support. Support could be added in a separate PR.
- The prettier tasks are also not cached anymore because fluid-build doesn't understand the commandline arguments. Can be fixed in a separate PR if needed.
- The build-tools release group is not converted to use release-group-level tasks with fluid-build (i.e. tasks defined in the root package.json). That can be done separately and will require some updates to the formatting task definitions at that time.
Implementation details
- Added the biome dependencies and added a biome.json config file to the build-tools release group root.
- Updated prettierignore files to ignore everything except package.json and tsconfig.json.
- Added new tasks to the projects:
- "check:biome": checks formatting using biome
- "check:format": calls check:biome and check:prettier
- "check:prettier": checks formatting using prettier -- this replaces the existing "prettier" task
- "format:biome": formats using biome
- "format:prettier": formats using prettier -- this replaces the existing "prettier:fix" task
- "format": this script was already present and has been updated to call format:biome and format:prettier
- Updated fluid-build config to understand the new tasks and their relationships. Primarily that "check:prettier" is a replacement for "prettier".
Notes for reviewers
The PR is divided into two commits. The first contains all the infrastructure and config settings changes. The second contains the results of running "format." That is, it contains the reformatted code.
⯅ @fluid-example/bundle-size-tests: +22 Bytes
| Metric Name | Baseline Size | Compare Size | Size Diff |
|---|---|---|---|
| aqueduct.js | 517.21 KB | 517.22 KB | ⯅ +11 Bytes |
| connectionState.js | 680 Bytes | 680 Bytes | ■ No change |
| containerRuntime.js | 250.7 KB | 250.7 KB | ■ No change |
| loader.js | 127.97 KB | 127.97 KB | ■ No change |
| map.js | 42.89 KB | 42.89 KB | ■ No change |
| matrix.js | 145.03 KB | 145.03 KB | ■ No change |
| odspDriver.js | 97.21 KB | 97.21 KB | ■ No change |
| odspPrefetchSnapshot.js | 41.91 KB | 41.91 KB | ■ No change |
| sharedString.js | 163.23 KB | 163.24 KB | ⯅ +11 Bytes |
| sharedTree.js | 329.49 KB | 329.49 KB | ■ No change |
| Total Size | 1.82 MB | 1.82 MB | ⯅ +22 Bytes |
Baseline commit: 1ace5ca3c389c7ef0ac0561963b1c1bf9f28c449
Generated by :no_entry_sign: dangerJS against c61df5ea814465ecb4b2c139755b9ded5215f6e1
This is exciting! I'm glad there is a viable alternative to prettier. Given (as an example) that it took them nearly 5 years to revert a universally hated change (ternary indentation), I have lost a lot of confidence in their willingness to listen to community feedback.
Biome does not format a handful of "protected files" including package.json and tsconfig.json (!!!). I imagine this will change in the future. For now, prettier is still used to format ONLY package.json and tsconfig.json.
This was changed in 1.6.0, Biome formats those files now
Biome does not format a handful of "protected files" including package.json and tsconfig.json (!!!). I imagine this will change in the future. For now, prettier is still used to format ONLY package.json and tsconfig.json.
This was changed in 1.6.0, Biome formats those files now
Thanks! We actually already upgraded in https://github.com/microsoft/FluidFramework/pull/20110.