自从新版手机IM界面改成rem适配后,效果真的很棒。因此接下来的主要工作也会将一些核心页面从px转移到rem。不过已经习惯了VSCODE,再加上设计稿等诸多原因,一下子从remcode出来还是很吃力的。所以,一般来说,都是先设定一个基本尺寸,最后再根据这个尺寸进行换算。然而,翻遍了整个VSCODE市场,都没有找到符合我风格的解决方案。至少是这样的:输入12px>Tab>.1rem,如果1rem>Tab>16px,则整个文档都被转换了,造了一个轮子。名字是:cssrem。根目录下的.cssrem文件优先级最高,其格式如下:{"rootFontSize":18,"fixedDigits":3}其次,也可以配置global。点击VSCode的File>Preferences>Settings打开设置面板:cssrem.rootFontSizeBasefont-size(unit:px),default:16cssrem.fixedDigitspxtoremdecimalpointmaximumlength,default:6cssrem.autoRemovePrefixZeroAutomatically删除以0开头的前缀,默认值:true。(至少我不想看到默认去掉0)cssrem.ingoresViaCommand在使用命令行批量转换时,允许忽略部分px值,不转换成rem(单位:string[]),例如:["1px","0.5px"]VSCODE插件开发本可以结束这篇文章,但是我觉得VSCODE自己开发插件会很简单很酷,所以我没有多写几个字。插件开发指南写的很用心,虽然全是英文,但看起来不是很累。我觉得最头疼的可能就是各种接口的认知。如果你熟悉Typescript,那么开发vscode插件也是触手可及,再简单不过了。cssrem的核心是如何实现Snippet的动态创建,也就是实现CompletionItemProvider接口。导出类CssRemProvider实现vscode.CompletionItemProvider{provideCompletionItems(document:vscode.TextDocument,position:vscode.Position,token:vscode.CancellationToken):Thenable
