Biome 06 🧹 Formatting Configuration — indentStyle, lineWidth, and quotes - KandZ

⏱️ Estimated read: 10 min | |

Biome’s formatter is deliberately opinionated. It follows the Prettier philosophy of exposing only a small set of options, and it resists adding new ones to prevent the style debates that turn into the configuration debates . The options that do exist are split into two layers: the language-agnostic options that live in the top-level formatter block, and the language-specific options that live under the <language>.formatter block . The split is the mechanism that lets a project set the general indentation once and override only the language-specific details, such as the quote style for the JavaScript files.

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

The three options that matter most are indentStyle, indentWidth, and lineWidth. The indentStyle is the choice between the tabs and the spaces, and the default is "tab", which differs from Prettier’s default of spaces . The indentWidth is the number of the spaces per indentation level, and the default is 2. The lineWidth is the column width at which Biome wraps the code, and the default is 80 . The quote style is the language-specific option, and it lives under javascript.formatter.quoteStyle, with the default of "double" .

Key point: indentStyle defaults to "tab", indentWidth defaults to 2, and lineWidth defaults to 80. The quoteStyle is the JavaScript-specific option under javascript.formatter, and it defaults to "double". The general options live in the top-level formatter block, and the language-specific options override them under the <language>.formatter block.

Why the formatting options are split

The language-agnostic problem. The indentation and the line width apply to every language that the formatter supports. The formatter.indentStyle and the formatter.lineWidth are the top-level options, and they are the baseline for all the files . The top-level block is the mechanism that configures the general style once, and the language blocks are the overrides.

The language-specific problem. The quote style is a JavaScript concern. The CSS has no quotes, the JSON has the mandatory double quotes, and the HTML has the attribute quotes. The javascript.formatter.quoteStyle is the language-specific option, and it is the mechanism that configures the quote style only for the JavaScript, the TypeScript, the JSX, and the TSX files . The language block is the override, and the top-level block is the default.

The Prettier difference problem. The Biome defaults differ from Prettier’s in two ways. The indentStyle is "tab" in Biome and the spaces in Prettier, and the quoteStyle is "double" in both . A project that migrates from Prettier must set "indentStyle": "space" explicitly, or the formatting changes to tabs. The migration is the configuration change, and the biome migrate prettier command is the mechanism that ports the existing options .

The trade-off. The small option set is the opinionated design, and the design is the reason the formatting is consistent. The indentStyle and the lineWidth are the only general options, and the quoteStyle and the semicolons are the only JavaScript options. The small set is the trade-off against the flexibility, and the flexibility is the reason Prettier has more options.

a. The language-agnostic options

The formatter block holds the options that apply to every language. The indentStyle, the indentWidth, the lineWidth, and the lineEnding are the main options.

// biome.json — the language-agnostic formatter options
{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf"
  }
}

The indentStyle is "tab" or "space". The "tab" is the Biome default, and the "space" is the Prettier-like choice . The indentWidth is the number of the spaces per level, and it is relevant only when the indentStyle is "space". The lineWidth is the column width, and the 80 is the default . The lineEnding is the "lf", the "crlf", or the "cr", and the "lf" is the default.

The formatter.enabled flag is the mechanism that disables the formatter for the whole project. The flag is the top-level switch, and the per-language formatter.enabled is the override.

// biome.json — the disabled formatter for the JSON files
{
  "formatter": { "indentStyle": "space" },
  "json": {
    "formatter": { "enabled": false }
  }
}

The json.formatter.enabled: false is the mechanism that disables the formatting for the JSON files while the other languages are formatted. The override is the per-language control, and the JSON files are the common case for the disabled formatter because the generated JSON should stay in the compact form.

b. The JavaScript-specific options

The javascript.formatter block holds the options that apply to the JavaScript, the TypeScript, the JSX, and the TSX files. The quoteStyle, the jsxQuoteStyle, the semicolons, and the trailingCommas are the main options.

// biome.json — the JavaScript-specific formatter options
{
  "formatter": { "indentStyle": "space" },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "semicolons": "always",
      "trailingCommas": "all",
      "lineWidth": 100
    }
  }
}

The quoteStyle is "single" or "double", and the default is "double" . The jsxQuoteStyle is the separate option for the JSX attributes, and the default is "double" . The semicolons is "always" or "asNeeded", and the default is "always". The trailingCommas is "all", "es5", or "none", and the default is "all" . The lineWidth in the JavaScript block overrides the top-level formatter.lineWidth for the JavaScript files only .

The javascript block covers the TypeScript, the JSX, and the TSX as well. The Biome documentation states that it refers to all the JavaScript variants as javascript, and the block is the single configuration for all of them . The TypeScript-specific options, such as the quoteStyle for the type imports, are not separate; the javascript block is the single place.

The override is the mechanism that lets the project use the tabs for the general formatting and the spaces for the JavaScript, or the double quotes for the JSX and the single quotes for the JavaScript. The language block is the specific configuration, and the top-level block is the fallback.

Complete Example Session

// ============================================
// PART 1: THE DEFAULT CONFIGURATION
// ============================================

// The Biome defaults:
// indentStyle: "tab"
// indentWidth: 2
// lineWidth: 80
// quoteStyle: "double"

// The defaults differ from Prettier in the indentStyle.

// ============================================
// PART 2: THE PRETTIER-LIKE CONFIGURATION
// ============================================

// biome.json
{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  }
}

// The space indentation matches Prettier.
// The line width matches Prettier.

// ============================================
// PART 3: THE JAVASCRIPT QUOTE STYLE
// ============================================

// biome.json
{
  "formatter": { "indentStyle": "space" },
  "javascript": {
    "formatter": { "quoteStyle": "single" }
  }
}

// The JavaScript uses the single quotes.
// The other languages keep their defaults.

// ============================================
// PART 4: THE LINE WIDTH OVERRIDE
// ============================================

// biome.json
{
  "formatter": { "lineWidth": 80 },
  "javascript": {
    "formatter": { "lineWidth": 100 }
  }
}

// The general line width is 80.
// The JavaScript line width is 100.

// ============================================
// PART 5: THE JSON FORMATTER DISABLED
// ============================================

// biome.json
{
  "formatter": { "indentStyle": "space" },
  "json": {
    "formatter": { "enabled": false }
  }
}

// The JSON files are not formatted.
// The other files are formatted.

// ============================================
// PART 6: THE SEMICOLONS
// ============================================

// biome.json
{
  "javascript": {
    "formatter": { "semicolons": "asNeeded" }
  }
}

// The semicolons are omitted when they are not needed.

// ============================================
// PART 7: THE TRAILING COMMAS
// ============================================

// biome.json
{
  "javascript": {
    "formatter": { "trailingCommas": "es5" }
  }
}

// The trailing commas are added where ES5 allows them.

// ============================================
// PART 8: THE JSX QUOTE STYLE
// ============================================

// biome.json
{
  "javascript": {
    "formatter": { "jsxQuoteStyle": "single" }
  }
}

// The JSX attributes use the single quotes.
// The JavaScript strings use the default double quotes.

// ============================================
// PART 9: THE LINE ENDING
// ============================================

// biome.json
{
  "formatter": { "lineEnding": "crlf" }
}

// The line ending is CRLF.
// The default is LF.

// ============================================
// PART 10: THE CHECKLIST
// ============================================

// [ ] The indentStyle is set to "space" for the Prettier-like output.
// [ ] The indentWidth is set.
// [ ] The lineWidth is set.
// [ ] The quoteStyle is set under javascript.formatter.
// [ ] The semicolons is set under javascript.formatter.
// [ ] The trailingCommas is set under javascript.formatter.
// [ ] The JSON formatter is disabled if the JSON files should not be formatted.

The ten parts covered the default configuration, the Prettier-like configuration, the JavaScript quote style, the line width override, the JSON formatter disabled, the semicolons, the trailing commas, the JSX quote style, the line ending, and the checklist. The through-line is that the general options are the baseline, and the language-specific options are the overrides.

Quick Reference

The language-agnostic options

Option	Values	Default
`indentStyle`	`"tab"`, `"space"`	`"tab"`
`indentWidth`	Number	`2`
`lineWidth`	Number	`80`
`lineEnding`	`"lf"`, `"crlf"`, `"cr"`	`"lf"`

The JavaScript-specific options

Option	Values	Default
`quoteStyle`	`"single"`, `"double"`	`"double"`
`jsxQuoteStyle`	`"single"`, `"double"`	`"double"`
`semicolons`	`"always"`, `"asNeeded"`	`"always"`
`trailingCommas`	`"all"`, `"es5"`, `"none"`	`"all"`

The Biome vs Prettier defaults

Setting	Biome	Prettier
`indentStyle`	`"tab"`	Spaces
`indentWidth`	`2`	`2`
`lineWidth`	`80`	`80`
`quoteStyle`	`"double"`	`"double"`

Best Practices

✅ Do This:

// Use the space indentation for the Prettier-like output
{ "formatter": { "indentStyle": "space" } }                       // ✅

// Use the JavaScript-specific quote style
{ "javascript": { "formatter": { "quoteStyle": "single" } } }     // ✅

// Disable the JSON formatter for the generated JSON
{ "json": { "formatter": { "enabled": false } } }                 // ✅

❌ Don’t Do This:

// Assume the Biome default is the space indentation
// The default is the tab.                                        // ❌

// Put the quoteStyle in the top-level formatter block
{ "formatter": { "quoteStyle": "single" } } // not the right block // ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
The formatting changes to tabs after the migration	The Biome default is `"tab"`	Set `indentStyle: "space"`
The quote style is not applied	The option is in the wrong block	Put it in `javascript.formatter`
The line width override is ignored	The option is in the wrong block	Put it in the language block
The JSON files are formatted	The `json.formatter.enabled` is not set	Set it to `false`

Real-World Examples

1. The space indentation

{ "formatter": { "indentStyle": "space" } }

2. The single quotes

{ "javascript": { "formatter": { "quoteStyle": "single" } } }

3. The line width

{ "formatter": { "lineWidth": 100 } }

4. The JavaScript line width override

{ "javascript": { "formatter": { "lineWidth": 120 } } }

5. The semicolons

{ "javascript": { "formatter": { "semicolons": "asNeeded" } } }

6. The trailing commas

{ "javascript": { "formatter": { "trailingCommas": "es5" } } }

7. The JSX quote style

{ "javascript": { "formatter": { "jsxQuoteStyle": "single" } } }

8. The line ending

{ "formatter": { "lineEnding": "crlf" } }

9. The JSON formatter disabled

{ "json": { "formatter": { "enabled": false } } }

10. The full configuration

{ "formatter": { "indentStyle": "space" }, "javascript": { "formatter": { "quoteStyle": "single" } } }

Visual

The Configuration Blocks

┌──────────────────────────────────────────────────────────────┐
│  THE FORMATTER CONFIGURATION BLOCKS                          │
│                                                              │
│  formatter                                                   │
│  ┌─────────────────────┐                                    │
│  │ indentStyle         │  The language-agnostic options     │
│  │ indentWidth         │                                    │
│  │ lineWidth           │                                    │
│  │ lineEnding          │                                    │
│  └─────────────────────┘                                    │
│                                                              │
│  javascript.formatter                                        │
│  ┌─────────────────────┐                                    │
│  │ quoteStyle          │  The JavaScript-specific options   │
│  │ jsxQuoteStyle       │                                    │
│  │ semicolons          │                                    │
│  │ trailingCommas      │                                    │
│  └─────────────────────┘                                    │
└──────────────────────────────────────────────────────────────┘

The Biome vs Prettier Defaults

┌──────────────────────────────────────────────────────────────┐
│  THE DEFAULT DIFFERENCE                                      │
│                                                              │
│  Biome                       Prettier                       │
│  ┌─────────────────────┐     ┌─────────────────────┐        │
│  │ indentStyle: "tab"  │     │ indentStyle: spaces │        │
│  │ lineWidth: 80       │     │ lineWidth: 80       │        │
│  │ quoteStyle: "double"│     │ quoteStyle: "double"│        │
│  └─────────────────────┘     └─────────────────────┘        │
│                                                              │
│  The indentStyle is the difference.                          │
│  Set "indentStyle": "space" for the Prettier-like output.    │
└──────────────────────────────────────────────────────────────┘

The Override

┌──────────────────────────────────────────────────────────────┐
│  THE LANGUAGE OVERRIDE                                       │
│                                                              │
│  formatter.lineWidth: 80                                     │
│         │                                                    │
│         ▼                                                    │
│  ┌─────────────────────┐                                    │
│  │ The general width   │  Applies to every language         │
│  │ is 80               │                                    │
│  └──────────┬──────────┘                                    │
│             │                                                │
│             ▼                                                    │
│  javascript.formatter.lineWidth: 100                         │
│  ┌─────────────────────┐                                    │
│  │ The JavaScript      │  Overrides the general width       │
│  │ width is 100        │                                    │
│  └─────────────────────┘                                    │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
`indentStyle`	`"tab"` (default) or `"space"`
`indentWidth`	`2` (default)
`lineWidth`	`80` (default)
`quoteStyle`	`"double"` (default), under `javascript.formatter`
`semicolons`	`"always"` (default), under `javascript.formatter`
`trailingCommas`	`"all"` (default), under `javascript.formatter`
The Prettier difference	The `indentStyle` is `"tab"` in Biome

Key takeaways:

The indentStyle defaults to "tab", not spaces. The Biome default differs from Prettier, and a project that migrates must set "indentStyle": "space" explicitly to keep the space indentation .
The indentWidth and the lineWidth default to 2 and 80. The two options are the language-agnostic baseline, and the language-specific block can override the lineWidth for the specific languages .
The quoteStyle is the JavaScript-specific option. It lives under javascript.formatter, and it defaults to "double". The jsxQuoteStyle is the separate option for the JSX attributes .
The semicolons and the trailingCommas are the JavaScript options. The semicolons defaults to "always", and the trailingCommas defaults to "all". The two options are the naming difference from Prettier’s semi and trailingComma .
The json.formatter.enabled: false disables the formatter for the JSON files. The per-language override is the mechanism that keeps the generated JSON in the compact form while the other languages are formatted.

Remember: The Biome formatter is opinionated, and the options are few. The indentStyle defaults to tabs, the lineWidth defaults to 80, and the quoteStyle defaults to double. The language-agnostic options live in the formatter block, and the JavaScript-specific options live in the javascript.formatter block. The migration from Prettier requires the indentStyle: "space" override, and the language block is the mechanism that customizes the JavaScript without affecting the other languages.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!