Prettier

Prettier

  • Playground
  • About
  • Usage
  • Blog
  • GitHub

›Usage

About

  • What is Prettier?
  • Why Prettier?
  • Prettier vs. Linters
  • Option Philosophy
  • Rationale

Usage

  • Install
  • CLI
  • API
  • Browser
  • Plugins (Beta)
  • Pre-commit Hook
  • Watching For Changes
  • Integrating with ESLint
  • Ignoring Code

Configuring Prettier

  • Options
  • Configuration File

Editors

  • Editor Integration
  • WebStorm Setup
  • Vim Setup

Misc

  • Technical Details
  • Related Projects
Edit

Ignoring Code

Prettier offers an escape hatch to ignore a block of code or prevent entire files from being formatted.

Ignoring Files

To exclude files from formatting, add entries to a .prettierignore file in the project root or set 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 -->

GraphQL

{
  # prettier-ignore
  addReaction(input:{superLongInputFieldName:"MDU6SXNzdWUyMzEzOTE1NTE=",content:HOORAY}) {
    reaction {content}
  }
}
← Integrating with ESLintOptions →
  • Ignoring Files
  • JavaScript
  • JSX
  • HTML
  • CSS
  • Markdown
    • Range Ignore
  • GraphQL
Prettier
Docs
AboutUsage
Community
User ShowcaseStack OverflowChat on Gitter@PrettierCode on TwitterFollow Prettier on Twitter
More
BlogGitHubIssuesStar