Ignoring Code

Use .prettierignore to ignore (i.e. not reformat) certain files and folders completely.

Use “prettier-ignore” comments to ignore parts of files.

Ignoring Files: .prettierignore

To exclude files from formatting, create a .prettierignore file in the root of your project. .prettierignore uses gitignore syntax.

Example:

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
**/*.html

It’s recommended to have a .prettierignore in your project! This way you can run prettier --write . to make sure that everything is formatted (without mangling files you don’t want, or choking on generated files). And – your editor will know which files not to format!

By default prettier ignores files in version control systems directories (".git", ".svn" and ".hg") and node_modules (if --with-node-modules CLI option not specified)

So by default it will be

**/.git
**/.svn
**/.hg
**/node_modules

and

**/.git
**/.svn
**/.hg

if --with-node-modules CLI option provided

(See also the --ignore-path CLI option.)

JavaScript

A JavaScript comment of // prettier-ignore will exclude the next node in the abstract syntax tree from formatting.

For example:

matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

will be transformed to:

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

JSX

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

HTML

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

<!-- prettier-ignore-attribute -->
<div
  (mousedown)="       onStart    (    )         "
  (mouseup)="         onEnd      (    )         "
></div>

<!-- prettier-ignore-attribute (mouseup) -->
<div
  (mousedown)="onStart()"
  (mouseup)="         onEnd      (    )         "
></div>

CSS

/* prettier-ignore */
.my    ugly rule
{

}

Markdown

<!-- prettier-ignore -->
Do   not    format   this

Range Ignore

available in v1.12.0+

This type of ignore is only allowed to be used in top-level and aimed to disable formatting for auto-generated content, e.g. all-contributors, markdown-toc, etc.

<!-- prettier-ignore-start -->
<!-- SOMETHING AUTO-GENERATED BY TOOLS - START -->

| MY | AWESOME | AUTO-GENERATED | TABLE |
|-|-|-|-|
| a | b | c | d |

<!-- SOMETHING AUTO-GENERATED BY TOOLS - END -->
<!-- prettier-ignore-end -->

YAML

To ignore a part of a YAML file, # prettier-ignore should be placed on the line immediately above the ignored node:

# prettier-ignore
key  : value
hello: world

GraphQL

{
  # prettier-ignore
  addReaction(input:{superLongInputFieldName:"MDU6SXNzdWUyMzEzOTE1NTE=",content:HOORAY}) {
    reaction {content}
  }
}

Handlebars

{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This
      is  =  "also preserved as is"
    />
  {{/my-crazy-component}}
</div>

Command Line File Patterns

For one-off commands, when you want to exclude some files without adding them to .prettierignore, negative patterns can come in handy:

prettier . "!**/*.{js,jsx,vue}" --write

See fast-glob to learn more about advanced glob syntax.