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
