html - 如何阻止 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 模板的更漂亮的格式？

score 39 · Accepted Answer

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

"prettier.disableLanguages": ["html"]

score 31 · Accepted Answer

如果您想为html文件保留 vscodes html 格式化程序，但对其他文件使用更漂亮的文件，您可以在settings.json.

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

score 26 · Accepted Answer

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

*.html

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

score 23 · Accepted Answer

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

score 14 · Accepted Answer

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

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

score 12 · Accepted Answer

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

*.html

score 11 · Accepted Answer

11

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

于 2018-07-05T03:20:53.523 回答

score 5 · Accepted Answer

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

按 Ctrl + ,

输入“更漂亮”

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

将“html”添加到它

score 5 · Accepted Answer

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

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

score 3 · Accepted Answer

Prettier 的内联忽略语法

对于 HTML，

<!-- prettier-ignore -->

或者对于 JSX，

{/* prettier-ignore */}

或者对于 Javascript，

// prettier-ignore

或者对于 CSS，

/* prettier-ignore */

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

score 0 · Accepted Answer

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

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