Vetur:VSCode下强大的Vue开发工具

原创 2017年06月27日 09:27:31

Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新。虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优秀的plugins都提供了强大的支持。比如VSCode下面的Vetur就是这样一款必备的Vue开发工具。下面就开始介绍一下它的一些功能吧

Github仓库:Vetur
官方文档:Vetur文档

语法高亮

Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass和TypeScript,完整的支持高亮的语法如下所示:

语法高亮

Snippet

你可以使用一些snippet来编写不同的脚本,比如在script中申明 lang=”ts” 来开发TypeScript

<script lang="ts">
  // Use TS snippets here
</script>

Emmet

VSCode本身自带了Emmet,能够通过Tab键对HTML5的代码进行快速开发,不过,VSCode中需要修改Emmet配置才能对Vue进行支持。打开文件->首选项->设置,就会进入到 settings.json 文件中,在左侧是VSCode默认的配置

settings.json

在窗口右侧可以进行一系列的配置,在其中添加

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

这样就可以愉快的在Vue中体验Emmet带来的方便和快捷了

错误检测

Vetur默认使用 eslint-plugin-vue@beta 来检测

你可以在设置中的 settings.json 文件关闭 linting:

settings.json

修改 vetur.validation.template 为false即可

格式

Vetur推荐使用2个空格来规定 editor.tabSize 和 editor.insertSpace,对于html和css/scss/less格式使用js-beautify来规范,js/ts的格式使用 TypeScript’s language service,同时这些配置是可以改变的。具体可以参考:

js-beautify的Github仓库:js-beautify

Sbulime-HTMLPrettify的Github仓库:Sublime-HTMLPrettify

除了以上的功能外,还有代码补全和Debugging功能,总而言之,一个工具如果能够为开发提供非常大的便利,那么它就是非常值的推荐的。

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 3.0 未本地化版本许可协议进行许可。 https://blog.csdn.net/xjlinme/article/details/73770416

VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1398

VSCode装上vetur插件可以支持emmnet

snippet,abbrev,hotstring,completion
  • liuyukuan
  • liuyukuan
  • 2017-04-15 21:20:24
  • 3781

VSCode的vetur插件提示 Vue中的v-for有[vue-language-server]错误

VSCode的vetur插件提示 Vue中的v-for有[vue-language-server] 错误
  • github_37533433
  • github_37533433
  • 2017-12-30 14:46:21
  • 1606

vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法

使用VS Code 出现如下问题,如图: Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须的。 更改vetur配置            vscode->首选...
  • zhouyu_721521
  • zhouyu_721521
  • 2017-07-28 14:49:23
  • 4644

vscode 中 安装插件 vetur 之后报错 The Vue Language Server server crashed 5 times in the last 3 minutes. The s

The Vue Language Server server crashed 5 times in the last 3 minutes. The server will not be restart...
  • lhb_11
  • lhb_11
  • 2017-09-17 16:44:54
  • 3063

搭建vscode+vue环境

一、安装vue.js1.简介Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关...
  • mao834099514
  • mao834099514
  • 2018-01-23 13:50:30
  • 2929

VSCode打开已有vuejs项目

今天公司培训使用VSCode来编写vuejs项目,拿了一个范例来展示,讲的比较快,没怎么听清楚。于是下来自己动手配置一下。下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后,点击Ctr...
  • Yoryky
  • Yoryky
  • 2017-10-19 22:46:35
  • 5308

vscode格式化Vue出现的问题

一、VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号  本来就是简写比较方便舒服,结果一个格式化回到解放前 最后找到问题原因: 首先,vetur默...
  • qq_32340877
  • qq_32340877
  • 2018-03-07 17:13:55
  • 370

VS Code之Vue开发常用插件

Auto Close Tag 自动补全html标签 Auto Rename Tag 同步更改html尾标签 ESLint ESlint语法提示 settings.json 文件 "es...
  • archer119
  • archer119
  • 2017-05-28 07:42:49
  • 22892

vscode下面开发vue.js项目

vscode下面开发vue.js项目1.首先用官方vue-cli脚手架创建一个vue的集成环境(不会的请阅读上一章节),目录如下:目录结构介绍请阅读博客:https://www.jianshu.com...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2018-01-26 20:57:58
  • 1031
收藏助手
不良信息举报
您举报文章:Vetur:VSCode下强大的Vue开发工具
举报原因:
原因补充:

(最多只允许输入30个字)