Biome: The Next Generation of Code Formatting and Linting

Prettier has been widely used by developers to format code. Recently, a much faster alternative was released: Biome.

For years, Prettier has been widely used by developers to format code for JavaScript, TypeScript, JSON and many more. However, there was one drawback: performance. Biome, a new open-source toolchain for web development, tackles this problem by combining a faster formatter and linter.

Built on Rust, it is renowned for its speed and efficiency and has many performance benefits compared to Prettier. Recently, Biome won the Prettier challenge that was launched by one of Prettier’s creators. The challenge was to write a prettier-compliant pretty printer in Rust.

Biome is significantly faster, producing more consistent and predictable formatting. Its error messages are also more informative and helpful, making it easier to identify and rectify formatting issues.

A linter and formatter in one tool

Biome can be used to perform a variety of tasks, including analyzing, formatting, and linting your code. By using the check command you can run both the lint and format option.

npx @biomejs/biome check --apply <files>

I’ve found Biome’s linter to be more proactive than Prettier’s, catching potential bugs and errors early on, preventing them from becoming major issues. The linter immediately finds several potential issues, including unused variables and misplaced parentheses. These issues are resolved quickly and easily, leaving code cleaner and more organized.

Key features of Biome

• Speed and Efficiency: Built on the Rust programming language, Biome boasts exceptional performance.
• Simplicity: Biome eliminates the need for complex configuration, allowing developers to start using it right away without extensive setup. Yet, it provides extensive options for fine-tuning its behavior to suit individual preferences.
• Scalability: Biome is designed to handle projects of any size, ensuring that its performance remains consistent regardless of the code base’s complexity.
• IDE Integration: Biome integrates seamlessly with popular IDEs and code editors, such as VS Code and IntelliJ IDEA. It also offers extensibility through plugins and hooks.
• Error Reporting and Diagnostics: Biome provides detailed and contextual error messages that guide developers toward identifying and resolving issues quickly.

Biome provides detailed error messages to identify problems.

Accessibility

Checking for accessibility in HTML is becoming more and more important for web development. Biome does a great job at identifying accessibility issues. It provides easy-to-understand error messages and offers potential solutions for them. I want to bring up two examples.

Biome shows what should be fixed in the div.

In the example above, Biome points out what exactly should be fixed in the incorrect usage of role="slider".

For the example above, Biome gives solutions for a fix. This makes it easier to identify and fix issues during development.

Benchmarks of Biome vs Prettier

Biome has made a repository dedicated to running benchmarks that compare it to Prettier and parallel-prettier. The benchmarks involve formatting a collection of JavaScript and TypeScript files of varying sizes and complexities.

Formatting and linting speed results of different tools compared to Biome

The benchmark results consistently show that Biome outperforms Prettier in both formatting and linting. Biome is significantly faster than Prettier and dprint for formatting and faster than ESLint for linting.

Good to note here: the benchmark uses — max-diagnostics=0 when running Biome, which means that Biome only prints the diagnostic count, whereas ESLint prints a line for each lint error.

Should you switch to Biome right now?

While Biome offers promising features, it is currently in its early stages of development and there are still some limitations.

Biome has less type-checked lint rules

The incredible speed comes at a price: Rust-based linters currently lack the comprehensiveness of type-checked lint rules provided by ESLint. This means that while they can identify syntax errors and common style issues, they may miss problems that rely on type information.

Rust-based linters are still missing a piece of the puzzle when it comes to type checking, a feature that ESLint + typescript-eslint does have. On the other hand, as of January 2024, Biome does include 64 typescript-eslint rules, but these rules don’t cover all the typescript-eslint rules. For example, in contrast to typescript-eslint:

• Biome lacks the prefer-readonly rule, which enforces marking private members as readonly if they are never modified outside of the constructor.
• It also lacks the explicit-function-return-type rule, which requires explicit return type declarations for all functions, even if they always return the same type.

And there are some other examples of rules that Biome does not have. However, Biome is still being developed and more rules are being added.

So, which approach should you choose? If performance is critical and you’re willing to make some small trade-offs in typescript-eslint rules, then Biome could be a good option. If you need complete type-checking in your project, stay with Prettier and ESlint and wait until Biome is developed further.

Nx support

While there is no official announcement regarding nx support for Biome, the new toolchain for web projects, it’s possible that such integration could be developed in the future…

Prettier is also becoming faster

While Biome is a solid option, Prettier is also likely to get a speed boost in the future. This will be achieved by optimizing its parsing engine, AST representations, whitespace handling, and leveraging hardware acceleration. So, if you’re happy with Prettier, you’re probably also good to stick with it.

Conclusion

As Biome continues to evolve, I believe it has the potential to optimize the way we develop web applications. Its focus on performance, compatibility, and ease of use makes it a compelling choice for developers. In the future, I see that Biome has the potential to become the standard toolchain for web development.

If you want to set up Biome in your project, it’s done in a few seconds. Go to biomejs.dev for more details about setting up Biome. There is also a playground to get to know the formatter.