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, IntelliSense completions, and snippets across HTML, EJS, PHP, Twig, Nunjucks, and Blade. It is available now on the Visual Studio Code Marketplace and GitHub.
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.
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, and $id.
IntelliSense Completions
A built-in completion provider triggers on $ inside Alpine directive values and HTML and EJS files, offering completions for all magic properties with correct VS Code completion item kinds. Future versions will add workspace-aware resolution of $store and $refs targets defined in the open project.
Snippets
Snippets are provided for all directives as attribute insertions with tab stops, full <template> block snippets for x-for and x-if, Alpine.data() and Alpine.store() scaffolds for JavaScript files, and standalone modifier snippets for .prevent, .stop, .debounce, .throttle, .once, .window, and .outside. Snippets are registered for HTML, EJS, PHP, Twig, Nunjucks, JavaScript, and Blade.
Supported File Types
Alpine.js Tools activates for the following language IDs: html, ejs, php, twig, nunjucks, and blade. The JavaScript injection grammar targets text.html.basic, text.html.ejs, text.html.php, and text.html.twig host scopes, meaning 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.
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.