支持 uni-app 的 vue 文件

1. 前言

      最近在参与公司的小程序项目,项目里的前端同学大部分直接使用 vs code,在体验了一小段时间后,基于对 Android Studio 的熟悉度,决定还是先切换到 WebStorm (都是 JetBrains 家的 IDE)试试,实在不行再切回去。

      配置 + 插件后,工作基本可以正常开展了,除了恼人的 rpx 单位问题。

2. rpx 单位问题

      rpx(responsive pixel) 是微信小程序为了适配不同屏幕分辨率推出的一种尺寸单位。因为是国内的自定义单位,所以 WebStorm 无法识别,进而导致两个问题:

3. 过渡方案

     在网上找了一圈,找到一种勉强可以接受的方案(具体见《让webstorm编写微信小程序时支持rpx》),大致思路如下:

4. 新方案

     因为使用的是个人的老电脑,经常性地开关文件监听(为了解决缺点2,只在要格式化时打开)感觉比较麻烦,所以就又找起了解决方案。

     这次改成直接在插件市场里面搜索 uni-app、vue、rpx 和 wx 关键字,还真的找到了两款:

4.1 Wxapp Support

     直接在 WebStorm 设置中的插件市场搜索安装,未能生效。查看其 github 项目,发现市场的版本是旧的,虽然作者提供了最新体验版的下载链接,但是因为已经过了缓存期限,下载不了。

     本来自己克隆后想自己编译的,后面找到解决方案了,就放弃了。

4.2 wechat-miniprogram-plugin(最终方案)

     直接在 WebStorm 设置中的插件市场搜索安装,也是未能生效。查看插件文档介绍,发现有类似需求的评论。

     查看其 gitee 项目,最终在一个已关闭的 issue 中找到了解决方案:

5 总结

6 附:方案汇总及个人 uni-app 开发使用的插件分享

     方案汇总:

     个人 uni-app 开发使用的插件: