<p>// prettier-ignore 需独占一行置于目标行正上方,仅忽略下一行;块级忽略用 / prettier-ignore / 包裹整个语法节点,JSX 中需加花括号;失效主因是格式化器冲突或配置错误。</p>

怎么用 // prettier-ignore 跳过单行格式化
直接在要忽略的那行代码 ** 正上方 ** 加注释 // prettier-ignore,Prettier 就会跳过紧跟着的那行。它只作用于下一行,不跨行、不累积。
常见错误是把它写在行尾或放在多行语句中间——那样完全无效。
-
// prettier-ignore必须独占一行,且不能有其他内容(包括空格) - 对对象字面量、数组、JSX 等复杂结构也只忽略“那一行”,如果结构跨多行,需在每行前都加(不推荐),更稳妥的做法是忽略整个块
- 示例:
// prettier-ignore const longLine = "this will not be wrapped even if it exceeds printWidth";
怎么忽略一个代码块(比如整个对象或函数)
用 {/* prettier-ignore */}(JSX)或 /* prettier-ignore */(JS/TS)包裹目标块,注意这是块级注释,不是行注释。
容易踩坑的是:括号位置不对、漏掉星号、或误写成 // prettier-ignore —— 后者对块无效。
- JS/TS 中:
/* prettier-ignore */ const config = {some: "very", long: "object", that: "must stay exactly like this"}; - JSX 中必须用花括号包裹注释:
<div> {/* prettier-ignore */} <table><tr><td>raw html</td></tr></table> </div> - 该注释会影响整个被包裹的语法节点,包括其子节点
为什么 prettier-ignore 有时不起作用
最常见原因是 VSCode 没有真正调用 Prettier 做保存时格式化,而是用了其他格式化工具(比如 ESLint 的 fix-on-save 或内置 JS 格式化器)。
检查你当前文件的右下角语言模式是否匹配 Prettier 支持的语言,并确认设置没冲突。
- 确认
"editor.formatOnSave"是true - 确认
"editor.defaultFormatter"对应语言设为了esbenp.prettier-vscode - 检查有没有启用
"eslint.format.enable"且优先级更高 —— 它会覆盖 Prettier - 如果用了
prettier.config.js,确保其中没禁用ignorePath或误配了overrides
还有没有更“硬核”的绕过方式
可以临时关掉 Prettier 的保存格式化,但只建议调试用;长期靠这个,说明项目配置或代码结构本身可能需要调整。
比起到处加 ignore 注释,更值得花时间确认:是不是 printWidth 设得太小?是不是用了不兼容的插件(比如某些模板字符串美化插件)?
- 快捷键临时禁用:
Ctrl+Shift+P→ 输入Format Document→ 选中后按Ctrl+Shift+P再输入Disable Formatting(仅本次生效) - 在
.prettierrc里加"bracketSameLine": true有时比 ignore 更干净地解决 JSX 换行问题 - 真正难搞的场景(比如内联 SVG、手写 AST 相关代码),ignore 是合理选择,但得接受它会让代码可维护性打折扣
ignore 注释不是补丁,是显式声明“这里我负责格式”。一旦多了,就得回头看看是不是规则或协作约定该调了。