使用 prettier 格式化 JS & HTML

Format JS & HTML with prettier

我无法配置 prettier 以仅格式化我的 html 和 js 代码，我不知道在我的配置中还可以添加什么。


我目前在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,

我这样说是因为我有另一个格式化程序 PHP 现在 Prettier 只格式化 HTML 代码而不是 JS.

正确的 Prettier 扩展

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

  • HERE IS THE LINK TO THE OFFICIAL PRETTIER EXTENSION

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

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


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

  • 我们还想确保 prettier 是我们正在配备的格式化程序。目前您没有配置正确的格式化程序。您尝试使用 VS Codes Languag-features 格式化程序来让 Prettier 格式化程序工作。

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

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

  2. 第二个配置是使用的正确配置。它为所有 VSCode.

    配置 Official Prettier Formatting Extension

#1

下面的示例显示了不是要做的事情！
    /** @file "settings.json" */

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

上面不正确的配置有两个错误。

  1. "vscode.html-language-features" 不是正确的扩展 ID。您需要使用更漂亮的格式化程序的扩展 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
}

Here is the link to Prettier's page that shows all available configurations you can add to your prettier file.

此时 Prettier 应该可以工作了

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



正在从 V.S 获取调试信息。代码更漂亮扩展

注意： 堆栈溢出需要有关问题的每个问题的调试详细信息。如果 prettier 无法正常工作，获取这些调试详细信息将帮助您提出问题，而不会让人在这里费心费力。

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

"prettier.enableDebugLogs": true

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

如果您仍然卡住，请转到这一点，您已经开始 debug/troubleshoot 更漂亮，并在下面评论调试信息的内容，或者提出一个新问题并包含调试信息。


编辑结束