在React项目开发的过程中,我们常用
styled-components来做css的私有化。为了提高开发的效率,在这里把styled-components的语法提示高亮,以及px转rem的方法。
注:笔者在日常开发中使用的编辑器是vscode,因此本文只针对vscode给出解决方案。
语法提示高亮
关于语法提示高亮,我是用的是 vscode-styled-components 插件,直接下载即可。

vscode-styled-components

语法提示高亮效果
px转rem
笔者没有找到特别完美的解决方案,这是目前笔者找到的方法,个人感觉还不错,供以参考。
下载插件px to rem

px to rem
流程:
- 安装插件
px to rem - 使用插件的快捷键
Alt + S快捷设置要转换的根字体大小。 - 正常用
px写样式 - 写完后,选中
px,然后用快捷键Ctrl + D选中所有匹配项 - 使用插件的快捷键
Alt + Z直接转换即可。
演示:

演示
如果有更好的方法或者笔者表述有误,欢迎分享与指正!
