如何配置 Prettier 和 VS Code 的 settings.json 文件以格式化 JavaScript 和 HTML 文档？

Question

我无法配置 prettier 来仅格式化我的 HTML 和 JavaScript 代码，我不知道在我的配置中还可以放入什么。

我目前在 VS Code 中配备的 Prettier 扩展的 ID 是：esbenp.prettier-vscode，我的settings.json文件配置如下：

---

   "editor.defaultFormatter": null,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "editor.formatOnSave": true,
    // "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.arrowParens": "avoid",
    "prettier.jsxBracketSameLine": true,
    "prettier.bracketSpacing": true,
    "prettier.embeddedLanguageFormatting": "auto",
    "prettier.htmlWhitespaceSensitivity": "css",
    "prettier.insertPragma": false,
    "prettier.jsxSingleQuote": true,
    "prettier.printWidth": 100,
    "prettier.proseWrap": "preserve",
    "prettier.quoteProps": "as-needed",
    "prettier.requirePragma": false,
    "prettier.semi": true,
    "prettier.singleQuote": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5",
    "prettier.useTabs": true,
    "prettier.vueIndentScriptAndStyle": false,

Prettier 正在格式化 HTML，但不是 JavaScript。我该如何配置两者？

Answer 1

正确的更漂亮的扩展

有许多 prettier 扩展可供选择，但只有一个是官方的 prettier 扩展，它是由维护 prettier 的同一个人编写的。您需要确保您拥有官方 PRETTIER EXTENSION。

• 这是官方 Prettier 扩展的链接

• 为了验证它是否是官方扩展，其唯一扩展 ID 将为："esbenp.prettier-vscode"。

• 该链接在 Visual Studio 网站视图中显示官方扩展页面，您可能希望在编辑器中下载它，而不是通过文件安装它VSIX。

• 您需要以通用方式配置默认格式化程序才能格式化 JavaScript 和 HTML。您尝试在每种语言的基础上指定配置，如果您尝试配置格式化程序以格式化多种语言或文件类型，这通常是错误的。你只是想将 prettier 设置为默认格式化程序，而不是 HTML 的默认格式化程序，两者之间有很大区别。一种格式化所有语言，另一种仅格式化 HTML。对于所有VS Code。

• 我们还想确保我们配备的格式化程序是 Prettier。目前您没有配置正确的格式化程序。您尝试使用 VS Codes 语言功能格式化程序来使 Prettier 格式化程序正常工作。

我在下面提供了两个配置默认格式化程序的示例。

1. 第一个示例显示您当前使用的配置不正确。它配置了特定于文件扩展名的格式化程序，并且配置了错误的格式化程序

2. 第二种配置是使用的正确配置。它为所有 VSCode配置官方 Prettier 格式化扩展。

#1

下面的例子展示了不应该做的事情！

    /** @file "settings.json" */

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

上面的错误配置会造成两件事错误。

1. "vscode.html-language-features"不是正确的分机 ID。您需要使用 Prettier 格式化程序的扩展 ID。Prettier扩展id如下"esbenp.prettier-vscode"

2. 您将格式化程序配置为仅适用于 HTML 文件。

   • "[HTML]":{ // settings ... } <--将 prettier 添加到该块会将 prettier 配置为仅在文件扩展名以HTML. 问题是，HTML 并不总是被放置在.html文档中。

对于这个问题的上下文，它在技术上并没有错误，但它不是尝试解决问题时使用的最佳配置；您应该将所有语言的默认格式化程序设置为 Prettier。然后，一旦 Prettier 开始工作，您就可以使用设置来指定您想要使用它的语言以及您不想使用它的语言。

#2

此代码片段显示了要使用的正确配置

  /** @file "settings.json" */

  {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true,
  }

注意到我在保存时添加了格式吗？您希望这样，当您按CTRL+S时，您的代码就会被格式化。

您不想做的另一件事是在settings.json文件中配置 prettier。

不要这样做

/** @file "settings.json" */

{
    "prettier.arrowParens": "avoid",
    "prettier.jsxBracketSameLine": true,
    "prettier.bracketSpacing": true,
    "prettier.embeddedLanguageFormatting": "auto",
    "prettier.htmlWhitespaceSensitivity": "css",
    "prettier.insertPragma": false,
    "prettier.jsxSingleQuote": true,
    "prettier.printWidth": 100,
    "prettier.proseWrap": "preserve",
    "prettier.quoteProps": "as-needed",
    "prettier.requirePragma": false,
    "prettier.semi": true,
    "prettier.singleQuote": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5",
    "prettier.useTabs": true,
    "prettier.vueIndentScriptAndStyle": false,
}

为了使配置更漂亮，您需要.prettierrc为每个项目添加一个配置文件。

1. 更漂亮的配置文件名为".prettierrc"

2. 该.prettierrc文件应放置在项目的 ROOT 目录中。

3. 将以下内容添加到您的".prettierrc"文档中。

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

以下是 Prettier 页面的链接，其中显示了您可以添加到 Prettier 文件中的所有可用配置。

此时 Prettier 应该可以工作了

如果 prettier 不起作用，那么您将需要从 prettier 扩展获取有关其不起作用原因的调试信息。Prettier 会为您输出这些信息，但您必须知道如何获取它。

从 VS Code Prettier 扩展获取调试信息

注意： 堆栈溢出需要调试有关某个问题的每个问题的详细信息。如果 prettier 不起作用，获取这些调试详细信息将帮助您提出问题，而不会让人们在这里给您带来麻烦。

将以下设置添加到您的settings.json文件中

"prettier.enableDebugLogs": true

然后打开终端面板，但不使用终端，而是单击面板顶部的“输出”prettier选项，然后在右侧的下拉列表中从菜单中选择。这将告诉您每次 Prettier 尝试格式化时发生了什么。

如果您仍然卡住，请到此为止，您已经开始更漂亮地进行调试/故障排除，并在下面评论调试信息的内容，或者提出一个新问题并包含调试信息。

编辑结束