VS Code 安裝擴展 ①Vetur;②Vue VSCode Snippets


安裝完擴展,記得重啟一下編輯器

Vetur  美化代碼,縮進2個空格

Vue  VSCode Snippets  代碼補全工具

  支持:

  • VUE(.vue)
  • HTML格式(.html)
  • 使用Javascript(.js文件)
  • 打字稿(.TS)
  • 帕格(.pug)

常用縮寫列表:左列是縮寫

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
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM