更漂亮Hugo HTML模板的可视代码设置 [英] Prettier & Visual Code settings for Hugo HTML templates

问题描述

我通常喜欢将Prettier与Visual Code结合使用.但是，Prettier在为Hugo编辑HTML模板时让我发疯，因为它不会保留读者友好的格式:

I generally like using Prettier with Visual Code. However, Prettier is making me crazy while editing HTML templates for Hugo because it will not preserve the reader friendly formatting of this:

  {{ 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以更好地处理模板逻辑? (此后我就停用了它.)

How can Prettier be customized to better handle template logic? (I have since resorted to disabling it.)

推荐答案

更漂亮地破坏了我们的GoHugo html文件也使我非常恼火.下面的插件可以解决此问题.

I also got really annoyed by prettier breaking our GoHugo html files. The plugin below fixes the behavior.

prettier-plugin-go-template

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

If you're using plain *.html files, you'll want to pay attention to the GoHugo section of the Readme:

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

To use it with GoHugo and basic .html files, you'll have to override the used parser inside your .prettierrc file:

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

这篇关于更漂亮Hugo HTML模板的可视代码设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！