Consider replacing prettier with biome for faster formatting

[0xdevalias]

• https://biomejs.dev/
  • https://biomejs.dev/playground/
  • https://biomejs.dev/formatter/
  • https://biomejs.dev/formatter/differences-with-prettier/
  • https://biomejs.dev/blog/biome-wins-prettier-challenge/
• https://github.com/biomejs/biome

  • A toolchain for web projects, aimed to provide functionalities to maintain them. Biome offers formatter and linter, usable via CLI and LSP.

  • Biome is a performant toolchain for web projects, it aims to provide developer tools to maintain the health of said projects.

    Biome is a fast formatter for JavaScript, TypeScript, JSX, and JSON that scores 97% compatibility with Prettier.

    Biome is a performant linter for JavaScript, TypeScript, and JSX that features more than 170 rules from ESLint, TypeScript ESLint, and other sources. It outputs detailed and contextualized diagnostics that help you to improve your code and become a better programmer!

    Biome is designed from the start to be used interactively within an editor. It can format and lint malformed code as you are writing it.

  • https://github.com/biomejs/biome/tree/main/crates/biome_formatter
  • https://github.com/biomejs/biome/tree/main/crates/biome_js_formatter
  • https://github.com/biomejs/biome/tree/main/crates/biome_css_formatter
  • https://github.com/biomejs/biome/tree/main/crates/biome_json_formatter
  • https://github.com/biomejs/biome/tree/main/crates/biome_wasm
  • https://github.com/biomejs/biome/tree/main/packages/%40biomejs/biome
  • https://github.com/biomejs/biome/tree/main/packages/%40biomejs/js-api

  • Installation

    npm i @biomejs/js-api
    npm i @biomejs/wasm-<dist>

    You need to install one of the @biomejs/wasm-* package as a peer dependency for this package to work correctly, out of the following distributions:

    • @biomejs/wasm-bundler: Install this package if you're using a bundler that supports importing *.wasm files directly
    • @biomejs/wasm-nodejs: Install this package if you're using Node.js to load the WebAssembly bundle use the fs API
    • @biomejs/wasm-web: Install this package if you are targeting the web platform to load the WASM bundle using the fetch API

  • import { Biome, Distribution } from "@biomejs/js-api";
    
    const biome = await Biome.create({
      distribution: Distribution.NODE, // Or BUNDLER / WEB depending on the distribution package you've installed
    });
    
    const formatted = await biome.formatContent("function f   (a, b) { return a == b; }", {
      filePath: "example.js",
    });
    
    console.log('Formatted content: ', formatted.content);

[0xdevalias]

Benchmarking with hyperfine:

• https://github.com/sharkdp/hyperfine

  • A command-line benchmarking tool

Running in the checked out directory of this repo (Ref):

⇒ npx prettier --version
3.1.1

⇒ npx biome --version
Version: 1.4.1

⇒ hyperfine --prepare 'git checkout -- unpacked/' 'npx prettier --write unpacked/' 'npx biome format --write unpacked/'
Benchmark 1: npx prettier --write unpacked/
  Time (mean ± σ):     13.243 s ±  0.675 s    [User: 21.156 s, System: 1.210 s]
  Range (min … max):   12.380 s … 14.071 s    10 runs

Benchmark 2: npx biome format --write unpacked/
  Time (mean ± σ):      1.514 s ±  0.135 s    [User: 3.343 s, System: 0.364 s]
  Range (min … max):    1.384 s …  1.775 s    10 runs

Summary
  npx biome format --write unpacked/ ran
    8.75 ± 0.90 times faster than npx prettier --write unpacked/

Config I used:

• https://github.com/0xdevalias/chatgpt-source-watch/blob/main/biome.json

How that changed the formatted output:

• https://github.com/0xdevalias/chatgpt-source-watch/commit/2505ac0449a78a3bc4eca8f4aba836212d939271
  • main improvements seemed to be to the indentation of nested ternaries, and some JSX blocks that previously weren't formatted
  • (note that apparently I was previously using an old 2.x version of prettier, so some of the changes shown here may have been improved/lessened if I formatted with a newer version of prettier first)

Based on the speed+formatting improvements, I ended up switching my repo over to using it:

• https://github.com/0xdevalias/chatgpt-source-watch/commits/main/?since=2024-01-02&until=2024-01-02

[pionxzh]

Thanks. I'm benchmarking and improving the performance recently. This can be a good replacement for prettier. I will test it soon.

Before switching to biome, I will have to refactor the transformation to allow async function.

Update: biome's format function is not async. There is no dependency.👍

[pionxzh]

I just tested oxc, but it's obviously not production ready yet. Will test biome later.

[pionxzh]

I'm also considering using dprint. Highly configurable. It also support adding braces, so that we can retire un-curly-braces.

[0xdevalias]

Hadn't come across that one before; sounds interesting:

• https://github.com/dprint/dprint

  • Pluggable and configurable code formatting platform written in Rust.

• https://dprint.dev/
  • https://dprint.dev/plugins/prettier/

  • This is a process plugin. Using this will cause the CLI to download, run, and communicate with a separate process that is not sandboxed (unlike Wasm plugins).

  • https://dprint.dev/plugins/biome/

Would be interested to see how it performs speed-wise for comparable formatting.