English | 中文

Vue3 Snippets Highlight Formatters Generators For Visual Studio Code

Vue3 Snippets, Contains code highlighting, code snippets and formatting commonly used in vue2 and vue3.

You can turn on the statusbar Auto Format Vue switch at the bottom of vscode, which allows you to automatically format the vue file when you write it.

Or right-click to display the drop-down menu panel, click the Format Document menu item to format.

You can use Vue Generator Component commands in the folder to create new template components.

Snippets

Vue 3 Snippets

Including most of the API of Vue3. You can type reactive, choose reactive, and press ENTER, then const data = reactive({...}) appear on the screen.

Prefix	JavaScript Snippet Content
import	import {...} from "@vue/composition-api"
import	import {...} from 'vue'
newVue	newVue({...})
defineComponent	defineComponent({...})
export	export default { ... }
setup	setup(${...}) {...}
reactive	const data = reactive({...})
watch	watch(..., ...)
watchFn	watch(() => {...})
watchArray	watch([...]) => {...}
watchEffect	watchEffect(() => {...})
computed	computed(() => { get: () => {...}, set: () => {...}})
toRefs	toRefs(...)
ref	ref(...)
props	props(...)
onBeforeMount	onBeforeMount(...)
onMounted	onMounted(...)
onBeforeUpdate	onBeforeUpdate(...)
onUpdated	onUpdated(...)
onBeforeUnmount	onBeforeUnmount(...)
onUnmounted	onUnmounted(...)
onErrorCaptured	onErrorCaptured(...)

Vue 2 Snippets

All code snippets of Vue 2 Snippets are also included here.

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();

Prefix	HTML Snippet Content
template	<template></template>
script	<script></script>
style	<style></style>
vText	v-text=msg
vHtml	v-html=html
vShow	v-show
vIf	v-if
vElse	v-else
vElseIf	v-else-if
vForWithoutKey	v-for
vFor	v-for="" :key=""
vOn	v-on
vBind	v-bind
vModel	v-model
vPre	v-pre
vCloak	v-cloak
vOnce	v-once
key	:key
ref	ref
slotA	slot=""
slotE	<slot></slot>
slotScope	slot-scope=""
component	<component :is=''></component>
keepAlive	<keep-alive></keep-alive>
transition	<transition></transition>
transitionGroup	<transition-group></transition-group>
enterClass	enter-class=''
leaveClass	leave-class=''
appearClass	appear-class=''
enterToClass	enter-to-class=''
leaveToClass	leave-to-class=''
appearToClass	appear-to-class=''
enterActiveClass	enter-active-class=''
leaveActiveClass	leave-active-class=''
appearActiveClass	appear-active-class=''
beforeEnterEvent	@before-enter=''
beforeLeaveEvent	@before-leave=''
beforeAppearEvent	@before-appear=''
enterEvent	@enter=''
leaveEvent	@leave=''
appearEvent	@appear=''
afterEnterEvent	@after-enter=''
afterLeaveEvent	@after-leave=''
afterAppearEvent	@after-appear=''
enterCancelledEvent	@enter-cancelled=''
leaveCancelledEvent	@leave-cancelled=''
appearCancelledEvent	@appear-cancelled=''

Prefix	Vue Router Snippet Content
routerLink	<router-link></router-link>
routerView	<router-view></router-view>
to	to=""
tag	tag=""
newVueRouter	const router = newVueRouter({ })
routerBeforeEach	router.beforeEach((to, from, next) => { }
routerBeforeResolve	router.beforeResolve((to, from, next) => { }
routerAfterEach	router.afterEach((to, from) => { }
routerPush	router.push()
routerReplace	router.replace()
routerGo	router.back()
routerBack	router.push()
routerForward	router.forward()
routerGetMatchedComponents	router.getMatchedComponents()
routerResolve	router.resolve()
routerAddRoutes	router.addRoutes()
routerOnReady	router.onReady()
routerOnError	router.onError()
routes	routes: []
beforeEnter	beforeEnter: (to, from, next) => { }
beforeRouteEnter	beforeRouteEnter (to, from, next) { }
beforeRouteLeave	beforeRouteLeave (to, from, next) { }
scrollBehavior	scrollBehavior (to, from, savedPosition) { }

Prefix	Vuex Snippet Content
newVuexStore	const store = new Vuex.Store({})
mapGetters	import { mapGetters } from 'vuex'
mapMutations	import { mapMutations } from 'vuex'
mapActions	import { mapActions } from 'vuex'
state	state
mutations	mutations
actions	actions
modules	modules
plugins	plugins
dispatch	dispatch
subscribe	subscribe
registerModule	registerModule
unregisterModule	unregisterModule
hotUpdate	hotUpdate

Prefix	Nuxt.js Snippet Content
nuxt	<nuxt/>
nuxtChild	<nuxt-child/>
nuxtLink	<nuxt-link to=""/>
asyncData	asyncData() {}

Extension Settings

The configuration parameters are as follows:

vue3snippets.arrowParens
vue3snippets.bracketSpacing
vue3snippets.endOfLine
vue3snippets.htmlWhitespaceSensitivity
vue3snippets.insertPragma
vue3snippets.jsxBracketSameLine
vue3snippets.jsxSingleQuote
vue3snippets.printWidth
vue3snippets.proseWrap
vue3snippets.quoteProps
vue3snippets.requirePragma
vue3snippets.semi
vue3snippets.singleQuote
vue3snippets.tabWidth
vue3snippets.trailingComma
vue3snippets.useTabs
vue3snippets.vueIndentScriptAndStyle

Key	Example	Default
vue3snippets.printWidth	10/20/30/40/n	80
vue3snippets.tabWidth	1/2/3/4/n	2
vue3snippets.singleQuote	false/true	false
vue3snippets.trailingComma	none/es5/all	es5
vue3snippets.bracketSpacing	true	true
vue3snippets.jsxBracketSameLine	false/true	false
vue3snippets.semi	false/true	true
vue3snippets.requirePragma	false/true	false
vue3snippets.insertPragma	false/true	false
vue3snippets.useTabs	false/true	false
vue3snippets.proseWrap	preserve/always/never	preserve
vue3snippets.arrowParens	avoid/always	always
vue3snippets.jsxSingleQuote	false/true	false
vue3snippets.htmlWhitespaceSensitivity	css/strict/ignore	css
vue3snippets.vueIndentScriptAndStyle	false/true	false
vue3snippets.endOfLine	auto/lf/crlf/cr	lf
vue3snippets.quoteProps	as-needed/consistent/preserve	as-needed

Tutorial

Attached some Vue Chinese tutorials, hope to help you quickly get started:

• 《Vue 3.0 教程》
• 《Vue 2.0 教程》

Thanks

Tencent Alloyteam Team && Qian Feng Team

Eno Yao	Aaron Xie	DK Lan	Yong	Li Ting	Xin	Lemon	Jing	Lin	Tian Fly

If you enjoy front end, you should have it! xie, yao, yong, ting, jing, lin, tian, xin, xia, dk and lemon ~ Waiting for you in our heart！

Requirements

• Prettier
• Vue2 Snippets
• Vue Syntax Highlight

If you think it's useful, you can leave us a message and like it, Your support is our driving force😀

License

Vue3 Snippets is released under the MIT.