BiomeJS VS Code Integration: Architecture, Setup, and Configuration

Biome ships a first-party VS Code extension that embeds its Rust-based formatter and linter via WebAssembly and JSON-RPC, providing on-type formatting, diagnostics, and quick-fixes without requiring a native toolchain.

The biomejs/biome repository includes a dedicated VS Code extension that brings the toolchain’s high-performance analysis directly into your editor. By leveraging a WebAssembly build of the core Rust engine and a custom JSON-RPC transport layer, the extension delivers sub-second formatting and linting feedback through the Language Server Protocol (LSP).

Architecture and Communication Layer

Extension Package and WebAssembly Core

Located at packages/@biomejs/biome, the extension package declares its entry points in package.json and bundles a pre-compiled WebAssembly binary. This architecture eliminates the need for developers to install Rust or Node.js native modules, distributing the entire formatter and linter as a portable Wasm module.

JSON-RPC Transport Implementation

Communication between VS Code and the Biome server flows through the @biomejs/backend-jsonrpc crate. In packages/@biomejs/backend-jsonrpc/src/transport.rs, the transport layer specifically sets the MIME type to "application/vscode-jsonrpc" at line 99, ensuring compatibility with VS Code’s language client expectations.

Workspace and Configuration Resolution

The server handles complex workspace layouts through packages/@biomejs/backend-jsonrpc/src/workspace.rs. When the configurationPath setting points to a Biome configuration file outside the workspace root, the server correctly resolves the project directory, enabling monorepo setups where .biome.json lives in parent folders.

LSP Features and Capabilities

On-Type Formatting and Diagnostics

Once connected, the language server provides on-type formatting that reformats code as you type, maintaining compliance with Biome’s style rules. The extension also surfaces detailed diagnostics via textDocument/publishDiagnostics, mirroring the CLI’s biome lint output with inline error highlighting and contextual messages.

Quick-Fixes and Code Actions

Biome exposes safe and unsafe fixes through the standard VS Code Code Action UI. When you trigger a quick-fix, the server responds to codeAction requests with edit operations that you can apply with a single keystroke, automating the remediation of lint violations.

Installation and Configuration

Installing from the Marketplace

The extension is available on the VS Code Marketplace. You can install it via the command line or the Extensions panel.

# Install via CLI using the marketplace ID

code --install-extension biomejs.biome

Configuring VS Code Settings

To enable Biome as your default formatter and linter, configure your workspace settings in .vscode/settings.json. The extension reads configuration_schema.json bundled at packages/@biomejs/biome/configuration_schema.json to provide autocomplete and validation for all available options.

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "biome.lint.enabled": true,
  "biome.configurationPath": "./.biome.json"
}

Lifecycle and Request Flow

The integration follows a strict LSP lifecycle to ensure responsive editing:

1. Activation: The extension activates when opening JavaScript, TypeScript, JSX, JSON, or CSS files, launching the Rust language server as a child process.
2. Initialization: VS Code sends an initialize request via JSON-RPC, and the backend-jsonrpc transport creates a connection using the VS Code-specific MIME type.
3. Formatting: On save or while typing, VS Code sends textDocument/formatting requests, and the Wasm engine returns edited text ranges.
4. Linting: The server pushes diagnostics through textDocument/publishDiagnostics, which VS Code renders as inline errors and warnings.
5. Quick-Fixes: When you select a fix, VS Code requests codeAction, and the server returns the appropriate edit operations.

Programmatic Interaction

For extension developers, you can interact with Biome’s diagnostics and fixes programmatically using the VS Code API.

import * as vscode from 'vscode';

async function applyFirstFix() {
  const editor = vscode.window.activeTextEditor;
  if (!editor) return;

  const diagnostics = vscode.languages.getDiagnostics(editor.document.uri);
  for (const diag of diagnostics) {
    const actions = await vscode.commands.executeCommand(
      'vscode.executeCodeActionProvider',
      editor.document.uri,
      diag.range,
      { kind: vscode.CodeActionKind.QuickFix, apply: 'never' }
    );
    if (actions.length) {
      await actions[0].edit?.apply(editor);
      break;
    }
  }
}

Summary

• The Biome VS Code extension lives in packages/@biomejs/biome and distributes a WebAssembly binary for platform-independent execution.
• Communication uses the @biomejs/backend-jsonrpc crate with the MIME type "application/vscode-jsonrpc" as defined in transport.rs.
• The server respects custom configurationPath settings for flexible project structures, resolving workspaces via workspace.rs.
• Features include on-type formatting, real-time diagnostics, and quick-fixes through standard LSP methods like textDocument/formatting and codeAction.
• Configuration is validated against configuration_schema.json, providing autocomplete for settings like biome.lint.enabled and biome.format.enabled.

Frequently Asked Questions

Does the Biome VS Code extension require a Rust toolchain?

No. The extension bundles a pre-built WebAssembly binary that runs in VS Code’s Node.js process. You do not need to install Rust or compile anything locally; the Wasm module is pulled automatically when you install the extension from the marketplace.

How does Biome handle configuration files in parent directories?

The language server resolves configuration paths using the logic in packages/@biomejs/backend-jsonrpc/src/workspace.rs. When you set biome.configurationPath to a relative or absolute path, the server correctly locates the configuration even if it resides outside the current workspace folder, supporting monorepo architectures.

Can I use Biome for formatting but disable the linter in VS Code?

Yes. The extension exposes independent settings for each feature. Set biome.format.enabled to true and biome.lint.enabled to false in your VS Code settings. These options are defined in configuration_schema.json and control whether the language server registers formatting or diagnostic providers.

What is the performance difference between the VS Code extension and the CLI?

There is minimal performance difference because both use the same Rust core. The VS Code extension runs the formatter and analyzer inside a WebAssembly module, while the CLI uses native binaries. The JSON-RPC transport in transport.rs adds negligible overhead, keeping the "write-format-lint" loop instantaneous for most files.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}