KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

biome-config

★ 1 Open GitHub ↗

Max Chang's Biome config preset.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @maxchang/biome-config

[![npm version](https://img.shields.io/npm/v/@maxchang/biome-config?color=yellow)](https://npmjs.com/package/@maxchang/biome-config)
[![npm downloads](https://img.shields.io/npm/dm/@maxchang/biome-config?color=yellow)](https://npm.chart.dev/@maxchang/biome-config)
[![license](https://img.shields.io/github/license/maxchang3/biome-config?color=yellow)](https://github.com/maxchang3/biome-config/blob/main/LICENSE)

[![Checked with Biome](https://img.shields.io/badge/Checked_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev)
[![code style](https://img.shields.io/badge/Max_Chang-black?style=flat&logoColor=black&label=Code%20Style)](https://github.com/maxchang3/biome-config) <s>(Is that really a thing?)</s>

## Convention

- Based on [recommended rules](https://biomejs.dev/linter/rules/#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](https://biomejs.dev/internals/language-support/#html-super-languages-support) for `.vue`, `.svelte`, and `.astro` files

## Usage

> [!TIP]
> Not sure how to set up Biome? Take a look at the [Getting Started](https://biomejs.dev/guides/getting-started/) guide from the official docs.

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

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

Install the config package as a development dependency:

```sh
# ✨ 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:

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

Add the following scripts to your `package.json`:

```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`](./.vscode/settings.json), with automatic formatting on save and Biome as the default formatter for languages needed.

```json [settings.json]
{
  "[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](https://github.com/biomejs/biome/discussions/941#discussioncomment-7715731) to implement something like [prettier-plugin-packagejson](https://github.com/matzkoh/prettier-plugin-packagejson) and currently lacks equivalent rules such as [`jsonc/sort-keys`](https://ota-meshi.github.io/eslint-plugin-jsonc/rules/sort-keys.html)*, you can use [sort-package-json](https://github.com/keithamus/sort-package-json) as a workaround.

```sh
# 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 <a href="https://next.biomejs.dev/assist/actions/use-sorted-keys/#how-to-configure">useSortedKeys</a>, it does not allow customization to sort keys in a specific order.

### Git Hooks
I recommend using [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) with [lint-staged](https://github.com/okonet/lint-staged) to run Biome checks before committing code.

Install the required dependencies:

```sh
# ✨ 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`:

```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:

```sh
# 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](https://github.com/stacksjs/biome-config)
- [antfu/eslint-config](https://github.com/antfu/eslint-config)
- [maxchang3/eslint-config](https://github.com/maxchang3/eslint-config)

---

_🤖 auto updated with [automd](https://automd.unjs.io)_

biome-config

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README