0%

webstorm中vue语法的支持

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

前提

vue的官方文档上建议新手是先不要使用vue-cli,而是直接先用类似于JQuery一样的方式引入vue来学习。鉴于前面已经搞过了angular的cli,所以我还是直接从cli入手。

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

全局安装vue-cli

在终端中运行命令:

1
npm install --global vue-cli

全局安装vue-cli。然后使用vue-cli创建我们的项目:

1
vue init webpack my-project

这样我们就有个完整的项目,并且里面会有个示例的组件,运行:

1
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的文件的高亮还是没有的。看来还是得加个文件支持(不知道是不是我前面操作的时候删除了):

1
preferences > editor > file types

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

webstorm vue import compoent: “Module is not installed”

当我们import组件的时候,下面有波浪号提示:Module is not installed。这就很揪心了,在webstorm这种强大的IDE中不应该出现这种提示啊,而且在import的时候路径也会有提示的,要不然鬼知道自己写对了没。。。

那我们需要搞清楚导入语句中的,让我们再看看导入语句:import HelloWorld from '@/components/HelloWorld'。首先可以确定的是,这个form后面的字符串应该是路径,但是为啥是以@开始??

再回头想想,我们初始化项目的时候使用了webpack的方式,那么这个路径会不会和webpack有关呢?是不是在哪里定义了这个@符号?在项目中全局查找字符串'@',果然在文件bulid > webpack.base.conf.js中找到了定义:

1
2
3
4
5
6
7
 resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},

根据这个定义我们可以猜测,@这个符号其实就是替代了当前项目的src目录。那我们需要让webstorm知道我们的这个定义。

打开设置:preferences > Languages & Frameworkes > JavaScript > Webpack,里面有个webpack configuration file,默认里面是:

1
/.../vue-app/webpacj.conf.js

也就是默认选择的是项目文件夹里面的默认的webpack配置文件,这也无可厚非,但是我们项目里面的webpack的位置不一样啊,所以我们需要改为我们自己的配置。再看build里面,有多个webpack.config.js,分别为基本(webpack.base.conf.js)、开发环境(webpack.dev.conf.js)、生产环境(webpack.prod.conf.js),我们在webstorm中当然是开发环境了,所以直接选择webpack.dev.conf.js

1
/.../vue-app/build/webpack.dev.conf.js

点击apply,然后就可以看到下波浪线消失了,并且当我们点击对应的组件的时候回识别并跳转。同时我们输入的时候也会有路径提示。nice~

vue-cli 3 的 webstorm 设置

在使用到vue-cli 3 的时候,发现上面的设置没有用了,我们需将:youProject/node_module/@vue/cli-service/webpack.config.js配置到preferences > Languages & Frameworkes > JavaScript > Webpack中。

配置好后点击apply,再回到代码中,发现波浪号消失,good~

unused export default

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

快速的方法是:点击右下角的小人头 > configure inspection。在弹出的界面中选择:JavaScript > General。去掉选项:unused global symbol。然后点击ok,可以看到灰色的提醒消失了。


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

码字辛苦,打赏个咖啡☕️可好?💘