Hugo HTML 模板的 Prettier & Visual Code 设置答案

【问题标题】：Prettier & Visual Code settings for Hugo HTML templatesHugo HTML 模板的 Prettier & Visual Code 设置
【发布时间】：2019-12-20 21:18:41
【问题描述】：

我通常喜欢将 Prettier 与 Visual Code 结合使用。然而，Prettier 在为 Hugo 编辑 HTML 模板时让我抓狂，因为它不会保留对读者友好的格式：

  {{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
  {{ hugo.Generator }}

  {{ "<!-- plugins -->" | safeHTML }}
  {{ range .Site.Params.plugins.css }}
  <link rel="stylesheet" href="{{ .URL | absURL }} ">
  {{ end }}

  {{ "<!-- Main Stylesheet -->" | safeHTML }}
  {{ $styles := resources.Get "scss/style.scss" | toCSS | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

相反，它被转换为：

  {{ with .Site.Params.author }}
  <meta name="author" content="{{ . }}" />
  {{ end }} {{ hugo.Generator }} {{ "
  <!-- plugins -->
  " | safeHTML }} {{ range .Site.Params.plugins.css }}
  <link rel="stylesheet" href="{{ .URL | absURL }} " />
  {{ end }} {{ "
  <!-- Main Stylesheet -->
  " | safeHTML }} {{ $styles := resources.Get "scss/style.scss" | toCSS | minify
  | fingerprint }}
  <link
    rel="stylesheet"
    href="{{ $styles.Permalink }}"
    integrity="{{ $styles.Data.Integrity }}"
    media="screen"
  />

如何定制 Prettier 以更好地处理模板逻辑？（从那以后我开始禁用它。）

【问题讨论】：

我在这里发现了一个类似的问题：stackoverflow.com/questions/57980680/…

标签： html visual-studio-code vscode-settings hugo prettier

【解决方案1】：

我也对更漂亮地破坏我们的 GoHugo html 文件感到非常恼火。下面的插件修复了该行为。

prettier-plugin-go-template

如果您使用的是纯 *.html 文件，则需要注意自述文件的 GoHugo 部分：

要将它与 GoHugo 和基本的 .html 文件一起使用，您必须覆盖 .prettierrc 文件中使用的解析器：

{
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "parser": "go-template"
      }
    }
  ]
}

【讨论】：