Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>DevCalcNew to Visual Studio Code? Get it now.
DevCalc

DevCalc

ShenZhilong

|
420 installs
| (0) | Free
Convert between px and vw/rem/rpx/%
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

DevCalc

在 VS Code 中实现 px 与 vw/rem/rpx/% 之间的相互转换。

特性

  • 智能转换:智能感知并实时转换输入中的 px 值。
  • 单位换算:在 px 与 vw/rem/rpx/% 间灵活转换。
  • 转换范围:支持选择只转换选中的值,或是所在行的所有值。
  • 小数保留:自定义保留小数的最大位数。
  • 精度控制:设置微小数值范围 n, 自动忽略 -n ≤ px ≤ n 的值。
  • 注释辅助:转换同时显示原 px 值的行注释。
  • 悬停提示:鼠标悬停显示转换公式。
  • 快捷调整:轻松调整屏幕宽度和根元素字号大小。
  • 预设管理:保存常用屏幕宽度,快速切换。
  • 栏目定制:自定义状态栏项的图标和位置。

用法

  • 键入 px 值,自动完成 vw/rem/rpx/% 的转换结果。
  • 按下 Alt + Z 执行单位转换。
  • 按下 Alt + Q 或点击状态栏项以更新屏幕宽度或根元素字号大小。

语言模式

默认配置已涵盖以下语言模式,可根据需求添加或删除对应的语言标识符。

语言 标识符
HTML html
CSS css
SCSS scss
Less less
Vue vue
JavaScript JSX javascriptreact
TypeScript JSX typescriptreact

Features

  • Smart Conversion: IntelliSense and real-time conversion of px values in the input.
  • Unit Calculation: Freely convert between px and vw/rem/rpx/%.
  • Conversion Range: Supports the option to convert only the selected values or all values ​​in the line.
  • Decimal Retention: Customize the maximum number of decimal places to retain.
  • Precision Control: Set a small value range n, automatically ignoring values where -n ≤ px ≤ n.
  • Annotations Assist: Displays the original px value as a line annotation during conversion.
  • Hover Tip: Shows the conversion formula when the mouse hovers over.
  • Quick Adjustment: Easily adjust the screen width and root element font size.
  • Preset Management: Save common screen widths for rapid switch.
  • Column Customization: Customize the icon and position of the status bar item.

Usage

  • Type px to autocomplete the vw/rem/rpx/% conversion.
  • Press Alt + Z to convert.
  • Press Alt + Q or click status bar item to update screen width or root element font size.

Language Modes

The default configuration covers the following language modes. You can add or delete corresponding language identifiers as needed.

Language Identifier
HTML html
CSS css
SCSS scss
Less less
Vue vue
JavaScript JSX javascriptreact
TypeScript JSX typescriptreact
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft