Hugo の Template が Prettier で崩れなくする

メモ:

拡張機能の Prettier を導入した VSCode で Hugo の HTML template を作成すると折り返してほしくない場所で折り返してしまいます。そこで、プロジェクトのルートフォルダーに個別の設定ファイル( .prettierrc )を作成します。

Hugo の HTML template ように設定する

例えば、次のテンプレートを Prettier のデフォルトのまま保存したとします。

<h2 class="p-section\_\_name--t1">Latest New</h2>
{{- range first 8 .Site.RegularPages.ByDate.Reverse -}}
    {{- .Render "li" -}}
{{- end -}}

すると、 .Render のあとで改行されてしまい正しい形に成形されません。

<h2 class="p-section\_\_name--t1">Latest New</h2>
{{- range first 8 .Site.RegularPages.ByDate.Reverse -}} {{- .Render
    "li" -}} {{- end -}}

これを解決するには、プロジェクトのルートフォルダーに .prettierrc ファイルを作成し、次のように記載します。

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

Related Link(Ads)