Prettier 不在 VS Code 中格式化 HTML 文件答案

【问题标题】：Prettier not formatting HTML files in VS CodePrettier 不在 VS Code 中格式化 HTML 文件
【发布时间】：2020-01-14 09:16:37
【问题描述】：

我的 VS 代码上的 Prettier 扩展无法格式化 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

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

【问题讨论】：

您在运行格式化程序时是否有任何错误跟踪？也许您可以先在文件中使用最少量的 HTML，直到遇到问题？
仅使用 <div> </div> 进行了尝试。得到同样的错误。如何获取错误跟踪？我怀疑没有为 HTML 文件运行 prettier。
我检查了如何调试扩展，你最好的选择可能是启用developer tools，这样你就可以看看是什么问题导致了错误。引用自here。
还有 cmd-shift-p -> Search Show Logs -> Extension Host (来自同一个问题)
我应该重新安装 vscode 然后再次检查 formatOnSave

标签： visual-studio-code prettier

【解决方案1】：

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

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

"prettier.disableLanguages": ["html"]

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

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

希望有帮助！

【讨论】：

我确实查看了issue。但它没有提到如何在不安装任何扩展的情况下禁用它。由于我没有使用vue，所以我不需要任何扩展。
我也不想为 HTML 禁用更漂亮的功能。我想使用更漂亮的 HTML 格式设置，因为这是团队中其他开发人员正在使用的设置。这有助于在团队中的所有开发人员之间实现格式的一致性。

【解决方案2】：

我也一样。我设法解决它如下：

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

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

负责Prettier格式化html的部分

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

【讨论】：

感谢您的解决方法！需要明确的是，这解决了 HTML 文件没有得到正确格式的问题，但不是 Prettier 会格式化。我们默认使用 VSCode 格式化程序。在 Prettier v5.6 上并在全球范围内启用。
为我工作。我设置了 prettier 和 eslint 配置文件，我的 config.json 有 js 和其他东西，但没有 html

【解决方案3】：

在保存时让 Prettier 格式化有很多问题。原来是 VSCode 中的默认超时设置存在问题。使用这些设置最终对我有用：

{
    ...
    "editor.codeActionsOnSaveTimeout": 100000,
    "editor.formatOnSaveTimeout": 100000,
    ...
}

作为参考，以下是我关于 linting 和格式化的所有设置：

{
    "editor.codeActionsOnSave": { "source.fixAll": true },
    "editor.codeActionsOnSaveTimeout": 100000,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnSaveTimeout": 100000,
    "editor.formatOnType": true,
    "eslint.alwaysShowStatus": true,
    "eslint.enable": true,
    "html.format.enable": false,
    "htmlhint.enable": true,
    "prettier.requireConfig": false,
    "prettier.useEditorConfig": true,
    "stylelint.autoFixOnSave": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
}

我使用以下扩展（同样仅限于 linting/formatting）：

ESLint (dbaeumer.vscode-eslint)
更漂亮 (esbenp.prettier-vscode)
stylelint-plus (hex-ci.stylelint-plus)
HTMLHint (mkaufman.htmlhint)

您可能需要确保安装了您的扩展所需的所有 npm 包。如果可能的话在本地。

我真诚地希望这会有所帮助。设置 linter 和 formatter 本身仍然是一门科学。

附：每当我尝试格式化不在工作目录中的文件时，都会收到类似“无法格式化”消息的错误。但是查看您消息中的路径表明这不是您的问题。

【讨论】：

【解决方案4】：

我的一个同行在工作区 vscode 中安装了以下内容：

"prettier.disableLanguages": ["html"],

这样就可以了。

【讨论】：

【解决方案5】：

如果格式化失败，查看 Prettier 控制台是否有错误。如果没有，请使用以下设置：

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

文件格式化后，恢复原来的设置：

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

然后再次尝试格式化。这一次 Prettier 将有更好的投入使用。

.prettierrc 或 VS 代码更漂亮的设置（dotfile 覆盖 VS）中的 requirePragma 选项应为 false（默认情况下）。

【讨论】：

【解决方案6】：

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

为了查看错误，我从命令行运行了 prettier，并且对于它拒绝格式化的每个文件，它都会显示错误，如下图所示：

【讨论】：

供参考，命令如npx prettier -c index.html
这非常有用。谢谢！
谢谢，这帮助我解决了一个烦人的问题，即某个特定文件无法格式化！

【解决方案7】：

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

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

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

【讨论】：

解决了我的问题。我还需要重新启动我的 VS Code。希望对您有所帮助。
非常感谢！ :)

【解决方案8】：

禁用 "editor.formatOnSaveMode": "modifications" 为我解决了 Angular 的 .component.html 文件中的问题。

【讨论】：

谢谢！我尝试了所有方法，但这一个是我的解决方案。

【解决方案9】：

简答：

从右下角的按钮打开 Prettier
向上滚动查看错误列表。
修正您写的错误语义。前任： photo for error example

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

例如：您没有关闭尖括号，或者您多次关闭标签要知道错误并修复它：查看简短答案。

【讨论】：

它对我有用。我已经修复了标签的错误语义。
@ChetanNada 我很高兴听到这个消息?

【解决方案10】：

我只是通过右键单击文件来解决它，选择“格式化文档”并选择“更漂亮”。我不知道如何永久设置它，但这是一个快速的解决方法。

【讨论】：

这是我尝试过的最佳答案。它起作用的原因是它重写了 settings.json 文件目录。

【解决方案11】：

将此作为您的配置

"prettier.singleQuote": true,
    "prettier.useEditorConfig": false,
    "prettier.useTabs": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

【讨论】：

【解决方案12】：

这对我有用。

在settings.json中，[html]中的h大写：

...

"[Html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

...

【讨论】：

【解决方案13】：

  "[Html]": {
    //"editor.defaultFormatter": "vscode.html-language-features"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  this work for me

【讨论】：

【解决方案14】：

将此添加到我的 VSCode 用户设置的底部为我完成了这项工作：

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

【讨论】：

【解决方案15】：

尝试重启 VS Code

当 VS Code 提示我重新启动更新时，我已经让 Prettier 停止格式化。关闭和打开 VS Code 让它再次工作。

【讨论】：

【解决方案16】：

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

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

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

编辑 settings.json

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

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

【讨论】：

【解决方案17】：

我发现 Prettier 有时对 HTML 很烦。因此，就我而言，这对我来说适用于 HTML 格式-

用户json文件设置如下-

 "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
  },

对于 HTML，我在 VSCode 中使用 JS-CSS-HTML Formatter 扩展作为默认格式化程序（如您在上面的代码中所见）。这样可以很好地格式化 HTML 代码。

【讨论】：

【解决方案18】：

prettier 格式化程序不支持 Format on selection 或 Formate On Save 用于 HTML 文件 - modification 模式，因此为此，您可以在 settings.json 中为 HTML 文件设置 formatOnSaveMode:'html'

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSaveMode": "file"
  },

格式选择适用于多种语言，具体取决于 Prettier 本身支持的内容。目前支持以下语言：

javascript
javascriptreact
typescript
typescriptreact
json
graphql

【讨论】：