VS Code插件Vue2 代码补全工具

一、简介

 

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