Prettier 09 🎨 The .prettierignore File — Excluding files from formatting - KandZ

⏱️ Estimated read: 10 min | |

The .prettierignore file is the mechanism for telling Prettier which files and directories it should never touch. It uses the same syntax as .gitignore, and it exists so that prettier --write . can be run against the entire project without reformatting build artifacts, generated code, lockfiles, or vendor directories. The file is recommended in every project, not because it is required, but because it makes the “format everything” command safe to use .

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

This chapter covers the .prettierignore file’s syntax, the default ignores that apply even without the file, the interaction with .gitignore, the negation pattern that re-includes a specific file inside an ignored directory, and the difference between ignoring a file entirely and ignoring a section of a file with inline comments.

Key point: .prettierignore uses gitignore syntax, and a negated pattern cannot re-include a file if its parent directory is excluded. To unignore a nested file, every parent directory must be unignored in sequence.

Why the ignore file exists

The generated-code problem. A project contains files that are not source code: dist/, build/, coverage/, node_modules/, lockfiles, and generated type definitions. Running Prettier on these files is wasteful at best and destructive at worst. A minified bundle that gets reformatted is no longer minified. A lockfile that gets reformatted may break the package manager’s integrity checks. The ignore file excludes them from the formatter’s scope .

The editor problem. Prettier’s editor integrations read the .prettierignore file. A file that is listed there is not formatted on save, even if the editor’s “format on save” setting is enabled. Without the ignore file, every generated file that the developer opens would be reformatted on save, and the change would be unrelated to the work being done .

The default-ignore problem. Prettier already ignores .git, .svn, .hg, and node_modules by default. It also reads the .gitignore file in the same directory. A project with a comprehensive .gitignore may not need a .prettierignore at all for the files that are already gitignored. But a file that is committed to the repository and should not be formatted—a generated lockfile, a vendored dependency, a snapshot file—needs an explicit entry in .prettierignore .

a. The syntax and default ignores

The file lives at the root of the project. Each line is a pattern, and # begins a comment.

# Ignore artifacts
build
coverage
dist

# Ignore all HTML files
**/*.html

# Ignore a specific file
pnpm-lock.yaml

The patterns follow gitignore syntax. A bare directory name like build matches that directory at any depth. A pattern with a leading slash (/build) matches only at the root. A pattern with ** matches across directory levels .

Without any .prettierignore file, Prettier ignores the version control directories (.git, .jj, .sl, .svn, .hg) and node_modules. It also follows the rules in .gitignore if that file exists in the same directory. The --with-node-modules flag overrides the node_modules default and forces Prettier to format it .

b. Negation and the parent-directory rule

A pattern prefixed with ! negates the previous pattern and re-includes a file. But gitignore syntax has a rule that makes negation of nested files non-obvious: it is not possible to re-include a file if a parent directory of that file is excluded. The directory itself must be unignored first.

A project that ignores the entire amplify/ directory but wants to format one file inside it must unignore every parent directory in the path:

amplify

!amplify/
amplify/*
!amplify/backend/
amplify/backend/*
!amplify/backend/function/
amplify/backend/function/*
!amplify/backend/function/myLambda/
amplify/backend/function/myLambda/*
!amplify/backend/function/myLambda/src/
amplify/backend/function/myLambda/src/*
!amplify/backend/function/myLambda/src/index.js

The sequence unignores each directory, then re-ignores its contents, then unignores the next directory. Only the final file is left unignored. This is verbose, but it is the only way to target a single file inside an excluded directory .

The same rule applies to the pattern !/src/views in a project that ignores everything with /*. The src directory must be unignored before views can be unignored .

c. Inline ignore comments versus the ignore file

The .prettierignore file excludes entire files. A comment inside a file excludes a specific node or range. The two mechanisms serve different purposes and are not interchangeable.

The // prettier-ignore comment excludes the next node in the syntax tree. In JSX, {/* prettier-ignore */} does the same. In CSS, /* prettier-ignore */ excludes the next rule. In Markdown,  excludes the next block .

The range ignore uses  and  to exclude everything between the two comments. It is intended for auto-generated content that is embedded in a larger file, such as a table of contents generated by a tool. The comments must have a blank line before the start comment and before the end comment for Prettier to recognize them .

The --ignore-path CLI option overrides the default ignore files. By default, Prettier reads .prettierignore and .gitignore. A project that wants a different ignore file passes --ignore-path with the path. In Prettier 3, the default behavior changed: .gitignore is honored automatically, and passing --ignore-path adds a file rather than replacing the defaults in all contexts .

Complete Example Session

# ============================================
# PART 1: THE BASIC IGNORE FILE
# ============================================
# .prettierignore
build
coverage
dist
node_modules

# ============================================
# PART 2: PATTERNS BY FILE TYPE
# ============================================
**/*.min.js
**/*.snap
**/*.generated.ts

# ============================================
# PART 3: SPECIFIC FILES
# ============================================
pnpm-lock.yaml
package-lock.json
CHANGELOG.md

# ============================================
# PART 4: THE DEFAULT IGNORES (WITHOUT THE FILE)
# ============================================
# Prettier already ignores:
# **/.git
# **/.svn
# **/.hg
# **/node_modules

# ============================================
# PART 5: GITIGNORE INTERACTION
# ============================================
# Prettier reads .gitignore automatically.
# A file in .gitignore is also ignored by Prettier.
# A file committed to the repo needs .prettierignore.

# ============================================
# PART 6: THE NEGATION PROBLEM
# ============================================
# This does not work:
# amplify
# !amplify/backend/function/*/src/index.js

# ============================================
# PART 7: THE NEGATION SOLUTION
# ============================================
!amplify/
amplify/*
!amplify/backend/
amplify/backend/*
!amplify/backend/function/
amplify/backend/function/*
!amplify/backend/function/myLambda/
amplify/backend/function/myLambda/*
!amplify/backend/function/myLambda/src/
amplify/backend/function/myLambda/src/*
!amplify/backend/function/myLambda/src/index.js

<!-- ============================================
     PART 8: INLINE IGNORE
     ============================================ -->
<!-- prettier-ignore -->
This   block   is   not   formatted.

<!-- ============================================
     PART 9: RANGE IGNORE
     ============================================ -->

<!-- prettier-ignore-start -->
| Auto | Generated |
|------|-----------|
| a    | b         |
<!-- prettier-ignore-end -->

# ============================================
# PART 10: THE IGNORE PATH FLAG
# ============================================
prettier . --write --ignore-path .myignore

The ten parts covered the basic file, patterns by file type, specific files, default ignores, the .gitignore interaction, the negation problem, the negation solution, the inline comment, the range ignore, and the --ignore-path flag.

Quick Reference

File syntax

Pattern	Matches
`build`	`build` at any depth
`/build`	`build` at the root only
`*/.min.js`	Minified files at any depth
`!pattern`	Negates a previous pattern

Default ignores

Default ignore	Override
`.git`, `.svn`, `.hg`	Not configurable
`node_modules`	`--with-node-modules`
`.gitignore` rules	Applied automatically

Inline ignores

Context	Syntax
JavaScript	`// prettier-ignore`
JSX	`{/* prettier-ignore */}`
CSS	`/* prettier-ignore */`
Markdown	`<!-- prettier-ignore -->`
Range	`<!-- prettier-ignore-start/end -->`

CLI options

Option	Effect
`--ignore-path <file>`	Use a different ignore file
`--with-node-modules`	Format `node_modules`
`--check-ignore-pragma`	Opt out files with a pragma comment

Best Practices

✅ Do This:

# Ignore build output
dist
build
coverage                                                     // ✅

# Ignore lockfiles
pnpm-lock.yaml
package-lock.json                                            // ✅

# Unignore every parent directory before the target file
!amplify/
!amplify/backend/
!amplify/backend/function/myLambda/src/index.js              // ✅

❌ Don’t Do This:

# Negate a file inside an ignored directory without unignoring parents
amplify
!amplify/backend/function/myLambda/src/index.js              // ❌

# Assume .prettierignore is required for node_modules
# node_modules is ignored by default                           // ❌

<!-- Use a range ignore without a blank line -->
<!-- prettier-ignore-start -->
<!-- prettier-ignore-end -->                                   // ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
Negated pattern has no effect	Parent directory is excluded	Unignore each parent directory in sequence
Generated file is reformatted	Not listed in `.prettierignore` and not gitignored	Add the pattern
`.gitignore` rules not applied	Running from a different directory	Run from the directory containing `.gitignore`
Range ignore not recognized	No blank line before the start comment	Add a blank line
`node_modules` formatted	`--with-node-modules` passed	Remove the flag

Real-World Examples

1. Ignore build output

dist
build

2. Ignore lockfiles

pnpm-lock.yaml
package-lock.json

3. Ignore generated types

**/*.generated.ts

4. Ignore snapshots

**/__snapshots__/

5. Unignore a nested file

amplify
!amplify/
amplify/*
!amplify/backend/
amplify/backend/*
!amplify/backend/function/myLambda/src/index.js

6. Inline ignore in JavaScript

// prettier-ignore
const matrix = [1,0,0, 0,1,0, 0,0,1];

7. Inline ignore in JSX

{/* prettier-ignore */}
<span     ugly  format=''   />

8. Range ignore in Markdown

<!-- prettier-ignore-start -->
| Auto | Generated |
<!-- prettier-ignore-end -->

9. CLI ignore path

prettier . --write --ignore-path .myignore

10. Default ignores

**/.git
**/node_modules

Visual

The ignore file scope

┌─────────────────────────────────────────────────────────────┐
│  .prettierignore                                             │
│                                                              │
│  dist/          → ignored                                    │
│  build/         → ignored                                    │
│  **/*.min.js    → ignored                                    │
│  pnpm-lock.yaml → ignored                                    │
│                                                              │
│  src/           → formatted                                  │
│  index.html     → formatted                                  │
└─────────────────────────────────────────────────────────────┘

The negation parent rule

┌─────────────────────────────────────────────────────────────┐
│  amplify/                                                    │
│    └── backend/                                              │
│          └── function/                                       │
│                └── myLambda/                                 │
│                      └── src/                                │
│                            └── index.js  ← want to format   │
│                                                              │
│  "amplify" ignores the whole tree.                           │
│  "!amplify/.../index.js" does nothing.                       │
│  Each parent must be unignored in sequence.                  │
└─────────────────────────────────────────────────────────────┘

Inline vs file ignore

┌─────────────────────────────────────────────────────────────┐
│  .prettierignore          Inline comment                     │
│                                                              │
│  Excludes entire files    Excludes a node or range           │
│  Project-level            File-level                         │
│  Read by editor           Read by formatter                  │
└─────────────────────────────────────────────────────────────┘

Default ignores

┌─────────────────────────────────────────────────────────────┐
│  Without .prettierignore:                                    │
│    .git/          ignored                                    │
│    node_modules/  ignored                                    │
│    .gitignore     applied                                    │
│                                                              │
│  With .prettierignore:                                       │
│    Additional patterns apply.                                │
│    Defaults remain unless overridden.                        │
└─────────────────────────────────────────────────────────────┘

Summary

Item	Value
File name	`.prettierignore`
Location	Project root
Syntax	Gitignore syntax
Default ignores	`.git`, `.svn`, `.hg`, `node_modules`
`.gitignore` interaction	Applied automatically
Negation	`!pattern`, but parent directories must be unignored
Inline ignore	`// prettier-ignore` (language-specific)
Range ignore	`<!-- prettier-ignore-start/end -->`
CLI override	`--ignore-path`

Key takeaways:

.prettierignore uses gitignore syntax and excludes entire files. It is the mechanism that makes prettier --write . safe to run against a project that contains generated files, lockfiles, and build output .
Prettier already ignores version control directories and node_modules by default. It also reads .gitignore automatically. A project with a comprehensive .gitignore may not need a .prettierignore for the files that are already gitignored, but a committed file that should not be formatted needs an explicit entry .
Negation cannot re-include a file inside an ignored directory. The parent directory must be unignored first. This is a gitignore rule, and it applies to .prettierignore as well. The solution is to unignore each parent directory in sequence .
Inline comments ignore parts of files, not entire files. // prettier-ignore excludes the next node.  excludes a range. These are for auto-generated content embedded in a larger file, not for excluding a file from the formatter .
The --ignore-path flag overrides the default ignore files. It is useful when a project needs a different ignore file or when a one-off command should use a different set of exclusions.
The editor reads the ignore file. A file listed in .prettierignore is not formatted on save, even if “format on save” is enabled. This is the reason the file is recommended even for projects that only format from the CLI .

Remember: .prettierignore is the file that tells Prettier what not to touch. It uses gitignore syntax, it is read by both the CLI and the editor, and it is the reason prettier --write . can be run against a real project without destroying generated files. The one rule that causes the most trouble is the parent-directory rule for negation: you cannot unignore a nested file unless every parent directory is unignored first. Use the file to exclude generated code, lockfiles, and build output. Use inline comments to exclude a specific node or range. And remember that .gitignore is already applied, so the .prettierignore only needs the files that are committed but should not be formatted.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!