更漂亮的不是在 VS Code 中格式化 HTML 文件

Question

我的 VS 代码上的漂亮扩展无法格式化 HTML。

在加载 VS 代码时，我在控制台中收到此错误 -

在尝试格式化时，我在底部看到此消息 -

注 - TS 文件和 SCSS 文件的格式正确。它仅适用于 HTML 文件。

以下是我基于 HTML 语言的设置 -

{
  "tslint.rulesDirectory": "./node_modules/codelyzer",
  "typescript.tsdk": "node_modules/typescript/lib",
  "window.zoomLevel": 0,
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.html": "html"
  }
}

这些是安装和启用的扩展 -

更漂亮的版本—— 2.2.2

VS Code 版本（来自关于 VS 代码部分）：

Version: 1.38.1
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:31:32.854Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 17.7.0

请让我知道如何解决此问题。如果需要更多信息，请发表评论。谢谢。

Answer 1

我也是。我设法解决它如下：

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

这使我可以在全局范围内使用更漂亮的内容，并为 html 使用内置的 html 格式化程序。还允许在保存和键入时进行格式化。

负责Prettier格式化html的部分

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

Answer 2

简短回答：

1. 从右下角的按钮打开 Prettier
2. 向上滚动查看错误列表。
3. 修复您编写的错误语义。ex： 错误示例的照片

长答案： 大多数时候 Prettier 不起作用的原因是您有标记错误。

例如：您还没有关闭尖括号，或者您多次关闭标签以了解错误并修复它：查看简短的答案。

Answer 3

我遇到了同样的问题，原因可能是更新 VS Code。通过设置文本编辑器的默认格式器来修复它

转到设置（Cntr+，对于 Windows），搜索“默认格式化程序”

在下拉菜单 (esbenp.prettier-vscode) 中设置格式化程序以获得更漂亮的效果。如果您使用任何其他格式化程序，这可能会改变。

Answer 4

首先，您可能想要解决有关 Vue.js 的编译错误。您可能需要获取 VS-code 的一些扩展，详见此处。

我听说 Prettier 有时在格式化 HTML 时会遇到一些问题，而且 VS Code 本身已经有 HTML 格式支持。您可以使用以下命令专门阻止 prettier 格式化 HTML：

"prettier.disableLanguages": ["html"]

您还可以在配置中更改此行以启用 VS 代码 html 语言支持。

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

希望有帮助！

Answer 5

对我来说，我发现 prettier 拒绝格式化文件，但是在 vs 代码的输出窗口中没有错误。通常在 html 无效时发生这种情况：缺少标签，或标签关闭两次，或标签未关闭。

为了查看错误，我从命令行运行了更漂亮的程序，对于它拒绝格式化的每个文件，它显示了错误的错误，如下图所示：

Answer 6

之前使用 HTML 工作正常，今天突然出现这个问题。

尝试编辑默认格式化程序、保存格式、重新加载更漂亮等。

最终尝试了上面提出的解决方案

编辑settings.json

确保“[html]”：将默认格式化程序行设置为以下，在第 40 行找到它。

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