webstorm添加*.vue文件支持


Posted in Javascript onMay 08, 2018

这篇文章写了有1年多了,发现这篇文章关注的人不少。现在Webstorm要支持vue已经有了更方便的方式。避免误导,还是来更新下。

方法1:安装 Vue.js 插件

打开 Settings->Plugins 搜索安装

css预处理器支持

在我写这文章的时间,还没有支持预处理的方案,不过现在已经很简单了。

给 style 标签加上 rel=”stylesheet/scss” 属性即可支持 scss 语法,看规则可以改成 less stylus 之类的。

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

方法2:Webstorm EAP 版已经原生支持vue文件

看这里 https://blog.jetbrains.com/webstorm/2017/02/webstorm-2017-1-eap-171-2822/ EAP版可能不太稳定,不过也能用。
或者等过段时间发布的 Webstorm 2017.1 稳定版。

不得不说vue真是越用越厉害了啊,Webstorm也开始支持了。最后 原生支持才是最好的

以下内容过时,针对旧版本的Webstorm

webstorm是前端开发神器,但我一直都不喜欢webstorm,就因为那很挫的配色和那大光标。

上阵子开始玩 Vuejs,在 Vue 中,可以 .vue 文件实现组件化,但各种编辑器都支持不好,作者也给sublime开发了相关的vue插件。我觉得用sublime就是在浪费生命啊,花那么多时间来装插件配环境,我选择IDE!

坚持用sublime写了一个月的vue,没有智能提示(而对重度依赖提示),不能对代码进行格式化,手动调缩进,尼玛,能坚持这么久也不容易。所以折腾了下webstorm看怎么支持,所以就有这篇笔记。

vue支持

打开 Settings => File Types 找到 HTML 添加 *.vue

webstorm添加*.vue文件支持

这样vue文件就相当于html文件,可以编辑css,js,也都有智能提示。

我一般用的是 es6 ,所以vue写es6的代码,webstorm还是会报错。

vue里ES6支持

将script标签添加 type=”es6” 属性

<script type="es6">
</script>

然后打开 Settings => Language Injections 添加 XML Tag Injection,内容如下图。

webstorm添加*.vue文件支持

*.js 支持ES6

webstorm默认js文件是ES5语法

打开 Settings => Languages & Frameworks => Javascript

把 Javascript Language version 改为 ECMAScript 6

webstorm添加*.vue文件支持

PS:要在vue文件里写sass,stylus之类的css预处理,webstorm就不支持了,我也尝试了添加 Injection ,代码高亮正常,但却是临时的,只要一改动代码,又会划很多红线了,经过google,这似乎是webstorm的一个已知的Bug。

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

Javascript 相关文章推荐
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
vue实现div单选多选功能
Jul 16 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
浅谈vue项目如何打包扔向服务器
May 08 #Javascript
Javascript实现购物车功能的详细代码
May 08 #Javascript
vue-cli 如何打包上线的方法示例
May 08 #Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 #Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 #Javascript
angularjs实现的购物金额计算工具示例
May 08 #Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 #Javascript
You might like
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
详解Python发送邮件实例
2016/01/10 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python实现随机漫步方法和原理
2019/06/10 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
为什么相对PHP黑python的更少
2020/06/21 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
巴西本土电商平台:Americanas
2020/06/21 全球购物
小学教师事迹材料
2014/01/13 职场文书
军人违纪检讨书
2014/02/04 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
python playwrigh框架入门安装使用
2022/07/23 Python