WebStorm添加px转rem单位插件

背景

使用rem时需要将原来的px转成rem，一般是通过在媒体查询中设置转换的比例为10或100来方便计算，这里我考虑在IDE中开发插件来通过一个快捷键的形式来使IDE自动转换单位，更好地提高效率以及适用不同的比例，我使用的IDE是WebStorm，下面介绍开发方案。

插件

功能简介

插件已上传到jetbrains官网中，目前支持webstorm和idea，可以在官方仓库中搜索 px2rwd 找到插件。

目前提供了三种方式来转换：快捷键、代码意图提示(Alt + Enter)、代码自动完成提示

1. 快捷键

默认的快捷键是Alt + d，在插件配置页面中可以看到快捷键部分有3种转换类型的选项，分别是rem,vw,vh，选择其中的一个来使用快捷键转换，需要注意的是，需要在选项下方的值配置中设置对应的基值。
只能选择一种转换类型来使用快捷键转换单位。同时也可以重新设置快捷键。需要注意的是，跟之前的版本相比，默认的快捷键修改了，修改的原因主要是原来的Shift + d会与大小写冲突。

2. code intention

选择使用代码意图提示的类型后即可使用已选择的类型来在css文件中通过Alt + Shift来调用code intention来快捷转换单位。未勾选的选项不会出现在文件的code intention列表中。

3. code completion

选择使用代码自动提示的类型后即可使用已选择的类型来在css文件中快捷转换单位，当输入’px’后，code completion列表中会出现在配置页面中选择的类型名称，选择其中一个类型后即可实现自动完成转换功能。

如果觉得这个插件还不错，希望在Github上给我加个星，非常感激。

使用说明

1. File-Settings-Px to Rwd进行必要的参数配置
2. 选择一个需要转换的样式或者将光标移动到一个包含需要转换样式的行中，使用快捷键Alt + d来转换，也可以使用Ctrl + Alt + d来转换整个文件中的可转换样式
3. 通过code intentionAlt + Enter来转换某一行中涉及到的样式
4. 通过在输入’px’字符后显示的自动完成提示列表中选择相应的选项来转换相应的样式
5. 通过快捷键Ctrl + Shift + Alt + d来回退一行内的转换

更新日志

• v2.1.2:添加回退功能到code intention中; 添加了选择是否在使用快捷键转换时对于文件类型的限制

• v2.1.1:添加了版本兼容性处理; 添加了回退功能

• v2.1.0:添加了code intention和code completion；修改了配置页面的位置；修改了快捷键为Alt + d；添加了px转vw和vh插件功能

• v2.0.2:在注释中添加了计算的过程；修改了保留小数位数的设置，在可以被整除的情况下，不改变精度

• v2.0.1:添加了转换时精度与设置的比例相对应

• v2.0.0:添加了转换整个文件的快捷键，修改了转换行内单位的逻辑；因转换文件的快捷键和默认的有冲突，现在将快捷键换成’shift d’和’ctrl shift d’

• v1.1.5:添加了中文说明

• v1.1.4:添加了英文说明

• v1.1.3:处理了部分错误

• v1.1.2:添加了用于转换比例值的持久化

• v1.1.1:修复了当前行内包含多条样式时无法转换的问题，将设置窗口移动到file-other settings下

• v1.1.0:在原有的基础上添加了自动转换当前光标所在行中可以转换的值，将设置比值的窗口更改到tools菜单下，其中，需要注意行内不能包含多条样式；

• v1.0.0:初始编写，webstorm插件，主要是把css中的px转换为rem，其中可以在webstorm中设置转化的比值(window-SetPX2REM),选中后通过快捷键shift+f来转化，如比值为100，选中"100px"后，点击shift+d，自动转化为1.00rem

传送门

github地址 （持续更新）