PX Unit Converter

VS Code 插件，将 CSS px 值快速转换为 rem、em、%、vw、vh、rpx，支持双向智能转换、状态栏单位切换、Hover 预览、代码补全、行内注释和断点映射。

功能概览

• 支持的文件类型：css、scss、less、stylus、vue、html
• 激活方式：VS Code 启动完成后自动激活（onStartupFinished）
• 支持的单位：rem、em、%、vw、vh、rpx（双向与 px 互转）

功能列表

双向智能转换

选中文本或当前行，自动判断方向：

• 若文本中含有 px，则转换为状态栏当前激活单位
• 若文本中含有激活单位（如 rem），则转换回 px
• 转换后状态栏短暂闪烁绿色提示（可关闭）

命令面板

通过命令面板（Ctrl+Shift+P / Cmd+Shift+P）可执行以下命令：

状态栏指示器

右下角（默认）显示当前激活单位和基准值，例如：⊕ rem 16px = 1rem。

• 点击状态栏可打开菜单，选择单位并设置基准值
• 支持添加自定义预设基准值，或删除已有预设
• em 单位额外支持输入父元素 px 值作为基准
• 单位和基准值会持久化保存到工作区状态

Hover 预览

悬停在 px 值上，显示当前激活单位的转换结果：

{ PX Converter: 16: 16px → 1rem }

• 格式：基准值: 原始px → 转换结果
• minValue 过滤：绝对值 ≤ minValue 的 px 值不显示 Hover

代码补全

输入 16p 或 16px 时自动触发补全，补全项显示转换结果：

• 补全标签格式：基准值: 16px → 1rem
• 选中后只插入转换结果（如 1rem），不保留原始 px
• 支持回车确认

行内注释

在每行右侧自动显示相对单位对应的 px 值（灰色注释）：

• 支持单位：rem、em、vw、vh、%、rpx
• 行长度超过 180 字符时跳过该行
• 颜色可通过 lineAnnotationsColor 配置
• 可通过 enableLineAnnotations 开关控制

断点映射

启用后，光标进入 @media 块时自动切换行内注释的基准值：

• 通过 breakpointMap 配置 @media 条件与基准值的对应关系
• 状态栏会显示 $(arrow-swap) 图标表示断点映射已启用
• 文档解析结果会缓存，避免重复计算

快捷键

其他命令可通过命令面板执行，或在 VS Code 键盘快捷方式设置中自定义绑定。

使用方法

快捷键转换

1. 将光标置于目标行，或选中一段文本
2. 按 Alt+Shift+P 执行双向智能转换
3. 插件自动判断：有 px 则转为激活单位，有激活单位则转回 px

命令面板操作

1. 按 Ctrl+Shift+P（macOS：Cmd+Shift+P）打开命令面板
2. 输入 PX Converter 查看所有可用命令
3. 选择对应命令执行转换

状态栏单位 / 基准值切换

• 点击状态栏指示器，先选择目标单位，再选择或输入基准值
• 也可通过命令 PX Converter: 切换激活单位 快速循环切换单位（顺序：rem → em → % → vw → vh → rem）
• 自定义预设可通过菜单中的 🗑 按钮删除

Hover 预览

将鼠标悬停在任意 px 值上，即可看到当前激活单位的转换结果。

代码补全

在 CSS/SCSS/Less 文件中输入数字后跟 p 或 px（如 32p），补全列表会自动出现，选中即可插入转换结果。

行内注释

打开 CSS/SCSS/Less/Stylus/Vue/HTML 文件后，每行含相对单位的值右侧会自动显示对应的 px 值。如需关闭，将 pxConverter.enableLineAnnotations 设为 false。

断点映射

1. 在设置中配置 pxConverter.breakpointMap（见下方示例）
2. 将 pxConverter.enableBreakpointMap 设为 true
3. 光标移入 @media 块后，行内注释会自动使用对应基准值计算

配置项

在 VS Code 设置（settings.json）中以 pxConverter. 为前缀配置。

配置项 baseFontSize、viewportWidth、viewportHeight、containerSize、rpxRatio 必须大于 0，否则自动回退到上一次有效配置。

转换公式

px → 目标单位（正向）

目标单位 → px（逆向）

rpx 换算说明

1rpx = viewportWidth / rpxRatio px

默认配置下（viewportWidth = 1920，rpxRatio = 750）：1rpx ≈ 2.5600px

微信小程序场景下通常设置 viewportWidth = 750，此时 1rpx = 1px。

精度格式化

转换结果保留最多 4 位小数，并去除末尾零。例如：1.5000 → 1.5，1.0000 → 1。

断点映射配置示例

在 settings.json 中配置：

{
  "pxConverter.enableBreakpointMap": true,
  "pxConverter.breakpointMap": {
    "1920": "(min-width: 1920px)",
    "1440": "(max-width: 1440px)",
    "750":  "(max-width: 750px)"
  }
}

配置后，当光标位于以下 CSS 块内时，行内注释会自动使用对应基准值：

@media (max-width: 750px) {
  .box {
    width: 2rem;   /* 行内注释将以 750 为基准显示 px 值 */
  }
}

@media (min-width: 1920px) {
  .box {
    width: 10vw;   /* 行内注释将以 1920 为基准显示 px 值 */
  }
}

许可证

MIT