Skip to content

Latest commit

 

History

History
3397 lines (2571 loc) · 37.5 KB

README.md

File metadata and controls

3397 lines (2571 loc) · 37.5 KB
Raw

Vue Ecosystem Snippets

Snippets for the modern Vue ecosystem - including Nuxt 3, Pinia, VueUse, Vue Router & Vue Macros.

Vue Nuxt TypeScript

Features

  • Only the latest Vue syntax
  • Over 200 snippets
  • TypeScript-first
  • Nuxt 3, Pinia, VueUse, Vue Router & Vue Macros support
  • Strategically placed tabstops
  • Prefixes created with exact-match in mind
  • GitHub Copilot compliant
  • Auto-generated documentation

Setup

Not mandatory, but highly recommended.

Look for it in user settings, or edit the settings.json directly:

"editor.formatOnSave": true,

// Tab complete snippets when their prefix match.
"editor.tabCompletion": "onlySnippets"

Snippet syntax

Tabstops

  • $1, $2, $3 specify cursor locations, in order in which tabstops will be visited
  • $0 denotes the final cursor position
  • Multiple occurrences of the same tabstop are linked and updated in sync

Placeholders

  • Tabstops with default values → ${1:name}

Choices

  • Tabstops with multiple values → ${1|one,two,three|}.
  • Truncated in documentation, for easier viewing → ${1|one,...|}.

Snippets

Vue SFC

.vue files

Prefix Name Body
vbase Vue SFC 
<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>
vbase:full Vue SFC with style | postcss 
<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<style lang="postcss" scoped>
  
</style>
vbase:full:css Vue SFC with style | css 
<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<style lang="css" scoped>
  
</style>
vbase:full:scss Vue SFC with style | scss 
<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<style lang="scss" scoped>
  
</style>
vbase:full:less Vue SFC with style | less 
<script lang="ts" setup>
$0
</script>

<template>
  $1
</template>

<style lang="less" scoped>
  
</style>
vscript Vue script setup | ts 
<script lang="ts" setup>
$0
</script>
vscript:js Vue script setup | js 
<script setup>
$0
</script>
vtemplate Vue template 
<template>
  $0
</template>
vstyle Vue scoped style | postcss 
<style lang="postcss" scoped>
$0
</style>
vstyle:lang Vue style with language option 
<style lang="${1|css,postcss,...|}"${2|scoped,|}>
$0
</style>
vstyle:css Vue scoped style | css 
<style lang="css" scoped>
$0
</style>
vstyle:scss scoped style | scss 
<style lang="scss" scoped>
$0
</style>
vstyle:less scoped style | less 
<style lang="less" scoped>
$0
</style>
vstyle:module Vue style with CSS modules 
<style module$1>
$0
</style>
vstyle:src Vue scoped style with src 
<style scoped src="$1">
$0
</style>

Template

Prefix Name Body
slot slot 
<slot$1>$0</slot>
template / vtemplate template 
<template>$0</template>
component / vcomponent component 
<component>$0</component>
nslot named slot 
<slot name="${1:default}">
  $0
</slot>
ntemplate named template 
<template #${1:default}>
  $0
</template>
vcomponent Vue component 
<component :is="$1">$0</component>
vKeepAlive Vue KeepAlive 
<KeepAlive $1>
  $0
</KeepAlive>
vTeleport Vue teleport 
<Teleport to="$1">
  $0
</Teleport>
vTransition Vue Transition 
<Transition $1>
  $0
</Transition>
vTransition:name / nTransition Vue Transition with name 
<Transition name="$1" $2>
  $0
</Transition>
vTransition:type Vue Transition with type 
<Transition type="${1|transition,animation|}" $2>
  $0
</Transition>
vTransition:appear Vue Transition with appear 
<Transition appear $1>
  $0
</Transition>
vTransitionGroup Vue TransitionGroup 
<TransitionGroup name="$1" as="${2|ul,div,...|}" $3>
  $0
</TransitionGroup>
vSuspense Vue Suspense 
<Suspense>
  $0
</Suspense>
vSuspense:fallback Vue Suspense with fallback 
<Suspense>
  $0
  <template #fallback>
    $1
  </template>
</Suspense>
vtext v-text 
v-text="$1"
vhtml v-html 
v-html="$1"
vshow v-show 
v-show="$1"
vif / if v-if 
v-if="$1"
veif / elif v-else-if 
v-else-if="$1"
velse / else v-else 
v-else
vfor v-for 
v-for="${2:item} in ${1:items}" :key="$2$3"
vfori v-for (indexed) 
v-for="(${2:item}, ${3:i}) in ${1:items}" :key="${4:$3}"
vforr v-for range 
v-for="${1:n} in ${2:5}" :key="$1"
vemit / emit emit 
emit('$1'$2)
vemit:pass Vue pass emit 
@${1|click,input,...|}="\$emit('${2:$1}', \$event)"
von v-on 
v-on="${1:emits}"
von:event / voe event handler 
@$1="$2"
von:click / voc click handler 
@click="${1:onClick}"
von:input / voi input handler 
@input="${1:onInput}"
von:update update handler 
@update="${1:onUpdate}"
von:change change handler 
@change="${1:onChange}"
von:blur blur handler 
@blur="${1:onBlur}"
von:focus focus handler 
@focus="${1:onFocus}"
von:submit submit handler 
@submit${1:.prevent}="${2:onSubmit}"
vbind v-bind 
v-bind="$1"
vbind:attrs v-bind attrs 
v-bind="\$attrs"
vbind:props v-bind props 
v-bind="\$props"
vbind:full v-bind props and attrs 
v-bind="[\$props, \$attrs]"
vmodel v-model 
v-model="$1"
vmodel:number v-model.number 
v-model.number="$1"
vmodel:trim v-model.trim 
v-model.trim="$1"
vmodel:custom custom v-model 
v-model:${1:custom}="$2"
vslot scoped slot 
v-slot="{$1}"
vpre v-pre 
v-pre="$1"
vonce v-once 
v-once
vmemo v-memo 
v-memo="[$1]"
vcloak v-cloak 
v-cloak
vkey Vue key 
:key="$1"
vref Vue ref 
ref="$1"
vname name property 
${1|name,:name|}="$2"
vis is property 
${1|is,:is|}="$2"
vb bind attribute 
:${1:prop}="${2:$1}"
va attribute 
${1:prop}="$2"
vclass / vc Vue classes 
:class="$1"
vclass:list / vca Vue classes list 
:class="[$1]"
vclass:cond / vcc Vue conditional classes 
:class="{ $1: $2 }"
vstyle Vue inline style 
:style="{ $1: $2 }"
vstyle:list Vue inline style list 
:style="[$1]"
vv Vue 
{{ $1 }}
vvt Vue i18n translation 
{{ t('$1') }}
vif:slot v-if slot defined 
v-if="\$slots.${1:default}"
vif:slot-prop v-if slot or prop defined 
v-if="\$slots.${1:label} || ${2:$1}"
vform form submit.prevent 
<form @submit${1:.prevent}="${2:onSubmit}">
  $0
</form>
vfor:template v-for in template 
<${1|template,div,...|} v-for="${3:item} in ${2:items}" :key="$3$4">
  $0
</$1>
vfori:template v-for (indexed) in template 
<${1|template,div,...|} v-for="(${3:item}, ${4:i}) in ${2:items}" :key="${5:$4}">
  $0
</$1>
vif:template v-if in template 
<${1|template,div,...|} v-if="$2">
  $0
</$1>
vtif template with v-if 
<template v-if="$2">
  $0
</template>
vdif div with v-if 
<div v-if="$2">
  $0
</div>

Style

Prefix Name Body
vbind v-bind 
v-bind($0)
deep :deep() 
:deep($1)
slot :slotted() 
:slotted($1)
global :global() 
:global($1)

Script

Script setup and composables

Prefix Name Body
vref / vr Vue ref 
const ${1:name} = ref($2)
vref:ts / vrt Vue ref (typed) 
const ${1:name} = ref<$2>($3)
vcomputed / vc Vue computed 
const ${1:name} = computed(() => $2)
vcomputed:ts / vct Vue computed (typed) 
const ${1:name} = computed<$2>(() => $3)
vcomputed:gs / vcgs Vue computed (get/set) 
const ${1:name} = computed({
  get: () => ${2},
  set: (${3:value}: ${4:string}) => {
    ${5}
  },
})
vreactive / vra Vue reactive 
const ${1:name} = reactive({$2})
vreactive:ts Vue reactive (typed) 
const ${1:name}: ${2:type} = reactive({$3})
vshallowRef Vue shallowRef 
const ${1:name} = shallowRef($2)
vtoRef Vue toRef 
toRef(${1:props}, '$2')
vtoRefs Vue toRefs 
toRefs(${1:props})
vunref Vue unref 
unref($1)
vreadonly Vue readonly 
readonly(${1:object})
vref:elem Vue element ref 
const ${1:elem} = ref<${2|HTMLInputElement,HTMLInputElement,...|} | null>(null)
vwatchEffect Vue watchEffect 
watchEffect(() => {
  $0
})
vwatch Vue watch source 
watch(${1:source}, (${2:val}) => {
  $0
})
vwatch:inline Vue watch inline 
watch(${1:source}, ${2:fn})
vwatch:getter Vue watch getter 
watch(() => ${1:source}, (${2:val}) => {
  $0
})
vwatch:multiple Vue watch multiple 
watch([${1:source1}, ${2:source2}], ([new${1/(.*)/${1:/capitalize}/}, new${2/(.*)/${1:/capitalize}/}]) => {
  $0
})
vwatch:immediate Vue watch immediate 
watch(${1:source}, (${2:val}) => {
  $0
}, { immediate: true })
vwatch:deep Vue watch deep 
watch(${1:source}, (${2:val}) => {
  $0
}, { deep: true })
vwatch:log / vwl Vue watch source | log 
watch(${1:source}, (${2:val}) => {
  console.log('$1:', $2)
})
vprops Vue defineProps 
${1:const props = }defineProps<${2:Props}>()
vprops:defaults Vue defineProps with defaults 
${1:const props = }withDefaults(defineProps<${2:Props}>(), {
  $0
})
vprops:js Vue defineProps without TS 
${1:const props = }defineProps({
  $2
})
vemits Vue defineEmits 
${1:const emit = }defineEmits<{
  ${2:click}: [${3:payload}: ${4:string}],$5
}>()
vemits:alt Vue defineEmits without TS 
${1:const emit = }defineEmits(['$2'])
vemits:old Vue defineEmits (old syntax) 
${1:const emit = }defineEmits<{
  (e: '${2:click}', ${3:payload}: ${4:string}): void,$5
}>()
vmodel Vue defineModel 
const ${1:modelValue} = defineModel<${2:string}>($3)
vemit Vue emit event 
emit('$1'$2)
vexpose Vue defineExpose 
defineExpose({
  $1
})
v:onMounted Vue onMounted 
onMounted(() => {
  $0
})
v:onBeforeMount Vue onBeforeMount 
onBeforeMount(() => {
  $0
})
v:onUnmounted Vue onUnmounted 
onUnmounted(() => {
  $0
})
v:onBeforeUnmount Vue onBeforeUnmount 
onBeforeUnmount(() => {
  $0
})
v:onUpdated Vue onUpdated 
onUpdated(() => {
  $0
})
v:onBeforeUpdate Vue onBeforeUpdate 
onBeforeUpdate(() => {
  $0
})
v:onErrorCaptured Vue onErrorCaptured 
onErrorCaptured(() => {
  $0
})
v:onActivated Vue onActivated 
onActivated(() => {
  $0
})
v:onDeactivated Vue onDeactivated 
onDeactivated(() => {
  $0
})
vprovide Vue provide 
provide(${1:key}, ${2:value})
vprovide:ts Vue provide (typed) 
provide<${1:string}>(${2:key}, ${3:value})
vinject Vue inject 
const ${1:value} = inject(${2:key})
vinject:ts Vue inject (typed) 
const ${1:value} = inject<${2:string}>(${3:key})
vinject:default Vue inject with default 
const ${1:value}  = inject(${2:key}, ${3:defaultValue})
vinjectkey Vue injection key 
const ${1:key} = Symbol('$2') as InjectionKey<${3:string}>
vslots Vue useSlots 
const slots = useSlots()
vattrs Vue useAttrs 
const attrs = useAttrs()
vimport / vim Import from vue 
import { $1 } from 'vue'

Code snippets

Useful vue snippets and helpers

Prefix Name Body
vcomposable / vdc Vue define composable 
export const use${1/(.*)/${1:/pascalcase}/} = () => {
  $0
  
  return {
    
  }
}
vcomposable:file / vdcf Vue define composable in file 
export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/} = () => {
  $0
  
  return {
    
  }
}
vuse / vu Use composable 
const ${2:$1} = use${1/(.*)/${1:/capitalize}/}($3)
vused / vud Use composable with destructuring 
const { $2 } = use${1/(.*)/${1:/capitalize}/}($3)
vmodel:manual Implement v-model manually 
const props = defineProps<{
  ${1:modelValue}: ${2:string}
}>()

const emit = defineEmits<{
  (e: 'update:$1', ${3:value}?: $2): void
}>()

const ${4:value} = computed({
  get: () => props.$1,
  set: (val: $2) => emit('update:$1', val),
})
v:has-slot Vue check for slots 
const slots = useSlots()
const hasSlot = (name: string) => !!slots[name]

Vue Router (script)

Prefix Name Body
vrouter Vue router 
const ${1:router} = useRouter()
vroute Vue route 
const ${1:route} = useRoute()
vrouter:create Create Vue router 
const router = createRouter({
  history: createWebHashHistory(),
  routes: ${1:routes},
  scrollBehavior(to, from, savedPosition) {
    $2
  }
})

Vue Router (template)

Prefix Name Body
vto Vue Router to 
${1|to,:to|}="$2"
vto:param Vue Router :to with param 
:to="`$1${${2:id}}$3`"
vto:obj Vue Router :to object 
:to="{ $1 }"
vto:name Vue Router :to name 
:to="{ name: '$1',$2 }"
vto:path Vue Router :to path 
:to="{ path: '$1',$2 }"
vview RouterView 
<RouterView>
  $0
</RouterView>
vlink RouterLink 
<RouterLink ${1|to,:to|}="$2">$3</RouterLink>
vlink:param RouterLink with param 
<RouterLink :to="`$1${${2:id}}$3`">$4</RouterLink>
vlink:obj RouterLink with object 
<RouterLink :to="{ $1 }">$2</RouterLink>
vlink:name RouterLink with name 
<RouterLink :to="{ name: '$1'$2 }">$3</RouterLink>
vlink:path RouterLink with path 
<RouterLink :to="{ path: '$1'$2 }">$3</RouterLink>

Pinia

Prefix Name Body
pstore Setup Pinia store 
import { defineStore } from 'pinia'

export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {
  $0
  
  return {
   
  }
})
pstore:options Setup Pinia store (Options) 
import { defineStore } from 'pinia'

export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', {
 state: () => ({
   $0
 }),
 getters: {},
 actions: {},
})
vuseStore / vus Use store 
const ${2:$1Store} = use${1/(.*)/${1:/capitalize}/}Store()

Nuxt (script)

Prefix Name Body
nfetch Nuxt useFetch 
const { data: ${1:data} } = await useFetch('$2'$3)
nfetch:cb Nuxt useFetch with callback 
const { data: ${1:data} } = await useFetch(() => '$2'$3)
nfetch:lazy Nuxt useLazyFetch 
const { pending, data: ${1:data} } = useLazyFetch('$2'$3)
nfetch:lazy:cb Nuxt useLazyFetch callback 
const { pending, data: ${1:data} } = useLazyFetch(() => '$2'$3)
nfetch:post Nuxt useFetch POST 
const { data: ${1:data} } = await useFetch('$2', {
  method: 'POST',
  body: ${3:body},$4
})
nasyncdata Nuxt useAsyncData 
const { data: ${1:data} } = await useAsyncData('${2:key}', () => $fetch('$3')$4)
nasyncdata:lazy Nuxt useLazyAsyncData 
const { pending, data: ${1:data} } = useLazyAsyncData('${2:key}', () => $fetch('$3')$4)
napp Nuxt useNuxtApp 
const app = useNuxtApp()
nappConfig Nuxt useAppConfig 
const appConfig = useAppConfig()
nruntimeConfig Nuxt useRuntimeConfig 
const config = useRuntimeConfig()
ncookie Nuxt useCookie 
const ${1:cookie} = useCookie('${2:$1}'$3)
ncookie:opts Nuxt useCookie with options 
const ${1:cookie} = useCookie('${2:$1}', { $3 })
ndata Nuxt useNuxtData 
const { data: ${2:$1} } = useNuxtData('${1:key}')
nerror Nuxt useError 
const ${1:error} = useError()
nstate Nuxt useState 
const ${1:state} = useState('${2:$1}'$3)
nstate:init Nuxt useState (init) 
const ${1:state} = useState('${2:$1}', () => $3)
nhead Nuxt useHead 
useHead({
  $1
})
nhead:title Nuxt useHead title 
useHead({
  title: $1,$0
})
npageMeta Nuxt definePageMeta 
definePageMeta({
  $1
})
npageMeta:title Nuxt definePageMeta title 
definePageMeta({
  title: '$1',$0
})
npageMeta:layout Nuxt definePageMeta layout 
definePageMeta({
  layout: '$1',$0
})
npageMeta:middleware Nuxt definePageMeta middleware 
definePageMeta({
  middleware: ['$1'$2],$0
})
nto Nuxt navigateTo 
navigateTo('$1'$2)
nto:obj Nuxt navigateTo object 
navigateTo({ $1 }$2)
nto:replace Nuxt navigateTo replace 
navigateTo('$1', { replace: true })
nto:external Nuxt navigateTo external 
navigateTo('$1', { external: true })
nto:redirect Nuxt navigateTo redirect 
navigateTo('$1', { redirectCode: ${2|301,302,...|} })
nto:name Nuxt navigateTo name 
navigateTo({
  name: '$1',$0
})
nto:path Nuxt navigateTo path 
navigateTo({
  path: '$1',$0
})
nplugin Nuxt plugin 
export default defineNuxtPlugin((nuxtApp) => {
  $1
})
nplugin:vue Nuxt plugin use vue package 
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use($1)
})
nmiddleware:route Nuxt route middleware 
export default defineNuxtRouteMiddleware((to, from) => {
  $1
})
nmiddleware:server Nuxt server middleware 
export default defineEventHandler((event) => {
  $1
})
napi Nuxt api route 
export default defineEventHandler(${1:async }(event) => {
  $2
  
  return {
    $3
  }
})
nplugin:server Nuxt server plugin 
export default defineNitroPlugin((nitroApp) => {
  $1
})
nreadBody Nuxt readBody 
const ${1:body} = await readBody(event)
ngetQuery Nuxt getQuery 
const { $1 } = getQuery(event)
ngetCookie Nuxt getCookie 
getCookie(event, '${1:cookie}')
nsetCookie Nuxt setCookie 
setCookie(event, '${1:cookie}', ${2:value})

Nuxt (template)

Prefix Name Body
nlink NuxtLink 
<NuxtLink ${1|to,:to|}="$2">$3</NuxtLink>
nlink:blank NuxtLink with target _blank 
<NuxtLink ${1|to,:to|}="$2" target="_blank" $3>$4</NuxtLink>
nlink:external NuxtLink with target external 
<NuxtLink ${1|to,:to|}="$2" external target="${3|_blank,_self|}" $4>$5</NuxtLink>
nlink:param NuxtLink with param 
<NuxtLink :to="`$1${${2:id}}$3`" $4>$5</NuxtLink>
nlink:obj NuxtLink with object 
<NuxtLink :to="{ $1 }" $2>$3</NuxtLink>
nlink:name NuxtLink with name 
<NuxtLink :to="{ name: '$1'$2 }" $3>$4</NuxtLink>
nlink:path NuxtLink with path 
<NuxtLink :to="{ path: '$1'$2 }" $3>$4</NuxtLink>
nloading NuxtLoadingIndicator 
<NuxtLoadingIndicator $1/>
nlayout NuxtLayout 
<NuxtLayout $1>$2</NuxtLayout>
nlayout:name NuxtLayout with name 
<NuxtLayout ${2|name,:name|}="$3">$4</NuxtLayout>
npage NuxtPage 
<NuxtPage $1/>
npage:static NuxtPage with static key 
<NuxtPage page-key="static" $1/>
nclient ClientOnly 
<ClientOnly $1>$2</ClientOnly>
nclient:fallbacks ClientOnly with fallback props 
<ClientOnly fallback-tag="${1:span}" fallback="${2:Loading...}">$3</ClientOnly>
nclient:fallback ClientOnly with fallback template 
<ClientOnly>
  <template #fallback>
    $0
  </template>
</ClientOnly>
nTeleport Nuxt Teleport 
<Teleport to="$1">
  $0
</Teleport>

VueUse (script)

Prefix Name Body
vRefAutoReset VueUse refAutoReset 
const ${1:name} = refAutoReset('$2', ${3:1000})
vwatchArray VueUse watchArray 
watchArray(${1:list}, (new${1/(.*)/${1:/capitalize}/}, old${1/(.*)/${1:/capitalize}/}, ${4:added}, ${5:removed}) => {
  $0
})
vwatchAtMost VueUse watchAtMost 
watchAtMost(${1:source}, (${2:val}) => {
  $0
}, { max: ${3:3} })
vwatchDebounced VueUse watchDebounced 
watchDebounced(${1:source}, (${2:val}) => {
  $0
}, { debounce: ${3:500}, maxWait: ${4:1000} })
vwatchIgnorable VueUse watchIgnorable 
const { stop:$3, ignoreUpdates:$4 } =  = watchIgnorable(${1:source}, (${2:val}) => {
  $0
})
vwatchOnce VueUse watchOnce 
watchOnce(${1:source}, (${2:val}) => {
  $0
})
vwatchImmediate VueUse watchImmediate 
vwatchImmediate(${1:source}, (${2:val}) => {
  $0
})
vwatchPausable VueUse watchPausable 
const { stop$3, pause$4, resume$5 } = watchPausable(${1:source}, (${2:val}) => {
  $0
})
vwatchThrottled VueUse watchThrottled 
watchThrottled(${1:source}, (${2:val}) => {
  $0
}, { throttle: ${3:500} })
vwatchTriggerable VueUse watchTriggerable 
const { trigger$3, ignoreUpdates$4 } = watchTriggerable(${1:source}, (${2:val}) => {
  $0
})
vwatchWithFilter VueUse watchWithFilter 
watchWithFilter(${1:source}, (${2:val}) => {
  $0
}, { eventFilter: $3 })
vwhenever VueUse whenever 
whenever(${1:source}, (${2:val}) => {
  $0
})
vuse:vmodel Implement v-model using useVModel 
const ${2:value} = useVModel(props, '${1:modelValue}', emit)
vuse:vmodels Implement v-model using useVModels 
const { ${1:modelValue}$2 } = useVModels(props, emit)
vuse:hover VueUse useElementHover 
const ${1:elem} = ref<${2|HTMLInputElement,HTMLDivElement,...|} | null>(null)
const ${3:isHovered} = useElementHover($1)
vuse:fetch / vuf VueUse useFetch 
const { data: ${1:data} } = useFetch('$2'$3)
vget VueUse get 
get($1)
vset VueUse set 
set($1, $2)
vdef VueUse isDefined 
isDefined($1)
vuse:toggle / vut VueUse useToggle 
const [${1:value}, ${2:toggle}] = useToggle()
vuse:toggle:fn / vutt VueUse useToggle function 
const toggle${2/(.*)/${1:/capitalize}/} = useToggle($1)
vuse:import / vuim Import from vueuse 
import { $1 } from '@vueuse/core'

Vue Macros

Prefix Name Body
vdefineModels / vmacro:model Define models 
const { modelValue$2 } = defineModels<{
  modelValue: ${1:string}
}>()
vdefinePropsRefs / vmacro:props Define props refs 
const { $2 } = definePropsRefs<{
  $1
}>()
vdefineOptions / vmacro:options Define options 
defineOptions({
  $0
})
vdefineSlots / vmacro:slots Define slots 
defineSlots<{
  $0
}>()
vdefineRender / vmacro:render Define render 
defineRender(
  $0
)
vdefineRender:fn / vmacro:render:fn Define render function 
defineRender(() => {
  return (
    $0
  )
})

Running locally

# ensure Deno is installed
# https://deno.land/[email protected]/getting_started/installation

# generate .code-snippets and documentation
deno task generate