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.
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.
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.
Typing {% {# or {{ will automatically auto complete the statement, adding the corresponding delimiters. Additionally use CMD+/ to create HubL comments.
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.
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.
The VS Code extension is available now.
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.