webstorm 设置ES6语法支持以及添加vuejs开发配置

本篇文章主要是针对上篇博客vue项目构建中构建的项目在webstorm中的一些ES6语法支持以及vue高亮和语法支持。

webstorm中ES6语法配置

当我们用webstorm打开我们所构建的elma项目中的main.js文件的时候，发现有标红的红线，原因是webstorm不支持es6语法，需要配置一下。

配置方法：
打开file–>setting,做如下操作

如果想实现es6直接转化为es5，那么babel是个好选择。

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。
而且你还希望每次修改代码时能自动转码，所以还要用到webstorm的file watcher（当然还有其他解决方案）
首先要安装babel，同样也是使用npm安装

npm install -g babel

配置方式 file-settings File watcher

其中Program： 中填写的是babel的安装路径，其他的默认就好啦。这样就能实现ES6的语法支持以及ES6自动转换为ES5。 好了，开启第二个话题。

webstorm支持vuejs文件

当我们打开App.vue文件的时候，发现黑白分明啊，这说明此刻的webstorm并不支持vuejs文件，怎么办呢？还能说啥，配置呗！

1. webstorm安装vue插件
   当我们file —》 settings的时候，找到plugin是，在搜索框中输入vue 发现并没有vue插件，如图，点击图中的链接下载即可。
   
   2.安装vue，重新启动webstorm，再次打开App.vue文件。
   
   发现webstorm已经对vue文件有高亮显示啦。
   

设置webstorm的vue新建文件模板

仅仅支持vue文件还不行，还需要当我们新建.vue文件的时候，能够创建出vue的文件，怎么做呢？
方法：file–》settings —>file and code templates,在右侧找到vue点击，最右边设置 vue file 扩展名vue，如图：

这样在新建文件的时候就出现vue文件。

好啦，用webstorm开发vue的配置已经设置好了，可以愉快的敲代码啦。