This extention renders the px values of the rem numbers or rem valurs of px numbers in your vs code file .
The following properties are configurable:
// Decoration color for the px comment value
"remToPxComment.pxCommentColor": "#36C210",
// Decoration color for the rem comment value
"remToPxComment.remCommentColor": "#D61355",
// value to convert px to rem, default is 16px
"remToPxComment.remConversionValue": 16
// tells if to convert from rem to px or the other way around
"remToPxComment.convertToPx": true
// tells if to convert from px to rem or the other way around
"remToPxComment.convertToRem": true
// tells if to add increment and decrement key board shortcuts
"remToPxComment.addKeyBoardShortcuts": false
// if true the converted line will have a bg color
"remToPxComment.hasLineBgColor": false
// bg color of converted line, the color appled will be of low opacity
"remToPxComment.lineBgColor": "#36C210"
By checking the addKeyBoardShortcuts
in settings a set of default shortcuts for incrementing and decrementing numbers will be enabled
An example is like the following
Screen.Recording.2023-01-10.at.11.46.06.PM.mov
In the above video pressing cmd+shift+i
in mac or ctrl+shift+i
in windows will increment the number by 1 based on cursor position
Similarly pressing cmd+shift+d
in mac or ctrl+shift+d
in windows will decrement the number by 1 based on cursor position
These are all the keyboard shortcuts that will be enabled when checking addKeyBoardShortcuts
option in settings
cmd+shift+i
in mac orctrl+shift+i
in windows : increment number by onecmd+shift+h
in mac orctrl+shift+h
in windows : increment number by one tenthcmd+shift+t
in mac orctrl+shift+t
in windows : increment number ten
cmd+shift+d
in mac orctrl+shift+d
in windows : decrement number by 1cmd+shift+z
in mac orctrl+shift+z
in windows : decrement number by one tenthcmd+shift+v
in mac orctrl+shift+v
in windows : decrement number by ten