Alpine.js Tools

Alpine.js Tools is a free, open source Visual Studio Code extension that delivers complete Alpine.js 3 tooling across eight template languages. The most widely installed Alpine extension has been unmaintained since 2020 and covers only Alpine v2 with no JavaScript highlighting inside directive values. Alpine.js Tools was built from scratch to address that gap.

The extension activates for html, ejs, php, twig, nunjucks, blade, liquid, and jinja-html files. Jinja2 templates that keep the plain .html extension (the common Flask/Django case) are already covered by the html support. It requires no dependencies and no configuration, and works with any Alpine.js v3 project.

Features

• JavaScript syntax highlighting inside Alpine directives

  Attribute values on x-*, :, and @ attributes are tokenized as full JavaScript. Operators, strings, arrow functions, ternaries, and method calls all receive correct colors from the active theme. A single injection grammar targets the host scope for every supported language: text.html.basic, text.html.ejs, text.html.php, text.html.twig, text.html.nunjucks, text.blade.php, text.html.liquid, and text.html.jinja, with no per-language duplication. Template-delimiter output ({{ ... }}, {% ... %}) inside a directive value is passed through untouched rather than mis-tokenized as JavaScript.

• Hover documentation for all directives and magic properties

  Hover over any Alpine directive, shorthand, or magic property to see a description and a direct link to the official Alpine.js documentation. All 18 core directives are covered: 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. Shorthand forms are handled: hovering @click surfaces x-on docs with a note that it is shorthand for x-on:click. Dot-modifiers are also handled: hovering x-model.number shows x-model docs. All 11 magic properties are covered: $el, $refs, $store, $watch, $dispatch, $nextTick, $root, $data, $id, $persist, and $event.

• Magic property completions

  Typing $ inside any Alpine expression triggers completions for all magic properties with type signatures, descriptions, and tab-stop-aware insert text. After $refs., completions list every x-ref name declared in the current file. After $store., completions list every Alpine.store('name', ...) registration found across workspace JavaScript, TypeScript, HTML, Liquid, and Jinja files, backed by a file-system watcher.

• Modifier completions

  Typing . after an Alpine directive name surfaces the valid modifiers for that directive. Event directives offer prevent, stop, self, window, once, passive, debounce, throttle, and key names. x-model offers lazy, number, boolean, and trim. Already-applied modifiers in a chain are filtered out automatically.

• Unknown directive diagnostics

  Any x-* attribute that is not a recognized Alpine core or plugin directive is underlined with a Warning. A "did you mean" hint is shown when a close match exists, and a Quick Fix lightbulb action offers a one-click replacement. All 18 core directives and official plugin directives are never flagged. Diagnostics are debounced at 500 ms and cleared as you type.

• Go to Definition for Alpine components

  Press F12 (or Ctrl+Click) anywhere inside x-data="componentName" to jump directly to the Alpine.data('componentName', ...) registration in workspace JavaScript, TypeScript, HTML, Liquid, or Jinja files. Multiple registration sites are all shown. Inline object literals are intentionally skipped.

• Plugin directive completions

  x-intersect, x-collapse, x-mask, x-sort, x-anchor, and x-trap appear in VS Code's HTML attribute IntelliSense alongside core directives, with hover descriptions and links to each plugin's documentation.

• Directive value completions

  Inside x-data="...", completions suggest Alpine.data('name', ...) component names from the workspace. Inside any other Alpine directive value, completions suggest the reactive property names extracted from the nearest x-data object literal in the current file.

• Snippets

  41 snippets available across HTML, EJS, PHP, Twig, Nunjucks, Blade, Liquid, Jinja-HTML, and JavaScript: all 18 directive attributes, template-for and template-if full block wrappers, Alpine.data() and Alpine.store() scaffolds, magic property snippets, modifier snippets, and all official plugin directives including their variants.

Supported File Types

html • ejs • php • twig • nunjucks • blade • liquid • jinja-html

Liquid support targets files opened with the liquid language id (used by the Shopify Theme Check and vscode-liquid extensions). Jinja2 support targets the jinja-html language id (used by the Jinja HTML extension); Jinja2 files kept as plain html are already covered by the extension's HTML support. The JavaScript injection grammar targets each language's host scope, so highlighting works correctly in every file type without separate grammar files per language.

Compatibility with EJS Colorizer

Alpine.js Tools is designed to compose cleanly with EJS Colorizer. 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. Alpine directive values inside .ejs files receive full JavaScript highlighting from Alpine.js Tools on top of the EJS structure provided by EJS Colorizer.

Known Limitations

• x-data property completions use a heuristic (regex) to extract properties from the nearest x-data object literal. Complex expressions, computed keys, or spread operators will not be detected.
• $store name completions require Alpine.store('name', ...) to appear in a workspace file. Stores registered dynamically at runtime will not be listed.
• The : shorthand hover may occasionally trigger inside CSS pseudo:selector values. Hover away to dismiss.

Requirements

• VS Code 1.60.0 or later
• No runtime dependencies
• Works with any Alpine.js v3 project

Installation

Search for Alpine.js Tools in the VS Code Extensions panel, or install directly from the Marketplace. Source code is available on GitHub under the MIT license.

Related Extensions