【React】vscode中,styled-components的语法提示高亮、px转rem

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

语法提示高亮

关于语法提示高亮,我是用的是 vscode-styled-components 插件,直接下载即可。

vscode-styled-components

语法提示高亮效果

px转rem

笔者没有找到特别完美的解决方案,这是目前笔者找到的方法,个人感觉还不错,供以参考。

下载插件px to rem

px to rem

流程

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

演示

演示

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容