When you work on multiple front-end projects at scale, consistency and automation quickly become key.
At Prisma Media, we wanted every merge request to focus on actual logic changes, not formatting or stylistic details.
We had relied on the classic linting stack: ESLint for JavaScript and TypeScript, StyleLint for CSS and Prettier for consistent formatting.
With VS Code Workspaces configured for auto-format on save, code reviews became cleaner and formatting discussions disappeared.
This article explains how we simplified this stack by migrating to Biome, a single tool that handles linting and formatting across multiple front-end languages.
Challenges with ESLint, StyleLint and Prettier
Before Biome, our front-end projects relied on the classic trio: ESLint, StyleLint and Prettier.
Over time, the linting stack grew to cover more languages and use cases:
- JavaScript, TypeScript and JSX/TSX
- PostCSS for styling
- Markdown for documentation
This diversity came with a high maintenance cost.
Our global configuration alone depended on more than 15 packages 🤯
- For ESLint:
eslint,eslint-config-prettier,eslint-config-standard,eslint-plugin-import,eslint-plugin-jsdoc,eslint-plugin-n,eslint-plugin-prettier,eslint-plugin-promise,eslint-plugin-react - For TypeScript:
@typescript-eslint/eslint-plugin,@typescript-eslint/parser - For CSS:
stylelint,stylelint-config-standard,stylelint-prettier - And finally,
prettier.
Upgrading one dependency often required adjusting several others. In practice, we planned upgrades of these packages 1-2 times per year to ensure stability. For every update, we had to validate compatibility, update shared configs and fix CI pipelines. Maintaining this stack was becoming increasingly time-consuming and prone to errors.
Migration to Biome
When Biome appeared, the promise was appealing: one tool, one config, multiple languages.
A single binary capable of linting, formatting and analyzing code, with far less setup and impressive performance.
I started by testing Biome on my open source projects to evaluate effectiveness and flexibility, then gradually introduced it into internal front-end apps.
The first results were convincing: Biome matched ESLint, StyleLint and Prettier in functionality, but everything was now configured in a single file instead of juggling multiple configs and parser versions.
A simplified version of our biome.json configuration:
{
"$schema": "https://biomejs.dev/schemas/2.2.7/schema.json",
"files": {
"includes": ["src/**"]
},
"formatter": {
"enabled": true,
"indentStyle": "tab",
"lineWidth": 100
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"css": {
"formatter": {
"quoteStyle": "single"
}
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"semicolons": "asNeeded"
}
}
}
This single configuration file replaced the entire ESLint, StyleLint and Prettier stack.
We also updated our VS Code workspace to integrate Biome, enabling format-on-save and automatic code actions:
{
"settings": {
"editor.defaultFormatter": "biomejs.biome",
"[javascript][typescript][typescriptreact][css][json]": {
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit",
"source.fixAll.biome": "explicit"
}
}
}
💡 Biome also provides a migration tool to help transition from ESLint and Prettier.
When Biome v2 was released, we quickly migrated. The new plugin API looked promising and offered more flexibility for custom rules.
One feature we immediately started using is the option to organize imports automatically.
Biome in CI/CD
One of the biggest improvements was how easily Biome integrated into our GitLab CI pipelines.
As a single binary, it eliminated the need for multiple npm installs and complex config merges.
Adding linting to a pipeline became as simple as:
biome check .
The performance gain was immediate.
Linting jobs now run faster and more consistently across all environments, reducing CI runtime and minimizing potential inconsistencies between local development and pipelines.
ESLint vs Biome — simplified comparison
| Aspect | ESLint + StyleLint + Prettier | Biome |
|---|---|---|
| Tools & dependencies | ~15 separate packages to maintain | 1 single binary |
| Configuration | Multiple config files & shared extensions | Single biome.json file |
| Performance | Slower: separate tools for JS, TS, CSS, parsing overhead | Faster: unified binary, single parsing pass, lower memory usage |
| IDE integration | Requires multiple extensions | Single VS Code plugin |
| Multi-language support | JS, TS, JSX/TSX, CSS via separate plugins | JS, TS, JSX/TSX, CSS, JSON and more to come soon |
| CI/CD setup | Complex npm-based scripts and merges | Lightweight, single command |
| Maintenance overhead | High: multiple packages, compatibility checks | Minimal: single upgrade keeps everything aligned |
Key notes
After several months using Biome in production, the benefits are clear:
- One tool, one config — simpler setup and updates
- More thorough linting — immediate feedback in the editor with highlighting and tooltips
- Improved onboarding — developers install Biome and start coding quickly
- Consistent rules across JS, TS and CSS
- Excellent IDE integration out of the box
- Accessibility checks included by default
If you are interested in accessibility tooling, check out our related article on
Maintaining the front-end stack has become much easier.
Now, a single Biome upgrade keeps linting, formatting and analysis aligned across all projects.
Conclusion
Migrating from ESLint, StyleLint and Prettier to Biome simplified our front-end tooling and unified our workflow, while drastically reducing maintenance overhead.
Biome's evolution and plugin ecosystem provide a solid foundation for our future front-end architecture. Its speed, simplicity and improved developer experience make it an ideal choice for large-scale front-end projects.
Full configuration files and examples are available in GitHub
Discover our Biome config on GitHub
Top comments (0)