推荐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 相关文章推荐
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
微信小程序实现tab左右切换效果
Nov 15 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
php 执行系统命令的方法
2009/07/07 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
上海微创软件面试题
2012/06/14 面试题
医学院学生的自我评价分享
2013/11/19 职场文书
家长评语大全
2014/01/22 职场文书
《都江堰》教学反思
2014/02/07 职场文书
2014年计生标语
2014/06/23 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
学术会议通知
2015/04/15 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL