Biome adoption guide: Overview, examples, and alternatives

As frontend developers, we’re always looking for ways to improve our code quality and productivity. One such approach is utilizing tools to detect errors in our code before production and ensure consistent formatting across various contributor codebases. There are many tools that can help us achieve this, but finding the right ones for our needs can be challenging.

Biome, a new tool that combines linters and formatters into one tool, is gaining popularity in the frontend community for its ability to help developers write better code faster and with less setup and configuration. In this guide, we’ll explore what Biome is, how it works, and how you can adopt it in your projects to improve your code quality.

---

What is Biome?

Linting and formatting code often means you have to rely on a combination of tools (like Prettier and ESLint) along with numerous plugins and configurations to make it work correctly. However, this process takes a long time and requires remembering complex setups, which can be tedious.

In the past, there was Rome, a tool for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS that handled formatting, linting, and bundling. However, as maintaining Rome became challenging for its developers, they chose to fork the project, resulting in Rome’s official successor: Biome.

Biome is more than just another linting or formatting tool on the market. It aims to revolutionize formatting and linting in web development projects. With just one package and config file to deal with, Biome allows you to easily replace ESLint, Prettier, and other similar tools — including their dependencies in your projects — while avoiding complex configuration setups.

Since Biome is built on Rust, one of the fastest and highest-performance languages, it has quickly become the fastest linting and formatting toolchain in web development. It recently won the Prettier challenge to build a Prettier-compliant pretty printer in Rust that is 95 percent faster than Prettier, making it faster than all other linters and formatters out there.

Let’s learn more about Biome by exploring some of its features.

Further reading:

• Using Prettier and ESLint for JavaScript formatting

---

Key features of Biome

Biome has many notable features that make it ideal for linting and formatting code. Some of its standout features include:

• Simple configurations: Biome’s easy-to-understand configuration options enable you developers to set up linting and formatting rules effortlessly. Its straightforward approach ensures that even those new to the tool can quickly get up and running without hassle
• Extensive customizability: Despite its simplicity, Biome is highly customizable if you need more fine control over your linting and formatting preferences. From adjusting rule strictness to defining custom rules, you can easily tailor Biome to meet your specific project requirements
• Error reporting: Biome enhances the debugging process with comprehensive error reports that provide detailed information about detected issues along with suggested solutions. This proactive approach helps developers quickly identify and fix errors, reducing debugging time and improving overall code quality

You can check out an example Biome error message below:

---

Getting started with Biome

Getting started with Biome is easy. Simply install it in your project using your preferred package manager and initialize the configuration file. I will use Yarn for this demonstration:

yarn add --dev --exact @biomejs/biome

After installing Biome, create the configuration file by running the script below:

yarn biome init

The above script will create a biome.json file in your root directory with the following code:

{
 "$schema": "https://biomejs.dev/schemas/1.7.1/schema.json",
 "organizeImports": {
 "enabled": true
 },
 "linter": {
 "enabled": true,
 "rules": {
 "recommended": true
 }
 }
}

By default, linting and formatting are enabled along with its recommended rules. If you want to use one without the other, you can disable the one you don’t want to use.

To format your project, run the following command:

yarn biome format --write <files>

You should see the following in your terminal:

To lint your project, run this command:

yarn biome lint --apply <files>

The command above will result in the following:

To lint and format your project at the same time, run the following:

yarn biome check --apply <files>

You should be able to see the output along with any errors, warnings, or suggestions on your terminal. Biome will also automatically update the files that it can for you.

---

Why Biome?

If what I have said so far about Biome is still not enough reason for you to consider using it, then let’s recap and explore more reasons why it could be the perfect choice for your next project:

• Performance/speed: Biome’s Rust-based foundation provides fast code formatting and linting, making it ideal for projects that prioritize efficiency and quality simultaneously. It’s 95 percent faster than Prettier and overall faster than any other linting or formatting tool
• Bundle size: Biome keeps things small. It takes up very little space in your project, helping it stay light and efficient. With Biome, you get all the benefits without the bulk from multiple formatting and linting toolchains
• Scalability: Biome can handle projects of any size, ensuring consistent performance regardless of code complexity
• Learning curve: Biome has an easy learning curve. With no need for additional plugins and a seamless default configuration, getting started is a breeze
• Ease of use: Biome’s user-friendly interface and intuitive commands make it accessible to developers of all skill levels. It’s easy for developers to understand and utilize Biome’s features right away
• Developer experience (DX): Biome’s developer-friendly experience includes easy and minimal configuration options. This allows developers to focus on coding rather than managing complex toolchain setups. With just one configuration file and zero additional dependencies, you can set up the configuration for your linting and formatting needs
• Community & ecosystem: Biome has a solid, dedicated team of maintainers and a vibrant, active community. As an official fork of Rome, Biome also receives contributions and support from the Rome community
• Documentation: Biome’s comprehensive documentation helps developers easily set up and use it, ensuring a smooth onboarding process
• Integrations: Biome provides convenient integrations with widely-used IDEs such as VS Code and IntelliJ, as well as a few external plugins, which help to expand its flexibility and customization options

Of course, when asking yourself why you should or shouldn’t use any tool, it’s also important to weigh the pros and cons. Let’s recap and discuss some pros of using Biome:

• Very fast: Biome is an exceptionally fast linting or formatting tool. If speed is what you want, then Biome is the right choice
• Simplified installation: Biome is an all-in-one solution for linting and formatting. You install only one dependency and benefit from multiple tools
• Zero-config setup: Biome requires no additional plugins or setups, making it easy for developers to adopt. You can start using Biome immediately without hassle and without worrying about multiple configuration files
• Enhanced error outputs: Biome provides more transparent and informative error outputs, making it easier and faster for you to identify and resolve issues in your code

And here are a few cons of using Biome to consider:

• Limited type rules: While Biome offers some primary type checking out of the box, it may not be suitable for larger projects that require more strict typing requirements. However, ongoing development aims to address this issue by expanding Biome’s type rule options
• Lack of native plugins: Biome currently lacks native plugins, so you may need to spend additional time researching plugin compatibility or designing custom solutions to meet your needs
• Focused language support: While Biome is expanding its language support, it’s primarily tailored for web development and may not be suitable for projects outside this domain

---

Use cases for Biome

Biome offers many benefits to development teams and organizations, including improving coding standards, streamlining workflows, and ensuring compliance and security. Let’s explore some cases where Biome could be useful for your needs:

• Streamlining your development workflow: Since Biome combines multiple linting and formatting tools into one, it reduces the overhead associated with managing and configuring separate tools. This could translate into time and cost savings for your team, allowing you to focus on delivering high-quality code more quickly
• Enhancing code quality: Biome enforces consistent coding standards and best practices to improve code quality across your project. Consistency makes your codebase more reliable and maintainable, as well as reducing the likelihood of bugs and errors. This, in turn, contributes to better user experiences and overall customer satisfaction
• Simplifying onboarding and collaboration: Onboarding new team members is easy thanks to Biome’s simplicity and ease of use. It requires minimal setup, so developers can quickly familiarize themselves with Biome and start contributing to projects without delay. Additionally, Biome’s unified configuration file makes collaboration more efficient, ensuring that all team members adhere to the same coding standards and practices
• Scaling and adapting to project needs: Biome’s design allows it to scale seamlessly with project size and complexity, making it suitable for anything from small SPAs to large, enterprise-level projects. Biome also provides extensive customization options to further enhance its flexibility, so it can accommodate a wide range of project requirements and coding styles
• Meeting regulatory and security requirements: Since Biome helps enforce coding standards and catch potential security vulnerabilities, it’s valuable for organizations operating in regulated industries or with strict security requirements. Biome ensures that code meets industry standards and security best practices to help mitigate risks and maintain compliance with regulatory requirements

Overall, Biome’s simplicity, efficiency, and scalability make it a valuable asset for organizations looking to optimize their development processes and deliver high-quality software products.

---

Biome vs. similar

When comparing Biome with similar tools like Prettier and ESLint, several factors come into play. Let’s examine how Biome stacks up against the competition across various aspects using the table below:

Aspect	Biome	Prettier	ESLint	XO	dprint
Features	For linting and formatting	For formatting	For linting	For linting	For formatting
Performance	Exceptional speed	Fast	Varies depending on the configuration	Varies depending on the configuration	Fast
Community	Growing and active	Large and active	Large and active	Active	Growing and active
Documentation	Comprehensive	Extensive	Extensive	Comprehensive	Comprehensive
GitHub stars	10.4k	48.3k	24.3k	7.5k	2.9k
Bundle size	39.2 kB	8.39 MB	3.03 MB	17.9 kB	8.03 kB

Ultimately, I’d say Biome is worth a try. However, what if your project is already set up with Prettier and ESLint or Rome? Let’s see how to migrate to Biome next.

Further reading:

• Modern, faster alternatives to ESLint
• Using Prettier and ESLint to automate formatting and fixing JavaScript

---

Migrating to Biome

Biome makes it easy for you to transition to it from Prettier and ESLint. To migrate your ESLint configuration to your Biome configuration, run the command below:

yarn biome migrate eslint --write

Biome will handle the rest.

The same goes for Prettier. All you have to do is run the command below, and your Prettier config will be migrated to Biome:

 yarn biome migrate prettier --write

Migrating from Rome to Biome is also super easy. All you have to do is update your package name, script, config file, and settings from Rome to Biome. For example, in your rome.json file, you would rename the file and update the URL of the $schema field from this:

 "$schema": "https://docs.rome.tools/schemas/12.1.3/schema.json"

To this:

 "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json"

Further reading:

• Migrating from Prettier to Rome

---

Conclusion

Biome is a revolutionary tool that combines linting and formatting into one package. This combination makes Biome an ideal option for frontend developers who want to improve their code quality and productivity.

With its simple configuration, extensive customizability, accessibility, error reporting, and integrations, Biome is the fastest and highest-performing linting and formatting toolchain in web development today.

Getting started with Biome is simple and straightforward, making it an excellent tool for developers of all skill levels. So why not give Biome a try and see how it can help you write better code faster?