---
name: biome-formatting-a6a82cf6987e
user-invocable: false
description: Use when formatting JavaScript/TypeScript code with Biome's fast formatter including patterns, options, and code style management.
allowed-tools: [Read, Write, Edit, Bash, Glob, Grep]
---

# Biome Formatting

Master Biome's fast code formatter for JavaScript, TypeScript, JSON, and other supported languages with consistent style enforcement.

## Overview

Biome's formatter provides opinionated, fast code formatting similar to Prettier but with better performance. It's written in Rust and designed to format code consistently across teams.

## Core Commands

### Basic Formatting

```bash
# Format files and write changes
biome format --write .

# Format specific files
biome format --write src/**/*.ts

# Check formatting without fixing
biome format .

# Format stdin
echo "const x={a:1}" | biome format --stdin-file-path="example.js"
```

### Combined Operations

```bash
# Lint and format together
biome check --write .

# Only format (skip linting)
biome format --write .

# CI mode (check both lint and format)
biome ci .
```

## Formatter Configuration

### Global Settings

```json
{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto"
  }
}
```

Options:

- `enabled`: Enable/disable formatter (default: true)
- `formatWithErrors`: Format even with syntax errors (default: false)
- `indentStyle`: "space" or "tab" (default: "tab")
- `indentWidth`: Number of spaces, typically 2 or 4 (default: 2)
- `lineEnding`: "lf", "crlf", or "cr" (default: "lf")
- `lineWidth`: Maximum line length (default: 80)
- `attributePosition`: "auto" or "multiline" for HTML/JSX

### Recommended Configuration

```json
{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 100
  }
}
```

## Language-Specific Formatting

### JavaScript/TypeScript

```json
{
  "javascript": {
    "formatter": {
      "enabled": true,
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "trailingCommas": "all",
      "semicolons": "always",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "bracketSameLine": false,
      "attributePosition": "auto"
    }
  }
}
```

#### Quote Styles

```json
{
  "javascript": {
    "formatter": {
      "quoteStyle": "single",      // 'string' vs "string"
      "jsxQuoteStyle": "double"     // <div attr="value">
    }
  }
}
```

Examples:

```javascript
// quoteStyle: "single"
const message = 'Hello, world!';
const name = 'Alice';

// quoteStyle: "double"
const message = "Hello, world!";
const name = "Alice";

// jsxQuoteStyle: "double"
<button onClick={handleClick} label="Submit" />

// jsxQuoteStyle: "single"
<button onClick={handleClick} label='Submit' />
```

#### Trailing Commas

```json
{
  "javascript": {
    "formatter": {
      "trailingCommas": "all"  // "all", "es5", or "none"
    }
  }
}
```

Examples:

```javascript
// "all"
const obj = {
  a: 1,
  b: 2,
};

function fn(
  arg1,
  arg2,
) {}

// "es5"
const obj = {
  a: 1,
  b: 2,
};

function fn(
  arg1,
  arg2  // No comma (not ES5)
) {}

// "none"
const obj = {
  a: 1,
  b: 2
};
```

#### Semicolons

```json
{
  "javascript": {
    "formatter": {
      "semicolons": "always"  // "always" or "asNeeded"
    }
  }
}
```

Examples:

```javascript
// "always"
const x = 1;
const y = 2;

// "asNeeded"
const x = 1
const y = 2
```

#### Arrow Parentheses

```json
{
  "javascript": {
    "formatter": {
      "arrowParentheses": "always"  // "always" or "asNeeded"
    }
  }
}
```

Examples:

```javascript
// "always"
const fn = (x) => x * 2;
const single = (item) => item;

// "asNeeded"
const fn = x => x * 2;
const single = item => item;
const multi = (a, b) => a + b;  // Still needs parens
```

#### Bracket Spacing

```json
{
  "javascript": {
    "formatter": {
      "bracketSpacing": true  // true or false
    }
  }
}
```

Examples:

```javascript
// bracketSpacing: true
const obj = { a: 1, b: 2 };

// bracketSpacing: false
const obj = {a: 1, b: 2};
```

#### Bracket Same Line

```json
{
  "javascript": {
    "formatter": {
      "bracketSameLine": false  // true or false
    }
  }
}
```

Examples:

```jsx
// bracketSameLine: false
<Button
  onClick={handleClick}
  label="Submit"
>
  Click me
</Button>

// bracketSameLine: true
<Button
  onClick={handleClick}
  label="Submit">
  Click me
</Button>
```

#### Quote Properties

```json
{
  "javascript": {
    "formatter": {
      "quoteProperties": "asNeeded"  // "asNeeded" or "preserve"
    }
  }
}
```

Examples:

```javascript
// "asNeeded"
const obj = {
  validIdentifier: 1,
  'invalid-identifier': 2,
  'needs quotes': 3,
};

// "preserve"
const obj = {
  'validIdentifier': 1,
  'invalid-identifier': 2,
  'needs quotes': 3,
};
```

### JSON Formatting

```json
{
  "json": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 80,
      "trailingCommas": "none"
    }
  }
}
```

Note: JSON doesn't support trailing commas, so always use "none".

### CSS Formatting

```json
{
  "css": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 80,
      "quoteStyle": "double"
    }
  }
}
```

## Common Configurations

### Prettier-like Configuration

```json
{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "trailingCommas": "es5",
      "semicolons": "always",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "bracketSameLine": false
    }
  }
}
```

### Standard/XO Style

```json
{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "none",
      "semicolons": "asNeeded",
      "arrowParentheses": "asNeeded",
      "bracketSpacing": true
    }
  }
}
```

### Google Style

```json
{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "all",
      "semicolons": "always",
      "arrowParentheses": "always"
    }
  }
}
```

### Airbnb Style

```json
{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "trailingCommas": "all",
      "semicolons": "always",
      "arrowParentheses": "always",
      "bracketSpacing": true
    }
  }
}
```

## Ignoring Formatting

### Ignore Blocks

```javascript
// biome-ignore format: Preserve specific formatting
const matrix = [
  [1, 0, 0],
  [0, 1, 0],
  [0, 0, 1]
];

// biome-ignore format: ASCII art
const banner = `
  ╔═══════════════╗
  ║   Welcome!    ║
  ╚═══════════════╝
`;
```

### Ignore Files

In biome.json:

```json
{
  "formatter": {
    "ignore": [
      "**/generated/**",
      "**/*.min.js",
      "**/dist/**"
    ]
  }
}
```

Or use files.ignore for both linting and formatting:

```json
{
  "files": {
    "ignore": [
      "**/node_modules/",
      "**/dist/",
      "**/*.min.js"
    ]
  }
}
```

## Line Width Strategies

### Conservative (80 columns)

Good for code review, side-by-side diffs:

```json
{
  "formatter": {
    "lineWidth": 80
  }
}
```

### Balanced (100-120 columns)

Modern standard for most projects:

```json
{
  "formatter": {
    "lineWidth": 100
  }
}
```

### Relaxed (120+ columns)

For teams with large screens:

```json
{
  "formatter": {
    "lineWidth": 120
  }
}
```

## Indentation Strategies

### Spaces (Recommended)

```json
{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2  // or 4
  }
}
```

Pros:

- Consistent across all editors
- Better for code review
- Standard in JavaScript ecosystem

### Tabs

```json
{
  "formatter": {
    "indentStyle": "tab"
  }
}
```

Pros:

- Users can set preferred width
- Smaller file sizes
- Accessibility benefits

## Migration from Prettier

### Compare Configuration

Prettier `.prettierrc.json`:

```json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}
```

Equivalent Biome config:

```json
{
  "formatter": {
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "semicolons": "always",
      "quoteStyle": "single",
      "trailingCommas": "all"
    }
  }
}
```

### Migration Steps

1. **Install Biome**:

```bash
npm install -D @biomejs/biome
```

1. **Create Config**:

```bash
npx biome init
```

1. **Match Prettier Settings**: Update biome.json with equivalent config

2. **Format Codebase**:

```bash
npx biome format --write .
```

1. **Update Scripts**:

```json
{
  "scripts": {
    "format": "biome format --write .",
    "format:check": "biome format ."
  }
}
```

1. **Remove Prettier** (after validation):

```bash
npm uninstall prettier
rm .prettierrc.json .prettierignore
```

## Best Practices

1. **Consistent Configuration** - Same settings across all packages
2. **Line Width Balance** - 80-120 based on team preference
3. **Use Spaces** - More consistent than tabs for JavaScript
4. **Enable in CI** - Check formatting in pipelines
5. **Pre-commit Hooks** - Auto-format before commit
6. **Document Choices** - Explain config decisions to team
7. **Ignore Generated Files** - Don't format build output
8. **Format Incrementally** - Use `--changed` for large codebases
9. **Editor Integration** - Install Biome extension for IDE
10. **Review Diffs** - Check formatting changes before commit

## Common Pitfalls

1. **Conflicting Configs** - Multiple configs with different settings
2. **Formatting Generated Code** - Wasting time on build output
3. **Too Strict Line Width** - 60 or less is too restrictive
4. **Mixing Tabs and Spaces** - Inconsistent indentation
5. **No CI Check** - Not enforcing formatting in pipeline
6. **Wrong File Patterns** - Ignoring files that should be formatted
7. **No Editor Setup** - Manually running format commands
8. **Large Commits** - Formatting entire codebase at once
9. **Ignoring Errors** - formatWithErrors hides syntax issues
10. **No Team Agreement** - Individual preferences cause conflicts

## Advanced Topics

### Per-Language Overrides

```json
{
  "formatter": {
    "indentWidth": 2
  },
  "overrides": [
    {
      "include": ["**/*.json"],
      "formatter": {
        "lineWidth": 120
      }
    },
    {
      "include": ["**/*.md"],
      "formatter": {
        "lineWidth": 80
      }
    }
  ]
}
```

### Conditional Formatting

Format only changed files:

```bash
# Git changed files
biome format --write --changed

# Specific commit range
biome format --write --since=main
```

### Editor Integration

VS Code settings.json:

```json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}
```

### Monorepo Setup

Root biome.json:

```json
{
  "formatter": {
    "enabled": true,
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "all"
    }
  }
}
```

Package-specific override:

```json
{
  "extends": ["../../biome.json"],
  "formatter": {
    "lineWidth": 120
  }
}
```

## Troubleshooting

### Files Not Being Formatted

Check:

1. `formatter.enabled` is true
2. File extension is supported
3. File not in ignore patterns
4. VCS integration not excluding it

### Formatting Conflicts

If formatting keeps changing:

1. Ensure single biome.json source of truth
2. Update all team members' Biome version
3. Run `biome migrate` to update config
4. Clear editor cache and restart

### Performance Issues

Speed up formatting:

1. Use `--changed` for large repos
2. Ignore node_modules and dist
3. Update to latest Biome version
4. Use VCS integration

## When to Use This Skill

- Setting up code formatting for projects
- Migrating from Prettier to Biome
- Establishing team code style standards
- Configuring formatter for specific frameworks
- Troubleshooting formatting issues
- Optimizing formatting performance
- Integrating formatting into CI/CD
- Training teams on code style


---
Source attribution: TheBushidoCollective
Original project: https://github.com/TheBushidoCollective/han/blob/19caa51d5fd144ef6b2764f2332f4c856aa5d1af/plugins/validation/biome/skills/biome-formatting/SKILL.md
License: Apache-2.0
License information: https://www.apache.org/licenses/LICENSE-2.0
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

# Functional Source License, Version 1.1, ALv2 Future License

## Abbreviation

FSL-1.1-ALv2

## Notice

Copyright 2025 The Bushido Collective

## Terms and Conditions

### Licensor ("We")

The party offering the Software under these Terms and Conditions.

### The Software

The "Software" is each version of the software that we make available under
these Terms and Conditions, as indicated by our inclusion of these Terms and
Conditions with the Software.

### License Grant

Subject to your compliance with this License Grant and the Patents,
Redistribution and Trademark clauses below, we hereby grant you the right to
use, copy, modify, create derivative works, publicly perform, publicly display
and redistribute the Software for any Permitted Purpose identified below.

### Permitted Purpose

A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
means making the Software available to others in a commercial product or
service that:

1. substitutes for the Software;

2. substitutes for any other product or service we offer using the Software
   that exists as of the date we make the Software available; or

3. offers the same or substantially similar functionality as the Software.

Permitted Purposes specifically include using the Software:

1. for your internal use and access;

2. for non-commercial education;

3. for non-commercial research; and

4. in connection with professional services that you provide to a licensee
   using the Software in accordance with these Terms and Conditions.

### Patents

To the extent your use for a Permitted Purpose would necessarily infringe our
patents, the license grant above includes a license under our patents. If you
make a claim against any party that the Software infringes or contributes to
the infringement of any patent, then your patent license to the Software ends
immediately.

### Redistribution

The Terms and Conditions apply to all copies, modifications and derivatives of
the Software.

If you redistribute any copies, modifications or derivatives of the Software,
you must include a copy of or a link to these Terms and Conditions and not
remove any copyright notices provided in or with the Software.

### Disclaimer

THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.

IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.

### Trademarks

Except for displaying the License Details and identifying us as the origin of
the Software, you have no right under these Terms and Conditions to use our
trademarks, trade names, service marks or product names.

## Grant of Future License

We hereby irrevocably grant you an additional license to use the Software under
the Apache License, Version 2.0 that is effective on the second anniversary of
the date we make the Software available. On or after that date, you may use the
Software under the Apache License, Version 2.0, in which case the following
will apply:

Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
CONDITIONS OF ANY KIND, either express or implied. See the License for the
specific language governing permissions and limitations under the License.



# Mega AI Hub resource metadata

Creator / publisher: TheBushidoCollective
Original project: https://github.com/TheBushidoCollective/han/blob/19caa51d5fd144ef6b2764f2332f4c856aa5d1af/plugins/validation/biome/skills/biome-formatting/SKILL.md
Attribution basis: Source repository record

Fields of work: Content & Media, Development & Engineering
Roles: Backend Developer, DevOps / SRE, Frontend Developer, Full-Stack Developer, Technical Writer
Specialties: Backend, Frontend
Tools: Biome
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 07a6ee4b1bbebf0369ef78bd333501ab680f463e2c1012a2d8337b460230eca9