webstorm支持ES6语法设置 - CSDN博客
webstorm支持ES6语法设置
ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。
ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。
1 语法支持设置
Settings& Languages & Frameworks & JavaScript，这里设置为ECMAScript6版本即可
2 自动转码为ES5
file watcher +&（ES6转码器）
你可能希望你写的代码有更好的兼容性，但目前的ES6肯定不是所有浏览器都支持的，所以我们要用到ES6转码器。
是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。
而且你还希望每次修改代码时能自动转码，所以还要用到webstorm的file watcher（当然还有其他解决方案）
npm install
-g babelPreferences & Tools & File watchers
点击“+”按钮
file watcher配置界面
File Type：配置该监听器监听的文件类型，可以在Preferences & Editor & File types中配置
Scope：配置该监听器的监听范围，可自定义新的范围，也可以使用Preferences & Appearance & Behavior & Scopes
Program：babel的安装位置
Arguments：命令执行参数，参见
Working directory：babel命令执行的位置，默认为文件所在目录
这样对文件做修改会随时生成编译成ES5的文件以及sourceMap文件
本文已收录于以下专栏：
相关文章推荐
ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript
ES6的目标，是使得Jav...
本篇文章主要是针对上篇博客vue项目构建中构建的项目在webstorm中的一些ES6语法支持以及vue高亮和语法支持。webstorm中ES6语法配置当我们用webstorm打开我们所构建的elma项...
一、设置Webstorm支持ES6
在 Settings -> Languages&Frameworks -> JavaScript 里设置为 ES6 。
二、设置ES6自动转码成ES5
用webstorm开发项目用到了es6与vue，但是编写的文件中总有红色的下划线，看起来很不爽，那么怎么把这些下划线去掉呢？
原创链接：/articles...
webstorm默认情况下不支持ES6的
ES6在window下的配置使用以及在sublime Text中的使用
JavaScript的历史诞生JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语...
ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。
ES6的目标，是使得Jav...
字数509 阅读14498 评论27 喜欢18
ECMAScript 6是JavaScrip...
WebStorm ES6 语法支持设置
字数509 阅读2676 评论5 喜欢8
ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)webstrom 配置 es6 的运行环境 - hsl0530hsl的博客 - CSDN博客
webstrom 配置 es6 的运行环境
Win7 下 WebStrom 配置 es6 的运行环境，WebStrom 的版本是 11.0.3，其他的版本，可能略有所不同。
1. node.js 安装
首先 WebStrom 需要安装 node.js，以支持 npm 指令。
安装node.js程序，按照提示一步步安装即可，注意在安装时，勾选自动添加到 系统环境 中的选项。
Node.js安装完成后，检查环境变量path中是否配置了Node.js；在命令行中输入”path”，结果如下：
检查Node.js是否安装成功，也可直接在命令行中输入“node -v”，进行测试，结果中显示当前安装的 node.js 的版本，说明安装正确了。
开始在WebStorm中配置node.js。File-&settings
输入node.js，配置Node interpreter；
2. ES6 语法支持设置
File & Settings & Languages & Frameworks & JavaScript
3. 自动转码为ES5
file watcher + babel-cli（ES6转码器）
你可能希望你写的代码有更好的兼容性，但目前的ES6肯定不是所有浏览器都支持的，所以我们要用到ES6转码器。
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。
而且你还希望每次修改代码时能自动转码，所以还要用到webstorm的file watcher（当然还有其他解决方案）
首先需要在你准备安装 babel 的根目录下(或是当前项目下)手动新建一个 package.json 文件，内容如下：
"name": "yourProjectName",
"version": "1.0.0"
打开IDE的Terminal
View & Tool Windows & Terminal
在打开的 Terminal 窗口中输入以下命令，开始安装babel-cli
npm install –save-dev babel-cli //*注意save前面是两个[-]
这个时候若是老是卡在如下提示：
[ …………..] - fetchMetadata: sill mapToRegistry uri
请先修改 registry 再试试：
首先在 CMD 窗口中输入如下代码：
npm config get registry
先查看当前的 registry 是否是：
如果是的话，使用如下命令修改：
npm config set registry
完成后再次使用如下命令，查看是否修改成功：
npm config get registry
添加 file watcher
File & Settings & Tools & File Watchers
点击右边的 +号添加 babel，如下：
然后在打开的配置界面中，其他配置项可以不做修改，只需要修改 Program 这一栏，找到你安装的 babel-cli 的安装目录下的 安装目录\node_modules\.bin\babel.cmd，安装目录一般在你 Webstrom 的工程目录同级。
然后点击 OK就可以了，这个时候你就会发现左边文件目录中多出来一个 *-compiled.js 和
*-compiles.js.map 文件.
还差一步操作，现在只是搞定了自动转换的功能，系统默认把ES6 compile成了ES6..（你应该会发现 compile 出来的东西跟原来的一样. *-compiled.js文件中的内容并没有被转换成ES5的格式），所以我们需要安装Babel的preset以正确识别ES6代码。
安装 babel 的 ES6 preset
在 WebStrom 的 Terminal 窗口中输入如下命令：
npm install –save-dev babel-preset-es2015 //*注意save前面是两个[-]
如果是 WebStrom 2017 后面的版本，不能安装 es2015，这个已经被 env 所代替了，需要安装使用如下 preset:
npm install –save-dev babel-preset-env //*注意save前面是两个[-]
手动添加 babel 的配置文件
（这个配置也可以不用，默认就是的）在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上
"presets": [
现在全部 OK 了，在 WebStrom 中正确书写 ES6 的代码，会自动编辑成 ES5 的 -compiled.js 文件。
注意 package.json 里面的内容应该如下：
"name": "test-project",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.0"
let a = `日期${new Date()}`;
console.log(a);
const tmpl = addrs =& `
${addrs.map(addr =& `
&tr&&${addr.first}&&
&&${addr.last}&&
`).join('')}
const data = [
{ first: '&', last: 'Bond' },
{ first: 'Lars', last: '&' }
转换成的 -compiled.js 文件中的代码：
var a = "\u65E5\u671F" + new Date();
console.log(a);
var tmpl = function tmpl(addrs) {
return "\n
" + addrs.map(function (addr) {
return "\n
&tr&&td&" + addr.first + "&/td&&/tr&\n
&tr&&td&" + addr.last + "&/td&&/tr&\n
}).join('') + "\n
&/table&\n";
var data = [{ first: '&Jane&', last: 'Bond' }, { first: 'Lars', last: '&Croft&' }];
console.log(tmpl(data));
配置好 babel 的 file Watcher 后，文件只要一有修改，就会触发这个自动转换。如此以来，整个 WebStrom 就会很卡，一直在编译。
为了解决这个问题，我们可以关闭 WebStrom 的自动保存功能，并且关闭 file watcher 的文件改变时就触发的自动监听，让文件在保存是触发这个转换事件。
关闭 WebStrom 的自动保存功能
首先，关闭自动保存：
File & Settings &Appearance & Behavior & System Settings
然后，打开没有保存文件的提示图标：
File & Settings & Editor & General & Editor Tabs
关闭 Babel File Watcher 的自动监听
点击 OK 就可以了，现在需要使用 Ctrl + S 手动保存后，才会进行转换。
我的热门文章1.webstorm中es6语法报错，解决方法：
打开 Settings =& Languages & Frameworks =& Javascript把 Javascript Language version 改为 ECMAScript 6
这样做所有的.js文件中es6不再报错，但是.vue文件中es6语法依然报错。
2. &.vue文件中es6语法报错
(1)打开 Settings =& File Types 找到 HTML 添加 *.vue
这样vue文件就相当于html文件，可以编辑css，js，也都有智能提示。但是，在.vue文件中es6语法还是报错。
(2).粗暴：直接在&script&标签中添加type="text/ecmascript-6"，.vue里面的代码会高亮并支持ES6。
(3).将script标签添加&type=”es6”&属性
然后打开 Settings =& Language Injections 添加 XML Tag Injection，内容如下图。
&3.补充新功能：右键新建时出现.vue文件类型，就像新建html文件一样，方法：
Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Extension 为vue,下面的位置可以填写自定义的初始化模板内容。
点击OK 返回，在项目中新建会出现vue文件 webstorm配置新建vue文件完成。
阅读(...) 评论()在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
1.webstorm中我在写Vue组件时尝试了ES6的箭头函数写法，但是代码提示有错误，实际是可以编译通过的2.现在让人很别扭的就是看起来很别扭，而且代码格式化后也不再整齐3.是否是我缺少了一些设置，还是说需要额外下一些插件来解决，我已经尝试了vue-for-idea插件和vue插件，但是目前这两个插件都不能解决我的需求4.代码就不贴了，直接贴图看下目前的情况吧
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我之前遇到这个问题的时候， 把前面讲的配置内容都搞好，把项目目录下的.idea目录删了重新登录webstorem就好了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
将&script&改写成&script type="text/ecmascript-6"&
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：关注社区微信公众号: PMvideo
webStorm设置babel，使用es6
网上有很多关于如何设置babel的。我学习着设置，但总差那么几步，没能满足我的需求。
我使用的是webStorm2017.1版本。
babel安装准备
使用webStorm自带的filewatcher中的babel自动编译前，需要安装一些babel库
全局安装babel-cli
npm install -g babel-cli & & & & & &&
网上有些教程让全局安装babel，实际上新的babel已经集成在babel-cli里面了。 &另外.
网上有部分教程是项目安装babel-cli的。 npm install babel-cli --save-dev & &项目安装也是可以的，不过在filewatcher的babel设置里，要在program里选择项目里的babel地址。
安装其他babel库
npm install --save-dev &babel-preset-env
网上很多教程要求安装babel-preset-es2015，在实际编译时，使用webStorm的默认设置，编译是不成功的。 env这个包，会根据es6的运行环境去编译js，而无序指定哪个具体的es版本。
在项目根目录下，也就是package.json同目录下，创建.babelrc文件。【该文件非必须】
很多网上教程推荐里面内容为：{"presets":["es2015"]} 。这里的内容，需要根据自己的需要设置。webstorm的默认设置里，其实是不需要网上的这个推荐内容了。
通过.babelrc,可以实现更多功能。
webstorm开启es6
file - setting - languages & frameworks - Javascript
在右侧的框中，选择ECMAScript6
File Watcher 中babel设置
webstorm 里的路径： file - setting - tools - File Watcher,
从图中右侧的+号里打开新窗口，选中babel，在图中间就会出现Bebel了。
双击上图的Babel，会进入babel设置界面。
在这个界面里，需要设置的地方有三个，Program，Arguments, &Output paths to refresh
这里的设置很重要，网上的教程，基本没有对这三个进行详细介绍的。
Program 如果是全局安装babel-cli的，这里默认就好了。如果是项目安装的，就要右边的...到项目的node_modules文件夹中，找到.bin文件夹下面的babel文件，点ok就可以了
Arguments 默认为： $FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
Output paths to refresh 默认为：dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
运行编译后的结果是这样的。
dist目录不一定是我们想要的目录。我们想把编译后的文件都放在js目录下，于是就将Arguments里的dist改成了js。 结果编译后的文件却像下图这样，不断嵌套。
要解决这个不断嵌套的问题，就需要把Output paths to refresh 中的dist，同样该为js，就不会出现这种嵌套编译了。
我的目标要编译成这种结构的js
我的设置为：
Arguments:
$FilePathRelativeToProjectRoot$ --out-file $FileDir$\$FileNameWithoutExtension$-compile.js --source-maps --presets env
Output paths to refresh:
$FileDir$\$FileNameWithoutExtension$-compile.js:$FileDir$\$FileNameWithoutExtension$-compile.js.map
0条评论或问题
笔记社区是一个面向中高端IT开发者、程序员的知识共享社区，通过网络抓取与文章分类总结，由专家为用户提供高质量的专题文章系列。
原文链接：/p/149cabc1216a
声明：所有文章资源均从网络抓取，如果侵犯到您的著作权，请联系删除文章。联系方式请关注微信公众号PMvideo【锤子视频-程序员喜欢的短视频】，笔记社区开发者交流群 。
今日签到0人
关注微信公众号:PMvideo}