Alpine.js Tools: IntelliSense and Syntax Highlighting for VS Code

Alpine.js Tools is a free, open source VS Code extension that adds JavaScript syntax highlighting inside Alpine directives, hover documentation for every directive and magic property, workspace-aware IntelliSense completions, unknown-directive diagnostics with quick fixes, Go to Definition, and snippets across HTML, EJS, PHP, Twig, Nunjucks, Blade, Liquid, and Jinja2.

Available now on the Visual Studio Code Marketplace, Open-VSX, and GitHub.

What’s New Since Launch

The extension has grown well past its initial feature set. Since the original release:

• Liquid (Shopify) and Jinja2 (Python: Flask, Django, Ansible) joined the supported language list.
• Workspace-aware completions for $refs and $store shipped, resolving actual x-ref names and Alpine.store() registrations from the open project instead of offering generic magic-property completions alone.
• Directive value completions were added, suggesting component names inside x-data and reactive property names inside other directive values, both pulled from the current file and workspace.
• Modifier completions arrived: typing . after a directive name now lists the valid modifiers for that specific directive.
• Unknown-directive diagnostics were added, flagging unrecognized x-* attributes with a Quick Fix suggestion when a close match exists.
• Go to Definition now jumps from x-data="componentName" straight to its Alpine.data() registration.
• Plugin directive support (x-intersect, x-collapse, x-mask, x-sort, x-anchor, x-trap) was added, with the same IntelliSense and hover treatment as core directives.

The State of Alpine.js Tooling in VS Code

Alpine.js has grown into a widely adopted framework for adding interactivity to server-rendered HTML, but the VS Code extension ecosystem around it has not kept pace. The most installed Alpine extension has been effectively unmaintained since 2020 and covers only Alpine v2. It provides no JavaScript highlighting inside directive attribute values, no hover documentation, and no support for file types other than .html. Alpine.js Tools was built from scratch to address that gap with full Alpine 3 coverage and support for the template languages developers actually use alongside it.

Features

JavaScript Syntax Highlighting Inside Alpine Directives

The most significant limitation of existing Alpine extensions is that directive attribute values are treated as plain HTML strings. Expressions like x-data="{ open: false, toggle() { this.open = !this.open } }" and @click="count++" receive no JavaScript tokenization, no color differentiation between operators, strings, and identifiers, and no syntax error visibility.

Alpine.js Tools solves this with a TextMate injection grammar that targets x-*, :*, and @* attribute values and injects source.js into those ranges. The injection fires across all supported host languages using a single grammar file with no duplication.

Hover Documentation for Every Directive and Magic Property

Every Alpine 3 directive and magic property includes a description and a direct link to the official Alpine.js documentation. Hovering over x-transition, $dispatch, or x-teleport surfaces the relevant explanation without leaving the editor. Plugin directives (x-intersect, x-collapse, x-mask, x-sort, x-anchor, x-trap) now get the same hover treatment, each linking to its specific plugin’s documentation.

Directives covered include: x-data, x-init, x-show, x-bind, x-on, x-text, x-html, x-model, x-modelable, x-for, x-transition, x-effect, x-ignore, x-ref, x-cloak, x-teleport, x-if, and x-id.

Magic properties covered include: $el, $refs, $store, $watch, $dispatch, $nextTick, $root, $data, $id, and $persist.

Workspace-Aware IntelliSense Completions

Typing $ inside any Alpine expression triggers completions for every magic property, with type signatures, descriptions, and tab-stop-aware insert text. This is no longer limited to generic completions: typing $refs. lists every x-ref name actually declared in the current file, and typing $store. lists every Alpine.store('name', ...) registration found across the workspace’s JS, TS, HTML, and template files, backed by a file-system watcher that keeps the list current as the project changes.

Directive Value Completions

Inside x-data="…", the extension suggests Alpine.data('name', ...) component names pulled from the workspace. Inside any other directive value, x-show="…", @click="…", and similar, it suggests the reactive property names extracted from the nearest x-data object literal in the current file, so referencing state you just declared doesn’t require retyping or memorizing it.

Modifier Completions

Typing . after any directive name lists the valid modifiers for that specific directive, filtering out any already applied in the current chain:

Directive	Modifiers
@event.	prevent, stop, self, window, once, passive, debounce, throttle, plus key names (enter, escape, ctrl, shift, meta, and more)
x-model.	lazy, number, boolean, trim
x-transition.	enter, leave, opacity, scale, origin-*
:attr. / x-bind:attr.	camel, dot, attr

Unknown Directive Diagnostics and Quick Fixes

Any x-* attribute that isn’t a recognized Alpine core or plugin directive is underlined with a warning, debounced 500ms and cleared as you type. When a close match exists, for example a typo like x-daat instead of x-data, a lightbulb Quick Fix action replaces it in one click. Core directives and official plugin directives are never flagged.

Go to Definition for Alpine Components

Pressing F12 (or Ctrl+Click) anywhere inside x-data="componentName" jumps directly to the matching Alpine.data('componentName', ...) registration in the workspace, across JS, TS, HTML, and template files. If multiple registrations exist, all of them are shown. Inline object literals (x-data="{ open: false }") are intentionally skipped, since there’s no separate definition to navigate to.

Plugin Directive Completions

x-intersect, x-collapse, x-mask, x-sort, x-anchor, and x-trap now appear in VS Code’s HTML attribute IntelliSense alongside the core directives, each with hover descriptions and a link to its specific plugin’s documentation.

Snippets

41 snippets are available across HTML, EJS, PHP, Twig, Nunjucks, Blade, Liquid, Jinja-HTML, and JavaScript: directive attribute snippets with tab stops, full <template> block snippets for x-for and x-if, Alpine.data() and Alpine.store() scaffolds for JavaScript files, standalone modifier snippets (.prevent, .stop, .debounce, .throttle, .once, .window, .outside), and plugin directive snippets for x-intersect, x-collapse, x-mask, x-sort, and x-anchor.

Supported File Types

Alpine.js Tools activates for the following language IDs: html, ejs, php, twig, nunjucks, blade, liquid, and jinja-html. Jinja2 templates using the plain .html extension, the common Flask and Django case, are already covered by the html language support with no separate Jinja extension required. The JavaScript injection grammar targets text.html.basic, text.html.ejs, text.html.php, and text.html.twig host scopes, so highlighting works correctly in each file type without separate grammar files per language.

Compatibility with EJS Colorizer

Alpine.js Tools is designed to compose cleanly with EJS Colorizer, the companion VS Code extension for EJS syntax highlighting. The injection grammar targets text.html.ejs by scope name, which EJS Colorizer registers as a named, stable host scope. Both extensions can be active simultaneously with no tokenization conflicts.

How It Works

The extension is built on three VS Code contribution points. The injection grammar uses a begin/end rule with an Oniguruma backreference to handle both single and double quoted attribute values in a single pattern. The Custom Data file registers Alpine directives as known HTML attributes, enabling hover docs and attribute name completions through VS Code’s built-in HTML language service. Snippets are registered via the standard VS Code snippets API with per-language scope declarations.

The TypeScript activation file is intentionally minimal. All colorization and hover behavior is declarative, with no runtime grammar processing.

Known Issues

x-data property completions use a heuristic (regex-based) extraction from the nearest x-data object literal. Complex expressions, computed keys, or spread operators won’t be detected. $store name completions require Alpine.store('name', ...) to appear somewhere in a workspace JS, TS, or HTML file; stores registered dynamically at runtime won’t be listed. The :shorthand hover may occasionally trigger inside CSS pseudo:selector values, hovering away dismisses it.

Installation

Search for Alpine.js Tools in the VS Code Extensions panel, or install directly from the Marketplace listing. The extension requires VS Code 1.116.0 or later and has no runtime dependencies.

Source code is available at github.com/ConnorOnTheWeb/alpinejs-tools.