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 相关文章推荐
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
js表单登陆验证示例
Oct 19 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 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
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP自定义错误用法示例
2016/09/28 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
网页自动跳转代码收集
2009/09/27 Javascript
javascript Object与Function使用
2010/01/11 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Koa 使用小技巧(小结)
2018/10/22 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python实现列表的排序方法分享
2019/07/01 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python和go语言的区别是什么
2020/07/20 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
十八大宣传标语
2014/10/09 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书