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

以上！