FluidFramework icon indicating copy to clipboard operation
FluidFramework copied to clipboard

build(build-tools): Use biome for formatting instead of prettier

Open tylerbutler opened this issue 1 year ago • 2 comments

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.

tylerbutler avatar Jan 05 '24 03:01 tylerbutler

@fluid-example/bundle-size-tests: +22 Bytes
Metric NameBaseline SizeCompare SizeSize 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

msfluid-bot avatar Jan 31 '24 20:01 msfluid-bot

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.

Josmithr avatar Jan 31 '24 21:01 Josmithr

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

SuperchupuDev avatar Mar 16 '24 21:03 SuperchupuDev

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.

tylerbutler avatar Mar 17 '24 03:03 tylerbutler