Unable to get Hugo templates (HTML) to use .prettier config

[overbyte]

I can use the following command to prettify an HTML file (test cast is layouts/partials/thumbnail.html) with the local .prettierrc file (i've increased the log level so you can see what is happening):

prettier layouts/partials/thumbnail.html --write --log-level=debug
[debug] normalized argv: {"":["layouts/partials/thumbnail.html"],"cache":false,"color":true,"editorconfig":true,"write":true,"logLevel":"debug","configPrecedence":"cli-override","debugRepeat":0,"ignorePath":[".gitignore",".prettierignore"],"plugins":[],"_":["layouts/partials/thumbnail.html"],"__raw":{"_":["layouts/partials/thumbnail.html"],"cache":false,"color":true,"editorconfig":true,"write":true,"log-level":"debug","config-precedence":"cli-override","debug-repeat":0,"ignore-path":[".gitignore",".prettierignore"],"plugin":[]}}
[debug] resolve config from '/home/<me>/dev/<me>/<me>.com/layouts/partials/thumbnail.html'
[debug] loaded options `{"plugins":["prettier-plugin-go-template"],"parser":"go-template","goTemplateBracketSpacing":true,"bracketSameLine":true}`
[debug] applied config-precedence (cli-override): {"bracketSameLine":true,"goTemplateBracketSpacing":true,"parser":"go-template","plugins":["prettier-plugin-go-template"]}
layouts/partials/thumbnail.html 39m

which results in a nicely formatted Hugo html template partial

{{ with .Resources }}
  {{ with .GetMatch "{cover.*,*.jpg,*.png,*.jpeg}" }}
    {{ $cover := .Resize "600x" }}
    {{ with $cover }}<img src="{{ .Permalink }}" />{{ end }}
  {{ end }}
{{ end }}

However if I open the same file in helix and save it, this is the result

{{ with .Resources }} {{ with .GetMatch "{cover.*,*.jpg,*.png,*.jpeg}" }} {{
$cover := .Resize "600x" }} {{ with $cover }}<img src="{{ .Permalink }}" />{{
end }} {{ end }} {{ end }}

If I had to guess, I would say that maybe this is applying eslint with no configuration and not prettier maybe?

My languages file (edited for brevity although i've also tested this exact languages.toml to be sure) is

[language-server.eslint]
command = "vscode-eslint-language-server"
args = ["--stdio"]

[language-server.eslint.config]
codeActionsOnSave = { mode = "all", "source.fixAll.eslint" = true }
format = { enable = true }
nodePath = ""
quiet = false
rulesCustomizations = []
run = "onType"
validate = "on"
experimental = {}
problems = { shortenToSingleLine = false }

[language-server.eslint.config.codeAction]
disableRuleComment = { enable = true, location = "separateLine" }
showDocumentation = { enable = false }

[language-server.emmet-lsp]
command = "emmet-language-server"
args = ["--stdio"]

[[language]]
name = "html"
language-servers = [ "tailwindcss-ls", "emmet-lsp" ]
formatter = { command = "prettier", args = [ "--parser", "html" ] }
auto-format = true

and my .prettierrc file is

{
  "plugins": ["prettier-plugin-go-template"],
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "parser": "go-template",
        "goTemplateBracketSpacing": true,
        "bracketSameLine": true
      }
    },
    {
      "files": ["*.js", "*.ts"],
      "options": {
        "trailingComma": "es5",
        "tabWidth": 2,
        "semi": true,
        "singleQuote": true,
        "htmlWhitespaceSensitivity": "ignore",
        "bracketSameLine": true
      }
    }
  ]
}

Note: prettier-plugin-go-template and prettier are both installed as dev dependencies

Here is my html health log

hx --health html
Configured language servers:
  ✓ tailwindcss-language-server: /home/<me>/.nvm/versions/node/v20.17.0/bin/tailwindcss-language-server
  ✓ emmet-language-server: /home/<me>/.nvm/versions/node/v20.17.0/bin/emmet-language-server
Configured debug adapter: None
Configured formatter: prettier
Binary for formatter: /home/<me>/.nvm/versions/node/v20.17.0/bin/prettier
Highlight queries: ✓
Textobject queries: ✘
Indent queries: ✘

[overbyte]

Just found a thread on reddit that suggests to add the go-template as the html parser

{ command = 'prettier', args = ["--parser", "go-template", "--plugin=prettier-plugin-go-template ] }

I reduced this to the following as i have the prettier-plugin-go-template in my .prettier file and it works

[[language]]
name = "html"
language-servers = [ "tailwindcss-ls", "emmet-lsp" ]
formatter = { command = "prettier", args = [ "--parser", "go-template" ] }
auto-format = true

My concern now is that the go-template will always be used for all html files - is there a way to differentiate them please?

[David-Else]

Create a .helix directory in your project and a languages.toml file inside with just the change you want for the project. I tested it with a global prettier install and:

[[language]]
name = "html"
language-servers = [ "vscode-html-language-server", "tailwindcss-ls", "vale-ls" ]
formatter = { command = 'prettier', args = ["--parser", "go-template"] }

Leave your main languages.toml to "--parser", "html" and you should be sorted :)

My .prettierrc file in the root of the hugo project is:

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

Does that work as you want?

[overbyte]

Sensational - I did not know i could do that

thanks very much

[overbyte]

For the record - my languages.toml file is at https://github.com/overbyte/config-helix/blob/main/languages.toml