Biome 入門ガイド

❯ bunx create-next-app@latest --help
...
  --eslint                                 Initialize with ESLint config.
  --biome                                  Initialize with Biome config.
...

❯ bunx create-next-app@16.4.0 next-eslint --ts --app --tailwind --eslint --use-bun --yes
...
+ eslint@9.39.5 (v10.12.0 available)
+ eslint-config-next@16.4.0
...
352 packages installed [56.05s]
...
Success! Created next-eslint at C:\Users\Jam\biome-demo\next-eslint

❯ bunx create-next-app@16.4.0 next-biome --ts --app --tailwind --biome --use-bun --yes
+ @biomejs/biome@2.4.2
...
47 packages installed [12.40s]
...
Success! Created next-biome at C:\Users\Jam\biome-demo\next-biome

❯ bun add -d prettier eslint-config-prettier
Saved lockfile

installed prettier@3.9.9 with binaries:
 - prettier
installed eslint-config-prettier@10.1.8 with binaries:
 - eslint-config-prettier

2 packages installed [9.64s]

❯ Get-Content .prettierrc.json
{ "semi": false }
❯ Get-ChildItem -Force -Name -File
.gitignore
.prettierignore
.prettierrc.json
AGENTS.md
bun.lock
eslint.config.mjs
next-env.d.ts
next.config.ts
package.json
README.md
tsconfig.json

❯ bun add -d -E @biomejs/biome
Resolved, downloaded and extracted [1]
Saved lockfile

installed @biomejs/biome@2.5.15 with binaries:
 - biome

2 packages installed [401.00ms]

❯ bunx biome init
...
  i Welcome to Biome! Let's get you started...

    Files created

      - biome.json
        Your project configuration. See https://biomejs.dev/reference/configuration

    Found an ignore file. Biome enabled VCS integration.
...

❯ Get-Content title.ts
import { readFileSync } from "node:fs"
import { join } from "node:path"
import { basename } from "node:path"

export function title(file:string){
  var text = readFileSync(join("posts", file), 'utf8')
  if (text == "") return basename(file)
  return text.split("\n")[0]
}

❯ bunx biome format title.ts
title.ts format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Formatter would have printed the following content:

    1    │ - import·{·readFileSync·}·from·"node:fs"
    2    │ - import·{·join·}·from·"node:path"
    3    │ - import·{·basename·}·from·"node:path"
       1 │ + import·{·readFileSync·}·from·"node:fs";
       2 │ + import·{·join·}·from·"node:path";
       3 │ + import·{·basename·}·from·"node:path";
    4  4 │
    5    │ - export·function·title(file:string){
    6    │ - ··var·text·=·readFileSync(join("posts",·file),·'utf8')
    7    │ - ··if·(text·==·"")·return·basename(file)
    8    │ - ··return·text.split("\n")[0]
    9    │ - }
       5 │ + export·function·title(file:·string)·{
       6 │ + → var·text·=·readFileSync(join("posts",·file),·"utf8");
       7 │ + → if·(text·==·"")·return·basename(file);
       8 │ + → return·text.split("\n")[0];
       9 │ + }
      10 │ +
...
Checked 1 file in 5ms. No fixes applied.
Found 1 error.

❯ bunx biome lint title.ts
title.ts:7:12 lint/suspicious/noDoubleEquals  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Using == may be unsafe if you are relying on type coercion.

    5 │ export function title(file:string){
    6 │   var text = readFileSync(join("posts", file), 'utf8')
  > 7 │   if (text == "") return basename(file)
      │            ^^
    8 │   return text.split("\n")[0]
    9 │ }

  i == is only allowed when comparing against null.

  i Unsafe fix: Use === instead.

    7 │ ··if·(text·===·"")·return·basename(file)
      │              +
...
Checked 1 file in 9ms. No fixes applied.
Found 1 error.

❯ bunx biome check title.ts
title.ts:1:1 assist/source/organizeImports  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  × Sort these imports.
...
title.ts:7:12 lint/suspicious/noDoubleEquals  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  × Using == may be unsafe if you are relying on type coercion.
...
title.ts format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  × Formatter would have printed the following content:
...
Checked 1 file in 13ms. No fixes applied.
Found 3 errors.

❯ bunx biome check --write title.ts
title.ts:6:11 lint/suspicious/noDoubleEquals  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  × Using == may be unsafe if you are relying on type coercion.
...
Checked 1 file in 15ms. Fixed 1 file.
Found 1 error.
❯ Get-Content title.ts
import { readFileSync } from "node:fs";
import { basename, join } from "node:path";

export function title(file: string) {
	var text = readFileSync(join("posts", file), "utf8");
	if (text == "") return basename(file);
	return text.split("\n")[0];
}

❯ bunx biome check --write --unsafe title.ts
Checked 1 file in 16ms. Fixed 1 file.
❯ Get-Content title.ts
import { readFileSync } from "node:fs";
import { basename, join } from "node:path";

export function title(file: string) {
	var text = readFileSync(join("posts", file), "utf8");
	if (text === "") return basename(file);
	return text.split("\n")[0];
}

❯ Select-String -Context 0,3 '"source"' biome.json

> biome.json:29:      "source": {
  biome.json:30:        "organizeImports": "on",
  biome.json:31:        "useSortedKeys": "on"
  biome.json:32:      }
❯ Get-Content post.ts
export const post = {
	title: "Getting Started with Biome",
	date: "2026-10-09",
	tags: ["biome", "cli"],
	description: "A formatter and linter in one",
};
❯ bunx biome check post.ts
post.ts:2:2 assist/source/useSortedKeys  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × The object properties are not sorted by key.
...
  i Safe fix: Sort the object properties by key.

    1 1 │   export const post = {
    2   │ - → title:·"Getting·Started·with·Biome",
    3   │ - → date:·"2026-10-09",
      2 │ + → date:·"2026-10-09",
      3 │ + → description:·"A·formatter·and·linter·in·one",
    4 4 │     tags: ["biome", "cli"],
    5   │ - → description:·"A·formatter·and·linter·in·one",
      5 │ + → title:·"Getting·Started·with·Biome",
    6 6 │   };
...
Checked 1 file in 22ms. No fixes applied.
Found 1 error.
❯ bunx biome check --write post.ts
Checked 1 file in 25ms. Fixed 1 file.
❯ Get-Content post.ts
export const post = {
	date: "2026-10-09",
	description: "A formatter and linter in one",
	tags: ["biome", "cli"],
	title: "Getting Started with Biome",
};

❯ Get-Content counter.tsx
import { useState } from "react";

export function Counter({ enabled }: { enabled: boolean }) {
	if (!enabled) {
		return null;
	}
	const [count, setCount] = useState(0);
	return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
❯ Get-Content package.json
{
  "name": "basics",
  "devDependencies": {
    "@biomejs/biome": "2.5.15"
  },
  "private": true
}
❯ bunx biome lint counter.tsx
counter.tsx:8:9 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
...
Checked 1 file in 18ms. No fixes applied.
Found 1 error.

❯ bun add react
installed react@19.3.0

1 package installed [254.00ms]
❯ bunx biome lint counter.tsx
counter.tsx:7:28 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

    5 │ 		return null;
    6 │ 	}
  > 7 │ 	const [count, setCount] = useState(0);
      │ 	                          ^^^^^^^^
    8 │ 	return <button onClick={() => setCount(count + 1)}>{count}</button>;
    9 │ }

  i Hooks should not be called after an early return.
...
counter.tsx:8:9 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
...
Checked 1 file in 22ms. No fixes applied.
Found 2 errors.

❯ bunx biome lint --only=correctness/noUndeclaredDependencies .
lib\remark-alerts.ts:1:39 lint/correctness/noUndeclaredDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  × Dependency mdast isn't specified in package.json.
...
lib\remark-static-mdx.ts:1:27 lint/correctness/noUndeclaredDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  × Dependency mdast isn't specified in package.json.
...
lib\remark-static-mdx.ts:2:27 lint/correctness/noUndeclaredDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  × Dependency unist isn't specified in package.json.
...
test\unit\lib\remark-alerts.test.ts:2:56 lint/correctness/noUndeclaredDependencies ━━━━━━━━━━━━━━━━━━
  × Dependency mdast isn't specified in package.json.
...
Found 4 errors.

❯ bunx biome migrate prettier --write
.prettierignore has been successfully migrated.
.prettierrc.json has been successfully migrated.
configuration ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  i Migration results:

  - C:\Users\Jam\biome-demo\next-eslint\biome.json: configuration successfully migrated.

❯ bunx biome migrate eslint --write
\\?\C:\Users\Jam\biome-demo\next-eslint\eslint.config.mjs migrate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  i 471 ESLint rules found
    - 160 are obsolete because of Biome's formatter
    - 64 have been migrated to Biome's rules
    - 49% (232) of your ESLint rules are fully covered by Biome
      - 13% (64) via direct migration to Biome rules
...
  i Unsupported rules (62 incompatible with formatter, 118 made obsolete by the formatter, 42 covered by a formatter option, 147 not yet implemented, 30 unknown source):
...

❯ bunx biome ci
Checked 9 files in 35ms. No fixes applied.
❯ bunx biome ci --write
Error: `--write` is not expected in this context
...

❯ Get-Content no-console-log.grit
`console.log($args)` where {
  register_diagnostic(span = $args, message = "Use the logger instead of console.log")
}
❯ Select-String plugins -Context 0,2 biome.json

> biome.json:35:  "plugins": [
  biome.json:36:    "./no-console-log.grit"
  biome.json:37:  ]
❯ Get-Content log.ts
export function report(count: number) {
	console.log(count);
	console.error(count);
}
❯ bunx biome lint log.ts
log.ts:2:14 plugin ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Use the logger instead of console.log

    1 │ export function report(count: number) {
  > 2 │ 	console.log(count);
      │ 	            ^^^^^
    3 │ 	console.error(count);
    4 │ }
...
Checked 1 file in 17ms. No fixes applied.
Found 1 error.

❯ Get-Content log2.ts
// TODO: remove console.log(count) later
export const note = "console.log(count)";
❯ bunx biome lint log2.ts
Checked 1 file in 7ms. No fixes applied.