Install and use the HubSpot Visual Studio Code extension

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.

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.

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.

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.

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.

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.

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.

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

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. 

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.

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

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.

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.
  

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:

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

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

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.

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.

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.