How to configure Prettier ignore file and what are common rules?

Prettier Ignore File Configuration Explained

Prettier's .prettierignore file allows specifying files and directories that don't need formatting, which is very important for optimizing performance and avoiding unnecessary formatting.

Basic Syntax

The .prettierignore file uses syntax similar to .gitignore:

shell
# Ignore node_modules directory
node_modules

# Ignore build artifacts
dist
build
out

# Ignore specific files
*.min.js
*.min.css

# Ignore specific directories
coverage
.next
.nuxt

# Ignore configuration files
package-lock.json
yarn.lock
pnpm-lock.yaml

Ignore Patterns

1. Directory Ignore

shell
# Ignore entire directory
node_modules

# Ignore nested directories
**/dist

# Ignore directory at specific path
src/dist

2. File Extension Ignore

shell
# Ignore all .min.js files
*.min.js

# Ignore multiple extensions
*.min.js
*.min.css
*.min.html

3. Path Patterns

shell
# Ignore files under specific path
src/temp/*.js

# Ignore files in all subdirectories
**/*.test.js

# Use wildcards
src/**/*.generated.js

4. Negation Patterns

shell
# Ignore all .js files but keep those in src directory
*.js
!src/**/*.js

# Ignore dist directory but keep dist/public
dist
!dist/public

Common Ignore Rules

1. Dependencies and Build Artifacts

shell
node_modules
dist
build
out
.next
.nuxt
.cache

2. Minified Files

shell
*.min.js
*.min.css
*.min.html
*.bundle.js

3. Test Coverage

shell
coverage
.nyc_output

4. Lock Files

shell
package-lock.json
yarn.lock
pnpm-lock.yaml

5. Generated Files

shell
*.generated.js
*.generated.ts
*.d.ts

6. Temporary Files

shell
*.tmp
*.temp
*.swp

Advanced Usage

1. Use Custom Ignore File

bash
# Specify custom ignore file
prettier --write --ignore-path .prettierignore.custom "**/*.js"

2. Disable Default Ignore

bash
# Even node_modules will be formatted
prettier --write --ignore-unknown "**/*.js"

3. Command Line Ignore

bash
# Specify ignore patterns in command line
prettier --write "**/*.js" --ignore "node_modules/**"

Best Practices

1. Performance Optimization

shell
# Ignore large directories to improve performance
node_modules
dist
build
coverage

2. Avoid Formatting Third-Party Code

shell
# Don't format third-party libraries
lib/vendor
public/assets/vendor

3. Protect Special Files

shell
# Don't format files that need to stay as-is
*.min.js
*.min.css
*.bundle.js

4. Project-Specific Rules

shell
# Customize based on project needs
src/generated/**
scripts/temp/**

Common Issues

1. Ignore Rules Not Working

• Check .prettierignore file location (should be in project root)
• Confirm syntax is correct (similar to .gitignore)
• Use --debug-check for detailed information

2. Want to Format Ignored Files

bash
# Use absolute path to bypass ignore rules
prettier --write /absolute/path/to/file.js

# Temporarily modify ignore file

3. Complex Ignore Patterns

shell
# Combine multiple patterns
node_modules
dist
**/*.min.js
!src/vendor/*.js

Collaboration with Other Tools' Ignore Files

1. Collaboration with .gitignore

shell
# Can reference .gitignore in .prettierignore
# But need to manually copy rules

2. Collaboration with ESLint Ignore

shell
# .eslintignore and .prettierignore can have different rules
# Configure separately based on tool characteristics

By properly configuring .prettierignore, you can optimize Prettier's performance, avoid unnecessary formatting, and improve development efficiency.