6 Star 31 Fork 9

Eno / vue-snippets

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.CN.md

Download Macketplace Github Page Eno Yao

English | 中文

Vue 2/3 代码片段 语法高亮 格式化插件

这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你的开发效率。

3

你可以在 VS Code 编辑器底部栏右下角打开 Auto Format Vue 开关,它可能帮你在代码保存的时候自动格式化 vue 文件的格式,默认是关闭状态。

如果你不想自动格式化 vue 文件,你也可以在 vue 文件中点击鼠标右键,在出现的菜单栏中选择 Format Document 菜单项,则文件会执行一次格式化。

3

你可以在文件夹右键的菜单栏中使用 Vue Generator Component ,弹窗中填入组件名,会自动生成一个默认组件模板,便于你快速创建一个组件。

3

代码片段

Vue 3 代码片段

包含常用 Vue3 代码片段,比如你输入 reactive,选择 reactive 的代码片段,则编辑器会自动帮你生成 const data = reactive({...}) 代码,提高你的开发效率。

关键字 JavaScript 代码片段
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(() => {...})
watchArray watch([...]) => {...}
watchEffect watchEffect(() => {...})
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 代码片段

兼容所有常用 Vue 2 代码片段,如下:

关键字 JavaScript 代码片段
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();

关键字 HTML 代码片段
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=''

关键字 Vue Router 代码片段
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) { }

关键字 Vuex 代码片段
newVuexStore const store = new Vuex.Store({})
mapGetters import { mapGetters } from 'vuex'
mapMutations import { mapMutations } from 'vuex'
mapActions import { mapActions } from 'vuex'
state state
mutations mutations
actions actions
modules modules
plugins plugins
dispatch dispatch
subscribe subscribe
registerModule registerModule
unregisterModule unregisterModule
hotUpdate hotUpdate

关键字 Nuxt.js 代码片段
nuxt <nuxt/>
nuxtChild <nuxt-child/>
nuxtLink <nuxt-link to=""/>
asyncData asyncData() {}

插件设置

你可以在插件的选项中自定义代码格式化的格式,便于定制你的 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.printWidth 10/20/30/40/n 80
vue3snippets.tabWidth 1/2/3/4/n 2
vue3snippets.singleQuote false/true false
vue3snippets.trailingComma none/es5/all es5
vue3snippets.bracketSpacing true true
vue3snippets.jsxBracketSameLine false/true false
vue3snippets.semi false/true true
vue3snippets.requirePragma false/true false
vue3snippets.insertPragma false/true false
vue3snippets.useTabs false/true false
vue3snippets.proseWrap preserve/always/never preserve
vue3snippets.arrowParens avoid/always always
vue3snippets.jsxSingleQuote false/true false
vue3snippets.htmlWhitespaceSensitivity css/strict/ignore css
vue3snippets.vueIndentScriptAndStyle false/true false
vue3snippets.endOfLine auto/lf/crlf/cr lf
vue3snippets.quoteProps as-needed/consistent/preserve as-needed

Vue 2/3 详细教程

附赠一些 Vue 中文教程,希望能帮助你快速上手:

感谢

Tencent Alloyteam Team && Qian Feng Team | [
Eno Yao](https://github.com/Wscats) | [
Aaron Xie](https://github.com/aaron-xie) | [
DK Lan](https://github.com/dk-lan) | [
Yong](https://github.com/flowerField) | [
Li Ting](https://github.com/Liting1) |
Xin | [
Lemon](https://github.com/lemonyyye) | [
Jing](https://github.com/vickySC) | [
Lin](https://github.com/shirley3790) | [
Tian Fly](https://github.com/tiantengfly) | | - | - | - | - | - | - | - | - | - | - |

希望你能喜欢这个插件!

引入的模块

如果插件能帮助到您,恳请您在 商店 中给我们一个五星的好评,您的鼓励是我们前进的最大动力,谢谢😀

协议

Vue3 Snippets 基于 MIT 协议.

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

支持 Vue 3 的语法高亮,代码格式化和代码提示的 Visual Studio Code 插件。 展开 收起
取消

vue-snippets

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/wscats/vue-snippets.git
git@gitee.com:wscats/vue-snippets.git
wscats
vue-snippets
vue-snippets
master

搜索帮助