Webプロジェクト向け完全な.gitattributes

Webプロジェクトの.gitattributes

Webプロジェクトには、テキストソースファイル、生成されたアセット、バイナリメディア、サードパーティの依存関係が独特に混在しています。適切に設定された.gitattributesは、チーム全体で一貫した処理を保証します。

推奨設定

# 自動検出
* text=auto

# ソースコード
*.html  text diff=html
*.css   text diff=css
*.scss  text diff=css
*.less  text diff=css
*.js    text
*.jsx   text
*.ts    text
*.tsx   text
*.vue   text
*.svelte text
*.json  text
*.jsonc text

# 設定ファイル
*.yml   text
*.yaml  text
*.toml  text
*.xml   text
*.env   text
.editorconfig text
.prettierrc   text
.eslintrc     text

# ロックファイル（diff抑制）
package-lock.json text -diff
yarn.lock         text -diff
pnpm-lock.yaml    text -diff

# ビルド出力（diff抑制）
*.min.js  text -diff
*.min.css text -diff
*.map     text -diff

# バンドル / ベンダー（linguist）
dist/**   linguist-generated
vendor/** linguist-vendored

# 画像（バイナリ）
*.png   binary
*.jpg   binary
*.jpeg  binary
*.gif   binary
*.ico   binary
*.webp  binary
*.avif  binary
*.svg   text

# フォント（バイナリ）
*.woff  binary
*.woff2 binary
*.ttf   binary
*.eot   binary
*.otf   binary

# スクリプト
*.sh text eol=lf

主な判断の説明

なぜ*.svg text？ SVGはXMLベースのテキストなので、行末正規化とテキストdiffの恩恵を受けます。SVGが機械生成で非常に大きい場合のみ、バイナリとしてマークしてください。

なぜpackage-lock.json text -diff？ ロックファイルはテキスト（マージと正規化が必要）ですが、意味のあるコード変更を覆い隠す数千行のノイズの多いdiffを生成します。

なぜdist/** linguist-generated？ これはGitHubにビルド出力が生成コードであることを伝え、言語統計から除外し、プルリクエストビューで折りたたみます。

なぜdiff=javascriptがないのか？ Gitにはビルトインのjavascript diffドライバーがありません。デフォルトはJS/TSファイルに十分機能します。関数レベルのヘッダーが必要な場合は、.gitconfigでカスタムドライバーを定義してください。