Complete .gitattributes for Web Projects

Web Project .gitattributes

Web projects have a unique mix of text source files, generated assets, binary media, and third-party dependencies. A well-configured .gitattributes ensures consistent handling across the team.

Recommended Configuration

# Auto detect
* text=auto

# Source code
*.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

# Config files
*.yml   text
*.yaml  text
*.toml  text
*.xml   text
*.env   text
.editorconfig text
.prettierrc   text
.eslintrc     text

# Lock files (suppress diff)
package-lock.json text -diff
yarn.lock         text -diff
pnpm-lock.yaml    text -diff

# Build output (suppress diff)
*.min.js  text -diff
*.min.css text -diff
*.map     text -diff

# Bundled / vendor (linguist)
dist/**   linguist-generated
vendor/** linguist-vendored

# Images (binary)
*.png   binary
*.jpg   binary
*.jpeg  binary
*.gif   binary
*.ico   binary
*.webp  binary
*.avif  binary
*.svg   text

# Fonts (binary)
*.woff  binary
*.woff2 binary
*.ttf   binary
*.eot   binary
*.otf   binary

# Scripts
*.sh text eol=lf

Key Decisions Explained

Why *.svg text? SVG is XML-based text, so it benefits from line ending normalization and textual diffs. Only mark SVG as binary if your SVGs are machine-generated and enormous.

Why package-lock.json text -diff? The lock file is text (needs merging and normalization) but produces thousands of lines of noisy diff that obscure meaningful code changes.

Why dist/** linguist-generated? This tells GitHub that the build output is generated code, excluding it from language statistics and collapsing it in pull request views.

Why no diff=javascript? Git does not ship a built-in JavaScript diff driver. The default works well enough for JS/TS files. If you want function-level headers, define a custom driver in .gitconfig.