推荐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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
简明json介绍
2008/09/28 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
简单的分页代码js实现
2016/05/17 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
自我评价怎么写好呢?
2013/12/05 职场文书
安全检查管理制度
2014/02/02 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
公司介绍信范文
2015/01/31 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python