03 フォーマッター設定
このドキュメントでは、コードの一貫性とチーム開発の効率性を向上させるためのフォーマッター（自動整形ツール）の設定を行います。
1. フォーマッターの概要
1.1 フォーマッターとは
フォーマッターは、ソースコードを定められたスタイルガイドに従って自動的に整形するツールです。主な効果：
- 一貫性の確保: チーム全体で統一されたコードスタイル
- レビュー効率の向上: スタイルに関する議論を排除
- 開発効率の向上: 手動でのフォーマット作業を削減
1.2 使用するフォーマッター
| フォーマッター | 対象言語/ファイル | 用途 |
|---|---|---|
| Prettier | JavaScript, TypeScript, CSS, Markdown, JSON | 主要なコードフォーマット |
| EditorConfig | 全てのファイル | エディタ設定の統一 |
2. Prettier の設定
2.1 Prettier とは
Prettier は、多くのプログラミング言語に対応したコードフォーマッターです。設定により、コードを一貫したスタイルで自動整形します。
2.2 パッケージのインストール
プロジェクトルートで以下のコマンドを実行します：
# Prettier 本体とプラグインをインストール
npm install --save-dev prettier
# 追加プラグイン（必要に応じて）
npm install --save-dev prettier-plugin-organize-imports
npm install --save-dev prettier-plugin-packagejson
2.3 設定ファイル（.prettierrc）の作成
プロジェクトルートに .prettierrc ファイルを作成します：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "avoid",
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": true,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"vueIndentScriptAndStyle": false,
"overrides": [
{
"files": "*.md",
"options": {
"printWidth": 80,
"proseWrap": "always"
}
},
{
"files": "*.json",
"options": {
"trailingComma": "none"
}
}
]
}
2.4 無視ファイル（.prettierignore）の作成
フォーマットしたくないファイルを指定するため、.prettierignore ファイルを作成します：
# 依存関係
node_modules/
package-lock.json
yarn.lock
# ビルド結果
dist/
build/
.next/
.nuxt/
.vscode/
.idea/
# ログファイル
*.log
logs/
# 一時ファイル
.tmp/
.cache/
# OS固有ファイル
.DS_Store
Thumbs.db
# Markdown（特定のファイルのみ）
CHANGELOG.md
LICENSE.md
# 自動生成ファイル
coverage/
.nyc_output/
2.5 VS Code での Prettier 設定
2.5.1 拡張機能の確認
Prettier の VS Code 拡張機能がインストールされていることを確認：
- 拡張機能名: Prettier - Code formatter
- Extension ID:
esbenp.prettier-vscode
2.5.2 VS Code 設定の追加
.vscode/settings.json に以下の設定を追加（既に設定済みの場合は確認）：
{
// Prettier をデフォルトフォーマッターに設定
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存時に自動フォーマット
"editor.formatOnSave": true,
// ペースト時に自動フォーマット
"editor.formatOnPaste": true,
// 入力時に自動フォーマット
"editor.formatOnType": false,
// 言語固有の設定
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
2.6 package.json スクリプトの追加
package.json にフォーマット用のスクリプトを追加します：
{
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check .",
"format:js": "prettier --write \"**/*.{js,ts,jsx,tsx}\"",
"format:css": "prettier --write \"**/*.{css,scss,less}\"",
"format:json": "prettier --write \"**/*.json\"",
"format:md": "prettier --write \"**/*.md\""
}
}
3. EditorConfig の設定
3.1 EditorConfig とは
EditorConfig は、異なるエディタや IDE 間でコーディングスタイルを統一するための設定ファイルです。
3.2 設定ファイル（.editorconfig）の作成
プロジェクトルートに .editorconfig ファイルを作成します：
# EditorConfig is awesome: https://EditorConfig.org
# トップレベルファイル
root = true
# すべてのファイルに適用される設定
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
# Markdown ファイルの設定
[*.md]
trim_trailing_whitespace = false
max_line_length = 80
# YAML ファイルの設定
[*.{yml,yaml}]
indent_size = 2
# Python ファイルの設定
[*.py]
indent_size = 4
# Makefile の設定
[Makefile]
indent_style = tab
# バッチファイル/シェルスクリプトの設定
[*.{bat,cmd,ps1,sh}]
end_of_line = crlf
# JSON ファイルの設定
[*.json]
indent_size = 2
# C/C++ ファイルの設定
[*.{c,h,cpp,hpp,cc,hh}]
indent_size = 4
# Java ファイルの設定
[*.java]
indent_size = 4
# Go ファイルの設定
[*.go]
indent_style = tab
# .NET プロジェクトファイル
[*.{csproj,vbproj,vcxproj,vcxproj.filters,proj,projitems,shproj}]
indent_size = 2
# .NET 設定ファイル
[*.{props,targets,ruleset,config,nuspec,resx,vsixmanifest,vsct}]
indent_size = 2
3.3 VS Code での EditorConfig 設定
3.3.1 拡張機能の確認
EditorConfig の VS Code 拡張機能がインストールされていることを確認：
- 拡張機能名: EditorConfig for VS Code
- Extension ID:
editorconfig.editorconfig
3.3.2 設定の適用
EditorConfig は拡張機能がインストールされていれば、自動的に .editorconfig ファイルの設定を適用します。追加の設定は不要です。
4. フォーマッターの動作確認
4.1 Prettier の動作確認
-
JavaScript/TypeScript ファイルでのテスト
以下のような整形されていないコードを作成：
// test.js const obj = { name: 'test', value: 123, items: [1, 2, 3, 4, 5] }; function hello(name) { console.log('Hello ' + name + '!'); } hello(obj.name); -
保存またはフォーマットの実行
Ctrl+Sで保存（自動フォーマット）- または
Shift+Alt+Fで手動フォーマット
-
期待される結果
// test.js const obj = { name: 'test', value: 123, items: [1, 2, 3, 4, 5] }; function hello(name) { console.log('Hello ' + name + '!'); } hello(obj.name);
4.2 EditorConfig の動作確認
-
異なるファイルタイプでのインデント確認
- JavaScript ファイル: 2スペース
- Python ファイル: 4スペース
- YAML ファイル: 2スペース
-
改行コードと文字エンコーディングの確認
VS Code のステータスバーで以下を確認： - 文字エンコーディング: UTF-8 - 改行コード: LF
4.3 コマンドラインでの確認
プロジェクトルートで以下のコマンドを実行：
# 全ファイルのフォーマットチェック
npm run format:check
# 全ファイルをフォーマット
npm run format
# 特定の種類のファイルのみフォーマット
npm run format:js
npm run format:css
npm run format:json
5. チーム開発での運用
5.1 推奨ワークフロー
- 開発時: 自動フォーマット（保存時）に任せる
- コミット前:
npm run formatで全ファイルを確認 - プルリクエスト前:
npm run format:checkでフォーマットが統一されているか確認
5.2 CI/CD での活用
GitHub Actions など CI/CD パイプラインで、フォーマットチェックを自動化：
# .github/workflows/format-check.yml 例
name: Format Check
on: [push, pull_request]
jobs:
format-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm install
- run: npm run format:check
6. トラブルシューティング
よくある問題と解決方法
Prettier が動作しない
-
拡張機能の確認
- Prettier 拡張機能がインストール・有効化されているか確認
-
設定ファイルの確認
.prettierrcファイルが正しい場所にあるか確認- JSON構文エラーがないか確認
-
VS Code設定の確認
settings.jsonでデフォルトフォーマッターが設定されているか確認
EditorConfig が適用されない
-
拡張機能の確認
- EditorConfig 拡張機能がインストールされているか確認
-
ファイルの再読み込み
- VS Code でファイルを閉じて再度開く
-
設定の優先順位
- VS Code の設定が EditorConfig より優先される場合があります
フォーマットの競合
-
複数フォーマッターの無効化
- 不要なフォーマッター拡張機能を無効化
-
言語固有設定の確認
settings.jsonで言語ごとに適切なフォーマッターが設定されているか確認
パフォーマンスの問題
-
除外設定の確認
.prettierignoreで不要なファイルが除外されているか確認
-
大きなファイルの処理
- 非常に大きなファイルは手動でフォーマットすることを検討
次のステップ
フォーマッターの設定が完了したら、次はリンターの設定を行います：