From ESLint/StyleLint and Prettier to Biome: simplifying our front-end linting

Challenges with ESLint, StyleLint and Prettier

Before Biome, maintaining a consistent front-end workflow required juggling ESLint, StyleLint, and Prettier. As projects grew, the combined configuration ballooned to over 15 packages, creating a maintenance burden and requiring dedicated time for updates and compatibility checks.

This complexity introduced significant overhead; upgrading these dependencies could take days due to the need for validation, config updates, and CI pipeline fixes, ultimately diverting focus from core development tasks.

Key Insights

• 15+ packages: The original linting setup required managing over 15 individual packages.
• Single Config: Biome consolidates linting and formatting into a single biome.json configuration file.
• CI/CD Benefits: Biome’s single binary significantly speeds up CI/CD pipelines by reducing dependency installs and config merges.

Working Example

{
"$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"
}
}
}

Practical Applications

• Prisma Media: Replaced its complex ESLint/StyleLint/Prettier stack with Biome, simplifying maintenance and speeding up CI/CD.
• Pitfall: Attempting to customize linting rules excessively can negate the benefits of a simplified tool like Biome, increasing configuration complexity.

References:

• https://dev.to/yoriiis/from-eslintstylelint-and-prettier-to-biome-simplifying-our-front-end-linting-3nmj