详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持


Posted in Javascript onOctober 21, 2017

本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下:

一个小遗憾

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持 

能来看这篇文章的想必不用我来介绍vue是什么了。先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的。默哀一分钟。

添加高亮和语法支持

这个我是通过插件来实现的。网上目前有两个插件:

插件1:https://github.com/henjue/vue-for-idea

插件2:https://github.com/postalservice14/vuejs-plugin

我现在用的是插件1。

它能提供一点的语法和代码高亮还有一个文件模板。

就是你在左侧工程栏右键新建的时候会有vue文件了。

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

然而他的语法支持实在有限,你还是别抱太大希望。。一些cmd+点击的跳转都不能实现。

我还去设置内添加了额外的帮助:

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持 

这是由这个组织维护在github上的一个语法列表,在webstorm上安装了之后会有对应的语法提示。进入设置中的这里,点击右边的download,就会出现这个列表,选择上面的源,一共有两个选项,选择第二个,就出现这个列表了。找到vue,安装就可以了。

但是感觉在.vue文件中作用也不是很大。。。

添加ES6支持

首先,你要设置webstorm自身的JavaScript的版本。如图:

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持 

这里默认是ES5.1,把它改成ES6。

然后打开设置:

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持 

找到这个地方,找到上面的html类型,将*.vue添加进其中。确定的时候会提示被占用了,要把那个清除掉,继续就OK了。
这样系统会把.vue文件看成html,也就能正确识别里面的<script>标签了。

如果你不想这样做,那也可以。还有一种方法。
直接在<script>标签中添加type="text/ecmascript-6",这样也是OK的,里面的代码也会高亮并支持ES6。

支持sass

看过vue-loader文档的知道,在*.vue模板中是支持几种css预处理器和模板语言jade的。
但是当你在<style>标签中加上lang=sass然后写sass时会发现IDE一片报错。。一开始我想到的是webstorm的Language Injections,并照着已有的写了一个:

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持 

然而并不能用。。。

去谷歌了下,发现也有人这么做了,然而也没有成功。。至于为什么也没搞清楚。。倒是知道了jade是模板语言,不能这么做。

但是sass不应该啊。。

然而也不是没有收获。

发现了<style>标签中有rel="stylesheet/scss"type="text/css"时能正确识别sass语言。如:

<style scoped lang="sass" rel="stylesheet/scss" type="text/css">

同理less也可以。但是需要webstorm版本高于2016.1.1

关于jade支持

我还不会jade模板语言。但是在找sass支持的过程中发现有人这么“曲线救国”的支持了jade:

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

同时我也发现了vue-idea-plugin插件的作者不靠谱的承诺,戳这里,说会支持jade,但是没有具体的时间。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
JSON取值前判断
Dec 23 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
Vue filter介绍及其使用详解
Oct 21 #Javascript
详解node nvm进行node多版本管理
Oct 21 #Javascript
JS实现瀑布流布局
Oct 21 #Javascript
js实现Tab选项卡切换效果
Jul 17 #Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 #Javascript
js注册时输入合法性验证方法
Oct 21 #Javascript
angular4实现tab栏切换的方法示例
Oct 21 #Javascript
You might like
FleaPHP的安全设置方法
2008/09/15 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP闭包实例解析
2014/09/08 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Prototype Class对象学习
2009/07/19 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python3基础之输入和输出实例分析
2014/08/18 Python
win与linux系统中python requests 安装
2016/12/04 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
利用python 读写csv文件
2020/09/10 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
党课学习思想汇报
2014/01/02 职场文书
员工拓展培训方案
2014/02/15 职场文书
家长寄语大全
2014/04/02 职场文书
博士生专家推荐信
2014/09/26 职场文书
2014年招生工作总结
2014/11/26 职场文书
大班上学期个人总结
2015/02/13 职场文书
全国助残日活动总结
2015/05/11 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫