As a developer, maintaining a clean and consistent codebase is crucial. For years, Prettier and ESLint have been the go-to tools for code formatting and linting in the JavaScript ecosystem. However, recently I decided to replace both with a new tool: Biome.js. In this blog post, I’ll explain why I made the switch and how Biome.js has improved my development workflow.
What is Biome.js?
Biome.js is an all-in-one tool for code formatting, linting, and more. It aims to simplify the development experience by combining the functionalities of Prettier and ESLint into a single, fast, and efficient tool. Biome.js is built on Rust, making it incredibly performant and reliable.
Why I Made the Switch
1. Unified Tooling
Using separate tools for formatting (Prettier) and linting (ESLint) can be cumbersome. Each tool has its own configuration, rules, and integration processes. Biome.js combines these functionalities, reducing the complexity of my toolchain. With Biome.js, I only need to manage one configuration file and set of rules, streamlining my workflow.
2. Performance Improvements
Prettier and ESLint are both written in JavaScript, which can lead to slower performance, especially in large codebases. Biome.js, built with Rust, offers significant performance improvements. The speed of formatting and linting tasks has increased noticeably, allowing me to iterate faster and spend less time waiting for my tools to complete.
3. Consistent Results
Having a single tool handle both formatting and linting ensures that there are no conflicts between the two. Prettier and ESLint sometimes have overlapping rules or can be configured in ways that conflict with each other. Biome.js eliminates these issues by providing a consistent set of rules and behavior for both formatting and linting.
4. Simplified Configuration
Managing separate configurations for Prettier and ESLint can be a hassle, especially when working with complex projects or multiple teams. Biome.js offers a simplified configuration process. With a single configuration file, it’s easier to set up, maintain, and share with team members, leading to a more streamlined development environment.
5. Modern Features
Biome.js comes with a host of modern features that enhance the developer experience. These include:
- Built-in support for TypeScript: Biome.js has first-class support for TypeScript, making it a great choice for modern JavaScript and TypeScript projects.
- Automatic Fixes: Like ESLint, Biome.js can automatically fix many issues it detects, saving time and effort.
- Custom Rules: Biome.js allows for the creation of custom linting rules, giving developers the flexibility to enforce project-specific coding standards.
Getting Started with Biome.js
Installation
To get started with Biome.js, install it via npm or yarn:
npm install --save-dev @biomejs/cli
Configuration
Create a .biomerc.json configuration file in the root of your project:
{
"files": ["src/**/*.{js,ts}"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
},
"formatter": {
"printWidth": 80,
"tabWidth": 2,
"singleQuote": false,
"trailingComma": "es5"
}
}
Usage
You can now run Biome.js from the command line to format and lint your code:
npx biome format
npx biome lint
To automatically fix issues:
npx biome lint --fix
Conclusion
Switching from Prettier and ESLint to Biome.js has streamlined my development workflow, improved performance, and simplified configuration management. Biome.js offers a powerful, unified tool for formatting and linting, making it an excellent choice for modern JavaScript and TypeScript projects. If you’re looking for a way to enhance your development experience and reduce the complexity of your toolchain, I highly recommend giving Biome.js a try.