Morioh
Login
Vuejs Components

Vuejs Components

3 years ago

Vue3 Snippets Highlight Formatters For Visual Studio Code

Vue3 Snippets Highlight Formatters For Visual Studio Code

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

Demo

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.

Demo

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

Extension Settings

{
    "html_indent_root": false, // If need to indent the root tag of template in ".vue" file
    "break_attr_limit": -1, // when attributes.length > the value，break attributes force; keep inline when -1.
    "attr_end_with_gt": true, // when "break_attr_limit" works, if don't use "\n" before tag's ">"，default "true"
    "format_need": ["html", "js", "css"], // the list of need to format, default ["html", "js", "css"]. delete anyone if you don't need format.
    "js-beautify": {
        "indent_size": "editor.tabSize",
        "indent_char": " ",
        "indent_with_tabs": false,
        "brace-style": "collapse",
        "space_after_anon_function": true,
        "css": {},
        "js": {},
        "html": {
            // "force_format": ["template"],
            "wrap_attributes": "auto"
        }
    },
    "pug-beautify": {
        "fill_tab": false
    }
}
Key Example Default
vue3snippets.html_indent_root false false
vue3snippets.break_attr_limit 2 -1
vue3snippets.attr_end_with_gt true true
vue3snippets.format_need [“html”] [“html”, “js”, “css”]
vue3snippets.js-beautify (See the config at front) (See the config at front)
vue3snippets.pug-beautify {fill_tab: false} {fill_tab: false}

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！

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

Requirements

Download Details:

Author: Wscats

Demo: https://marketplace.visualstudio.com/items?itemName=Wscats.vue&ssr=false#overview

Source Code: https://github.com/Wscats/vue-snippets

#vuejs #vue #javascript

Vue3 Snippets Highlight Formatters For Visual Studio Code
16.30 GEEK