Next.js,Biome,Vim,ALE の開発環境構築メモ

めちゃくちゃ参考になったサイト

Biome の設定方法に関しては下記に全てが載っています。ありがとうございます！

Next.js セットアップ

npx create-next-app@latest

ESLint を使うかの問いだけNoを選択し、あとは全部 Yes。

$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.8
Ok to proceed? (y) y
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? …  Yes
✔ Would you like to use `src/` directory? …  Yes
✔ Would you like to use App Router? (recommended) …  Yes
✔ Would you like to customize the default import alias (@/*)? … No
Creating a new Next.js app in /Users/me/Desktop/my-app.

今のディレクトリ状態

~/Desktop/my-app  master ✔
$ tree
.
├── .gitignore
├── README.md
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── src
│   └── app
│       ├── favicon.ico
│       ├── fonts
│       │   ├── GeistMonoVF.woff
│       │   └── GeistVF.woff
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── tailwind.config.ts
└── tsconfig.json

4 directories, 15 files

Biome 導入

Biome インストール

yarn add --dev --exact @biomejs/biome

biome.json作成

npx @biomejs/biome init

biome.json修正

{
  "$schema": "https://biomejs.dev/schemas/1.5.2/schema.json",
  "files": {
    "ignore": ["public"]
  },
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "ignore": [],
    "attributePosition": "auto",
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "asNeeded"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "all": true
    }
  },
  "overrides": [
    {
      "include": [
        "next.config.js",
        "layout.tsx",
        "page.tsx",
        "loading.tsx",
        "error.tsx",
        "not-found.tsx"
      ],
      "linter": {
        "rules": {
          "style": {
            "noDefaultExport": "off"
          }
        }
      }
    }
  ]
}

詳しく設定をしたいときは下記参考

biomejs.dev

package.json修正

- "lint": "next lint"
+ "lint": "biome lint -- apply ./src",
+ "format": "biome format ./src --write"

ALE の設定

ale_fixersに biome を設定

let g:ale_fixers = {
\ '\*': ['remove_trailing_lines', 'trim_whitespace'],
- \ 'typescriptreact': ['eslint'],
+ \ 'typescriptreact': ['eslint', 'biome'],
\}

適当に lint エラーになるようなコードを打ち、Biome のエラーメッセージが出ていれば OK。

`lint/correctness/noUnusedVariables`は Biome のエラーメッセージ

また、ALE 以外にもnvim-lspconfigやcoc-biomeもあるみたい。

biomejs.dev

おわり

昔は自前の starter-kit を作ってそれをgit cloneする形にしていたが、Next.js や eslint の追従が面倒になってしまった。最近は変にカスタマイズせず、そのとき公式ドキュメントに載っている構築方法に素直に従うほうがスムーズに開発を進められることに気づいた。自前の starter-kit を使っていると、clone したときに「そういえばあれカスタマイズしたいな」という思いが出てきて、本来作りたかったアプリの開発よりも、環境整備に時間を使ってしまうこと多々あり、今に至る。