Alpine.js Tools

Alpine.js Tools is a free, open source Visual Studio Code extension that delivers complete Alpine.js 3 tooling across six 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, and blade files. 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. The injection grammar targets text.html.basic, text.html.ejs, text.html.php, and text.html.twig scopes using a single grammar file with no per-language duplication.

• 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 9 magic properties are covered: $el, $refs, $store, $watch, $dispatch, $nextTick, $root, $data, and $id.

• 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, and HTML 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 or TypeScript files. Multiple registration sites are all shown. Inline object literals are intentionally skipped.

• Plugin directive completions

  x-intersect, x-collapse, x-mask, x-sort, and x-anchor 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, 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 five official plugin directives including their variants.

Supported File Types

html • ejs • php • twig • nunjucks • blade

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