Install the HubSpot Visual Studio Code extension

Last modified: August 22, 2025

The HubSpot Visual Studio 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 extension. Learn more about Visual Studio Code here.

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 you can click to access HubSpot-specific actions, resources, and more. vs-code-hubspot-extension-installed

Manage authenticated HubSpot accounts

Using the extension, you can manage the accounts that you want connected to the CLI, similar to using the authentication CLI commands.

Authenticate a new account

To authenticate a HubSpot account using the extension:

In the extension panel, under Authentication, click 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 personal access key.
In the dialog box, click Open Visual Studio Code to navigate back to VS Code.
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.
To authenticate more accounts, click Authenticate additional HubSpot account, then repeat the above process.

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. vs-code-extension-accounts

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

Open design manager: navigate to the account’s design manager.
Show personal access key info: navigate to the account’s personal access key page. This can be useful if you need to copy the key, see its scopes, or deactivate it.
Set as default account: instruct the CLI to interact with 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.

Validate hs-meta.json config files

When creating an app, the extension will highlight any type inconsistencies in your *-hsmeta.json configuration files in your project. Learn more about app configuration in the reference documentation. Validate app configuration files

CMS file management

In the Remote file system (default account) section of the extension, you can view, upload, and manage files stored in the default account’s developer file system, which will reflect the files in the account’s design manager. The files displayed in this section are read-only. Below, learn how to view, fetch, upload, watch, delete, and create new files.

View files

To view the default account’s files, click to expand the Remote File System section in the left sidebar. You can refresh this view by clicking the … options icon and selecting Refresh. remote-file-system-refresh

Upload files

To upload a new file or folder to the account:

Click the … options icon, then select Upload.

Select the file or folder that you want to upload to the account.
Enter the destination path where the file or folder will live in HubSpot, including any file extensions (e.g. /my-theme/images/examplefile.jpg). You can nest files within another folder by including those folders in the path.

Press Enter to upload the file. The file system viewer will then update after upload. If an error occurs during upload, it will display in the bottom right of VS Code.

Watch folders

You can set a watch on a folder to automatically upload changes within the folder on save. To watch a folder:

Click the … options icon, then select Watch.

Select the folder that you want to watch.
Enter the destination path where the folder will live in HubSpot, then press Enter.

The extension will display a sync icon next to the folder in the left sidebar to indicate that it’s being watched.
To end a watch, right-click the folder being watched, then select End Watch

Please note: only one file or folder can be watched at a time. To watch multiple files or folders simultaneously, you can instead watch the root directory or other parent directory.

Delete and fetch files

To delete a file or folder from the account:

Right-click the file or folder that you want to delete, then select Delete.
You’ll then be prompted to confirm whether you want to delete it. Click Okay to confirm the deletion.

To download a file or folder from the account to your local environment:

Right-click the file or folder that you want to fetch, then select Fetch.
You’ll then be prompted to select the folder that you want to download it to.

Create new files

To generate scaffolded files for new CMS assets in VS Code:

In the left sidebar, click the Explorer icon to view your working directory.
Right-click the File explorer panel and select one of 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. You can add another serverless function to the folder by right-clicking the folder, then selecting New serverless function.

HubL Language support

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

Supported HubL syntax

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 + /.
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.

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.

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.
Then, in the settings search bar, search for Editor Parameter Hints Enabled and ensure that the checkbox is selected.

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 "... %}

Please note: autocomplete will not pull in HubSpot 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.

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.

Platform

Local development

Third-party tools

SDKs

Install the HubSpot Visual Studio Code extension

Install the extension