biome-formatting

What this skill does

# 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": {
    "ind