antfu

コーディング慣行

コード構成

• 単一責任の原則: 各ソースファイルは明確で焦点を絞ったスコープ/目的を持つべき
• 大きなファイルの分割: ファイルが大きくなったり複数の責務を扱う場合は分割する
• 型の分離: 型とインターフェースは常に types.ts または types/*.ts に分離する
• 定数の抽出: 定数は専用の constants.ts ファイルに移動する

実行環境

• 同形的コードを推奨: Node、ブラウザ、Workers で動作する環境非依存コードを可能な限り記述する
• 明確な実行環境指示: コードが環境固有の場合、ファイル先頭にコメントを追加する:

// @env node
// @env browser

TypeScript

• 明示的な戻り値型: 可能な限り戻り値型を明示的に宣言する
• 複雑なインライン型を避ける: 複雑な型は専用の type または interface 宣言に抽出する

コメント

• 不要なコメントを避ける: コードは自己説明的であるべき
• 「何」ではなく「なぜ」を説明: コメントはコードが何をするかではなく、推論や意図を説明する

テスト (Vitest)

• テストファイル: foo.ts → foo.test.ts (同じディレクトリ)
• describe/it API を使用する (test は不可)
• 複雑な出力には toMatchSnapshot を使用する
• 言語固有のスナップショットには明示的なパスで toMatchFileSnapshot を使用する

---

ツール選択

@antfu/ni コマンド

コマンド	説明
ni	依存関係をインストール
ni <pkg> / ni -D <pkg>	依存関係 / 開発依存関係を追加
nr <script>	スクリプトを実行
nu	依存関係をアップグレード
nun <pkg>	依存関係をアンインストール
nci	クリーンインストール (pnpm i --frozen-lockfile)
nlx <pkg>	パッケージを実行 (npx)

npm パッケージバージョンの確認

fast-npm-meta を使用してパッケージの最新バージョンを調べます。小さなメタデータエンドポイントをクエリするため、レジストリ全体をダウンロードする (パッケージあたり数メガバイト可能) よりも効率的です。

nlx fast-npm-meta version vite              # 7.3.1
nlx fast-npm-meta version "nuxt@^3.5"       # 3.5.22 — 範囲対応
nlx fast-npm-meta version vite nuxt vue     # 複数同時に
nlx fast-npm-meta version vite --json       # スクリプト用 JSON
nlx fast-npm-meta full vite                 # 完全バージョンリスト + dist-tags

最新バージョンのみが必要な場合は npm view <pkg> version よりも、またはレジストリから直接 package.json を読むよりもこちらを推奨します。

TypeScript 設定

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

ESLint セットアップ

// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu()

タスク完了時は pnpm run lint --fix を実行してコードをフォーマットしコーディングスタイルを修正します。

詳細な設定オプションについては: antfu-eslint-config

Git フック

{
  "simple-git-hooks": {
    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
  },
  "lint-staged": { "*": "eslint --fix" },
  "scripts": {
    "prepare": "npx simple-git-hooks"
  }
}

pnpm カタログ

pnpm-workspace.yaml で名前付きカタログを使用してバージョン管理を行います:

カタログ	目的
prod	本番依存関係
inlined	バンドラー内参照依存関係
dev	開発ツール (リンター、バンドラー、テスト)
frontend	フロントエンドライブラリ

デフォルトカタログは避けます。カタログ名はプロジェクト要件に応じて調整できます。

---

リファレンス

トピック	説明	リファレンス
ESLint 設定	フレームワークサポート、フォーマッター、ルールオーバーライド、VS Code 設定	antfu-eslint-config
プロジェクトセットアップ	.gitignore、GitHub Actions、VS Code 拡張機能	setting-up
アプリ開発	Vue/Nuxt/UnoCSS の慣行とパターン	app-development
ライブラリ開発	tsdown バンドリング、純粋 ESM パブリッシング	library-development
モノレポ	pnpm workspaces、一元化されたエイリアス、Turborepo	monorepo