Speed Up Your Web Development Workflow with Biome

Have you ever struggled to choose the right tool for code formatting or static analysis in your web development projects?
Biome is a high-performance toolchain designed to streamline code formatting and linting for JavaScript and TypeScript — all in one place.
In this article, I’ll walk you through Biome’s features and setup process, based on the official documentation and hands-on experience.

✅ Key Features of Biome

1. Blazing-Fast Formatter & Linter

Biome is built with Rust and offers incredible speed — up to 35x faster than tools like Prettier and ESLint.
It supports the following linting and formatting capabilities:

• Code formatting
• Static analysis (detecting syntax/style violations)
• Import statement cleanup

If you're frustrated with slow formatters or linters, Biome is definitely worth considering.

2. Unified Configuration for Consistency

All settings are defined in a single biome.json or biome.jsonc file.
You can use this same config in your CLI commands, and it even comes with sensible defaults so you can get started quickly.

3. Multi-language Support & LSP Integration

Biome supports various languages:

• JavaScript / TypeScript / JSX / TSX
• JSON
• CSS
• GraphQL, and more

It also provides LSP (Language Server Protocol) support for major editors like VS Code, JetBrains IDEs, and Zed, enabling real-time diagnostics and formatting.

🛠️ Getting Started

Note: Requires Node.js v14.18 or higher.
For additional setup details, refer to the official Biome documentation.

1. Installation

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

2. Initialization

yarn biome init

This generates a biome.json file and automatically configures VCS integration, formatting, linting, and import sorting.
The default settings work out of the box, but you can customize further — see the docs for all available config options.

3. Common CLI Commands

biome format --write <files>   # Format code
biome lint --write <files>     # Lint and auto-fix
biome check --write <files>    # Run all checks at once

🧩 VS Code Integration

After installing the Biome extension for VS Code, add the following to your settings.json:

{
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit"
  }
}

⚠️ Common Pitfalls

Depending on your project structure, Biome might not work unless you specify the binary path explicitly.
For example, in a project split into frontend/ and backend/, with Biome installed in frontend/, you may need to add:

{
  "biome.lsp.bin": "./frontend/node_modules/.bin/biome"
}

Failing to do so can result in errors like:

Extension 'Biome' is configured as formatter but it cannot format 'Typescript'-files

✍️ Conclusion

Biome offers outstanding performance as a linter and formatter, making it a great choice for modern web development.
I hope this guide helps you improve your development workflow and makes your coding experience more efficient and enjoyable!