摘要：所以，接下来的主要工作会将一些核心页面，也从向转移。因此，一般而言，都是先订一个基准大小，最后根据这个大小进行转换。转小数点最大长度，默认。自动移除开头的前缀，默认。而最核心是如何实现动态创建，就是实现接口就可以了。
自从新版移动端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自己开发插件又简单、又很爽，不得再码几字。
插件开发指南 写得非常细，虽然都是英文的，但看起来不会很累。我想最麻烦可能是对各种接口的认知了。
如果你对Typescript很熟的话，那么开发vscode插件也信手拈来，再简单不过。
而cssrem最核心是如何实现动态创建Snippet，就是实现 CompletionItemProvider 接口就可以了。
export class CssRemProvider implements vscode.CompletionItemProvider {
provideCompletionItems (document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): Thenable {
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 源码。
以上！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/56278.html
摘要：然而在固定布局时我们通常以为基准单位进行调整，进而通过计算获取的值，这时如果有个好用的转工具会让工作事半功倍。启用此插件的文件类型。输入值后按下键直接转换，使用取消转换 在响应式布局中，rem这个css单位已经慢慢崭露头角，成为最佳解决方案之一。然而在固定布局时我们通常以px为基准单位进行调整，进而通过计算获取rem的值，这时如果有个好用的px转rem工具会让工作事半功倍。本文将推荐一...
摘要：以下会以其中一个以公积金页面开发项目作为例子，介绍移动端的一些常见问题和使用作为进行多页开发的经验。所以要想在微信开发调试工具中获取，我们需要使用一种叫做内网穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);两年前刚接触移动端开发，刚开始比较疑惑，每次遇到问题都是到社区里提问...
摘要：以下会以其中一个以公积金页面开发项目作为例子，介绍移动端的一些常见问题和使用作为进行多页开发的经验。所以要想在微信开发调试工具中获取，我们需要使用一种叫做内网穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);两年前刚接触移动端开发，刚开始比较疑惑，每次遇到问题都是到社区里提问...
摘要：把打包的目录修改成生产环境需要的目录。是域名的配置只要统一配置一项即可，方便。旨在增强团队开发协作提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。 Vue作为前端三大框架之一，其已经悄然成为主流，学会用vue相关技术来开发项目会相当轻松。 对于还没学习或者还没用过vue的初学者，基础知识这里不作详解，推荐先去相关官网，学习一下vue相关的基础知识。 a...
摘要：下让文件完美支持或语法方法习惯后通常都是直接对文件进行处理但是大部分习惯的朋友也许不适应了我专门研究了一下在编辑器下如果配置相关代码和设置达到文件完美编写的办法其他语法类型原理相似这里以为例开始配置编辑器设置的配置首先配置编辑器的设置按快捷 VSCode下让CSS文件完美支持SCSS或SASS语法方法 习惯Webpack + PostCSS后, 通常PostCSS都是直接对CSS文件进...
阅读 857·2023-04-26 02:02
阅读 2254·2021-09-26 10:11
阅读 3431·2019-08-30 13:10
阅读 3544·2019-08-29 17:12
阅读 615·2019-08-29 14:20
阅读 2074·2019-08-28 18:19
阅读 920·2019-08-27 11:05
阅读 2046·2019-08-26 13:52
