Button Card Javascript Syntax Highlighting in VSCode

[wfurphy]

Hi there,

I wrote this plugin for Visual Studio Code that provides syntax highlighting of Javascript code blocks in YAML which are enclosed by triple square brackets ([[[ ... ]]]). I released it a little while ago but realised that I have never let you know about it directly.

It's available on the VSCode Marketplace and the Open VSX Registry.

Thought I'd share in the hope that you can make some use of it or share it with others who can.

Thanks for all your fine work on button-card, my dashboards would be useless without it.

Will

[RomRider]

That's amazing, thanks a lot 👍 ! I'll add this to the documentation page !
I'll keep the issue open as a reminder !

[dcapslock]

@wfurphy not sure if you would still update your plugin. PR #942 will allow for nested templates, such that the bracket pairs may be infinite, but expected to only be a few levels. How would your plugin handle this. Would it need to be updated?

[wfurphy]

@dcapslock Sorry for the belated reply here. I'll look into this and see if the plugin needs to be updated. I'll let you know what I find.

[wfurphy]

@dcapslock I'm sorry for the ULTRA belated reply here 😶‍🌫️, I only just remembered this post was here. I have updated it (hopefully you saw in VSCode?) a while ago to support the additional square brackets [[[[ ... ]]]] or even more.

I've just recently done another update to bring ESLint support inline too, so you can make sure your JS is correct as you code!

Updates should appear available if you already have it installed otherwise find it on the VSCode Marketplace and the Open VSX Registry.

[lisz8]

If I may ask: is it possible to get intellisense hints for custom classes? I'm thinking about JSDoc or similar. E.g. there's a HA frontend module with some js class/object:

export class MyUiHelpers {
  haInput(..) { return `<ha-input..`; }
  dropDown(..) {..}
};
window.myUiHelpers = new MyUiHelpers();

And you can use it in a button card:

variables:
  var1: |
    [[[
      /** @type MyUiHelpers */
      const h = window.myUiHelpers;
      h.<intellisense please!>
    ]]]

You can't import the class into a yaml file, and despite the type being indicated by a JSDoc comment, intellisense does not work.

---

I managed to get it working, not perfectly, but well enough. I moved the javascript code into separate .js files, and after editing, I run a small program that appends the js code to the resulting .yaml files (and copies them to the desired locations where Home Assistant expects them). This gives me full intellisense+JSDoc when working with javascript code.

I have a bunch of helper functions, and constantly checking their signatures and the meaning of each argument was a big problem for me :)