rpx 单位问题
rpx（responsive pixel） 是微信小程序为了适配不同屏幕分辨率推出的一种尺寸单位。因为是国内的自定义单位，所以 WebStorm 无法识别，进而导致两个问题：
IDE 会报【Mismatched property value 】错误并标红
执行代码格式化之后，rpx 和前面的数值之间会多出一个空格
3. 过渡方案
在网上找了一圈，找到一种勉强可以接受的方案（具体见《让webstorm编写微信小程序时支持rpx》），大致思路如下：
关闭【Invalid CSS property value】检测项（解决 IDE报错标红）
缺点：关闭是一刀切的，对于其他单位的检测也被关掉了
添加文件修改监听，借助 sed 命令将多出的空格去掉（解决代码格式化问题）
缺点1：特定场景，比如 rpx2px 之类的方法调用之前的空格也会被移除
缺点2：低配电脑或运行程序比较多时，编辑过程会弹出内存与磁盘内容不一致的对话框
4. 新方案
因为使用的是个人的老电脑，经常性地开关文件监听（为了解决缺点2，只在要格式化时打开）感觉比较麻烦，所以就又找起了解决方案。
这次改成直接在插件市场里面搜索 uni-app、vue、rpx 和 wx 关键字，还真的找到了两款：
Wxapp Support
Wechat mini program support
4.1 Wxapp Support
直接在 WebStorm 设置中的插件市场搜索安装，未能生效。查看其 github 项目，发现市场的版本是旧的，虽然作者提供了最新体验版的下载链接，但是因为已经过了缓存期限，下载不了。
本来自己克隆后想自己编译的，后面找到解决方案了，就放弃了。
4.2 wechat-miniprogram-plugin（最终方案）
直接在 WebStorm 设置中的插件市场搜索安装，也是未能生效。查看插件文档介绍，发现有类似需求的评论。
查看其 gitee 项目，最终在一个已关闭的 issue 中找到了解决方案：
WebStorm -> Preferences… -> 左侧搜索框输入 wechat -> Languages & Frameworks -> Wechat Mini Program -> 右侧的菜单中，将【小程序支持】切换到【启用】-> Apply -> OK -> 等待1至2分钟，标红自动消失，格式化代码不再添加空格
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://wufengxue.github.io/2021/05/21/WebStorm-rpx-support.html
有话要说