Button-Card Javascript Support in YAML for VSCode

This is a very niche extension for Visual Studio Code which provides embedded Javascript language support for code blocks in YAML enclosed by triple+ square brackets ([[[ ... ]]]). Used when configuring the advanced javascript templates properties of Button-Card cards for Home Assistant Lovelace dashboards.

• Javascript is now treated as an embedded language (not just YAML string content with syntax highlighting).
• "Double quoted" and block YAML strings supported.
• Support for Button-Card 7.0+ nested templates with longer bracket sequences like [[[[ ... ]]]]+.
• Works with the standard YAML language and the home-assistant YAML language created by the Home Assistant Config Helper plugin.

:raising_hand_man: I made this while I was working on Creative Button Card Templates and could not handle writing any more JS without syntax highlighting. Hopefully it can also provide you with relief from the same, same, string game!

Preview

The preview above is using the OneDark Pro theme, however this plugin will work with any theme that supports yaml and javascript.

Installation

Install from Visual Studio Marketplace or Open VSX Registry

Usage

Once installed you don't need to do anything else. Just open a YAML file that contains [[[ ... ]]] blocks and you should see the JavaScript syntax highlighting and language features working inside those blocks.

The JavaScript in single line "[[[ ... ]]]" templates needs to be terminated with a closing semicolon (;) or else it can break the syntax highlighting in some cases.