Install and use the HubSpot VS Code extension

Last updated:

The HubSpot VS Code extension provides a set of tools to streamline local HubSpot development. Using the extension, you can install and manage the HubSpot CLI, authenticate and manage connected accounts, as well as quickly develop using HubL with syntax highlighting, autocomplete, boilerplate content, and more. 

Below, learn how to install and use the HubSpot VS Code extension.

Install the extension

To install the HubSpot VS Code extension:

  • In VS Code, navigate to Preferences > Extensions.
  • In the search bar, search for HubSpot, then click Install.

A HubSpot panel will then be added to the left sidebar which will suggest relevant actions along with help and feedback pages.

Install and update the HubSpot CLI

If you haven't yet installed the HubSpot CLI, the VS Code extension will prompt you to install it in the left sidebar when first opened. To install the CLI globally, click Install CLI. A terminal will open in VS Code which you can close once the installation is complete.

install-CLI

If you've already installed the HubSpot CLI, the extension will check for updates. If an update is available, you can click Update CLI in the extension panel.

CLI-update

You can also update the CLI by running npm install -g @hubspot/cli@latest.

Manage authenticated HubSpot accounts

Once you've opened a folder in VS Code, the extension will check for a hubspot.config.yml file with your currently authenticated accounts. It will then display all currently authenticated accounts, along with an option to authenticate a new account.

Authenticate a new account

To authenticate a HubSpot account with the extension:

  • In the extension panel, under Authentication, click Authenticate HubSpot Account.authenticate-hubspot-account
  • In the dialog box, click Open to open HubSpot in a browser window.
  • In your browser, select the HubSpot account you want to authenticate, then click Continue with this account.
  • If you haven't generated an access key for your account yet:
    • Select the permissions you need, then click Generate personally access key.
    • In the dialog box, click Open Visual Studio Code to navigate back to VS Code with your access key information.
    • In VS Code, click Open to relay your access key information to the extension.  
    • You'll then be prompted to select whether this account should be set as the default account. Click Yes if you'd like CLI commands to interact with this account by default. You can change this at any time in the extension panel after authentication.

Manage connected accounts

Under Accounts, the extension panel will display all currently authenticated HubSpot accounts, with the current default account marked by a star icon.

You can right-click the account to view account management options:

  • Show personal access key info: navigate to the personally access key page in the HubSpot account.
  • Set as default account: instruct the CLI to use the account by default when running commands.
  • Rename account: change the account's name in the CLI. This will only change the label that the CLI uses.
  • Delete account: remove the account from your list of authenticated accounts. This will not delete the account, only remove it from the list of available authenticated accounts in the CLI.

account-options

Create new files

You can generate scaffolding for the following assets by right-clicking the file explorer panel and selecting from the New options:

  • New template: generates a new global partial, page, partial, or section template with boilerplate content.
  • New module: generates a new module with boilerplate content.
  • New serverless Function folder: generates a .functions folder that contains boilerplate serverless.js and serverless.json files. Additionally, you can add a new serverless function to the folder by right-clicking the folder, then selecting New serverless function.

create-new-files-extension

HubL Language support

When developing with HubL, the extension offers the following HubL syntax support:

  • Inline HubL linting: checks your HTML, CSS, HTML + HubL, and CSS + HubL files for HubL-related errors and displays them inline.
  • HubL syntax highlighting: supports HubL syntax highlighting in the files associated through your VS Code language mode settings. Learn how to set your file associations below.
  • Statement wrapping: supports {% %}, {# #}, and {{ undefined.undefined }} delimiters.
  • Block comment toggling: create HubL comments by pressing cmd + /. Text within {% %} delimiters will be indented automatically.
  • Autocomplete: offers autocomplete suggestions for supported HubL tags, filters, expression tests, and functions. Learn more about autocomplete below.
  • Emmet for HTML + HubL files: allows Emmet abbreviation and snippet expansions for HTML + HubL files. Learn how to enable Emmet support below.
  • IntelliSense suggestions: enables IntelliSense suggestions when in snippet placeholders. Learn how to enable IntelliSense Suggestions below.

Add HubL file associations

To enable HubL language support in your files, configure your VS Code file association settings:

  • In VS Code, open the command prompt by pressing cmd + shift + p.
  • Search for and select Preferences: Open User Settings. 
  • Choose the scope of your settings by clicking either the User or Workspace tab.
  • In the settings search bar, search for files.associations.
  • Click Add item, then add the following item-value pairs: 
    • *html: html-hubl
    • *css: css-hubl

files-associations

Enable Emmet for HTML + HubL files

To enable Emmet support for abbreviations and snippet expansion in html-hubl files, map html-hubl to html in your Emmet settings:

  • In VS Code, open the command prompt by pressing cmd + shift + p.
  • Search for and select Preferences: Open User Settings. 
  • Choose the scope of your settings by clicking either the User or Workspace tab.
  • In the settings search bar, search for Emmet: Include Languages.
  • Click Add item, then add the following item-value pair: html-hubl: html.

files-associations

Enable IntelliSense suggestions

To enable IntelliSense suggestions when in snippet placeholders:

  • In VS Code, open the command prompt by pressing cmd + shift + p.
  • Search for and select Preferences: Open User Settings. 
  • Choose the scope of your settings by clicking either the User or Workspace tab.
  • In the settings search bar, search for Editor Suggest: Snippets Prevent Quick Suggestions and ensure that the checkbox is cleared.
    intellisense-quick-suggestion
  • Then, in the settings search bar, search for Editor Parameter Hints Enabled and ensure that the checkbox is selected.
    intellisense-hints-enabled

Autocomplete reference

The HubSpot extension enables quick access to snippets that map to support HubL tags, filters, expression tests, and functions. To access autocomplete suggestions, you'll need to use the following prefixes:

  • Expression tests: type the test name alone, then pres Enter. For example, typing div produces divisibleby.
  • Filters: type | followed by the filter, then press Enter. For example, typing |se produces |selectattr('attr', exp_test).
  • Functions and tags: type ~ followed by the function or tag, then press Enter. For example, typing ~hub produces hubdb_table_rows(${table_id}.
  • HubL supported variables: type the variable name alone, then press Enter. For example, content.ab produces {{ content.absolute_url }}.
  • Module fields: in JSON files, type the field type, then press Enter. For example: ri produces:
// typing ri > Enter produces: { "name": "richtext_field", "label": "Rich text field", "required": false, "locked": false, "type": "richtext", "inline_help_text": "", "help_text": "", "default": null }

Other snippets

Other snippets you can generate with the VS Code extension include:

 
Snippet prefix Description Example
otrue Generates overrideable=True for HubL tags. overrideable=True
ofalse Generates overrideable=False for HubL tags. overrideable=False
for Returns a basic for loop.
{% for iterable in dict %}
{{ iterable }}
{% endfor %}
if Returns a basic if statement. {% if {condition} %} do_something {% endif %}
elif Returns an else if statement to be used within an if statement.
{% elif {condition} %}
else Returns an else statement to be used within an if statement. {% else %}
hubldoc Returns a boilerplate HTML + HubL document.  
hublblog Returns boilerplate blog markup.  

The extension also offers autocomplete for file paths when used with the HubL tags and parameters below. To access file path autocompletions, start typing the HubL tag or parameter followed by a quotation mark.

  • {% include "... %}
  • {% import "... %}
  • {% tag_name path="... %}
  • {% extend "... %}

autocomplete-path

Please note: autocomplete will not pull in default module file paths. 

Enable extension beta features

To enable HubSpot VS Code extension beta features:

  • In VS Code, open the command prompt by pressing cmd + shift + p.
  • Search for and select Preferences: Open User Settings. 
  • Choose the scope of your settings by clicking either the User or Workspace tab.
  • In the settings search bar, search for HubSpot: Beta and select the checkbox.

enable-beta-features

Refer to the GitHub Actions documentation to learn more about various events you can use to trigger workflows.

Telemetry

HubSpot for VS Code collects user data in order to improve the extension’s experience. You can review HubSpot’s privacy policy here. Additionally, you may opt out of data collection by changing the setting for global telemetry in VS Code. To read more about VS Code and telemetry, including disabling telemetry reporting, please read the official VS Code documentation.

Contribute

This extension is open source and HubSpot welcomes contributions as well as issues for feature requests and bug reports. For more information about contributing, see the contributing docs to get started.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.