alpinejs-comment-hl

Add Javascript syntax highlighting for Alpine JS x- attributes by adding a comment

  x-data="{
    // javascript
    open: false
  }"

It also adds normal greyed-out comments inside the x- attributes.

  x-data="{
    // just a grey comment
    open: false
  }"

Supported comments

// js
/* js */
// javascript
/* javascript */
// MARK: js
/* MARK: js */
// MARK: javascript
/* MARK: javascript */
// #region js
/* #region js */
// #region javascript
/* #region javascript */

Component linking

When you use an external Alpine component via x-data, the extension creates a clickable link on the component name. Cmd+click (or Ctrl+click) navigates directly to the component file.

<div x-data="myComponent()">

The extension searches the workspace for a matching .js or .ts file, supporting both camelCase (myComponent.js) and kebab-case (my-component.js) filenames.

Supported Files

• Html
• Blade
• Jinja
• Liquid
• Nunjucks
• Php
• Twig

Credit

This started as a fork of Sperovita/alpinejs-syntax-highlight

Based off of textmate syntaxes from Vetur