Typescript Biome

Biome Formatting & Linting

Use Biome for formatting and linting in all TypeScript projects. Do not use ESLint + Prettier.

Setup

Dependencies

npm install -D @biomejs/biome

Configuration (biome.json)

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 120
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "asNeeded",
      "arrowParentheses": "always"
    }
  },
  "linter": {
    "rules": {
      "complexity": {
        "noBannedTypes": "error",
        "noUselessThisAlias": "error",
        "noUselessTypeConstraint": "error"
      },
      "correctness": {
        "noPrecisionLoss": "error",
        "noUnusedVariables": "off"
      },
      "style": {
        "noNamespace": "error",
        "useAsConstAssertion": "error",
        "useConsistentArrayType": {
          "level": "warn",
          "options": { "syntax": "shorthand" }
        }
      },
      "suspicious": {
        "noDoubleEquals": "error",
        "noExtraNonNullAssertion": "error",
        "noMisleadingInstantiator": "error",
        "noUnsafeDeclarationMerging": "error"
      }
    }
  },
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              [":NODE:", "react"],
              [":PACKAGE:", ":PACKAGE_WITH_PROTOCOL:"],
              ["~/**"]
            ]
          }
        }
      }
    }
  }
}

Code Style Rules

Formatting

Import Organization

Imports must be grouped in this order, separated by blank lines:

// 1. Node builtins and React
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'

// 2. External packages
import pino from 'pino'
import { Injectable } from '@nestjs/common'

// 3. Internal/local imports
import { UserService } from '~/user/user.service'
import { Config } from '~/config'

Strict Equality

Always use === and !==. Never use == or !=.

// Good
if (value === null) {}
if (typeof x === 'string') {}

// Bad — will error
if (value == null) {}

Array Types

Use shorthand array syntax:

// Good
const items: string[] = []
const matrix: number[][] = []

// Bad
const items: Array<string> = []

Exception: use Array<> for complex union types:

const items: Array<string | number> = []

No Namespaces

Never use TypeScript namespace. Use ES modules instead.

// Bad
namespace Utils {
  export function parse() {}
}

// Good
export function parse() {}

Const Assertions

Use as const for literal types:

// Good
const ROLES = ['admin', 'user', 'viewer'] as const

// Bad
const ROLES = ['admin', 'user', 'viewer']

Package.json Scripts

{
  "scripts": {
    "format": "biome format --write .",
    "format:check": "biome format .",
    "lint": "biome lint .",
    "lint:fix": "biome lint --write .",
    "check": "biome check --write ."
  }
}

Editor Integration

Add .vscode/settings.json for VS Code:

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit"
  }
}

Ignoring Files

In biome.json:

{
  "files": {
    "ignore": ["dist", "node_modules", "*.gen.ts", "coverage"]
  }
}

Migrating from ESLint + Prettier

npx @biomejs/biome migrate eslint
npx @biomejs/biome migrate prettier

Then remove ESLint and Prettier configs and dependencies.