zl程序教程

您现在的位置是:首页 >  工具

当前栏目

VS Code插件Vue2 代码补全工具

2023-09-14 08:59:53 时间

一、简介

 

此扩展将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

 

二、安装

 

[javascript] view plain copy
  1. ext install vue-snippets  

 

三、使用

注:安装之后不需要配置,但需要重启,安装之后就可以使用

js提示

SnippetDemo


html中的提示和代码补全:

vif指令



vfor指令:

常用缩写列表:

Vue

SnippetPurpose
vbase Single file component base

Template

SnippetPurpose
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

SnippetPurpose
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

SnippetPurpose
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)

SnippetPurpose
gitignore .gitignore file presets