安装后设置默认格式化插件CtrlShiftP使用SfhitAltF就可以用Vue 3 Support - All In One格式化代码了会将同一个节点里面的不同属性换行排列对齐这样看起来更加清晰尤其是一个节点绑定十几个属性、事件的时候这样的排列方式更有效、快捷进行修改、删除Vue 2/3 代码片段 语法高亮 格式化插件这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段语法高亮和格式化的 VS Code 插件能极大提高你的开发效率。你可以在 VS Code 编辑器底部栏右下角打开Auto Format Vue开关它可能帮你在代码保存的时候自动格式化vue文件的格式默认是关闭状态。如果你不想自动格式化vue文件你也可以在vue文件中点击鼠标右键在出现的菜单栏中选择Format Document菜单项则文件会执行一次格式化。你可以在文件夹右键的菜单栏中使用Vue Generator Component弹窗中填入组件名会自动生成一个默认组件模板便于你快速创建一个组件。代码片段Vue 3 代码片段包含常用 Vue3 代码片段比如你输入reactive选择reactive的代码片段则编辑器会自动帮你生成const data reactive({...})代码提高你的开发效率。关键字JavaScript 代码片段importimport {...} from vue/composition-apiimportimport {...} from vuenewVuenewVue({...})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 代码片段兼容所有常用 Vue 2 代码片段如下关键字JavaScript 代码片段importimport ... from ...newVuenew Vue({...})VueConfigSilentVue.config.silent trueVueConfigOptionMergeStrategiesVue.config.optionMergeStrategiesVueConfigDevtoolsVue.config.devtools trueVueConfigErrorHandlerVue.config.errorHandler function (err, vm, info) {...}VueConfigWarnHandlerVue.config.warnHandler function (msg, vm, trace) {...}VueConfigIgnoredElementsVue.config.ignoredElements []\VueConfigKeyCodesVue.config.keyCodesVueConfigPerformanceVue.config.performance trueVueConfigProductionTipVue.config.productionTip falsevueExtendVue.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.versiondatadata() { return {} }watchWithOptionskey: { deep: true, immediate: true, handler: function () { } }vmData${this, vm}.$datavmProps${this, vm}.$propsvmEl${this, vm}.$elvmOptions${this, vm}.$optionsvmParent${this, vm}.$parentvmRoot${this, vm}.$rootvmChildren${this, vm}.$childrenvmSlots${this, vm}.$slotsvmScopedSlots${this, vm}.$scopedSlots.default({})vmRefs${this, vm}.$refsvmIsServer${this, vm}.$isServervmAttrs${this, vm}.$attrsvmListeners${this, vm}.listenersvmWatch${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();关键字HTML 代码片段templatetemplate/templatescriptscript/scriptstylestyle/stylevTextv-textmsgvHtmlv-htmlhtmlvShowv-showvIfv-ifvElsev-elsevElseIfv-else-ifvForWithoutKeyv-forvForv-for :keyvOnv-onvBindv-bindvModelv-modelvPrev-prevCloakv-cloakvOncev-oncekey:keyrefrefslotAslotslotEslot/slotslotScopeslot-scopecomponentcomponent :is/componentkeepAlivekeep-alive/keep-alivetransitiontransition/transitiontransitionGrouptransition-group/transition-groupenterClassenter-classleaveClassleave-classappearClassappear-classenterToClassenter-to-classleaveToClassleave-to-classappearToClassappear-to-classenterActiveClassenter-active-classleaveActiveClassleave-active-classappearActiveClassappear-active-classbeforeEnterEventbefore-enterbeforeLeaveEventbefore-leavebeforeAppearEventbefore-appearenterEvententerleaveEventleaveappearEventappearafterEnterEventafter-enterafterLeaveEventafter-leaveafterAppearEventafter-appearenterCancelledEvententer-cancelledleaveCancelledEventleave-cancelledappearCancelledEventappear-cancelled关键字Vue Router 代码片段routerLinkrouter-link/router-linkrouterViewrouter-view/router-viewtototagtagnewVueRouterconst 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) { }关键字Vuex 代码片段newVuexStoreconst store new Vuex.Store({})mapGettersimport { mapGetters } from vuexmapMutationsimport { mapMutations } from vuexmapActionsimport { mapActions } from vuexstatestatemutationsmutationsactionsactionsmodulesmodulespluginspluginsdispatchdispatchsubscribesubscriberegisterModuleregisterModuleunregisterModuleunregisterModulehotUpdatehotUpdate关键字Nuxt.js 代码片段nuxtnuxt/nuxtChildnuxt-child/nuxtLinknuxt-link to/asyncDataasyncData() {}插件设置你可以在插件的选项中自定义代码格式化的格式便于定制你的vue代码格式配置参数如下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键值例子默认值vue3snippets.printWidth10/20/30/40/n80vue3snippets.tabWidth1/2/3/4/n2vue3snippets.singleQuotefalse/truefalsevue3snippets.trailingCommanone/es5/alles5vue3snippets.bracketSpacingtruetruevue3snippets.jsxBracketSameLinefalse/truefalsevue3snippets.semifalse/truetruevue3snippets.requirePragmafalse/truefalsevue3snippets.insertPragmafalse/truefalsevue3snippets.useTabsfalse/truefalsevue3snippets.proseWrappreserve/always/neverpreservevue3snippets.arrowParensavoid/alwaysalwaysvue3snippets.jsxSingleQuotefalse/truefalsevue3snippets.htmlWhitespaceSensitivitycss/strict/ignorecssvue3snippets.vueIndentScriptAndStylefalse/truefalsevue3snippets.endOfLineauto/lf/crlf/crlfvue3snippets.quotePropsas-needed/consistent/preserveas-neededVue 2/3 详细教程附赠一些 Vue 中文教程希望能帮助你快速上手《Vue 3.0 教程》https://gitee.com/link?targethttps%3A%2F%2Fgithub.com%2FWscats%2Fvue-cli《Vue 2.0 教程》https://gitee.com/link?targethttps%3A%2F%2Fgithub.com%2FWscats%2Fvue-tutorial其他需要的一些推荐插件” 【强烈推荐Vue2格式化插件】Vue代码格式化插件Vue 3 Support - All In One
安装后设置默认格式化插件CtrlShiftP使用SfhitAltF就可以用Vue 3 Support - All In One格式化代码了会将同一个节点里面的不同属性换行排列对齐这样看起来更加清晰尤其是一个节点绑定十几个属性、事件的时候这样的排列方式更有效、快捷进行修改、删除Vue 2/3 代码片段 语法高亮 格式化插件这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段语法高亮和格式化的 VS Code 插件能极大提高你的开发效率。你可以在 VS Code 编辑器底部栏右下角打开Auto Format Vue开关它可能帮你在代码保存的时候自动格式化vue文件的格式默认是关闭状态。如果你不想自动格式化vue文件你也可以在vue文件中点击鼠标右键在出现的菜单栏中选择Format Document菜单项则文件会执行一次格式化。你可以在文件夹右键的菜单栏中使用Vue Generator Component弹窗中填入组件名会自动生成一个默认组件模板便于你快速创建一个组件。代码片段Vue 3 代码片段包含常用 Vue3 代码片段比如你输入reactive选择reactive的代码片段则编辑器会自动帮你生成const data reactive({...})代码提高你的开发效率。关键字JavaScript 代码片段importimport {...} from vue/composition-apiimportimport {...} from vuenewVuenewVue({...})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 代码片段兼容所有常用 Vue 2 代码片段如下关键字JavaScript 代码片段importimport ... from ...newVuenew Vue({...})VueConfigSilentVue.config.silent trueVueConfigOptionMergeStrategiesVue.config.optionMergeStrategiesVueConfigDevtoolsVue.config.devtools trueVueConfigErrorHandlerVue.config.errorHandler function (err, vm, info) {...}VueConfigWarnHandlerVue.config.warnHandler function (msg, vm, trace) {...}VueConfigIgnoredElementsVue.config.ignoredElements []\VueConfigKeyCodesVue.config.keyCodesVueConfigPerformanceVue.config.performance trueVueConfigProductionTipVue.config.productionTip falsevueExtendVue.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.versiondatadata() { return {} }watchWithOptionskey: { deep: true, immediate: true, handler: function () { } }vmData${this, vm}.$datavmProps${this, vm}.$propsvmEl${this, vm}.$elvmOptions${this, vm}.$optionsvmParent${this, vm}.$parentvmRoot${this, vm}.$rootvmChildren${this, vm}.$childrenvmSlots${this, vm}.$slotsvmScopedSlots${this, vm}.$scopedSlots.default({})vmRefs${this, vm}.$refsvmIsServer${this, vm}.$isServervmAttrs${this, vm}.$attrsvmListeners${this, vm}.listenersvmWatch${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();关键字HTML 代码片段templatetemplate/templatescriptscript/scriptstylestyle/stylevTextv-textmsgvHtmlv-htmlhtmlvShowv-showvIfv-ifvElsev-elsevElseIfv-else-ifvForWithoutKeyv-forvForv-for :keyvOnv-onvBindv-bindvModelv-modelvPrev-prevCloakv-cloakvOncev-oncekey:keyrefrefslotAslotslotEslot/slotslotScopeslot-scopecomponentcomponent :is/componentkeepAlivekeep-alive/keep-alivetransitiontransition/transitiontransitionGrouptransition-group/transition-groupenterClassenter-classleaveClassleave-classappearClassappear-classenterToClassenter-to-classleaveToClassleave-to-classappearToClassappear-to-classenterActiveClassenter-active-classleaveActiveClassleave-active-classappearActiveClassappear-active-classbeforeEnterEventbefore-enterbeforeLeaveEventbefore-leavebeforeAppearEventbefore-appearenterEvententerleaveEventleaveappearEventappearafterEnterEventafter-enterafterLeaveEventafter-leaveafterAppearEventafter-appearenterCancelledEvententer-cancelledleaveCancelledEventleave-cancelledappearCancelledEventappear-cancelled关键字Vue Router 代码片段routerLinkrouter-link/router-linkrouterViewrouter-view/router-viewtototagtagnewVueRouterconst 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) { }关键字Vuex 代码片段newVuexStoreconst store new Vuex.Store({})mapGettersimport { mapGetters } from vuexmapMutationsimport { mapMutations } from vuexmapActionsimport { mapActions } from vuexstatestatemutationsmutationsactionsactionsmodulesmodulespluginspluginsdispatchdispatchsubscribesubscriberegisterModuleregisterModuleunregisterModuleunregisterModulehotUpdatehotUpdate关键字Nuxt.js 代码片段nuxtnuxt/nuxtChildnuxt-child/nuxtLinknuxt-link to/asyncDataasyncData() {}插件设置你可以在插件的选项中自定义代码格式化的格式便于定制你的vue代码格式配置参数如下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键值例子默认值vue3snippets.printWidth10/20/30/40/n80vue3snippets.tabWidth1/2/3/4/n2vue3snippets.singleQuotefalse/truefalsevue3snippets.trailingCommanone/es5/alles5vue3snippets.bracketSpacingtruetruevue3snippets.jsxBracketSameLinefalse/truefalsevue3snippets.semifalse/truetruevue3snippets.requirePragmafalse/truefalsevue3snippets.insertPragmafalse/truefalsevue3snippets.useTabsfalse/truefalsevue3snippets.proseWrappreserve/always/neverpreservevue3snippets.arrowParensavoid/alwaysalwaysvue3snippets.jsxSingleQuotefalse/truefalsevue3snippets.htmlWhitespaceSensitivitycss/strict/ignorecssvue3snippets.vueIndentScriptAndStylefalse/truefalsevue3snippets.endOfLineauto/lf/crlf/crlfvue3snippets.quotePropsas-needed/consistent/preserveas-neededVue 2/3 详细教程附赠一些 Vue 中文教程希望能帮助你快速上手《Vue 3.0 教程》https://gitee.com/link?targethttps%3A%2F%2Fgithub.com%2FWscats%2Fvue-cli《Vue 2.0 教程》https://gitee.com/link?targethttps%3A%2F%2Fgithub.com%2FWscats%2Fvue-tutorial其他需要的一些推荐插件”