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代码版本（来自“关于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

简答：

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

长答案： 大多数情况下，Prettier 不起作用的原因是您存在标记错误。

例如：您没有关闭尖括号或关闭标签超过一次了解错误并修复它：查看简短答案。

Answer 2

首先，您可能要解决有关Vue.js的编译错误。您可能需要获取{@ 3}详细的VS代码扩展。

我听说Prettier有时会在格式化HTML时遇到一些问题，而VS Code本身已经具有HTML格式化支持。您可以使用以下命令停止更漂亮的HTML格式设置：

"prettier.disableLanguages": ["html"]

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

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

希望有帮助！

Answer 3

对我一样。我设法解决了以下问题：

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

} }

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

Answer 4

如果格式化失败，请查看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将提供更好的输入。

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

Answer 5

我遇到了同样的问题，原因可能是更新了VS Code。通过设置“文本编辑器”的默认格式化程序对其进行了修复

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

在下拉菜单（esbenp.prettier-vscode）中将格式设置为更漂亮。如果您使用的是其他格式化程序，则可以更改。

Answer 6

这对我有用。

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

...

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

...

Answer 7

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

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

作为参考，这是我所有有关棉绒和格式化的设置：

{
    "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
    }
}

我使用以下扩展名（同样仅限于棉绒/格式化）：

ESLint（dbaeumer.vscode-eslint）
漂亮（esbenp.prettier-vscode）
stylelint-plus（hex-ci.stylelint-plus）
HTMLHint（mkaufman.htmlhint）

您可能要确保已安装扩展所需的所有npm软件包。如果可能，请在本地进行。

我真诚地希望这会有所帮助。设置棉绒和格式化程序本身仍然是一门科学。

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

Answer 8

我的一位同行将以下内容安装到工作区vscode中：

“ prettier.disableLanguages”：[“ html”]，

那样就可以了。

Answer 9

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

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

Answer 10

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

Answer 11

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

Answer 12

将此用作您的配置

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

Answer 13

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

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

13 个答案: