如何让 Prettier 跳过指定代码的格式化

代码有时需要保留特定排版，同一个文件的其他部分仍希望由 Prettier 格式化。这时可以使用 prettier-ignore 注释，局部跳过格式化。

原文中的 CSS 场景

使用 CSS 计数器生成标题序号时，可能希望保留以下写法：

.markdown-body h3::before {
  content: counter(section)'.'counter(subsection);
}

Prettier 可能将其排版为：

.markdown-body h3::before {
  content: counter(section) '.' counter(subsection);
}

增加的是 CSS 值之间的源码空白，不等同于在显示的序号中插入空格。需要输出空格时，应把空格写进字符串，例如 ' . '。判断格式化是否影响效果，应检查生成内容本身，而不是只比较源码中的空格。

局部忽略格式化

在要保留的 CSS 声明前添加：

.markdown-body h3::before {
  /* prettier-ignore */
  content: counter(section)'.'counter(subsection);
}

忽略针对后续语法节点，不是任意一整行。一行包含多个独立节点时，先明确需要跳过的代码范围。

不同语言的形式

JavaScript 使用行注释：

// prettier-ignore
const options = {first:1,second:2};

CSS 使用 /* prettier-ignore */，HTML 使用 <!-- prettier-ignore -->。忽略整个文件则使用 .prettierignore，这是另一个范围的设置。

没有生效时检查

确认文件实际由 Prettier 处理，而不是其他格式化工具；再检查注释位置，以及保存时是否还有其他格式化步骤覆盖结果。

如果只关心目录编号的显示结果，可以先核对 CSS 的实际输出，再决定是否需要保留特殊排版。

参考：Prettier 忽略代码文档及CSS content 属性说明。