{%- set hs_blog_post_body -%} {%- set in_blog_post_body = true -%}

Before jumping straight to Microsoft Studio code extension, there’s something worth mentioning here and that is CMS CLI Local Development Tooling, which connects your local workflow to HubSpot. Through this, you can use version control, text editor, and other development techs when development on HubSpot CMS.

You can work on your favorite templates, modules, JavaScript, CSS, and HTML files on local development tools. You can then sync all the work to your HubSpot Design Tools. This integrates your code editor with your HubSpot account and enhances your development experience.

Many developers have welcomed the option to move their development local. Everything goes well on HubSpot when you develop local. However, in specific cases of Hubspot CMS Hub, the experience is not that smooth.

For example, HubL – HubSpot’s proprietary templating language was not properly highlighted in the text editor. It was very hard for any developer working with HubL to read that specific code.

That’s where the Microsoft Visual Studio Code Extension Jumps in to cover the loophole in CMS CLI Local Development Tooling. CMS Hub developers using Microsoft Visual Code Editor can now easily see and read the HubL code.

 

You can install the updated HubSpot VS Code Extension and enjoy the additional features such as

 

  • The highlighted syntax for the HubL templating language
  • HubL tags, expression tests, filters, and functions get autocompleted, provided a prefix in some cases for autocompletion.
  • Statement wrapping ({ {} }, , )
  • Comment toggling gets blocked.
  • The indentation level gets blocked. The text part between {% block %} will be automatically intended.

For the users to use these features, the Microsoft Visual Studio Code Extension has introduced new file languages HTML + CSS and HTML + HUBL. Users need to change the language from the bottom right corner of the screen to access these languages.

 

Adjusting the file associations to use the said languages

 

  • Press CMD +SHIFT + P in the Microsoft VS Code
  • Search the option; Preferences: Open Settings (UI)
  • Choose either the “Workspace” or “User” tab.
  • Look for files.associations in “Search settings.”
  • Choose “Add Item” and add the file associations: *.html:html-hubl *.html:css-hubl

Here are some more settings in User and Workspace in VS Code

Microsoft Visual Studio Code Extension is available for HubSpot developers of all levels.

{% endblock %} {%- endset -%} {%- set hs_blog_post_summary -%}

Before jumping straight to Microsoft Studio code extension, there’s something worth mentioning here and that is CMS CLI Local Development Tooling, which connects your local workflow to HubSpot. Through this, you can use version control, text editor, and other development techs when development on HubSpot CMS.

{%- endset -%} {%- blog_post_data_wall_wrapper body={{hs_blog_post_body}}, summary={{hs_blog_post_summary}} %}