Biome.js : All-in-One Linter/Formatter
Why should you use Biome.js?
In the JavaScript and TypeScript ecosystem, we often use multiple tools to handle linting and formatting, like ESLint, Prettier, and others. It can quickly become complex to configure them properly for a good workflow—adding countless ESLint plugins, etc. Or adding configuration files, like .eslintrc.js
, .prettierrc.js
, .editorconfig
, etc. With Biome, that's over! 🔥
Switching to Biome is like putting your dependencies on a diet: 9 fewer libs, and your project already feels lighter!
Key Benefits of Biome.js:
- One tool for both linting and formatting.
- High performance thanks to Rust.
- Minimal configuration compared to tools like ESLint and Prettier.
- Native support for TypeScript, with no extra configuration.
- Reduced dependencies in your project.
Let's Talk Performance
Just for fun, I decided to lint the Shadcn/ui repo (we all know it!) with Biome.
Here are the undeniable results:
Biome gets the job done in 783ms, while ESLint and Prettier take 13 seconds combined! It’s like comparing a bullet train to a rusty tandem bike.
Configuration
Installez Biome dans votre projet:
Initialisez un fichier biome.json
:
In this biome.json
file, you can configure your own rules. Here’s mine, optimized for React:
Install the Biome VS Code extension and set Biome as the default formatter either in your settings.json
or in the .vscode/settings.json
folder:
Now add some scripts, here are my favorites:
And that’s it! 🎉
I also created a small package biome-config
to automatically install and configure biome.json
, as well as add scripts to package.json
. It’s available on npm, check out my repo.
Conclusion
I can't live without it anymore, and I hope I’ve convinced you to give it a try—or at least a test run. Enjoy ⚡️