忽略代码

使用 .prettierignore 文件可完全忽略（即不重新格式化）特定文件和文件夹。 使用 prettier-ignore 注释可忽略文件的某些部分。

忽略文件：.prettierignore

要排除某些文件的格式化，需在项目根目录创建 .prettierignore 文件。该文件使用 gitignore 语法。

示例：

# 忽略构建产物：
build
coverage

# 忽略所有HTML文件：
**/*.html

强烈建议在项目中配置 .prettierignore 文件！ 这样您可安全执行 prettier --write . 命令格式化所有文件（避免误格式化无需处理的文件或生成文件报错）。同时，您的编辑器也能识别哪些文件不应格式化。

默认忽略规则：

  • 版本控制目录（.git, .jj, .sl, .svn, .hg）
  • node_modules（除非指定 --with-node-modules CLI 参数）
  • 若存在 .gitignore 文件，Prettier 会遵循其规则

默认匹配模式：

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

若提供 --with-node-modules 参数则忽略：

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

（另请参阅 --ignore-path CLI 参数）

各语言忽略语法示例

JavaScript

使用 // prettier-ignore 注释可阻止下一个抽象语法树节点被格式化。

// 未忽略的代码会被格式化
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

// prettier-ignore → 忽略后续代码块
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

格式化后输出：

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

范围忽略（v1.12.0+）

此方式仅允许在顶层使用，适用于禁用自动生成内容的格式化（如 all-contributors, markdown-toc 等）。

<!-- prettier-ignore-start -->
<!-- 由工具自动生成的内容 - START -->

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

<!-- 由工具自动生成的内容 - END -->
<!-- prettier-ignore-end -->

重要：必须在 <!-- prettier-ignore-start --> 和 <!-- prettier-ignore-end --> 前留空行

YAML

在需忽略的节点上方添加 # prettier-ignore 注释：

# 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>

命令行文件匹配模式

临时执行命令时，若需排除文件但不想修改 .prettierignore，可使用排除模式：

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

参阅 https://github.com/mrmlnc/fast-glob 了解更多高级通配符语法。

总结

  1. 全局忽略：通过 .prettierignore 文件（使用 gitignore 语法）排除文件/目录
  2. 局部忽略：
    • 使用 prettier-ignore 注释忽略特定代码块
    • 支持 JavaScript/JSX/HTML/CSS/Markdown/YAML 等主流语言
    • HTML 提供属性级忽略 (prettier-ignore-attribute)
  3. 范围忽略：用 prettier-ignore-start/end 包裹需保留原格式的区块
  4. 命令行操作：通过 ! 排除模式临时忽略文件
  5. 注意事项：
    • 默认忽略版本控制目录和 node_modules
    • 范围忽略注释前必须留空行
    • 建议始终配置 .prettierignore 确保安全格式化
最后更新: