hubspot-cms-jetbrains's Introduction

hubspot-cms-JetBrains

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.

About

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.

Getting started

Copy one file

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

Linux

On Debian systems, copy the file in ~/.config/[JetbrainsIDEName]/templates.

MAC

Copy the file in ~/Library/Application Support/JetBrains/[JetbrainsIDEName]/jba_config/templates.

Activate the Hubspot live template

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.

Restart you IDE

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.

Abbreviations documentation

Full documentation

Troubleshootings

Emmet

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.

If you're not using Emmet

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

If you're using Emmet

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.

File types

For simplicity reasons, all abbreviations are setting for HTML, CSS, and JSON files. If it's not efficient enough, we will change it.

Notes

¹. To create a Hubl specific syntax higlighting, see this documentation.

². Activate Jinja language support to have a part of these features.

hubspot-cms-jetbrains's People

Contributors

Stargazers

Watchers

hubspot-cms-jetbrains's Issues

Syntax highlightning and code check

In an attempt to use PhpStorm to develop for Hubspot, I found your repository and after some trying found out how to place the hubspot.xml into proper directory on Mac which is under ~/Library/Application Support/JetBrains/PhpStorm2021.3/jba_config/templates for those that use JetBrains Acount to sync settings and plugins (probably everyone). It took some time and even JetBrains documents are not accurate on that one (stating inaccurate location).

So I got it working (although not sure why sometimes they are not expanding like get_asset_url() in CSS?) but it makes a little sense to have that expansion when syntax highlighting is not working and file screams with errors from interfering functions and constructs in the CSS.

Have you tried to make syntax highlighting?

What about using Language Injection to simplify adding Hubspot to existing HTML/CSS/JS?

Recommend Projects

sylvaintirreau / hubspot-cms-jetbrains Goto Github PK