October 11, 2024

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:

Comparaison Perf Biome vs Eslint/Prettier

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

Install Biome in your project:

pnpm add --save-dev --save-exact @biomejs/biome

Initialize a file biome.json:

pnpm biome init

In this biome.json file, you can configure your own rules. Here’s mine, optimized for React:

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true,
    "defaultBranch": "main"
  },
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedImports": "warn",
        "noUndeclaredVariables": "error",
        "noUnusedVariables": "error",
        "useExhaustiveDependencies": "warn"
      },
      "suspicious": {
        "noConsoleLog": "warn",
        "noEmptyBlockStatements": "error"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "options": {
            "attributes": ["className"],
            "functions": ["cn", "cva"]
          },
          "fix": "safe"
        }
      }
    },
    "ignore": ["sanity.types.ts"]
  },
  "javascript": {
    "globals": ["React"]
  },
  "files": {
    "ignore": ["node_modules", "public", ".next"]
  }
}

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:

.vscode/settings.json

{
  "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc][css][graphql]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "quickfix.biome": "explicit",
      "source.organizeImports.biome": "explicit"
    }
  }
}

Now add some scripts, here are my favorites:

package.json

{
  //...
  "scripts": {
    "check": "biome check",
    "check:fix": "biome check --fix",
    "check:ci": "biome ci --reporter=github",
    "lint": "biome lint",
    "lint:fix": "biome lint --fix",
    "format": "biome format",
    "format:fix": "biome format --fix",
  }
}

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 ⚡️

erwannrousseau.dev