Inline CSS unit conversions — without touching your code.
FormatSizer is a Visual Studio Code extension that automatically displays CSS unit conversions directly in the editor as visual decorations. It never modifies any file: the annotations appear using VS Code's TextEditorDecorationType API with after.contentText.
Preview
font-size: 16px; -> 1rem · 1em · 12pt <-
padding: 1.5rem; -> 24px · 1.5em · 18pt <-
width: 50vw; -> 960px · 60rem <-
border-radius: 8px; -> 0.5rem · 0.5em · 6pt <-
The gray annotations are purely visual and are not part of the saved file.
Features
- ✅ Zero file modifications — Conversions are VS Code decorations, not real text
- ✅ Multiple units —
px,rem,em,pt,vw,vh,cm,mm,in - ✅ Fully configurable — Root font size, viewport dimensions, colors, decimal places
- ✅ Multi-language support — CSS, SCSS, SASS, LESS, HTML, JS/TS, React, Vue, Svelte
- ✅ Rich hover tooltip — Hover over a decoration to see a full conversion table
- ✅ Smart debounce — Efficient updates while you type (300 ms delay)
Configuration
All settings are available in Settings under the FormatSizer section.
| Setting | Type | Default | Description |
|---|---|---|---|
formatsizer.enabled |
boolean | true |
Enable or disable decorations |
formatsizer.rootFontSize |
number | 16 |
Root font size in px (used for rem conversions) |
formatsizer.elementFontSize |
number | 16 |
Element font size in px (used for em conversions) |
formatsizer.viewportWidth |
number | 1920 |
Viewport width in px (used for vw conversions) |
formatsizer.viewportHeight |
number | 1080 |
Viewport height in px (used for vh conversions) |
formatsizer.decimals |
number | 3 |
Decimal places in converted values |
formatsizer.color |
string | "#6a9fd8" |
Decoration text color |
formatsizer.backgroundColor |
string | "" |
Decoration background color (empty = none) |
formatsizer.separator |
string | " · " |
Separator between converted values |
formatsizer.showOnlyDifferentUnit |
boolean | true |
Hide conversion when source and target unit are the same |
formatsizer.unitsToShow |
array | ["rem","em","pt","px"] |
Ordered list of target units to display |
formatsizer.languages |
array | (see below) | Languages where decorations are active |
Example settings.json
{
"formatsizer.rootFontSize": 18,
"formatsizer.viewportWidth": 1440,
"formatsizer.viewportHeight": 900,
"formatsizer.decimals": 2,
"formatsizer.color": "#88c0d0",
"formatsizer.separator": " | ",
"formatsizer.unitsToShow": ["rem", "pt", "px"],
"formatsizer.languages": ["css", "scss", "less"]
}
Commands
Open the Command Palette (Ctrl+Shift+P) and search for:
| Command | Description |
|---|---|
FormatSizer: Toggle decorations |
Quickly enable or disable the extension |
FormatSizer: Refresh decorations |
Force an immediate recalculation |
Conversion reference
| Unit | Conversion to px | Formula |
|---|---|---|
px |
— | 1px = 1px |
rem |
Configurable | 1rem = rootFontSize px |
em |
Configurable | 1em = elementFontSize px |
pt |
Fixed | 1pt = 1.333px (96/72) |
vw |
Configurable | 1vw = viewportWidth / 100 px |
vh |
Configurable | 1vh = viewportHeight / 100 px |
cm |
Fixed | 1cm = 37.795px |
mm |
Fixed | 1mm = 3.779px |
in |
Fixed | 1in = 96px |
Supported languages (default)
css, scss, sass, less, html, javascript, typescript, javascriptreact, typescriptreact, vue, svelte, stylus
License
Proprietary Software License © ballwictb