calendar

HugoのテンプレートをPrettierでフォーマットできるようにする

category Hugo
tag Hugo tag Prettier
toc目次

HugoのテンプレートをPrettierでフォーマット

HugoのテンプレートをPrettierでフォーマットすると、テンプレートの変数や関数が認識されず、うまくフォーマットされません。
prettier

prettier-plugin-go-templateを導入すると、HugoのテンプレートをPrettierでフォーマットできるようになります。

prettier-plugin-go-templateの導入方法

npmで以下のパッケージをインストールします。

  • prettier
  • prettier-plugin-go-template

（※ npmがインストールされていない場合は、Node.jsをインストールします。）

VS CodeのPrettierを使用しいる場合は、プロジェクトのルートフォルダーで以下を実行します。

npm install --save-dev prettier prettier-plugin-go-template

パッケージインストール後、プロジェクトのルートフォルダーに .prettierrcファイルを作成し以下を記載します。

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

上記設定後にPrettierでフォーマットすると、テンプレートの変数や関数が認識されてフォーマットされます。

📷 prettier-plugin-go-template導入前
prettier

📷 prettier-plugin-go-template導入後
prettier

参考