推荐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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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
点击广告后才能获得下载地址
2006/10/26 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python程序语言快速上手教程
2012/07/18 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
跟单文员的岗位职责
2013/11/14 职场文书
优秀经理事迹材料
2014/02/01 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
慈善晚会策划方案
2014/05/14 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python