详解在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 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
webpack 模块热替换原理
Apr 09 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 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
php循环输出数据库内容的代码
2008/05/24 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
js中this用法实例详解
2015/05/05 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
从零学Python之hello world
2014/05/21 Python
Python压缩和解压缩zip文件
2015/02/14 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python3解释器知识点总结
2019/02/19 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python 读取.nii格式图像实例
2020/07/01 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Django多个app urls配置代码实例
2020/11/26 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
个人充满哲理的自我评价
2014/02/20 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
面试通知单大全
2015/04/20 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
MySql分区类型及创建分区的方法
2022/04/13 MySQL
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL