phpstorm|webstorm配置ES6语法支持和vue.js语法支持

ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了,身边的人也陆续开始用起来了,但是如果使用phpstorm、webstorm等编辑器,要识别ES6语法,还需手动配置语法支持。

配置前:
phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第1张图片

配置后:
phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第2张图片

配置ES6语法支持

Preferences > Languages & Frameworks > JavaScript

phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第3张图片

自动转码为ES5

打开phpstorm的命令行,运行命令:

npm install -g babel

phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第4张图片

Preferences > Tools > File watchers
点 '+' 号

phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第5张图片

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

再试一下:
phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第6张图片

各种提示都出现了,有木有很贴心!

配置vue.js语法支持

配置前
phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第7张图片

配置后
phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第8张图片

phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第9张图片

步骤:

  1. 搜索插件,点击红框
    phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第10张图片

  2. 安装
    phpstorm|webstorm配置ES6语法支持和vue.js语法支持_第11张图片

3.重启

安装完成后,会有弹窗提示重启后生效,是否重启?选Restart重启即可,配置完成。

你可能感兴趣的:(JavaScript,Editor)