# BiomeJS VS Code Integration: Architecture, Setup, and Configuration

> Discover BiomeJS VS Code integration architecture setup and configuration. Leverage Rust-based formatter and linter for instant diagnostics and quick fixes directly in VS Code.

- Repository: [Biome/biome](https://github.com/biomejs/biome)
- Tags: architecture
- Published: 2026-06-19

---

**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`](https://github.com/biomejs/biome/blob/main/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`](https://github.com/biomejs/biome/blob/main/.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.

```bash

# 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`](https://github.com/biomejs/biome/blob/main/.vscode/settings.json). The extension reads [`configuration_schema.json`](https://github.com/biomejs/biome/blob/main/configuration_schema.json) bundled at `packages/@biomejs/biome/configuration_schema.json` to provide autocomplete and validation for all available options.

```jsonc
// .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.

```typescript
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`](https://github.com/biomejs/biome/blob/main/transport.rs).
- The server respects custom `configurationPath` settings for flexible project structures, resolving workspaces via [`workspace.rs`](https://github.com/biomejs/biome/blob/main/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`](https://github.com/biomejs/biome/blob/main/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`](https://github.com/biomejs/biome/blob/main/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`](https://github.com/biomejs/biome/blob/main/transport.rs) adds negligible overhead, keeping the "write-format-lint" loop instantaneous for most files.