This content originally appeared on DEV Community and was authored by Anjan Shomodder
I have been using ESLint & Prettier for many years. But after I have tried a fairly new tool called Biome & I am not going back. Biome is a single tool that replaces both ESLint and Prettier, offering faster performance, simpler configuration, and native multi-language support.
Why I Made the Switch 🤔
While ESLint and Prettier are great, well-tested tools, Here are some reasons why I decided to switch:
- ⚡ Significantly faster
- 🔧 Simpler configuration with one config file
- 🎯 Built-in support for multiple languages
- 🚀 Zero conflicts between linting and formatting
I have an in-depth video tutorial on my channel.
Getting Started 🚀
1. Installation
If you are using nextjs, then you can setup biome during project creation. otherwise first, install Biome in your project:
npm install -D -E @biomejs/biome
2. Initialize Configuration
Create your config file:
npx @biomejs/biome init # --jsonc for jsonc format
3. Editor Setup
VS Code
- Install the official Biome VS Code extension
- Add to your
settings.json:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "biomejs.biome"
}
Neovim
Install the Biome LSP through Mason or something else, Linting should work out of the box. Formatting can be done through plugin or the following command
lua vim.lsp.buf.format()
Configuration Deep Dive ⚙️
Basic Structure
{
"$schema": "https://biomejs.dev/schemas/latest/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true,
},
"files": {
"ignoreUnknown": false,
"includes": ["**", "!node_modules", "!.next", "!dist", "!build"],
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 100,
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
},
},
"javascript": {
"formatter": {},
},
}
Explanation:
-
$schema: For intelisense -
vcs: Git integration -
files: File management. Use theincludesarray to specify which files to include/exclude. You can use!patterns to exclude files. -
formatter: Formatting options -
linter: Linting rules -
[language]: For language specific options
Formatting Options
Biome's formatter options are similar to Prettier. Syntax to configure formatter: formatter.<option>: <value>
{
"formatter": {
"indentStyle": "space", // "space" or "tab"
"indentWidth": 2, // Number of spaces/tab width
"lineWidth": 100, // Max line length
},
}
Language-Specific Configuration
You can provide language-specific formatter settings:
{
"javascript": {
"formatter": {
"quoteStyle": "single", // Single quotes for JS
"jsxQuoteStyle": "double", // Double quotes for JSX
"semicolons": "asNeeded", // Only when necessary
"arrowParentheses": "asNeeded", // Minimal parentheses
},
},
}
Javascript means JavaScript, jsx, TypeScript and tsx.
Linting Rules 📝
Rule Groups
Biome organizes rules into logical groups:
- Accessibility: a11y best practices
- Correctness: Prevent bugs and errors
- Performance: Optimize code performance
- Security: Security best practices
- Style: Code style consistency
- Suspicious: Catch suspicious patterns
Rule Severity Levels
Biome uses three severity levels:
-
error: Throws error. Can be used to fail CI/CD builds -
warn: Shows warnings but doesn't throw errors. But if you want to fail builds on warnings, you can use--error-on-warningsflag in CLI. -
info: Informational only, never throws errors.
Syntax to configure rules: linter.rules.<group>.<ruleName>: <severity>
{
"linter": {
"rules": {
"correctness": {
"noUnusedVariables": "error", // Will fail builds
},
},
},
}
Advanced Features 🔥
Git Integration
Ignore files inside .gitignore file
You can ignore all files mentioned in .gitignore file by passing useIgnoreFile option.
{
"vcs": {
"enabled": true,
"useIgnoreFile": true,
},
}
Process only changed files
Changed files are basically files that are changed & committed in a branch, seperate from the defaultBranch. This is useful when you have a pull request or you want to merge a PR. You can just run the files that are actually changed from your default Branch. You just need to add the defaultBranch. Preferably use the default github repo branch.
{
"vcs": {
"enabled": true,
"clientKind": "git",
"defaultBranch": "main",
},
}
Then just run:
# Only lint changed files since main branch
biome check --changed
Process only staged files
Staged are files that are changed and added to index using git add. But not
committed yet.
# Only lint staged files
biome check --staged
Code Suppressions
Sometimes you need to ignore specific rules. Similar to Eslint disable comments.
// Ignore for one line
// biome-ignore lint/correctness/noUnusedVariables: This is a demo variable
const unusedVar = 'demo'
// Ignore entire file
// biome-ignore-all lint: Legacy code file
// Ignore range
// biome-ignore-start lint/style/useConst: Configuration object
var config = {}
// biome-ignore-end
Syntax: biome-ignore <category>/<group>/<rule>: <reason>
Code Actions (Auto-fixes)
Enable automatic fixes on save (VScode):
Biome assist is basically code actions for your editor. Check the doc for all the assist options. First enable code assist features in Biome config.
{
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on",
"useSortedAttributes": "on",
},
},
},
}
Then add to your VS Code settings.json:
// settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.biome": "always",
"source.organizeImports": "always",
},
}
Domains (Framework-Specific Rules)
Enable rules for specific frameworks or projects:
{
"linter": {
"domains": {
"react": "recommended", // React-specific rules
"next": "recommended", // Next.js-specific rules
},
},
}
biome check vs biome ci
Biome check command runs both formatter and linter checks. It can also fix issues if --write flag is provided.
Biome ci is same as biome check but without the --write flag, making it suitable for CI environments.
Conclusion 🎯
Biome is really worth trying out if you are looking for better alternative to Eslint & Prettier. You can ask if you have any questions or need help with migration. So, are you going to try or switching to Biome ? Let me know in the comments below! 💬
This content originally appeared on DEV Community and was authored by Anjan Shomodder
Anjan Shomodder | Sciencx (2025-11-04T13:54:02+00:00) I Replaced ESLint & Prettier with This ⚡. Retrieved from https://www.scien.cx/2025/11/04/i-replaced-eslint-prettier-with-this-%e2%9a%a1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.