VScodeでhugoをフォーマットしたい

問題

VScodeでHugoのテンプレートを編集していると、{{ }}のタグを認識してくれず、自動フォーマットによって画像のようになります。

拡張子がhtmlでもhugoの{{ }}を識別できるようにするにはどうすればいいでしょうか？
インデントまでしっかりできれば理想ですが、とにかく{{ }}の間に改行が入らなくなれば問題ありません。

もし厳しそうなら、.vscodeディレクトリで個別の設定（保存時自動フォーマットなし）をしようと思います。

設定

現在のsetting.jsonはこんな感じです。

{
  "workbench.editor.enablePreview": false,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontSize": 13,
  "editor.tabSize": 2,
  "editor.rulers": [80, 100],
  "editor.renderWhitespace": "none",
  "files.associations": {
    "*.erb": "erb",
    "*.yml": "erb"
  },
  "emmet.includeLanguages": {
    "erb": "html"
  },
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "prettier.disableLanguages": ["markdown"],
  "git.suggestSmartCommit": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "window.zoomLevel": 0,
  "liveServer.settings.donotShowInfoMsg": true,
  "sync.gist": "aa5df941f15a010a1e6eb177934fa470",
  "sync.autoDownload": false,
  "gitlens.gitCommands.closeOnFocusOut": true
}