推荐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 相关文章推荐
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
Node.js事件驱动
Jun 18 Javascript
javascript 用函数实现继承详解
May 28 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP chop()函数讲解
2019/02/11 PHP
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Django缓存系统实现过程解析
2019/08/02 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python 利用toapi库自动生成api
2020/10/19 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
往来会计岗位职责
2013/12/19 职场文书
小学运动会表扬稿
2014/01/19 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
公务员培的训心得体会
2014/09/01 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Python绘制散乱的点构成的图的方法
2022/04/21 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL