Hugo IntelliSense ⚡

The smartest Hugo extension for VS Code. Autocomplete, validation, navigation, quick fixes, and a dev server — all in one install.

Stop guessing. Start shipping.
IntelliSense that knows Hugo as well as you do.

Templates →   •   Docs   •   Sponsor ❤️

Why Hugo IntelliSense?

Hugo is the fastest static site generator on the planet, but editing content in VS Code feels like writing YAML blindfolded. Hugo IntelliSense changes that.

Every keystroke is assisted. Every field is validated. Every error has a one-click fix. You get the confidence of a fully typed language — in your markdown files.

Works with any Hugo project. Extra superpowers for HugoBlox sites.

Features at a Glance

🧠 Smart Autocomplete

Autocomplete that understands your Hugo project. Not just keywords — context-aware suggestions based on your content types, schemas, and workspace.

• Frontmatter fields — suggests title, date, authors, tags and every field your content type supports
• Field values — suggests actual author usernames from your content/authors/ directory
• Block types — in HugoBlox landing pages, autocomplete for hero, features, stats, and every available block
• Section fields — once you pick a block, suggests only the fields that block supports

How to use

Just start typing in your frontmatter. Suggestions appear automatically. Press Tab or Enter to accept.

For block-specific fields, type the field name inside a sections: item after setting the block: type.

✅ Real-Time Validation

Errors surface instantly — not after a failed build. Five categories of diagnostics:

How to use

Diagnostics appear automatically as you edit. Look for squiggly underlines in your frontmatter. Hover over them to see the message.

💡 Quick Fixes

Every diagnostic comes with a one-click fix. Click the lightbulb or press Ctrl+.:

Plus standalone actions — available anytime your cursor is in frontmatter:

• Publish post — toggle draft: true → draft: false
• Add date — insert today's date when date is missing

How to use

1. Place your cursor on a line with a diagnostic (squiggly underline)
2. Click the 💡 lightbulb that appears, or press Ctrl+. (Cmd+. on Mac)
3. Select the fix

📖 Hover Docs

Hover over any frontmatter field to see its description, type, and whether it's required — pulled directly from your content type schema.

• Works for page fields, block fields, and Hugo built-in fields
• Shows which content type the field belongs to
• No need to switch to documentation

How to use

Hover your mouse over any frontmatter key. The tooltip appears automatically.

🗂️ Outline View

See the full structure of your Hugo content files at a glance:

📦 Frontmatter
  ├─ title: "My Post"
  ├─ date: 2024-01-15
  ├─ authors: [me]
  └─ 📦 sections (3 blocks)
       ├─ hero
       ├─ features
       └─ cta
📝 Content
  ├─ Introduction (H2)
  │    ├─ Prerequisites (H3)
  │    └─ figure (shortcode)
  └─ Conclusion (H2)

• Outline panel — in the Explorer sidebar, scroll to "OUTLINE"
• Breadcrumbs — shows your location as you move through the file
• Go to Symbol — press Ctrl+Shift+O to jump to any section instantly

How to use

Open any Hugo markdown file and look at the bottom of the Explorer sidebar. The Outline panel populates automatically.

To navigate quickly, press Ctrl+Shift+O (Cmd+Shift+O on Mac) and type a heading name.

🔗 Go to Definition

Ctrl+Click on an author name to jump straight to their profile:

authors:
  - me      # ← Ctrl+Click to open data/authors/me.yaml
  - alice   # ← or data/authors/alice.yml

Resolves against (in priority order):

1. data/authors/<slug>.yaml (primary)
2. data/authors/<slug>.yml
3. content/authors/<slug>/_index.md (legacy fallback)

How to use

Hold Ctrl (Cmd on Mac) and click on an author name in your frontmatter authors: list. The author's profile file opens instantly.

📁 Code Folding

Collapse what you don't need to see:

• Fold entire frontmatter — collapse the --- block with one click
• Fold individual sections — in landing pages, each - block: group folds independently

Perfect for landing pages with 100+ lines of frontmatter.

How to use

Click the fold arrows (▸) that appear in the gutter next to --- or - block: lines. Or use Ctrl+Shift+[ to fold the current region.

🎨 Syntax Highlighting

Full TextMate grammar for Hugo HTML templates (.html files in layouts/):

• Go template delimiters: {{ }}, {{- -}}
• Template functions: range, if, with, partial, define, block
• Variables: .Title, .Params, $variable
• Pipes and functions: | markdownify, | safeHTML
• Hugo shortcodes in markdown: {{< figure >}}, {{% highlight %}}

How to use

Works automatically for files with .html extension inside Hugo project directories. The extension registers as hugo-html language.

🖥️ Dev Server

Start and stop the Hugo development server directly from VS Code:

• Start/Stop from the sidebar or Command Palette
• Status bar shows server state and project info
• Auto-detects your Hugo project configuration

How to use

1. Open the Hugo IntelliSense sidebar (click the {H} icon in the Activity Bar)
2. In Server & Actions, click Start Hugo Server
3. Your site opens at localhost:1313

Or use the Command Palette: Ctrl+Shift+P → Hugo: Start Server

📝 Snippets

Scaffold new content pages instantly with hugo- prefixed snippets:

How to use

In any markdown file, type hugo- and select from the autocomplete dropdown. Press Tab to jump between placeholder fields.

Get Started

1. Install — click Install above, or search "Hugo IntelliSense" in VS Code Extensions
2. Open your Hugo project — the extension activates automatically when it detects hugo.toml, hugo.yaml, or hugoblox.yaml
3. Start editing — open a markdown file and experience the magic ✨

Requirements

• VS Code 1.90.0+
• A Hugo project (any version)
• Enhanced features for HugoBlox sites

Support Hugo IntelliSense ❤️

Hugo IntelliSense is 100% free and open source, built with love by Geo and the HugoBlox community. It powers thousands of academic, research, and personal sites around the world.

This project is sustained entirely by the community. No VC funding, no ads, no data collection.

For just $3/month — less than a bad cup of coffee ☕ — you directly fund:

• 🐛 Bug fixes and stability improvements
• ✨ New features (like everything in this extension!)
• 📖 Documentation and tutorials
• 🌍 A tool used by researchers, educators, and developers in 180+ countries

Sponsor tiers

Over 500,000 sites are built with HugoBlox. Your sponsorship keeps this ecosystem alive.

Become a Sponsor →

Companion Extension

Want a full visual CMS experience? Try Ownable CMS — AI-powered content management, media library, and one-click deploy inside VS Code.

Hugo IntelliSense focuses on developer productivity. Ownable CMS focuses on content management. They complement each other perfectly.

Links

• 🌐 hugoblox.com — Templates & themes
• 📖 docs.hugoblox.com — Documentation
• 💬 Discord — Community & support
• 🐙 GitHub — Source & issues
• 𝕏 X / Twitter — Updates from the team

_{Made with ❤️ for the Hugo community}

© 2025-Present Lore Labs. Hugo IntelliSense is part of the HugoBlox ecosystem.