推荐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 文件夹选择框的两种解决方案
Jul 01 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
原生JS实现天气预报
Jun 16 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 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 加密与解密的斗争
2009/04/17 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Python交互式图形编程的实现
2019/07/25 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
教师自我剖析材料(群众路线)
2014/09/29 职场文书
教师个人事迹材料
2014/12/17 职场文书
2015年护士节活动总结
2015/02/10 职场文书
小马王观后感
2015/06/11 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python pygame实现中国象棋单机版源码
2021/06/20 Python
Node.js实现断点续传
2021/06/23 Javascript