DEV Community

Anjan Shomodder
Anjan Shomodder

Posted on

I Replaced ESLint & Prettier with This ⚡

#nextjs #react #webdev

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
Enter fullscreen mode Exit fullscreen mode

2. Initialize Configuration

Create your config file:

npx @biomejs/biome init # --jsonc for jsonc format
Enter fullscreen mode Exit fullscreen mode

3. Editor Setup

VS Code

  1. Install the official Biome VS Code extension
  2. Add to your settings.json: 
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome"
}
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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": {},
  },
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • $schema: For intelisense
  • vcs: Git integration
  • files: File management. Use the includes array 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
  },
}
Enter fullscreen mode Exit fullscreen mode

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
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

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-warnings flag 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
      },
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

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,
  },
}
Enter fullscreen mode Exit fullscreen mode

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",
  },
}
Enter fullscreen mode Exit fullscreen mode

Then just run:

# Only lint changed files since main branch
biome check --changed
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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",
      },
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

Then add to your VS Code settings.json:

// settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "always",
    "source.organizeImports": "always",
  },
}
Enter fullscreen mode Exit fullscreen mode

Domains (Framework-Specific Rules)

Enable rules for specific frameworks or projects:

{
  "linter": {
    "domains": {
      "react": "recommended", // React-specific rules
      "next": "recommended", // Next.js-specific rules
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

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! 💬

Top comments (1)

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Great read. Biome has been around for a while and seems to be a good and promising alternative to ESLint + Prettier, especially if you want performance and clear configs.