Setting Up Biome in VSCode

Tired of juggling ESLint, Prettier and additional plugins just to keep your React codebase clean and consistent? Enter Biome, a fast, all-in-one tool that handles formatting and linting with a single, simple configuration. Written in Rust, it's designed for performance and ease of use.

Step 1: Install Biome

First thing first, navigate to your project's root directory in your terminal. Then, run the following command to install Biome as a development dependency:

npm install --save-dev --save-exact @biomejs/biome

or using Bun as I do:

bun add -D -E @biomejs/biome

Step 2: Create a Biome Configuration File

Next, create a configuration file named biome.json in the root of your project.

npx @biomejs/biome init

This command generates a basic biome.json file. You can customize it to fit your project's needs.

Step 3: Configure VSCode to Use Biome

To integrate Biome with VSCode, you'll need to install the Biome extension from the VSCode marketplace. Then add the following settings to your VSCode settings.json file:

{
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.biome": "explicit",
        "source.organizeImports.biome": "explicit"
    }
}

Step 4: Customize Biome Rules

You can customize Biome's behavior by modifying the biome.json file. For example, you can enable or disable specific linting rules, set formatting options, and more. Refer to the Biome documentation for a comprehensive list of configuration options. Here's my biome.json file:

{
  "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true,
    "defaultBranch": "main"
  },
  "files": { "ignoreUnknown": false },
  "formatter": {
    "enabled": true,
    "indentStyle": "space"
  },
  "linter": { "enabled": true, "rules": { "recommended": false } },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always"
    }
  },
  "assist": {
    "enabled": true,
    "actions": { "source": { "organizeImports": "on" } }
  }
}

Step 5: Add scripts to package.json

To make it easier to run Biome commands, you can add scripts to your package.json file:

"scripts": {
    // ... existing scripts
    // Format all files
    "format": "bunx biome format --write",
    // Format specific files
    "format:files": "bunx biome format --write",
    // Lint and apply safe fixes to all files
    "lint": "bunx biome lint --write",
    // Lint files and apply safe fixes to specific files
    "lint:files": "bunx biome lint --write",
    // Format, lint, and organize imports of all files
    "check": "bunx biome check --write",
    // Format, lint, and organize imports of specific files
    "check:files": "bunx biome check --write"
}

personally I just use bunx biome check --write as it does everything in one go.