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

Question

所以问题是 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 模板的更漂亮的格式？

Answer 1

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

"prettier.disableLanguages": ["html"]

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

Answer 2

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

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

Answer 3

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

*.html

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

Answer 4

自 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"
  },

Answer 5

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

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

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

Answer 6

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

*.html

Answer 7

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

Answer 8

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

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

Answer 9

在上面提到的内容中添加更多信息：

按 Ctrl + ,

输入“更漂亮”

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

将“html”添加到它

Answer 10

Prettier 的内联忽略语法

对于 HTML，

<!-- prettier-ignore -->

或者对于 JSX，

{/* prettier-ignore */}

或者对于 Javascript，

// prettier-ignore

或者对于 CSS，

/* prettier-ignore */

注意：不是对 OP 问题的直接回答，但有时当人们只想忽略特定行的内联时，Prettier 的注释语法非常有帮助。

Answer 11

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

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

Answer 12

如果您使用的是 VSCode，请单击 Command + P（对于 Mac）以打开命令面板。 然后输入：

> settings

> 允许您输入 VSCode 命令。

从结果中，您可以选择Preferences: Open Settings (JSON) ，这将打开设置 JSON 文件，以便您可以完全配置设置。 设置 UI 提供有限的选项。

在设置文件中，添加：

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

这将对 html 文件使用 VSCode 格式化程序而不是 Prettier，而不会为其他文件禁用 Prettier。