WebStorm 安装插件识别小程序 rpx 单位

rpx 是小程序特有的尺寸单位（responsive pixel），设计上把屏幕宽度固定切成 750 份，1rpx 等于屏幕宽度的 1/750。这样按 750 宽的设计稿标注多少就写多少，不同屏宽自动缩放，省掉了手工换算。

问题是 rpx 不是 CSS 标准单位。WebStorm 的 CSS 解析器按标准规范工作，遇到 200rpx 认不出这个单位，就画一条黄色波浪线报「Unknown CSS unit」。功能上没影响（编译到小程序平台照常工作），但满屏警告很干扰——真正的样式错误混在里面根本看不出来。

装插件是让 IDE 认识这个单位，警告消失，顺带还能得到小程序标签和 API 的补全。

安装以下插件

wechat-miniprogram-plugin

在 Preferences → Plugins → Marketplace 里搜这个名字安装，装完重启 IDE。下图是插件市场里的搜索结果页：

然后在设置里启动

装完还要在设置里显式开启对当前项目的支持，插件默认不会对所有项目生效。下图是这个开关的位置，勾上之后 rpx 的警告就没了：

注意点

在 vue 文件中的 style 标签必须加上 lang="less" 或者 scss

这个限制的原因是解析器的选择。.vue 文件里不带 lang 的 <style> 会走 WebStorm 内置的标准 CSS 解析器，插件插不进去；标了 lang="less" 或 lang="scss" 之后走预处理器的解析器，这类语法本身就更宽松（要支持变量、mixin、函数这些非标准写法），对未知单位的容忍度高，插件的扩展也能生效。

用 uni-app 这类跨端框架时这一点尤其要注意，因为它的 .vue 文件里既要写 rpx 又常常不带 lang。

<style lang="less">
.logo {
  height: 200 rpx;
  width: 200 rpx;
  margin-top: 200 rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50 rpx;
}
</style>

要注意上面示例里 200 rpx 中间的空格是排版渲染造成的，实际代码里数值和单位之间不能有空格，必须写成 200rpx。带空格的话会被解析成两个值，样式直接失效。

不装插件的替代做法

如果只是想让警告闭嘴，不需要小程序的其他支持，有两个更轻的办法。

一是在 Preferences → Editor → Inspections 里找到 CSS 分类下的「Invalid CSS unit」（或类似名称的检查项），把它关掉或者降级成不显示。缺点是标准 CSS 里真写错单位也不提示了。

二是用 @ts-ignore 式的抑制注释。WebStorm 支持在报警告的那一行上方加 noinspection 注释来单独抑制，把光标放在警告处按 option+回车，菜单里有「Suppress for statement」之类的选项，选了会自动插入注释。这个方式精确但零散，警告多了不实用。

实践中我更倾向装插件，因为它顺带解决的问题不止 rpx：小程序的 <view>、<text> 这些标签在 IDE 里也是「未知标签」，wx:if、wx:for 这些指令同样报警告，插件一起处理了。装一次省掉一堆零散的抑制配置。