如何在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 源码。

以上！