如何阻止格式化HTML文件更漂亮？

Question

所以问题是更漂亮不会很好地格式化html.

例如,如果我有这个角度模板:

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

更漂亮的将格式化为这样的东西:

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

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

Answer 1

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

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

Answer 2

如果您使用 prettier 和 pre-commit hook（例如，使用 husky），更改编辑器设置将无济于事。
您需要添加.prettierignore具有以下内容的文件：

*.html

文件格式类似于 .gitignore。您可以在此处阅读更多信息：https : //prettier.io/docs/en/ignore.html

Answer 3

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

"prettier.disableLanguages": ["html"]

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

Answer 4

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

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

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

Answer 5

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

现在，您可以使用.prettierignore文件或使用 VS Code 的editor.defaultFormatter设置，如Prettier 文档的默认格式化程序部分所述。

通过进入 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 6

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

*.html

Answer 7

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

Answer 8

Prettier 的内联忽略语法

对于 HTML，

<!-- prettier-ignore -->

或者对于 JSX，

{/* prettier-ignore */}

或者对于 JavaScript，

// prettier-ignore

或者对于 CSS，

/* prettier-ignore */

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

Answer 9

在上述内容中添加更多信息：

按 Ctrl + ,

输入“更漂亮”

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

向其中添加“html”

Answer 10

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

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