如何在vscode里将px转rem,而且还得爽!
自从新版移动端IM界面改用rem适配,效果实在太棒了。所以,接下来的主要工作会将一些核心页面,也从px向rem转移。
然,一直用惯了VSCODE,再加上设计稿等诸多原因,如果真想一下子从rem上编码着实还是很困难。因此,一般而言,都是先订一个基准大小,最后根据这个大小进行转换。
可是,搜遍了整个VSCODE市场,实在找不到一个能够满足我风格的方案,至少得这样:
输入 12px >
Tab
> .1rem整个文档进行转换
故,造了一个轮子,名曰:cssrem。
配置
默认基准 font-size: 16px
,但你可以通过以下配置进行修改:
打开 ctrl+,
用户配置界面(或项目配置),只有三个配置项:
cssrem.rootFontSize
基准font-size(单位:px),默认:16。cssrem.fixedDigits
px转rem小数点最大长度,默认:6。cssrem.autoRemovePrefixZero
自动移除0开头的前缀,默认:true。(至少我不想看到
0 默认是去掉的)
VSCODE插件开发
本来文章可以结束了,但是又想好像VSCODE自己开发插件又简单、又很爽,不得再码几字。
插件开发指南 写得非常细,虽然都是英文的,但看起来不会很累。我想最麻烦可能是对各种接口的认知了。
如果你对Typescript很熟的话,那么开发vscode插件也信手拈来,再简单不过。
而cssrem最核心是如何实现动态创建Snippet,就是实现 CompletionItemProvider
接口就可以了。
export class CssRemProvider implements vscode.CompletionItemProvider { provideCompletionItems (document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): Thenable<vscode.CompletionItem[]> { return new Promise((resolve, reject) => { // 构建一个Snippet const item = new vscode.CompletionItem(`${res.pxValue}px -> ${res.rem}`, vscode.CompletionItemKind.Snippet); // 指定要插入的新文本 item.insertText = res.rem; return resolve([item]); }); }}
如果想了解 [cssrem] 更多细节可以参考 github 源码。
以上!
相关内容
-
电脑音频效果插件|电脑上最好的音效插件
电脑音频效果插件|电脑上最好的音效插件,,1. 电脑上最好的音效...
-
怎么看路由器设置|怎么看路由器设置界面
怎么看路由器设置|怎么看路由器设置界面,,1. 怎么看路由器设置...
-
金蝶专业版主界面闪屏|笔记本电脑屏幕不停闪烁
金蝶专业版主界面闪屏|笔记本电脑屏幕不停闪烁是什么问题,,1....
-
平板电脑怎么转换内存|平板电脑怎么转换内存条
平板电脑怎么转换内存|平板电脑怎么转换内存条,,1. 平板电脑怎...
-
怎么进路由器设置界面|怎么样进入路由器设置界
怎么进路由器设置界面|怎么样进入路由器设置界面,,怎么样进入...
-
git设置编码|git语言设置
git设置编码|git语言设置,,git设置编码点击cap4j搜索从git直接...
-
怎么进快捷键界面|如何直接到桌面的快捷键
怎么进快捷键界面|如何直接到桌面的快捷键,,1. 如何直接到桌面...
-
1分钟学会在C++中将图像转换为Word文档,快速入手
1分钟学会在C++中将图像转换为Word文档,快速入手光学字符处理...
-
打开Web页面时,总是提示您是否可以运行诸如Activ
打开Web页面时,总是提示您是否可以运行诸如ActiveX控件和插件...
-
手机wps如何将word转换成pdf|手机如何将word转
手机wps如何将word转换成pdf|手机如何将word转化为pdf格式,WP...
-
电脑表格转换为图表|表格转换成图表
电脑表格转换为图表|表格转换成图表,,表格转换成图表1、选择A...
-
转换多线段快捷键|转换多线段快捷键命令
转换多线段快捷键|转换多线段快捷键命令,,1. 转换多线段快捷键...
-
微信界面图片设置方法|微信怎么设置界面图
微信界面图片设置方法|微信怎么设置界面图,,1. 微信怎么设置界...
-
电脑开机到主板画面就不动|台式电脑开机显示主
电脑开机到主板画面就不动|台式电脑开机显示主板界面就不动...
-
电脑只能进入铭瑄主板界面|台式电脑开机显示铭
电脑只能进入铭瑄主板界面|台式电脑开机显示铭瑄主板一直停...