第一步:全局安装babel-cli

npm install -g babel-cli

第二步,新建一个空项目,在 WebStorm 中的当前项目中打开 Terminal,进入项目的根目录下,

安装 ES2015 preset,ES2015 preset会自动转译那些需要转换为 ES5 的 ES6 代码。

npm install --save-dev babel-preset-es2015

如图:

第三步:根目录路径下新建.babelrc文件,内容如下

{
"presets": ["es2015"]
}

第四步:新建const.js,写入es6,发现页面报错,将JavaScript语言版本切换为ECMAScript6

点击File —>settings,弹出设置框。把js的版本设置为: ECMAScript 6  ,勾选prefer strict mode这项。

第五步:  紧接着配置javascript的下的选项, 并点击apply启用。并点击OK按钮。

第六步: 配置 File Watchers 实现自动转译。第三步配置完,就出现了下面的提示。【如果没有出现,就手动add watcher】

第七步: 点击上面的Add watcher,【如果没有出现第三步的提示,则可以通过,file->settings-tools-file watcher来进行添加Babel】弹出如下窗口,点击OK.【配置 WebStorm 的 File Watchers 以实现自动转译我们编写的 ES6 代码。】

此处注意修改arguments的配置:

  • Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$

 第七步 发现const.js下出现compile.js文件,查看生成的compile,发现已经生成成功,如下:说明已经成功了,可以进行es6的学习,并查看转码后的代码

1、配置.vue文件的快捷创建

  ①、File——》settings——》plugins,安装vue.js插件。

②、创建新建.vue文件的模板

③、结果:可以通过File——》New,创建.vue文件,生成下图模板

2、使.vue文件语法高亮

3、.vue支持es6语法

在webstrorm中配置好es6 babel【更新:在webstorm中配置.vue和.vue文件中支持es6】的更多相关文章

  1. es6 babel转码器安装配置及常见命令

    示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...

  2. gulp插件实现压缩一个文件夹下不同目录下的js文件(支持es6)

    gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩 ...

  3. PHP 错误与异常 笔记与总结(5)配置文件中与错误日志相关的选项 && 将错误记录到指定的文件中

    [记录错误(生产环境)] php.ini: ① 开启 / 关闭 错误日志功能 log_errors = On ② 设置 log_errors 的最大字节数 log_errors_max_len = 其 ...

  4. vue的js文件中获取vue实例

    1.main.js导出vue实例: var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/&g ...

  5. Vue main.js 文件中全局组件注册部分

    在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

  6. linux中,通过crontab -e编辑生成的定时任务,写在哪个文件中

    环境描述: 操作系统:Red Hat Enterprise Linux Server release 6.6 (Santiago) 内核版本:2.6.32-504.el6.x86_64 需求描述: 一 ...

  7. Jmeter实现从csv文件中随机读取数据

    一.需求 参数放在csv文件中,文件格式如下,需求每次从文件中随机读取一行数据. 二.步骤 1.在csv文件中新增加一列,pl 2.新增一个配置原件-随机数,设置如下: 50是文件数据的行数 3.新增 ...

  8. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...

  9. [数据科学] 从csv, xls文件中提取数据

    在python语言中,用丰富的函数库来从文件中提取数据,这篇博客讲解怎么从csv, xls文件中得到想要的数据. 点击下载数据文件http://seanlahman.com/files/databas ...

  10. Effective Objective-C 2.0 — 第二条:类的头文件中尽量少引入其他头文件

    第二条:类的头文件中尽量少引入其他头文件 使用向前声明(forward declaring) @class EOCEmployer 1, 将引入头文件的实际尽量延后,只在确有需要时才引入,这样就可以减 ...

随机推荐

  1. 团体程序设计天梯赛-练习集-*L1-043. 阅览室

    L1-043. 阅览室 天梯图书阅览室请你编写一个简单的图书借阅统计程序.当读者借书时,管理员输入书号并按下S键,程序开始计时:当读者还书时,管理员输入书号并按下E键,程序结束计时.书号为不超过100 ...

  2. 复习MySQL④查询功能、连接方式、联合查询

    用select语句查询: select〈目标列组〉 from〈数据源〉 [where〈元组选择条件〉] [group by〈分列组〉[having 〈组选择条件〉]] [order by〈排序列1〉〈 ...

  3. PAT_A1145#Hashing - Average Search Time

    Source: PAT A1145 Hashing - Average Search Time (25 分) Description: The task of this problem is simp ...

  4. 分别用for循环,while do-while以及递归方法实现n的阶乘!

    分别用for循环,while do-while以及递归方法实现n的阶乘! 源码: package book;import java.util.Scanner;public class Access { ...

  5. android 权限问题分析

    Android系统是运行在Linux内核上的,Android与Linux分别有自己的一套严格的安全及权限机制, 很多像我这样的新手,尤其是习惯了windows低安全限制的用户,很容易在这方面弄混淆,下 ...

  6. java.lang.Object 方法解析

    1.clone() a.是一个native方法,效率比非native高 b.是protected 修饰的,要用他必须继承object,默认都是继承object的 c.返回是一个object 对象,需要 ...

  7. 孟晓阳:IT运行监控系统设计与使用心得

    http://www.cn-healthcare.com/article/20160325/content-482138.html

  8. Maven错误:[ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?的解决方法

    错误: [ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather tha ...

  9. HDU 1912

    坑,直接把公路看成X轴来做,然后,排序扫描一下,你懂的. #include <iostream> #include <algorithm> #include <cstdi ...

  10. 微博预计要火一阵的SleepSort之Shell及C实现

    今日在微博看到如此奇妙的代码.竟然还有新的sort算法,对于我这样的渣渣必须研究一下,代码例如以下: #!/bin.bash function f() { sleep "$1" / ...