WebStorm 支持 rpx

最新推荐文章于 2024-07-07 16:12:21 发布
原创 最新推荐文章于 2024-07-07 16:12:21 发布 · 6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web #WebStorm

本文介绍在WebStorm中使用rpx单位时遇到的问题及解决方案，通过使用less的unit函数替代直接写rpx单位，可以避免格式化错误。同时，文章提供了设置LiveTemplate的步骤，以实现快速输入unit(xx,rpx)。

目前 WebStorm 还不支持 国内特有的 rpx 单位.
写 rpx 格式化后会出错.

使用 less 的 unit 可以解决这个问题
将 XXrpx 改成 unit(XX, rpx); 就可以了

width: unit(64, rpx);
height: unit(64, rpx);
margin-left: unit(20, rpx);

再建一个 Live Templates

File | Settings | Editor | Live Templates
在这里插入图片描述

输入 rp > tab键 就可以快捷的输入 unit(xx, rpx)

WebStrom对于rpx爆红的解决方法
热爱编程、热爱生活、热爱探索
10-19 1340
WebStrom编译器默认是不支持 rpx 像素单位的，rpx是微信小程序推出的一种像素单位，用于灵活适应不同的屏幕尺寸，因为 WebStrom 的开发公司的 JetBrains 公司，这是一家国外很牛的编译器开发公司，国外是没有微信小程序的， 自然而言，就不支持微信推出的 rpx 单位。：在使用WebStrom编写CSS样式代码时，经过快捷键格式化后代码CSS变无效了！完成上面的步骤之后，WebStrom 就能够识别 rpx 了，并且使用。：快捷键格式化的锅（准确来说是WebStrom的锅）
webstorm 代码格式化后，rpx出现空格问题
Terenceno的博客
09-08 9490
在进行小程序开发时，我们可能不希望使用微信开发平台的代码编辑器，会选择自己常用的编辑器，在更熟练的操作中提高开发效率。 在使用webstorm开发小程序中，当我Ctrl+alt+l进行格式化时，发现样式rpx和数值之前多了一个空格，如下： ...
微信小程序rpx、px、vw、vh、upx区别
qq_29707325的博客
07-07 2426
upx是uni-app中的长度单位，它代表设备独立像素（与屏幕密度无关），1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上，upx会自动转换为适应当前屏幕的最佳物理像素值，帮助开发者实现跨设备的一致性布局。如果不进行任何适配处理，使用px单位的元素在不同设备上可能会因为屏幕像素密度（PPI）的差异而显示出不同的大小。对于不需要响应式布局的元素，或者在已知屏幕尺寸和分辨率的情况下，使用px单位是合适的。在微信小程序中，使用px作为单位时，元素的尺寸会直接对应到屏幕的物理像素上。
WebStorm 支持微信小程序的 rpx 单位
qq_45832807的博客
11-08 1473
webstorm在写微信小程序代码的时候，rpx单位会警告，并且格式化rpx单位与数值之间会有一个空格。
让webstorm编写微信小程序时支持rpx
lulitianyu的专栏
10-21 1万+
引言：微信小程序太恶心了，每次习惯性Ctrl+Alt+L就会炸掉，让我各种不爽，但咱还是得写不是，网上搜了半天发现一篇文章提供了解决方案。 思路援引文章 在这篇文章里面提供了思路，通过Webstorm中自带的File Watcher工具监视文件变化，自动替换所有的空格rpx为rpx，但sed-windows在我的windows上总是无法正常工作，有如下报错： 1 ...
WebStorm 使用rpx 格式化出现空格处理
weixin_50061268的博客
01-19 806
问题描述： WebStrom 使用rpx 格式化出现空格处理 解决方案： 1.下载 sed 下载地址 https://github.com/mbuilov/sed-windows 2. 添加 -i s/"\ rpx"/rpx/g $FilePath$ 确定
postcss 微信小程序 px 转 rpx 支持proportion 比例转换， webstorm rpx不支持，格式
最新发布
09-18
然而，并不是所有的开发工具和编辑器都支持rpx单位，如WebStorm。WebStorm作为一个流行的前端开发IDE，虽然提供了强大的代码编写和格式化功能，但在微信小程序开发过程中，它并不能直接支持rpx单位的识别和格式化。...
适配：在WebStorm中设置输入px时自动提示转化为rem
fang0321的博客
03-15 1989
第一步：点击Settings 第二步：在点头位置输入框输入：rem 第三步：点击Install安装此工具 第四步：点击Installed查看是否安装成功 第五步：点击Px to Rem ，然后根据自己实际情况输入数值，输入完成点击OK 第六步：重启WebStorm 输入时会出现此提示，说明已成功。 ...
微信代码在webstorm智能提示
09-03
- WebStorm同样支持小游戏的智能提示和调试，帮助开发者快速构建游戏逻辑和场景。 总之，通过正确安装和配置WebStorm中的微信小程序插件，开发者可以充分利用其强大的代码提示功能，提升微信小程序和小游戏的开发...
使用webstorm开发uniapp微信小程序不支持css单位rpx的解决方案
cabinx的博客
07-18 5962
启用小程序支持。
weapp-support-plugin:WebStorm IDE的微信weapp支持插件
03-18
WeApp支持插件微信小程序支持插件 想要实现一个微信小程序的JetBrain IDE插件，但是经过尝试发现写BNF的Grammar对我来说实在有点困难了，短时间之内没有可能全面的学习这个东东，近期工作上的事情也还比较忙，只好将这个项目暂时搁置了。 JetBrains的插件开发虽然官方有很多文档，但是工程太庞大了，而且这几天学习研究过程中似乎搜索的摘要都无法对现有的语言支持做扩展。对xml（wxml），css（wxss），js做一些扩展就可以用了，可惜的是没有发现支持的扩展路径。 IDEA官方文档中，对于语言支持插件开发的文档“第七部分-自定义语言”包括两大部分： 待办事项清单 近期希望完成以下功能列表，如果有熟悉的idea插件开发的大牛能够协助一二自然是最好不过的了。 css中增加对rpx单位的支持 wxml中增加对wx：if / wx：else / wx：elif的支持 增加对
webstorm开发微信小程序代码提醒(webstorm开发工具)
03-29
作者：Miaoz0070，来自原文地址  使用了微信提供的开发工具是真心难用，卡顿厉害、中英文切写注释换相当不爽、还没办法多开窗口，相信大家也遇到过这种现象。 下边我们介绍下webstorm来开发微信小程序的一些配置：   1.首先FileType下Cascading Style Sheet 添加*.wxss (此图片来源于网络，如有侵权，请联系删除! )   2.FileType下HTML 添加*.wxml (此图片来源于网络，如有侵权，请联系删除! )   3.将其中的wecharCode.jar下载下来，然后在webStorm 的 File -> import settings 中导入即
解决webstrom对rpx不友好的问题
博客不一定要自己做
04-16 2677
https://blog.youkuaiyun.com/lulitianyu/article/details/83240864
webstorm 不识别 rpx 格式化出错
热门推荐
wyk304443164的专栏
09-25 1万+
本文出自： http://blog.youkuaiyun.com/wyk304443164 如果你用的是sass那么 http://www.qianduan.org/post-471.html 如果只用了less那么你可以.userinfo-avatar { width: ~"200rpx"; height: ~"200rpx"; border-radius: 50%; }避免编
WebStome 处理` upx`,` rpx` 的报错飘红 解决方案
qq_19127205的博客
07-19 1227
使用 sed 解决 rpx 前面的智障空格
微信小程序webstorm格式化配置,解决rpx问题
u011436748的博客
11-22 1065
-i “s/\ rpx/rpx/g” FilePathFilePathFilePath 参考链接 https://blog.youkuaiyun.com/lulitianyu/article/details/83240864 windows需要额外下载sed4.2.1 下载链接
rpx 格式化出错 -- ＞webstorm
qq_33247262的博客
12-18 3144
因为看了好多解决微信小程序在webstorm里面rpx报错的文章，都不行，原来最简单的方法就可以了,settings,直接在Plugins 搜索 Wxapp ，install ，然后重启webstorm就可以了 显示效果，没有飘红，无论是wxml或者是wxss ...
解决webstrom 在格式化.wxss文件时 rpx前多出空格
Meydan-ZHOU的博客
01-05 292
aguments: -i “s/\ rpx/rpx/g” F i l e P a t h FilePathFilePath
WebStorm微信小程序单位rpx出现空格问题
dengwei2939的博客
03-26 1161
Windows先下载sed 配置Tools->File Watchers->+ 添加下图配置 //windows系统 -i s/"\ rpx"/rpx/g $FilePath$ //MacOS系统 -i "" s/"\ rpx"/rpx/g $FilePath$ 参考至WebStorm格式化代码，微信小程序rpx出现空格问题 转载于:https://www.cnb...
webstorm uniapp代码格式
06-14
### WebStorm 中 UniApp 代码格式化的设置与规则 在 WebStorm 中对 UniApp 代码进行格式化时，需要综合考虑多个因素，包括代码规范、格式化工具的配置以及插件的支持。以下是对如何在 WebStorm 中进行 UniApp 代码格式化的详细说明： #### 1. 安装 UniApp 支持插件 为了更好地支持 UniApp 的开发环境，建议安装 **Uniapp Tool** 插件[^3]。该插件能够识别 UniApp 特有的语法结构（如 `pages.json` 文件中的注释），从而避免格式化过程中出现不必要的错误提示。 安装步骤如下： - 打开 WebStorm 的菜单栏：`File > Settings > Plugins`。 - 在插件市场中搜索 `Uniapp` 并安装。 - 安装完成后，重启 WebStorm 以使插件生效。 #### 2. 配置插件 安装成功后，需要对插件进行配置以确保其正常工作[^3]： - 进入 `Settings > Tools > UniApp`。 - 配置 HBuilderX 和微信开发者工具的安装目录（根目录）。 - 如果需要重启 IDE，请根据提示操作。 #### 3. 处理 rpx 格式化问题 在 WebStorm 中格式化代码时，可能会遇到类似 `15rpx` 被格式化为 `15 rpx` 的问题。以下是两种解决方案[^2][^4]： ##### 方案一：使用 sed 工具 通过配置 File Watchers 使用 sed 工具来修复格式化后的问题。具体步骤如下： - 进入 `Tools > File Watchers > +`。 - 配置 sed 命令以移除多余的空格： - Windows 系统规则：`-i s/"\ rpx"/rpx/g $FilePath$`。 - MacOS 系统规则：`-i "" s/"\ rpx"/rpx/g $FilePath$`[^2]。 - 注意：如果文件类型为 SCSS，请选择 SCSS 文件；否则选择 CSS。 ##### 方案二：安装 Prettier 插件 另一种推荐的方式是使用 Prettier 插件来统一代码风格[^1]。Prettier 是一个强大的代码格式化工具，支持多种语言（包括 JavaScript、TypeScript、CSS、JSON 等）。安装并配置 Prettier 后，可以避免格式化过程中出现类似 `15 rpx` 的问题。 安装步骤： - 打开 WebStorm 的菜单栏：`File > Settings > Plugins`。 - 搜索并安装 Prettier 插件。 - 配置 Prettier 的规则文件（如 `.prettierrc` 或 `package.json` 中的 `prettier` 字段），确保其支持 UniApp 的语法。 #### 4. 自定义代码格式化规则 除了使用插件外，还可以通过自定义 WebStorm 的代码格式化规则来解决特定问题： - 进入 `Settings > Editor > Code Style`。 - 根据项目需求调整代码风格设置，例如空格、换行等规则。 - 对于 `rpx` 单位的问题，可以在相关语言的格式化规则中明确禁止自动添加空格。 #### 示例：Prettier 配置文件 以下是一个典型的 `.prettierrc` 文件示例，适用于 UniApp 项目： ```json { "semi": true, "singleQuote": true, "trailingComma": "es5", "tabWidth": 2, "printWidth": 80, "bracketSpacing": true, "jsxBracketSameLine": false } ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值