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

来源:互联网 发布:怎么淘宝放单子 编辑:程序博客网 时间:2024/06/07 06:45

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

配置前:
这里写图片描述

配置后:
这里写图片描述

配置ES6语法支持

Preferences > Languages & Frameworks > JavaScript

这里写图片描述

自动转码为ES5

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

npm install -g babel

这里写图片描述

Preferences > Tools > File watchers点 '+' 号

这里写图片描述

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

再试一下:
这里写图片描述

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

配置vue.js语法支持

配置前
这里写图片描述

配置后
这里写图片描述

这里写图片描述

步骤:

  1. 搜索插件,点击红框
    这里写图片描述

  2. 安装
    这里写图片描述

3.重启

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