Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Alpine.js IntelliSenseNew to Visual Studio Code? Get it now.

Alpine.js IntelliSense

Adrian Wilczyński

|
69,994 installs
| (4) | Free
Simple IntelliSense & Snippets for Alpine.js framework.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Alpine.js IntelliSense

Simple IntelliSense & Snippets for Alpine.js framework.

IntelliSense

IntelliSense for Alpine's directives.

Screenshot - Directives

Snippets

Screenshot - Snippet

Prefix Body
x-if <template x-if="${1:true}"> $0 </template>
x-for <template x-for="${1:item} in ${2:items}"> $0 </template>
x-for-key <template x-for="${1:item} in ${2:items}" :key="${3:item}"> $0 </template>
x-for-index <template x-for="(${1:item}, ${2:index}) in ${3:items}" :key="$2"> $0 </template>
x-bind:class x-bind:class="{ '${1:hidden}': ${2:foo} }"
x-bind x-bind:${1:attribute}="${2:expression}"
$el $el
$refs $refs.${1:name}
$event $event
$dispatch $dispatch('${1:custom-event}', ${2:{ foo: 'bar' }})
$nextTick $nextTick(${1:() => { console.log($event.target.innerText) }});
$watch $watch('${1:open}', ${2:value => console.log(value)})
.away .away
.prevent .prevent
.stop .stop
.window .window
.document .document
.once .once
.debounce .debounce.${1:750}
.transition .transition
alpine-cdn <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v${1:2.x.x}/dist/alpine.js" defer></script>
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft