Install and use the HubSpot VS Code extension

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.

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.

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.

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.

Once you've opened a folder in VS Code, the extension will check for authenticated accounts in a hubspot.config.yml file. In the left sidebar, the extension 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.

• 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.

Using the extension, you can view, upload, and manage files stored in the default account's developer file system. In the left sidebar of VS Code, under Remote file system, the extension will display read-only copies of the files within the account's design manager. 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 download a file or folder from the account to your local environment,  hover over the file or folder that you want to fetch, then select Fetch. The asset will then be downloaded to your working directory.

To upload a new file or folder to the account:

• Click the ... options icon, then select Upload.

• In the dialog box, select the file or folder you want to upload.
• Enter the destination path where the file or folder will live in HubSpot, including 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.

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 the deletion. Click Okay to confirm.

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.

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.

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.