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

第一步:全局安装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语法

原文地址:https://www.cnblogs.com/lee90/p/5817943.html