Streamlining JSX Workflow with Biome’s Formatter and Linter

The JSX tooling headache

When working with React or other JSX‑based projects, teams often juggle separate tools: Prettier for formatting, ESLint for linting, and possibly additional plugins for JSX‑specific rules. Switching between commands, managing conflicting configurations, and waiting for editor plug‑ins to catch up can slow down development.

Biome aims to replace that split‑toolchain with a single binary that handles both formatting and linting, sharing one configuration file. This post walks through a practical setup, shows how Biome treats JSX syntax, and highlights where you still need to be careful.

Getting Biome ready for JSX

First, add Biome as a dev dependency. Run this in your project root (you need npm or yarn available):

npm i -D @biomejs/biome

Create a biome.json at the repository root. The following minimal example enables both the formatter and the linter with a space‑based indent style:

{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2
  },
  "linter": {
    "enabled": true
  }
}

This file is all Biome needs; no separate .prettierrc or .eslintrc is required.

Formatting JSX with biome format

Biome’s formatter understands JSX semantics: it preserves self‑closing tags, keeps fragment syntax (<>) intact, and can reorder attributes according to a style you choose (via attributeOrder if you add it). To format all JSX files in a src folder and write the changes back to disk, run:

npx biome format --write src/**/*.jsx

The command walks the file tree, parses each file with Biome’s internal parser, applies the formatter rules, and overwrites the original files. If you only want to see what would change, omit --write; Biome will output a diff to stdout.

Because the formatter shares the same parser as the linter, you won’t see the formatter break JSX that the linter later flags as invalid—both tools agree on the syntactic structure.

Linting and auto‑fixing with biome lint

Biome’s linter ships with rule groups such as recommended, style, and complexity. The recommended set includes JSX‑specific rules like jsx/noUndeclaredVariables and jsx/noConstructContextValues. To lint the same source tree and automatically fix any fixable violations, execute:

npx biome lint --fix src/**/*.jsx

The --fix flag tells Biome to apply safe edits directly to the files. Rules that require manual intervention (e.g., complex refactorings) will be reported but not changed.

You can tailor which rules are active by adding a linter section to biome.json. For example, to turn on the style group and disable a specific rule:

{
  "formatter": { "indentStyle": "space" },
  "linter": {
    "enabled": true,
    "rules": {
      "style": {
        "recommended": true
      },
      "jsx/noUndeclaredVariables": "off"
    }
  }
}

Editor integration via LSP

Biome provides a Language Server Protocol implementation. Install the official Biome extension for VS Code, WebStorm, or Neovim. Once the extension is active:

• Diagnostics (lint warnings and errors) appear inline as you type.
• Format‑on‑save triggers biome format --write on the current file.
• The biome lint --fix command can be bound to a keyboard shortcut for quick clean‑ups.

Because the language server uses the same parser and rule set as the CLI, the feedback you see in the editor matches what you get when you run the commands in a terminal.

Trade‑offs and limitations

Biome’s JSX support assumes a React‑like runtime. It does not validate JSX against custom component libraries or framework‑specific semantics (e.g., SolidJS’s fine‑grained reactivity). If your project relies on such extensions, you may need supplementary linting rules or a different tool for those checks.

Additionally, while Biome formats many ECMAScript proposals correctly, linting for newer features (like decorators) depends on the rule being present in your Biome version. Always check the release notes if you adopt cutting‑edge syntax.

Actionable next steps

1. Add Biome to your project with npm i -D @biomejs/biome.
2. Create a basic biome.json as shown above.
3. Run npx biome format --write src/**/*.jsx to see formatting changes.
4. Run npx biome lint --fix src/**/*.jsx to apply auto‑fixable lint fixes.
5. Install the Biome editor extension and verify inline diagnostics and format‑on‑save behavior.
6. Adjust rule sets in biome.json to match your team’s style guide.

By consolidating formatting and linting into one tool, you reduce configuration friction and gain consistent behavior across CLI and editor workflows. Keep the limitations in mind, especially if you use non‑standard JSX extensions, and you’ll have a smoother JSX development experience.