Vue 2 Snippets for Visual Studio Code
This extension adds Vue 2 Code Snippets into Visual Studio Code.
这个插件基于最新的 Vue 2 的 API 添加了Code Snippets。

It looks like:


Snippets
Including most of the API of Vue.js 2. You can type vcom
, choose VueConfigOptionMergeStrategies
, and press ENTER, then Vue.config.optionMergeStrategies
appear on the screen.
插件的 Snippets 如下表格所示,比如你可以键入 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
两种选项供你选择。
| 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({ }) |
Prefix |
Nuxt.js Snippet Content |
nuxt |
<nuxt/> |
nuxtChild |
<nuxt-child/> |
nuxtLink |
<nuxt-link to=""/> |
asyncData |
asyncData() {} |
how to use
install the extensioon and then type l-
.all prefixs are begin with l-
.
snippets
Template
Table
Snipet |
Purpose |
l-tabel__row |
el-table-column |
l-tabel__row--template |
el-table-column with template |
l-tabel__pagination |
the custom pagination component |
Snipet |
Purpose |
l-form-item__input_trim |
el-input in el-from-item with trim |
l-form-item__input_number |
el-input in el-from-item with number |
l-form-item__switch |
el-switch in el-from-item |
l-form-item__select |
el-select in el-from-item |
l-form-item__dateTime |
select dateTime in el-from-item |
l-form-item__dateRange |
select dataRange in el-from-item |
l-form-item__upload |
upload image in el-from-item ,you should import Upload component |
Snipet |
Purpose |
l-input__trim |
el-input with trim |
l-input__number |
el-input with number |
l-input__checkbox |
el-checkbox |
l-input__switch |
el-switch |
l-input__select |
el-select |
l-input__dateTime |
select dateTime |
l-input__dateRange |
select dataRange |
l-input__textarea |
el-input textarea |
l-input__radio |
el-radio-group |
l-input__trim--query |
el-input with trim and query |
l-input__number--query |
el-input with number and query |
l-input__checkbox--query |
el-checkbox with query |
l-input__select--query |
el-select with query |
l-input__dateRange--query |
el-select with query |
Snipet |
Purpose |
l-button--primary |
primary el-button |
l-button--success |
success el-button |
l-button--danger |
danger el-button |
l-button--searchIcon |
primary el-button with search icon |
l-button--exportIcon |
primary el-button with export icon |
l-button--createIcon |
primary el-button with create icon |
l-button--addIcon |
primary el-button with add icon |
l-button--deleteIcon |
primary el-button with delete icon |
Tag
Snipet |
Purpose |
l-tag--primary |
primary el-tag |
l-tag--success |
success el-tag |
l-tag--info |
info el-tag |
l-tag--warning |
warning el-tag |
l-tag--danger |
danger el-tag |
Router
Snipet |
Purpose |
l-method__skipToRoute |
skip to a window in current page |
l-method__skipToRoute--newWindow |
skip to a new page |
l-method__skipToPrevious |
skip to previous page |
Message
Snipet |
Purpose |
l-message__success |
success message |
l-message__error |
error message |
l-message__confirm |
message need to confirm |
common
some snippet i don't know where to put
Snipet |
Purpose |
l-common__opt |
the templete of options |
others are deep coupled with vue-element-admin
Vue
Snippet |
Purpose |
l-base |
Single file component base |
l-base__list |
Single file list with query and table base |
l-base__deploy |
Single file deploy with form base |
Conponent
Snipet |
Purpose |
l-conponent__sticky |
Sticky Conponnet |
Script
Methods
Snipet |
Purpose |
l-method__pagination |
handlePagination |
l-method__handleDownload |
handleDownload |
l-method__paste |
handlePaste |
Apis
Snipet |
Purpose |
l-api__get |
get request |
l-api__get--query |
get query request |
l-api__post |
post request |
Import
import frequently-used components and util and etc
Snipet |
Purpose |
l-import__api |
import api from common folder |
l-import__opt |
import option from common folder |
l-import__defaultVal |
import default from common folder |
l-import__util |
import utils |
l-import__fetch |
import fetch method from utils floder |
l-import__param |
import param method from utils floder |
l-import__parseTime |
import parseTime method from utils floder |
l-import__dateTime |
import dateTime component from Conponents floder |
l-import__upload |
import upload component from Conponents floder |
l-import__upload--plus |
import uploadPlus component from Conponents floder |