如何阻止格式化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

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

"prettier.disableLanguages": ["html"]

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

Answer 2

自 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 3

如果您使用的是VSCode，请单击文件> 首选项> 设置，然后添加new Vue({ el: "#app", data: { formInputs: [ { value: null, type: null } ] }, computed: { ftc_trial_periods: function() { return this.formInputs.map(obj => { return `${obj.value} ${obj.type}`; }); } }, methods: { addPeriod: function() { this.formInputs.push({ value: null, type: null }); } } })

Answer 4

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

*.html

Answer 5

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

按Ctrl +，

输入“漂亮”

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

在其中添加“ html”

Answer 6

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

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

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

Answer 7

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

显式设置文档格式

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

Answer 8

如果您将漂亮的东西与预提交的钩子一起使用（例如，对于沙哑的东西），更改编辑器设置将无济于事。 您需要添加具有以下内容的文件.prettierignore：

*.html

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

Answer 9

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

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

Answer 10

Prettier 的内联忽略语法

对于 HTML，

<!-- prettier-ignore -->

或者对于 JSX，

{/* prettier-ignore */}

或者对于 Javascript，

// prettier-ignore

或者对于 CSS，

/* prettier-ignore */

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