推荐VSCode 上特别好用的 Vue 插件之vetur


Posted in Javascript onSeptember 14, 2017

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

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

语法高亮

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

语法高亮

推荐VSCode 上特别好用的 Vue 插件之vetur

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默认的配置

推荐VSCode 上特别好用的 Vue 插件之vetur

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

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

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

错误检测

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

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

推荐VSCode 上特别好用的 Vue 插件之vetur

修改 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功能,总而言之,一个工具如果能够为开发提供非常大的便利,那么它就是非常值的推荐的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
jQuery选择器全集详解
Nov 24 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
vue 计时器组件的实现代码
Sep 14 #Javascript
详解tween.js的使用教程
Sep 14 #Javascript
JS库之wow.js使用方法
Sep 14 #Javascript
JavaScript正则表达式和级联效果
Sep 14 #Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 #Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 #Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 #Javascript
You might like
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
ECMAScript 基础知识
2007/06/29 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python实现邮件发送功能
2019/08/10 Python
python机器学习实现决策树
2019/11/11 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python GUI计算器的实现
2020/10/09 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
《风筝》教学反思
2014/04/10 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers