Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Visual Studio Code Syntax Highlighting For Vue3 And Vue2

License

NotificationsYou must be signed in to change notification settings

Wscats/vue-snippets

Repository files navigation

DownloadMacketplaceGithub PageEno Yao

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.

1

You can turn on the statusbarAuto 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 theFormat Document menu item to format.

2

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

3

Snippets

Vue 3 Snippets

Including most of the API of Vue3. You can typereactive, choosereactive, and press ENTER, thenconst data = reactive({...}) appear on the screen.

PrefixJavaScript Snippet Content
importimport {...} from "@vue/composition-api"
importimport {...} from 'vue'
newVuenewVue({...})
defineComponentdefineComponent({...})
exportexport default { ... }
setupsetup(${...}) {...}
reactiveconst data = reactive({...})
watchwatch(..., ...)
watchFnwatch(() => {...})
watchArraywatch([...]) => {...}
watchEffectwatchEffect(() => {...})
computedcomputed(() => { get: () => {...}, set: () => {...}})
toRefstoRefs(...)
refref(...)
propsprops(...)
onBeforeMountonBeforeMount(...)
onMountedonMounted(...)
onBeforeUpdateonBeforeUpdate(...)
onUpdatedonUpdated(...)
onBeforeUnmountonBeforeUnmount(...)
onUnmountedonUnmounted(...)
onErrorCapturedonErrorCaptured(...)

Vue 2 Snippets

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

PrefixJavaScript Snippet Content
importimport ... from ...
newVuenew Vue({...})
VueConfigSilentVue.config.silent = true
VueConfigOptionMergeStrategiesVue.config.optionMergeStrategies
VueConfigDevtoolsVue.config.devtools = true
VueConfigErrorHandlerVue.config.errorHandler = function (err, vm, info) {...}
VueConfigWarnHandlerVue.config.warnHandler = function (msg, vm, trace) {...}
VueConfigIgnoredElementsVue.config.ignoredElements = [''] \
VueConfigKeyCodesVue.config.keyCodes
VueConfigPerformanceVue.config.performance = true
VueConfigProductionTipVue.config.productionTip = false
vueExtendVue.extend( options )
VueNextTickVue.nextTick( callback, [context] )
VueNextTickThenVue.nextTick( callback, [context] ).then(function(){ })
VueSetVue.set( target, key, value )
VueDeleteVue.delete( target, key )
VueDirectiveVue.directive( id, [definition] )
VueFilterVue.filter( id, [definition] )
VueComponentVue.component( id, [definition] )
VueUseVue.use( plugin )
VueMixinVue.mixin({ mixin })
VueCompileVue.compile( template )
VueVersionVue.version
datadata() { return {} }
watchWithOptionskey: { 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()
rendererconst renderer = require('vue-server-renderer').createRenderer()
createRenderercreateRenderer({ })
preventDefaultpreventDefault();
stopPropagationstopPropagation();

PrefixHTML Snippet Content
template<template></template>
script<script></script>
style<style></style>
vTextv-text=msg
vHtmlv-html=html
vShowv-show
vIfv-if
vElsev-else
vElseIfv-else-if
vForWithoutKeyv-for
vForv-for="" :key=""
vOnv-on
vBindv-bind
vModelv-model
vPrev-pre
vCloakv-cloak
vOncev-once
key:key
refref
slotAslot=""
slotE<slot></slot>
slotScopeslot-scope=""
component<component :is=''></component>
keepAlive<keep-alive></keep-alive>
transition<transition></transition>
transitionGroup<transition-group></transition-group>
enterClassenter-class=''
leaveClassleave-class=''
appearClassappear-class=''
enterToClassenter-to-class=''
leaveToClassleave-to-class=''
appearToClassappear-to-class=''
enterActiveClassenter-active-class=''
leaveActiveClassleave-active-class=''
appearActiveClassappear-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=''

PrefixVue Router Snippet Content
routerLink<router-link></router-link>
routerView<router-view></router-view>
toto=""
tagtag=""
newVueRouterconst router = newVueRouter({ })
routerBeforeEachrouter.beforeEach((to, from, next) => { }
routerBeforeResolverouter.beforeResolve((to, from, next) => { }
routerAfterEachrouter.afterEach((to, from) => { }
routerPushrouter.push()
routerReplacerouter.replace()
routerGorouter.back()
routerBackrouter.push()
routerForwardrouter.forward()
routerGetMatchedComponentsrouter.getMatchedComponents()
routerResolverouter.resolve()
routerAddRoutesrouter.addRoutes()
routerOnReadyrouter.onReady()
routerOnErrorrouter.onError()
routesroutes: []
beforeEnterbeforeEnter: (to, from, next) => { }
beforeRouteEnterbeforeRouteEnter (to, from, next) { }
beforeRouteLeavebeforeRouteLeave (to, from, next) { }
scrollBehaviorscrollBehavior (to, from, savedPosition) { }

PrefixVuex Snippet Content
newVuexStoreconst store = new Vuex.Store({})
mapGettersimport { mapGetters } from 'vuex'
mapMutationsimport { mapMutations } from 'vuex'
mapActionsimport { mapActions } from 'vuex'
statestate
mutationsmutations
actionsactions
modulesmodules
pluginsplugins
dispatchdispatch
subscribesubscribe
registerModuleregisterModule
unregisterModuleunregisterModule
hotUpdatehotUpdate

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

Extension Settings

The configuration parameters are as follows:

vue3snippets.arrowParensvue3snippets.bracketSpacingvue3snippets.endOfLinevue3snippets.htmlWhitespaceSensitivityvue3snippets.insertPragmavue3snippets.jsxBracketSameLinevue3snippets.jsxSingleQuotevue3snippets.printWidthvue3snippets.proseWrapvue3snippets.quotePropsvue3snippets.requirePragmavue3snippets.semivue3snippets.singleQuotevue3snippets.tabWidthvue3snippets.trailingCommavue3snippets.useTabsvue3snippets.vueIndentScriptAndStyle
KeyExampleDefault
vue3snippets.printWidth10/20/30/40/n80
vue3snippets.tabWidth1/2/3/4/n2
vue3snippets.singleQuotefalse/truefalse
vue3snippets.trailingCommanone/es5/alles5
vue3snippets.bracketSpacingtruetrue
vue3snippets.jsxBracketSameLinefalse/truefalse
vue3snippets.semifalse/truetrue
vue3snippets.requirePragmafalse/truefalse
vue3snippets.insertPragmafalse/truefalse
vue3snippets.useTabsfalse/truefalse
vue3snippets.proseWrappreserve/always/neverpreserve
vue3snippets.arrowParensavoid/alwaysalways
vue3snippets.jsxSingleQuotefalse/truefalse
vue3snippets.htmlWhitespaceSensitivitycss/strict/ignorecss
vue3snippets.vueIndentScriptAndStylefalse/truefalse
vue3snippets.endOfLineauto/lf/crlf/crlf
vue3snippets.quotePropsas-needed/consistent/preserveas-needed

Tutorial

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

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

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

License

Vue3 Snippets is released under theMIT.

Releases

No releases published

Packages

No packages published

Contributors4

  •  
  •  
  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp