I Will Never Use Prettier or ESLint Again

Summary

This video tutorial covers how to integrate Biome, a powerful tool that combines ESLint and Prettier into one. It walks through installation, configuration, and setup, including how to add Biome to your project, configure it for formatting and linting, and use it with version control like Git. The video also demonstrates integrating Biome into your editor (VS Code), setting it up for automatic linting and formatting on save, and using it in continuous integration (CI) environments with GitHub Actions. Biome simplifies the setup, making it a fast and efficient choice for maintaining clean code.

Takeaways

• 🚀 Biome is an all-in-one tool that combines linting (like ESLint) and formatting (like Prettier) into a single, faster, and easier-to-configure solution.
• 🧩 The main advantage of Biome is simplicity and performance, while its main downside is being newer with fewer plugins compared to ESLint.
• 📦 Getting started with Biome is straightforward: install it as a dev dependency and initialize it using `npx biome init` to generate a `biome.json` configuration file.
• 🔍 Biome provides three core commands: `format` (formatting), `lint` (linting), and `check` (runs formatting, linting, and import organization together).
• ⚙️ Adding a Biome script (e.g., `biome check`) to `package.json` makes it easy to run linting and formatting consistently across the project.
• 🗂️ Biome can integrate directly with Git, automatically respecting `.gitignore` so generated files (like build outputs) are excluded from linting and formatting.
• 🧠 Editor integration is simple: installing the Biome VS Code extension enables real-time linting, formatting on save, and quick fixes inside the editor.
• 💾 By configuring VS Code settings, Biome can handle default formatting, format-on-save, safe auto-fixes, and automatic import organization.
• 🎨 Biome’s configuration is modular and readable, with clear sections for version control, formatter rules, linter rules, and assist actions.
• 🧪 Formatter rules in Biome are similar to Prettier, while language-specific settings (e.g., JavaScript semicolons) allow finer control.
• 🚨 Linter rules are categorized (accessibility, correctness, complexity, etc.) and can be customized in severity, similar to ESLint but with clearer documentation.
• 🔧 The Assist feature goes beyond linting and formatting by enabling safe code transformations like sorting imports or CSS properties.
• 🌿 Biome supports Git-aware commands like `check changed` and `check staged`, allowing developers to lint only files that have been modified.
• 🤖 For CI pipelines, Biome offers a dedicated `biome ci` command that checks only changed files and prevents writing changes.
• 🐙 Biome provides an official GitHub Action, making it easy to integrate linting and formatting checks into push and pull request workflows.

Q & A

What is Biome and what makes it unique?

Biome is a tool that combines the functionality of both ESLint (for linting) and Prettier (for formatting) into a single tool. It is faster and easier to configure than using both ESLint and Prettier separately, and it supports JavaScript, TypeScript, and other languages.

How do you install Biome in your project?

To install Biome, run the command `npm install --save-dev biome` in your terminal. This installs it as a development dependency in your project.

What does the command `npx biome init` do?

The `npx biome init` command initializes Biome in your project by creating a `biome.json` configuration file. This file contains the default setup and instructions on how to configure Biome further.

What are the three main categories of commands in Biome?

Biome has three main commands: `format` (formats your files like Prettier), `lint` (lints your files like ESLint), and `check` (runs both formatting and linting checks at the same time).

How do you add Biome commands to your project?

You can add Biome commands to your `package.json` by defining scripts that call the Biome commands. For example, you can add a script called `lintFormat` with the command `biome check` to run both linting and formatting at once.

What problem does Biome solve for users working with version control?

Biome integrates with version control (currently supporting Git) to automatically ignore files listed in your `.gitignore` file. This prevents linting or formatting on irrelevant files such as `node_modules` or build files.

How do you integrate Biome with VS Code?

To integrate Biome with VS Code, you need to install the Biome extension from the marketplace. After installing the extension, configure your VS Code workspace settings to set Biome as the default formatter and enable format on save.

What is the `biomeci` command used for?

The `biomeci` command is designed for continuous integration environments. It automatically checks only the files that have changed since the last commit, making CI runs faster and more efficient by avoiding unnecessary checks on unchanged files.

How does Biome help with continuous integration (CI) and GitHub Actions?

Biome has a built-in GitHub Action that simplifies running Biome in CI pipelines. By setting up a `.yml` file with the Biome GitHub Action, it will automatically run Biome checks on push and pull request events, ensuring code quality is maintained.

Can you customize Biome's behavior for specific languages or formatting rules?

Yes, Biome allows you to customize settings for specific languages such as JavaScript or TypeScript. You can adjust rules like semicolon usage, indentation style, and other formatting preferences in the `biome.json` configuration file.