美文网首页笔戈 Web TeamIT技术nodejs
WebStorm ES6 语法支持设置

WebStorm ES6 语法支持设置

作者: 吴彦欣 | 来源:发表于2015-09-11 18:07 被阅读98402次

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
    ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。

    作为一只猴子,我也想尝试一下ES6有什么新特性,于是开始了学习之路。

    在webstorm写下了这段代码,体验一下ES6语法的便利,但是一大堆报错

    各种语法错误 what the fuck

    相信每一只程序猴都不想在这样的环境下编码,反正本猴不想

    1 语法支持设置

    Preferences > Languages & Frameworks > JavaScript

    这里只要配置ECMAScript版本即可


    配置之后


    2 自动转码为ES5

    file watcher + babel(ES6转码器)

    你可能希望你写的代码有更好的兼容性,但目前的ES6肯定不是所有浏览器都支持的,所以我们要用到ES6转码器。
    Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。

    而且你还希望每次修改代码时能自动转码,所以还要用到webstorm的file watcher(当然还有其他解决方案)

    • npm install -g babel
    • Preferences > Tools > File watchers
    • 点击“+”按钮
    file watcher配置界面

    File Type:配置该监听器监听的文件类型,可以在Preferences > Editor > File types中配置
    Scope:配置该监听器的监听范围,可自定义新的范围,也可以使用Preferences > Appearance & Behavior > Scopes中定义的范围
    Program:babel的安装位置
    Arguments:命令执行参数,参见Babel CLI
    Working directory:babel命令执行的位置,默认为文件所在目录

    这样对文件做修改会随时生成编译成ES5的文件以及sourceMap文件


    编译后

    相关文章

      网友评论

      • lsif的简书:webstorm 2016.2的按照步骤配置了,仍然报错,请问是为什么?
      • 孟烦了的爱豆:配置没试过,解决代码报错问题,哈哈,谢谢先。
      • unfind:作为一个前端的初学者,每次使用网上demo的ec6的语法报错,都是通过在webstrom里面直接点击切换,都不知道主动设置在哪。这篇让我涨姿势了。
      • _小田:赞一个
      • 混蛋_7e79:不知道大家用webstorm的时候有没有遇到这样的问题,就是双击鼠标之后,不能选择双引号中的字符串,只能选择标签。还有的时候换行不好用,得按shitf + 回车键才能换行。不知道是为什么。百度上也找不到答案很无解~
      • 7ef6d2dd4970:写的挺不错的,已经收藏了。

        源码解析:http://suo.im/1FKU2k


        6afbc8b2b7d6:源码解析还不错

        加油!
      • cb59a6892c52:自动编译不了map文件,不知道为啥?
      • 01041dc8385c:求help
      • 01041dc8385c:我win10系统 webstorm11 版本的也设置了es6 下载了babel ,但还是有报错,又找不到原因
        01041dc8385c:@吴彦欣 好吧
        吴彦欣:@薄荷略凉 sorry,我现在你用webstorm了,帮不了你
      • U小姐咯:mac上不生成js.map类型文件,怎么破
        吴彦欣:@U小姐咯 sorry,我已经没用webstorm改用Atom了
      • 点亮橘子树:mac 添加Babel please set program to run 怎么解决
        吴彦欣:没遇到
      • 胡衍生:开启成功了,但是后台有10个进程执行babel转码操作,而且一直不停止,导致电脑IO严重卡顿。。这种情况楼主遇到过吗?如何处理的?
        吴彦欣::+1:🏻666
        胡衍生:@吴彦欣 明白怎么回事了。因为wacth的是整个project,导致的npm install 新的插件时,所以的插件都被babel转码了,所以需要自定义scope的范围即可解决问题。
        吴彦欣:@胡衍生 没遇到过,我现在已经转用vs code了
      • 胡衍生:开启成功了,但是后台有个进程执行babel转码操作,而且一直不停止,导致电脑IO严重卡顿。。这种情况楼主遇到过吗?如何处理的?
      • f1118ac8f059:win10系统 webstorm 10版本按照上面的操作了,还是直接报红了。求解,谢谢!
        郝方舟:还是一样的问题呀,没有解决
        ice小末:和你一样 请问你的可以了吗?
      • d2a590d0e550:现在node 可以直接编译,配置下就ok了
        吴彦欣:@懒人兔兔 node v6对于es6已经支持到百分之九十多了
      • 拳拳:还有许多不能转码的,比如说Array.form()就转不了,如何添加呢
        8e761910f696:@拳拳 请将Node升级到最新稳定版本,在按照楼主所说的设置之后,就不报错了
      • a94d7383329f:我在windows下设置成es6是可以去掉编辑器中报错的 但是在linux下设置成cs6还是报错,这是为什么呢 和版本有关系吗 windows下得webstorm是9 linux下得webstorm是10
        吴彦欣:@姜豆豆 和版本是没有关系的,你看看报的是什么错吧
      • ba1bec919765:windows下,`webstorm 9` 添加后,无效。是不是还是得配置`libraries`,可是9里面没有`ES6`
        吴彦欣:@九木旭 不打算升级下你的webstorm吗?现在都11了。我用的是10
      • 沧浪的羽毛:不知在LINUX会怎样
        134feca3c3f1:@沧浪的羽毛 在ubuntu14.04下试过,完美适配ES6,太棒了。
      • 沧浪的羽毛:在WINDOW下,试过无用,会有报错
        郝方舟:@罗永慧 问题解决了吗,用的最新版,还是有这个问题
        罗永慧:@Elson 确实会报错,我的也是,不知道有没有解决办法SyntaxError: Unexpected token import
        吴彦欣:@沧浪的羽毛 新版本的webstorm吗?

      本文标题:WebStorm ES6 语法支持设置

      本文链接:https://www.haomeiwen.com/subject/seelcttx.html