Vue 3 Snippets installs statistics

Vue 3 Snippets for Visual Studio Code

This extension adds Vue 2 Snippets and Vue 3 Snippets into Visual Studio Code.

这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets。

It looks like:

Snippets

Including all of the API of Vue.js 2 and Vue.js 3. The code snippet of the extension is shown in the following table. You don't need to remember something, just write code as usual in vscode. You can type vcom, choose VueConfigOptionMergeStrategies, and press ENTER, then Vue.config.optionMergeStrategies appear on the screen.

这个插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段。插件的代码片段如下表格所示，你不需要记住什么snippets，就像往常一样在 vscode 里写代码就好了。比如你可以键入 vcom 然后按上下键选中 VueConfigOptionMergeStrategies 再按Enter键，就输入了Vue.config.optionMergeStrategies了。

As shown in the table below, snippet vmData has body like ${this, vm}.$data will provides choice this.$data and vm.$data to you.

如下表所示，vmData 的内容是 ${this, vm}.$data，这表明这个 snippet 会提供 this.$data and vm.$data 两种选项供你选择。

Vue 3 Snippets

Prefix	JavaScript Snippet Content
importFromVue	import ... from 'vue'
reactive	const obj = reactive()
readonly	const obj = readonly()
setup	setup() { }
onBeforeMount	onBeforeMount(() => {})
onMounted	onMounted(() => {})
onBeforeUpdate	onBeforeUpdate(() => {})
onUpdated	onUpdated(() => {})
onBeforeUnmount	onBeforeUnmount(() => {})
onUnmounted	onUnmounted(() => {})
onErrorCaptured	onErrorCaptured(() => {})
onRenderTracked	onRenderTracked(() => {})
onRenderTriggered	onRenderTriggered(() => {})

<br />

Prefix	HTML Snippet Content
teleport	<teleport to='' />
componentIs	<component :is=''></component>

Vue 2 Snippets

Prefix	JavaScript Snippet Content
import	import ... from ...
newVue	new Vue({...})
VueConfigSilent	Vue.config.silent = true
VueConfigOptionMergeStrategies	Vue.config.optionMergeStrategies
VueConfigDevtools	Vue.config.devtools = true
VueConfigErrorHandler	Vue.config.errorHandler = function (err, vm, info) {...}
VueConfigWarnHandler	Vue.config.warnHandler = function (msg, vm, trace) {...}
VueConfigIgnoredElements	Vue.config.ignoredElements = ['']
VueConfigKeyCodes	Vue.config.keyCodes
VueConfigPerformance	Vue.config.performance = true
VueConfigProductionTip	Vue.config.productionTip = false
vueExtend	Vue.extend( options )
VueNextTick	Vue.nextTick( callback, [context] )
VueNextTickThen	Vue.nextTick( callback, [context] ).then(function(){ })
VueSet	Vue.set( target, key, value )
VueDelete	Vue.delete( target, key )
VueDirective	Vue.directive( id, [definition] )
VueFilter	Vue.filter( id, [definition] )
VueComponent	Vue.component( id, [definition] )
VueUse	Vue.use( plugin )
VueMixin	Vue.mixin({ mixin })
VueCompile	Vue.compile( template )
VueVersion	Vue.version
data	data() { return {} }
watchWithOptions	key: { deep: true, immediate: true, handler: function () { } }
vmData	${this, vm}.$data
vmProps	${this, vm}.$props
vmEl	${this, vm}.$el
vmOptions	${this, vm}.$options
vmParent	${this, vm}.$parent
vmRoot	${this, vm}.$root
vmChildren	${this, vm}.$children
vmSlots	${this, vm}.$slots
vmScopedSlots	${this, vm}.$scopedSlots.default({})
vmRefs	${this, vm}.$refs
vmIsServer	${this, vm}.$isServer
vmAttrs	${this, vm}.$attrs
vmListeners	${this, vm}.listeners
vmWatch	${this, vm}.$watch( expOrFn, callback, [options] )
vmSet	${this, vm}.$set( object, key, value )
vmDelete	${this, vm}.$delete( object, key )
vmOn	${this, vm}.$on( event, callback )
vmOnce	${this, vm}.$once( event, callback )
vmOff	${this, vm}.$off( [event, callback] )
vmEmit	${this, vm}.$emit( event, […args] )
vmMount	${this, vm}.$mount( [elementOrSelector] )
vmForceUpdate	${this, vm}.$forceUpdate()
vmNextTick	${this, vm}.$nextTick( callback )
vmDestroy	${this, vm}.$destroy()
renderer	const renderer = require('vue-server-renderer').createRenderer()
createRenderer	createRenderer({ })
preventDefault	preventDefault();
stopPropagation	stopPropagation();

<br />…