Vue3Helper Snippets for Visual Studio Code
这个插件基于最新的 Vue 3 的 API 添加了Code Snippets。
Snippets
插件的 Snippets 如下表格所示，比如你可以键入 vue 然后按上下键选中 vue 再按Enter键，就输入了vue的单文件结构了。
| Prefix |
JavaScript Snippet Content |
createApp' |
'createApp({})', |
createSSRApp' |
'createSSRApp({})', |
app.mount' |
'app.mount()', |
app.unmount' |
'app.unmount()', |
app.provide' |
'app.provide()', |
app.component' |
'app.component()', |
app.directive' |
'app.directive()', |
app.use' |
'app.use()', |
app.mixin' |
'app.mixin()', |
app.version' |
'app.version', |
app.config' |
'app.config', |
app.config.errorHandler' |
'app.config.errorHandler= () => {}', |
app.config.warnHandler', |
'app.config.warnHandler = () => {}', |
app.config.performance', |
'app.config.performance = ', |
app.config.compilerOptions' |
'app.config.compilerOptions', |
app.config.globalProperties' |
'app.config.globalProperties', |
app.config.optionMergeStrategies' |
'app.config.optionMergeStrategies', |
nextTick' |
'nextTick()', |
defineComponent' |
'defineComponent()', |
defineAsyncComponent' |
'defineAsyncComponent()', |
defineCustomElement' |
'defineCustomElement()', |
setup()' |
'setup(){}', |
props' |
'props:{}', |
ref()' |
'ref()', |
computed()' |
'computed({get: (val) => {},set: (val) => {}), |
reactive()' |
'reactive({})', |
readonly()' |
'readonly()', |
watchEffect()' |
'watchEffect(()=>{})', |
watch()' |
'watch($1, (curr, prev) => {$2})', |
isRef()' |
'isRef()', |
unref()' |
'unref()', |
toRef()' |
'toRef()', |
toRefs()' |
'toRefs()', |
isProxy()' |
'isProxy()', |
isReactive()' |
'isReactive()', |
isReadonly()' |
'isReadonly()', |
onMounted()' |
'onMounted(() => {})', |
onUpdated()' |
'onUpdated(() => {})', |
onUnmounted()' |
'onUnmounted(() => {})', |
onBeforeMount()' |
'onBeforeMount(() => {})', |
onBeforeUpdate()' |
'onBeforeUpdate(() => {})', |
onBeforeUnmount()' |
'onBeforeUnmount(() => {})', |
onErrorCaptured()' |
'onErrorCaptured(() => {})', |
onActivated()' |
'onActivated(() => {})', |
onDeactivated()' |
'onDeactivated(() => {})', |
onServerPrefetch()' |
'onServerPrefetch(() => {})', |
provide()' |
'provide()', |
inject() |
'inject()' |
| Prefix |
HTML Snippet Content |
vue |
<template></template><script>export default {}</script><style></style> |
template |
<template></template> |
script |
<script>export default {}</script> |
style |
<style></style> |
v-text |
v-text=msg |
v-html |
v-html=html |
v-show |
v-show |
v-if |
v-if |
v-else |
v-else |
v-else-if |
v-else-if |
v-for |
v-for="" :key="" |
v-on |
v-on |
v-bind |
v-bind |
v-model |
v-model |
v-pre |
v-pre |
v-cloak |
v-cloak |
v-once |
v-once |
v-memo |
v-memo |
key |
:key |
ref |
ref |
slotName |
slot="" |
slot |
<slot></slot> |
component |
<component :is=''></component> |
keep-alive |
<keep-alive></keep-alive> |
transition |
<transition></transition> |
transition-group |
<transition-group></transition-group> |
teleport |
<teleport to=''></teleport> |
Supported languages
- vue(.vue)
- HTML(.html)
- javascript(.js)
- typescript(.ts)
| |
