Development Setup

This article covers development-related setup for working with Hugo.

Editor Setup

VS Code syntax highlighting and autocomplete: theNewDynamic/language-hugo-vscode
JetBrains syntax highlighting and autocomplete: Smart Hugo

Formatter Setup

HTML

You can use a Prettier plugin to format HTML + Go template files.

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

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

Format files with prettier --write --list-different FILE.

Alternatively, you can use Hugo's official gotmplfmt. Compared to Prettier, its main differences are that it doesn't support any configuration options, doesn't support style or script tags, and isn't part of the npm ecosystem.

Markdown

rumdl is a Markdown LSP, not just a formatter, and it supports Hugo-specific conventions such as shortcodes, Markdown attributes, and a custom root, among others.