cssrem

Converts between px and rem units in VSCode, And support WXSS.

中文版

Features

• Support intellisense
  • px -> rem (Shortcut key: Alt + z)
  • rem -> px (Shortcut key: Alt + z)
  • px -> vw (Shortcut key: Alt + v, Alt + w)
  • vw -> px (Shortcut key: Alt + v, Alt + w)
  • px -> rpx (微信小程序, 快捷键：Alt + r)
  • rpx -> px (微信小程序, 快捷键：Alt + r)
• Support mouse hover to display the conversion process
• Support mark
• Support selected area

You can use VSCODE's Keyboard shortcuts to redefine the shortcut keys.

How To Use

• Auto snippet
• Move the cursor to 14px, press Alt + z to convert rem
• CLI: Press F1, enter cssrem

Ignoring code

You can ignore:

• Entire files by setting ignores in .cssrem or .vscode/settings.json
• The next line by using // cssrem-disable-next-line

// cssrem-disable-next-line
@media (min-width: 768px) {}

The above code will ignore processing of 768px

Support Language

html vue css less scss sass stylus tpl(php smarty3) tsx jsx

Configuration

The .cssrem file in the root directory has the highest priority, and it's format is as follows:

{
  "$schema": "https://raw.githubusercontent.com/cipchk/vscode-cssrem/master/schema.json",
  "rootFontSize": 18,
  "fixedDigits": 3
}

Secondly, you can also configure the global. Open your user and workspace settings (File > Preferences > Settings):

Name	Description	Default
cssrem.rootFontSize	Root font-size (Unit: px)	16
cssrem.fixedDigits	Keeping decimal point maximum length	4
cssrem.autoRemovePrefixZero	Automatically remove prefix 0	true
cssrem.ignoresViaCommand	Ignores px to rem when trigger command (Unit: string[]), can be set [ "1px", "0.5px" ]	[]
cssrem.addMark	Whether to enabled mark	false
cssrem.hover	Whether to enable display conversion data on hover, disabled: Disabled, always Anything, onlyMark: Only valid when cssrem.addMark is true	onlyMark
cssrem.currentLine	Whether to display mark in after line, disabled: Disabled, show Show	show
cssrem.ignores	Ignore file list, support glob, like this: [ 'demo.less', '**/*.styles' ]	string[]
cssrem.languages	Support language list [ 'html', 'vue', 'css', 'postcss', 'less', 'scss', 'sass', 'stylus', 'tpl', 'wxss', 'twig', 'javascriptreact', 'typescriptreact', 'javascript', 'typescript' ], By default all include	string[]
cssrem.remHover	Whether to enable rem hover	true
cssrem.vw	Whether to enable VW switch px support	false
cssrem.vwHover	Whether to enable vw hover	true
cssrem.vwDesign	Specifies the width of the design (equar to the browser viewport width)	750
cssrem.wxss	WXSS小程序样式 Whether to enable WXSS support	false
cssrem.wxssScreenWidth	WXSS小程序样式 规定屏幕宽度，默认 750，尺寸单位	750
cssrem.wxssDeviceWidth	WXSS小程序样式 设备分辨率宽度，官方推荐使用 iPhone6 作为视觉稿的标准	375

QA

JSX not working?

By default, vscode won’t auto-complete strings in JSX. You can configure this in your project’s .vscode/settings.json:

{
  "editor.quickSuggestions": {
		"other": true,
		"comments": false,
		"strings": true
	}
}