For fast HubSpot CMS Hub development with JetBrains IDEs (Webstorm, PHPStorm, Pycharm, etc.).
Those files adapts the HubSpot Visual Studio Code Extension for JetBrains IDEs (Webstorm, PHPStorm, Pycharm, etc.) and it currently supports:
Syntax highlighting for the HubL templating language¹- Autocomlete for common HubL tags, filters, module fields, and functions
Bracket wrapping, indentation, and other helpful editor features²
If you're new to CMS Hubspot, check out how to get started with local development. and the HubL templating language.
Autocompletion use Live templating of JetBrains IDEs (Webstorm, PHPStorm, Pycharm, etc.).
Go to Get started section to use it quickly.
Or see documentation of sharing live templates here if you want to know more.
Copy the file templates/hubspot.xml in the templates directory of the IDE configuration directory (see this page to know where is this folder on your OS).
On Debian systems, copy the file in ~/.config/[JetbrainsIDEName]/templates.
Copy the file in ~/Library/Application Support/JetBrains/[JetbrainsIDEName]/jba_config/templates.
In your IDE (Webstorm, PHPStorm, Pycharm, etc.), go to settings or Preferences section (IDE name | Preferences for macOS or File | Settings for Windows and Linux), and choose Editor > Live templates (or search Live templates) and check the Hubspot box.
When you have restarted your IDE, you will be able to type first letters of the abbreviation you want and then press Ctrl + Space and you'll have Hubspot propositions.
When autocompletion is done, you can switch between variables of the inserted code by pressing tab. But if Emmet is activated, this press on tab will create in html files a tag with the string you've just entered.
Deactivate it: go to settings or Preferences section (IDE name | Preferences for macOS or File | Settings for Windows and Linux), and choose Editor > Emmet (or search Emmet), then unckeck Enable Emmet on each subsection (HTML, CSS, JSX).
Just change what you expand abbreviation with: go to settings or Preferences section (IDE name | Preferences for macOS or File | Settings for Windows and Linux), and choose Editor > Emmet (or search Emmet), then choose something else than tab for the Expand abbreviation with option.
For simplicity reasons, all abbreviations are setting for HTML, CSS, and JSON files. If it's not efficient enough, we will change it.
¹. To create a Hubl specific syntax higlighting, see this documentation.
². Activate Jinja language support to have a part of these features.