Skip to main content
iotools.cloudiotools.cloud

Biome Config Generator

Generate a Biome configuration file (biome.json) — formatter settings (indent, line width, trailing commas), a linter rule preset (recommended, strict, or off), import organization, and per-language overrides for JavaScript/TypeScript, JSON, and CSS.

Input

Formatter

Spaces per indent level — only applies when indentStyle is "space".

Linter

Output Options

Output

Generated Config
Was this helpful?

More ways to use this tool

REST API

curl -X POST https://api.iotools.cloud/v1/tool/biome-config-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "includeSchema": "true",
    "schemaVersion": "latest",
    "formatterEnabled": "true",
    "indentStyle": "tab",
    "indentWidth": "2",
    "lineWidth": "80",
    "lineEnding": "lf",
    "linterEnabled": "true",
    "linterPreset": "recommended",
    "organizeImports": "true",
    "quoteStyle": "double",
    "jsxQuoteStyle": "double",
    "quoteProperties": "asNeeded",
    "trailingCommas": "all",
    "semicolons": "always",
    "arrowParentheses": "always",
    "bracketSpacing": "true",
    "bracketSameLine": "",
    "jsonFormatterEnabled": "true",
    "cssFormatterEnabled": "",
    "cssQuoteStyle": "double",
    "vcsEnabled": "true",
    "vcsUseIgnoreFile": "true",
    "includeHeader": "true"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `biome-config-generator` tool (Biome Config Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Embed widget

<iframe
  src="https://iotools.cloud/embed/biome-config-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Biome Config Generator — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Drop this into your own page — free, no key required, just a link back.

Cost per API/MCP callFrom 5 credits
Need more credits?View pricing

Also available with

IntegrationsBrowser extensionVS Code extension

Guides

The Biome Config Generator builds a ready-to-use biome.json configuration file from a set of toggles and dropdowns — no need to memorize Biome's nested option names or hand-write valid JSON. Pick your formatter, linter, and per-language settings, then copy or download the file straight into your project root.

What it does

Biome is a fast, all-in-one formatter and linter for JavaScript, TypeScript, JSON, and CSS, but its biome.json has many nested sections — formatter, linter, assist, and per-language javascript/json/css overrides — that are easy to get wrong by hand. This tool assembles a complete, valid config for you. It covers:

  • Formatter settings — indentStyle, indentWidth, lineWidth, and lineEnding.
  • Linter rule preset — Recommended (Biome's balanced default), Strict (every rule, including nursery/experimental), or Off (formatter only).
  • Import organization — the assist.actions.source.organizeImports toggle that replaces the old standalone organizeImports key.
  • JavaScript/TypeScript formatting — quoteStyle, jsxQuoteStyle, quoteProperties, trailingCommas, semicolons, arrowParentheses, bracketSpacing, and bracketSameLine.
  • JSON and CSS overrides — enable/disable formatting per language (CSS formatting is opt-in in Biome, off by default).
  • VCS integration — hooking Biome into your .gitignore so it skips ignored files automatically.
  • $schema inclusion — pin it to your installed Biome version, or leave it at "latest", for IDE autocomplete and validation.

How to use it

  1. Toggle whether to include the $schema field, and set a version if you want it pinned to your installed Biome release.
  2. Adjust the formatter settings — indent style/width, line width, and line endings.
  3. Pick a linter rule preset.
  4. Set your JavaScript/TypeScript quote style, trailing commas, semicolons, and bracket spacing.
  5. Toggle JSON/CSS formatting and VCS integration as needed.
  6. Copy the generated config or download it as biome.json, and drop it into your project root.

The output updates instantly as you change any option.

Should I pin the schema version or use "latest"?

"latest" always resolves to the newest schema, which is convenient but can drift ahead of the Biome CLI version actually installed in your project — your editor might suggest options your installed version doesn't support yet. Pinning it to your exact installed version (e.g. "2.4.13") keeps IDE validation in sync with what you're actually running.

Why is CSS formatting off by default?

Biome shipped CSS formatting after JS/JSON support matured, and it's still opt-in so existing projects aren't surprised by a sudden reformat of their stylesheets. Turn it on once you've confirmed the output matches your team's expectations.

Does this replace my Prettier/ESLint config?

Only if you're migrating — Biome bundles a formatter and linter that can replace both, but it doesn't read .prettierrc or .eslintrc files. If you're moving from either, see the Prettier Config Generator or ESLint Config Generator for comparison, and Biome's own migration commands to port existing settings.

Privacy

This generator runs entirely in your browser. Your selections are never uploaded, logged, or stored — the configuration is assembled locally from the options you choose, and nothing leaves your device.

biomebiomejslinterformatterconfigjavascripttypescriptdeveloper tools

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads