Biome, Toolchain of the Web

Rate this content
Bookmark

Biome wants to provide an all-in-one experience for web developers while maintaining performance and quality. Emanuele, lead maintainer of the Biome project, will walk through Biome’s tools:

- A formatter with 97% compatibility with Prettier of JavaScript, JSX, TypeScript and TSX files.

- A linter that offers informative and descriptive diagnostics, with modern lint rules exclusive to Biome and others inspired by the most famous ESlint plugins.

- An opinionated import sorting. An excellent tool offered by Biome Analyser.

- First-class support for editors that support LSP. What you get from the CLI, you get in your editor.


At the end, Emanuele will discuss the plans for 2024 and what the team would like to achieve this year.

This talk has been presented at Node Congress 2024, check out the latest edition of this JavaScript Conference.

FAQ

Emanuele Stoppa is one of the core contributors of the Biome project, as well as the Astra project.

Biome offers several key features including a formatter that is compatible with Prettier, an analyzer with over 200 lint rules, import sorting, and high-quality diagnostics. It also provides unique lint rules and code fixes.

Biome won the Prettier Challenge by achieving 25% compatibility with Prettier using Rust. It has also reached 20,000 weekly downloads, gained sponsorship, and received positive feedback from the developer community.

Biome's type inference project aims to provide an infrastructure that can infer types in code and offer lint rules that leverage this inference, without replacing TypeScript's type checker.

Biome's formatter is 97% compatible with Prettier for formatting JavaScript, TypeScript, JSX, and TSX files. It offers similar options to Prettier but can also format broken code, a feature that Prettier does not support.

In 2024, Biome aims to support more languages (like CSS, HTML, and Markdown), enhance its current tools, explore new features like cross-linting and type inference, and develop a plugin system.

Biome is significantly faster than ESLint, Prettier, and Dprint. It can be up to five times faster than ESLint on a single thread and outperforms other tools in terms of speed and efficiency.

Biome's analyzer offers over 200 lint rules, some of which are unique to Biome. It also includes import sorting and aims to be informative by explaining errors, why they occurred, and how to fix them.

Biome is a toolchain designed to provide a unified experience for web projects, offering features like formatting and analyzing code. It aims to deliver high-quality diagnostics and a consistent developer experience across CLI and LSP.

In Biome version 2, users can expect the removal of deprecated features, revamped configuration and CLI, and possibly some migration patterns to ease the transition. The focus will be on refining the toolchain based on user feedback.

Emanuele Stoppa
Emanuele Stoppa
19 min
04 Apr, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Biome is a toolchain for web projects that provides formatting and analysis. It offers high-quality diagnostics and is compatible with Prettier. Biome's analyzer includes over 200 unique lint roles and provides informative error messages. Pion, a part of Biome, aims to be fast and efficient, outperforming other tools. Biome is exploring type inference and plug-in support, and has plans to revamp its configuration in version two.

1. Introduction to Biome

Short description:

Today I'm going to talk about Biome, the toolchain of the web. Biome is a toolchain that wants to provide only one experience for your web projects. It offers Formatter and Analyzer, and aims to provide high-quality diagnostics. Biome is Prettier compatible and offers formatting for JavaScript, TypeScript, JSX, and TSX files. It also has the ability to format broken code as an opt-in feature.

Hello everyone. Today I'm going to talk about Biome, the toolchain of the web. Before going forward with the presentations, I will introduce who I am. My name is Emanuele Stoppa. I'm one of the core contributors of the Biome project and core contributor of the Astra project. I live in Ireland, I'm Italian, I like traveling, and I'm a avid console gamer currently playing Final Fantasy VII.

So let's go with Biome. So what's Biome? So Biome is a toolchain that wants to provide only one experience for your web projects. At the moment, Biome offers Formatter and Analyzer, and we're going to check what are those. Plus, as a mission, I must work and offer the same developer experience on the CLI and the LSP, so editors, and it wants to offer high quality diagnostics.

Now what's a modern toolchain? So well, last year I went to the GIA nation and I talked about the former Biome which was Rome and now Biome and Rome wanted to take all these tools that we wanted that you might have in your web projects and offer just one single toolchain and you use just theoretically, you just use that for everything. Although, well, I mean, let's be realistic. That is not possible at the moment. I mean like, sure, that's still the utopoistic mission, but I want to offer a different point of view of the modern toolchain. So as a modern toolchain, we want to actually own the key operations owned by the software. So parsing, diagnostics, formatting, the linter, and code suggestions, assists. So essentially the things that we actually care and around the toolchain. As a modern, we will also be informative, innovative, and want to offer features that you haven't seen before. So it's really interesting. I mean, let's see further what Biome can offer.

So let's talk about the formatter. So Biome formatter is actually Prettier compatible. It means that it formats as Prettier and we all know that Prettier offers a really nice opinionated formatting experience. Biome is 97 percent compatible by formatting JavaScript, TypeScript, JSX, and TSX files. And it also offers the same options that Prettier does, except for a few that we decided to remove because we feel they are old and not necessary anymore. And also something that Biome formatter does that Prettier can't is actually formatting broken code. Yes, exactly. That's what Biome formatter can do. It's an opt-in feature and it actually works. In this video, we have the while statement that is broken and misses a parenthesis.

2. Biome's Analyzer and Unique Roles

Short description:

You can opt in with Biome and have your formatting working out of the box. The analyzer offers linter and import sorting, with over 200 lint roles, some of which are unique to Biome. Biome also offers import sorting and follows rule pillars for informative and useful error messages.

You would use Prettier and you won't be able to do that. You can opt in with Biome and there you go, you have your formatting working just, you know, out of the box. This is one of the features that a modern toolchain such as Biome can provide.

Let's move forward with the analyzer. So the analyzer is quite a metty feature that offers things like linter and import sorting. So as a linter, Biome offers more than two hundred lint roles. Some of them are quite unique to Biome. Many of them are actually taken from ESLint and the most popular ESLint plugins. The analyzer also offers import sorting out of the box and the Biome lint roles are informative and teach you actually something. So let's see what it means.

So among all the other roles, I want to show you some exclusive Biome roles. You can't find in other linters and hopefully the other linters will adopt them. So, for example, use while or another really nice is no cost enum, which is quite quite nice and we'll see what it does. So I mean, it's not just we don't just copy paste what we have, but Biome offers something more than the existing tools have to offer. It offers also an import sorting, so import sorting Biome is just an assist role. It's just a rule different from a lint role, but still a rule that does essentially the import sorting. And we have our Biome has its own logic, which is explained in the documentation. And essentially it's a proof of how powerful is the infrastructure of Biome analyzer. And also it's informative. So internally we have this thing that we call a rule pillars. So when we create the role, we try to adhere to these pillars. And what are those? So a rule might essentially explain as a first rule explain the error to you like, okay, a rule is triggered. You actually want to know why it was triggered. But actually, we want to know the actual error. But then you also want to know why it was triggered. Like you can just say, okay, this is an error. You actually a rule should tell you why. So you know, and you learn from the actual rule. And then as a third pillar, a rule should always explain you what you should do. Okay, you get the error, you know why but now what do I do? So most of the times you get the code fix.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vite: Rethinking Frontend Tooling
JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Turbopack. Why? How? When? and the Vision...
React Day Berlin 2022React Day Berlin 2022
32 min
Turbopack. Why? How? When? and the Vision...
The Talk discusses TurboPack, a successor to Webpack, aiming to create a framework-independent, flexible, and extensible tool for the open-source community. It addresses performance challenges by integrating SWC into Next.js. The challenges with Next.js and Webpack include orchestration issues, backward compatibility constraints, and cache invalidation problems. TurboEngine and TurboPack provide constant performance in incremental builds, leveraging Rust's predictable performance and parallelism. The Talk also covers topics like dependency tracking, task graphs, cache invalidation, lazy asset graphs, and the integration of TurboPack with Next.js. The future plans involve reconfiguring Webpack and TurboEngine, moving computations to the cloud, providing insights into builds, and facilitating migration and integration with JavaScript projects.
How Bun Makes Building React Apps Simpler & Faster
React Day Berlin 2022React Day Berlin 2022
9 min
How Bun Makes Building React Apps Simpler & Faster
BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.
The Core of Turbopack Explained (Live Coding)
JSNation 2023JSNation 2023
29 min
The Core of Turbopack Explained (Live Coding)
Tobias Koppers introduces TurboPack and TurboEngine, addressing the limitations of Webpack. He demonstrates live coding to showcase the optimization of cache validation and build efficiency. The talk covers adding logging and memorization, optimizing execution and tracking dependencies, implementing invalidation and watcher, and storing and deleting invalidators. It also discusses incremental compilation, integration with other monorepo tools, error display, and the possibility of a plugin system for Toolpag. Lastly, the comparison with Bunn's Builder is mentioned.
The Inner Workings of Vite Build
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Inner Workings of Vite Build
Welcome to vidBuild, a tool that optimizes your application for production by offering fast hodgemodule replacement and support for various technologies. The build process in vidBuild involves optimizing and minifying assets, bundling JS and CSS, and generating chunks for dynamic imports. The pipeline in vidBuild includes plugins for alias, resolution, CSS modules, and asset handling. Vid is a complete build tool with a flexible plugin system and support from a vibrant community. Vite's plugin API is compatible with Rollup, and Vite aims for simplicity while pushing complexity to the plugin system.

Workshops on related topic

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.