Biome

A clean step-by-step way to implement Biome in your TypeScript project with the exact formatting rules you want:

• ✅ no semicolons and ✅ no trailing commas — plus making VSCode auto-format on save.

⸻

🧰 1. Install Biome

In your project root:

npm install --save-dev @biomejs/biome

or with pnpm:

pnpm add -D @biomejs/biome

⸻

🧭 2. Initialize Biome config

Run:

npx biome init

This will generate a biome.json file in the root of your project.

⸻

🧪 3. Configure the formatting rules

Edit your biome.json file like this:

{
  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "lineEnding": "lf",
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "semicolons": "asNeeded",
      "trailingComma": "none"
    }
  },
  "json": {
    "formatter": {
      "trailingComma": "none"
    }
  }
}

🔸 semicolons: "asNeeded" removes semicolons where they’re optional. 🔸 trailingComma: "none" removes trailing commas in objects, arrays, etc.

⸻

🧠 4. Add Biome scripts to package.json

This makes it easy to format and lint with a single command.

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

⸻

⚡ 5. Configure VSCode to format on save

In .vscode/settings.json (create the folder/file if not exists):

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

💡 This tells VSCode to always use Biome as the default formatter and to format automatically on save for .ts, .js, and .json files.

⸻

🧹 6. (Optional) Remove Prettier or ESLint conflicts

If you previously used Prettier or ESLint for formatting, make sure to disable or remove their format-on-save integration to avoid conflicts:

• Disable Prettier extension in workspace settings or
• Remove "editor.defaultFormatter": "esbenp.prettier-vscode"

⸻

🚀 7. Try it

• Open a .ts or .js file with semicolons or trailing commas.
• Save it.
• ✅ Biome will remove them automatically.

You can also run:

npm run format

to format the entire project at once.

⸻

✅ Result:

• No semicolons
• No trailing commas
• Auto-format on every save
• Clean and fast formatter (Biome is much faster than Prettier)

⸻

Biome Extension for VS Code