如何阻止 prettier 格式化 HTML 文件？答案

【问题标题】：How do I stop prettier from formatting HTML files?如何阻止 prettier 格式化 HTML 文件？
【发布时间】：2018-10-20 00:45:29
【问题描述】：

所以问题是prettier的html格式不是很好。

例如，如果我有这个角度模板：

<some-component
  some-attribute 
  [ang-binding1]='someExpr'
  [ang-binding2]='someExpr'
  (someEvent)='someFunc($event)'>
</some-component>

prettier 会将其格式化为：

<some-component some-attribute [ang-binding1]='someExpr' [ang-binding2]='someExpr' (someEvent)='someFunc($event)'>
</some-component>

如何禁用 html 模板的更漂亮的格式？

【问题讨论】：

好问题 - prettier 的 HTML 格式很奇怪！对于应该包含通用标准的东西，我还没有看到有人像以前的源代码那样以特定的行长格式化 HTML。开箱即用，它会破坏每个 <p> 元素。
您不能再在 Prettier 的设置中禁用 HTML 文件的格式设置。请参阅我的答案以获取解决方法。

标签： html prettier

【解决方案1】：

如果您使用的是 VSCode，请点击文件 > 首选项 > 设置并添加"html.format.enable": false,

【讨论】：

【解决方案2】：

html.format.enable 将关闭默认的 VS Code 格式化程序。要排除项目中的所有 html 文件被格式化，您可以将 .prettierignore 文件添加到项目根目录并忽略所有 html 文件。

*.html

【讨论】：

请注意，这不适用于在 ts/js 和 css 所在的同一文件中包含 html 的 vue 文件。
对我不起作用

【解决方案3】：

如果您使用的是 VS Code，您可以通过在设置中添加以下内容来阻止 Prettier 在 HTML（或其他特定语言）上运行：

"prettier.disableLanguages": ["html"]

您可以在 prettier/prettier-vscode GitHub page 找到其他 VS Code 特定选项。

【讨论】：

这似乎不适用于 MySQL 文件。 “xyz.sql”。谁能告诉我不使用.prettierignore的“sql”文件的解决方案是什么。
@AnimikhAich 对不起，我不知道 Prettier 对 SQL 文件的支持。我没有在prettier/prettier-vscode 代码库中找到对 SQL 的任何引用。我确实在 Prettier 主站点上看到提到了 PostgreSQL 插件，但没有提到 MySQL。
如何将其添加到设置中？
自 2021 年 3 月起，您将无法再执行此操作 - 请参阅我的答案以了解解决方法。
收到来自 vscode 的警告消息：“不再支持此功能。请配置 VS Code”

【解决方案4】：

除了已经编写的内容之外，您还可以在保存时禁用格式化。那么你需要通过CMD/CTRL + P > Format document明确格式化文档

"[html]": {
    "editor.formatOnSave": true
},

【讨论】：

【解决方案5】：

如果您使用 prettier 和 pre-commit 挂钩（例如，使用 husky），更改编辑器设置对您没有帮助。
您需要添加文件.prettierignore，内容如下：

*.html

文件格式类似于 .gitignore。你可以在这里阅读更多：https://prettier.io/docs/en/ignore.html

【讨论】：

最新答案。谢谢
对我不起作用

【解决方案6】：

如果您想为 html 文件保留 vscodes html 格式化程序，但对其他文件使用 prettier，您可以在 settings.json 中设置以下内容。

"editor.formatOnSave": true,
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
}

【讨论】：

【解决方案7】：

如果您想忽略要在文件中格式化的特定行，您可以通过在代码前添加 prettier-ignore 来做到这一点。

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

完整文档：https://prettier.io/docs/en/ignore.html

【讨论】：

【解决方案8】：

为上述内容添加更多信息：

按 Ctrl + ,

输入“更漂亮”

转到“更漂亮：禁用语言”选项

在其中添加“html”

【讨论】：

自 2021 年 3 月起，您将无法再执行此操作 - 请参阅我的答案以了解解决方法。

【解决方案9】：

自 2021 年 3 月起，您无法再在 Prettier 扩展程序设置中禁用 HTML。

现在，您可以使用 .prettierignore 文件或使用 VS Code 的 editor.defaultFormatter 设置，详见 Prettier 文档的 Default Formatter 部分。

我可以通过进入 settings.json 并更改它来禁用 HTML 文件中的 Prettier（和任何格式化程序）：

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

到这里：

"[html]": {
    "editor.defaultFormatter": null
  },

或者，您可以使用 VS Code 的默认 HTML 格式（我的首选选项，因为不会在自关闭/无效标签的末尾添加正斜杠）：

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },

【讨论】：

null 对我不起作用。设置任何其他随机字符串会禁用我机器上的 fmt。
你的传奇，我使用了你提供的最后一个选项，它解决了我的问题 - 我讨厌每个 HTML 属性都放在一个新行上！谢谢！

【解决方案10】：

Prettier 的内联忽略语法

对于 HTML，

<!-- prettier-ignore -->

或者对于 JSX，

{/* prettier-ignore */}

或者对于 Javascript，

// prettier-ignore

或者对于 CSS，

/* prettier-ignore */

注意：不是对 OP 问题的直接回答，但有时当人们希望忽略特定行的内联时，Prettier 的 comment syntax 非常有帮助。

【讨论】：

【解决方案11】：

你可以试试你的./package.json:

"scripts": {
    "format": "prettier --write .js src !**.html",
    ...
}

【讨论】：