Skip to content
HubSpot Developer Changelog

HubSpot VS Code Extension


We're always looking to improve the local development experience when building on HubSpot’s CMS. Today we are announcing the HubSpot VS Code Extension, and asking for your feedback.

What is it?

A new IDE extension that makes building locally with HubL easier. The extension is available for Visual Studio Code (VS Code). Used in tandem with the local development tools (CLI) developing CMS Hub websites has never been easier. Use the extension to make editing your code easier, then use the CLI to upload your assets to your HubSpot account, it's that simple.

The extension provides hotly requested utilities that make local development fast and easy.

HubL Syntax Highlighting

Syntax highlighting is critical to reading and writing code, and becomes immensely useful the more complex your project is. We've had HubL syntax Highlighting in the Design Manager for a long time, now you can take advantage of it directly within VS Code.

HubL statement completion

Typing {% {# or {{ will automatically auto complete the statement, adding the corresponding delimiters. Additionally use CMD+/ to create HubL comments.

HubL snippets

Memorizing all of the available HubL filters, tags, functions, and module field types is hard if not impossible. To help keep your attention where you want to spend it - in your editor - we're taking advantage of VS Code's IntelliSense functionality. HubL quick snippets (like a lightweight Emmet.io but for HubL) and reference information right in your code.

vscode hubl snippets

Why is it happening?

The local development tools (CLI) were only the first piece of the puzzle to make developing on HubSpot a delightful experience. Making it faster and easier to build using the tools you want to use is critical to that mission.

When is it happening?

The VS Code extension is available now.

Install VS Code Extension

If you previously had William Spiro's HubL Language extension installed, there's nothing you need to do. The extension should already be updated to the HubSpot version if previously installed.

Your feedback drives us to improve

The CLI and the HubL language extension are open source and we would love to see your feature suggestions (create an issue), and even contributions (see contributing).

Questions or comments? Join us in the developer forum or the #local-development channel of the HubSpot Developer Slack.