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).
• ESLint diagnostics are shown for JavaScript inside matching Button-Card templates when an ESLint configuration is available in the workspace.
• "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.
• Now includes ESLint support!

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

ESLint

ESLint doesn't support the linting of embedded JavaScript within YAML files by default. However, the extension extracts JavaScript from Button-Card [[[ ... ]]] templates and runs ESLint against those snippets in the background. Feedback is mapped back to the original YAML so lint errors appear on the embedded JavaScript code inline just like you're used to.

You will need to have ESLint installed in your project for linting to work. Syntax highlighting and embedded JavaScript language support still work normally when ESLint is not installed.

The extension will pick up your project's ESLint configuration if available. If no ESLint configuration is available, it falls back to syntax-only JavaScript parsing. I strongly recommend adding the globals below to avoid false positives since the JavaScript templates have access to Home Assistant and Button-Card specific variables that ESLint would otherwise not recognise.

Recommended ESLint Configuration

Install ESLint in the project that contains your Button-Card templates:

npm install --save-dev eslint

Then add an eslint.config.mjs file in the project root:

export default [
  {
    files: [
      '**/*.yaml.button-card-*.js',
      '**/*.yml.button-card-*.js'
    ],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'script',
      globals: {
        entity: 'readonly',
        entities: 'readonly',
        states: 'readonly',
        variables: 'readonly',
        user: 'readonly',
        hass: 'readonly',
        config: 'readonly',
        helpers: 'readonly',
        console: 'readonly',
        window: 'readonly',
        document: 'readonly',
        localStorage: 'readonly',
        setTimeout: 'readonly',
        clearTimeout: 'readonly',
        setInterval: 'readonly',
        clearInterval: 'readonly',
        fetch: 'readonly',
        cbcJS: 'readonly',
        CBCError: 'readonly',
        CBCWarn: 'readonly'
      }
    },
    rules: {
      'no-undef': 'error',
      'no-unused-vars': ['warn', {
        args: 'none',
        varsIgnorePattern: '^_',
        caughtErrors: 'none'
      }],
      'no-redeclare': 'error',
      'no-unreachable': 'error',
      'no-constant-condition': 'warn',
      eqeqeq: ['warn', 'smart'],
      curly: ['warn', 'multi-line'],
      'no-var': 'error',
      'prefer-const': 'warn',
      'object-shorthand': 'warn',
      'no-console': 'off'
    }
  }
];

VSCode Settings

{
  "buttonCardJs.eslint.enable": true, // (true|false)
  "buttonCardJs.eslint.run": "onType" // (onType|onSave)
}