webstorm中vue语法的支持

俗话说，要想攻其玉，必先利其器。工做中总是在用angular开发，但慢慢会有vue的业务，因此须要学习学习vue。今天开始折腾vue，我是用webstorm开发前端的，当使用vue-cli建立好一个项目后，使用webstorm打开简直不能入目啊，却是没有啥错误提示，却是一大堆的各类编辑器警告，无奈，还得去搞好IDE对vue的支持啊。

前提

vue的官方文档上建议新手是先不要使用vue-cli，而是直接先用相似于JQuery同样的方式引入vue来学习。鉴于前面已经搞过了angular的cli，因此我仍是直接从cli入手。

假定咱们已经安装好了node和npm。

全局安装vue-cli

在终端中运行命令：

npm install --global vue-cli

全局安装vue-cli。而后使用vue-cli建立咱们的项目：

vue init webpack my-project

这样咱们就有个完整的项目，而且里面会有个示例的组件，运行：

npm run dev

而后在浏览器里面访问http://localhost:8081/就能够看到项目的运行状况。

折腾webstorm

在webstorm打开vue项目的时候，差点就想放弃vue了，实在不忍直视，但仍是得发扬一向的探索精神啊，遇到问题就要解决呗！🙂

.vue类型的文件

首先得从文件类型上入手，在目前的版本中是没有.vue这种文件类型的，因此没法识别也没法高亮，就算识别了也都是乱的。查了下，有些说是在文件类型上加上*.vue就行了，但我加了反而更乱套了。

谷歌了半天，发现了这篇文章，是webstorm官方网站的文章https://www.jetbrains.com/help/webstorm/vue-js.html。webstorm已经支持vue了，可是我在本地的webstorm彻底没找到这个选项啊，这是为啥？

看了下，发现webstorm的版本是2018版的，而个人webstorm是2017.2。因此我须要更新到最新版。

得，备份下webstorm的设置，而后下载最新的webstorm而后更新。顺便找了个激活码：http://hb5.s.osidea.cc:1017（热乎的，亲测可用）。

果真安装后，发现了vue的标记，的确新版的是支持的。

可是发现.vue的文件的高亮仍是没有的。看来仍是得加个文件支持（不知道是否是我前面操做的时候删除了）：

preferences > editor > file types

拉下来选择vue.js templates，点击而后在下面的registered patterns里面点击加号，而后输入*.vue，而后点击肯定，点击apply应用，而后能够看到webstorm底下有个进度条，走满后，.vue的高亮就正常了。

unused export default

在vue的组件里面的js中有个export default，上面是灰色的提醒，鼠标移上去后发现提示unused export default，这是由于没有具体的使用这个导出，是JavaScript的一个语法提示。咱们能够在IDE的configure inspection检查配置中进行配置。

快速的方法是：点击右下角的小人头 》 configure inspection。在弹出的界面中选择：JavaScript 》 General。去掉选项：unused global symbol。而后点击ok，能够看到灰色的提醒消失了。

---

如今看起来就神清气爽了。开始coding吧~🙂