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

作者: 图恩分类: 编程开发阅读: 2239字数: 445发布时间： 2020-04-12 15:49:18

在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 直接转换即可。

演示：

演示

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