@maxchang/biome-config

^{(Is that really a thing?)}

Convention

• Based on recommended rules from Biome
• Using spaces as indentation, default 4 spaces for JS/TS
• Sorted imports, dangling commas
• Single quotes, semicolons as needed

Features

• Automatic import organization
• Git integration, respects .gitignore by default
• Customizable TypeScript, JavaScript, and JSON rules
• Predefined ignore patterns for common files/directories
• Partial support for .vue, .svelte, and .astro files

Usage

Not sure how to set up Biome? Take a look at the Getting Started guide from the official docs.

# ✨ Auto-detect
npx nypm install -D @maxchang/biome-config

# npm
npm install -D @maxchang/biome-config

# yarn
yarn add -D @maxchang/biome-config

# pnpm
pnpm add -D @maxchang/biome-config

# bun
bun install -D @maxchang/biome-config

# deno
deno install --dev npm:@maxchang/biome-config

Extend the config in your biome.json file:

{
  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
  "extends": ["@maxchang/biome-config"],
}

Add the following scripts to your package.json:

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

Recipes

VS Code Settings

If you use VS Code, here is a reference settings.json, with automatic formatting on save and Biome as the default formatter for languages needed.

{
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[css]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

Sort package.json keys

Since Biome has no plans to implement something like prettier-plugin-packagejson and currently lacks equivalent rules such as jsonc/sort-keys^*, you can use sort-package-json as a workaround.

# npm
npx sort-package-json@latest

# pnpm
pnpm dlx sort-package-json@latest

# bun
bunx sort-package-json@latest

# deno
deno run -A npm:sort-package-json@latest

_{* While Biome provides an assist action like useSortedKeys, it does not allow customization to sort keys in a specific order.}

Git Hooks

I recommend using simple-git-hooks with lint-staged to run Biome checks before committing code.

Install the required dependencies:

# ✨ Auto-detect
npx nypm install -D simple-git-hooks lint-staged

# npm
npm install -D simple-git-hooks lint-staged

# yarn
yarn add -D simple-git-hooks lint-staged

# pnpm
pnpm add -D simple-git-hooks lint-staged

# bun
bun install -D simple-git-hooks lint-staged

# deno
deno install --dev npm:simple-git-hooks lint-staged

Add the following configuration to your package.json:

{
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "*": "biome check --no-errors-on-unmatched --files-ignore-unknown=true"
  }
}

then initialize the git hooks:

# npm
npx simple-git-hooks@latest

# pnpm
pnpm dlx simple-git-hooks@latest

# bun
bunx simple-git-hooks@latest

# deno
deno run -A npm:simple-git-hooks@latest

References

• stacksjs/biome-config
• antfu/eslint-config
• maxchang3/eslint-config

---

🤖 auto updated with automd