@maxchang/biome-config

(Is that really a thing?)

Convention

• Based on recommended rules from Biome
• Using spaces as indentation.
• 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

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

1. Install Biome as a development dependency if you haven't already:

   # ✨ Auto-detect
   npx nypm install -D @biomejs/biome
   
   # npm
   npm install -D @biomejs/biome
   
   # yarn
   yarn add -D @biomejs/biome
   
   # pnpm
   pnpm add -D @biomejs/biome
   
   # bun
   bun install -D @biomejs/biome
   
   # deno
   deno install --dev npm:@biomejs/biome

2. Install the config package as a development dependency:

   # ✨ 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

3. Extend the config in your biome.json file:

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

4. 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

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