Vue3 Snippets Highlight Formatters 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.
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(...) |
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() {} |
editor.tabSize
.{
"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 😀
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