一、簡介
此擴展將Vue 2代碼片段和語法突出顯示添加到Visual Studio代碼中。
這個插件基於最新的Vue官方語法高亮文件添加了語法高亮，並且依據Vue 2的API添加了代碼片段。
支持語言
- VUE（.vue）
- HTML格式（.html）
- 使用Javascript（.js文件）
- 打字稿（.TS）
- 帕格（.pug）
官網地址：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
二、安裝
- ext install vue-snippets
三、使用
注：安裝之后不需要配置，但需要重啟，安裝之后就可以使用
js提示
html中的提示和代碼補全：
vif指令
vfor指令：
常用縮寫列表：
Vue
| Snippet | Purpose |
|---|---|
vbase |
Single file component base |
Template
| Snippet | Purpose |
|---|---|
vfor |
v-for directive |
vmodel |
Semantic v-model directive |
vmodel-num |
Semantic v-model number directive |
von |
v-on click handler with arguments |
vel-props |
Component element with props |
vsrc |
Image src binding |
vstyle |
Inline style binding |
vstyle-obj |
Inline style binding with objects |
vclass |
Class binding |
vclass-obj |
Class binding with objects |
vclass-obj-mult |
Multiple conditional class bindings |
vanim |
Transition component with JS hooks |
Script
| Snippet | Purpose |
|---|---|
vdata |
Component data as a function |
vmethod |
Vue method |
vcomputed |
Vue computed property |
vwatcher |
Vue watcher with new and old value args |
vprops |
Props with type and default |
vimport |
Import one component into another |
vimport-c |
Import one component into another within the export statement |
vimport-export |
Import one component into another and use it within the export statement |
vfilter |
Vue filter |
vmixin |
Create a Vue Mixin |
vmixin-use |
Bring a mixin into a component to use |
vc-direct |
Vue create a custom directive |
vimport-lib |
Import a library |
vimport-gsap |
Import GreenSock with Timeline and Eases |
vanimhook-js |
Using the Transition component JS hooks in methods |
vinc |
incrementer |
vdec |
decrementer |
Vuex
| Snippet | Purpose |
|---|---|
vstore |
Base for Vuex store.js |
vgetter |
Vuex Getter |
vmutation |
Vuex Mutation |
vaction |
Vuex Action |
vstore-import |
Import vuex store into main.js |
Extra (plaintext)
| Snippet | Purpose |
|---|---|
gitignore |
.gitignore file presets |