是時候開發你本身的vscode擴展插件了

時間 2019-11-05

標籤時候開發本身 vscode 擴展插件简体版

原文原文鏈接

Visual Studio Code（如下簡稱vscode）是如今很是流行的一款編輯器，相信不少人都在用或者用過，至少也是據說過。不一樣於WebStorm這樣的IDE大而全但稍顯笨重，vscode算是比較小巧快速的了，雖然還比不上Sublime Text，可是畢竟自帶了調試，GIT管理，簡單的代碼提示等功能，體積大一點也是能夠理解的，反正前端開發是比較推薦使用vscode做爲首選編輯器的。
vscode的大部分功能都是經過擴展插件來實現的，安裝這些擴展能夠給咱們提供豐富的功能，可是要注意插件裝的越多越吃性能，這點須要你們按照本身的需求和電腦配置去取捨，不是裝得越多就越好。
大部分使用vscode的人都或多或少的使用過如eslint（代碼檢查），Prettier（格式化代碼），GitLens（git加強）等必備擴展，講究一點的人還會選擇安裝一些代碼主題和圖標主題。可是我相信不少人只是安裝使用，並無本身開發過擴展插件，今天我就跟你們一塊兒動手開發一個vscode擴展。javascript

需求說明

這裏例子是一個工做中真實的需求，因爲公司的一個項目中會大量複製粘貼一些文案，在一些英文句子中若是出現了中文標點，寫文案的人就會扯皮，說是前端本身寫錯了（明明都是複製粘貼的），即便找出證據是寫文案的錯，也會說咱們爲何開發的時候沒檢查出來改掉。秉着前端永不背鍋的態度，我決定開發一個擴展來處理這個問題，功能大概就是，檢測文件中'' "" ``之間的字符串，純英文字符串（不出現中文字符）出現了中文標點就標記出來，成品效果以下。html

源代碼

git地址github.com/hoc2019/vsc…，感興趣的能夠star一波，我會把註釋寫的儘可能詳細。vscode商店中搜sneak mark也能夠找到，目前該擴展基本功能已經完成，後續還會不斷更新完善。前端

準備工做

node環境，若是要發佈的話要有一個git倉庫和微軟帳號，編輯器確定是用vscode,方便調試。由於vscode是基於Electron開發，因此插件也是用Javascript來寫（官方更推薦用Typescript），對前端很是友好。
有人可能會擔憂太難，其實大可沒必要，原本我也以爲開發一個擴展很難，可是前段時間vscode出現的楊超越鼓勵師和坤坤鼓勵師這樣的粉絲向擴展，讓我以爲擴展開發應該是一個挺隨意的事（順便一提，坤坤鼓勵師說明配的那是個什麼圖和文字，並且搜索關鍵詞居然有雞你太美，做者怕是個黑粉）。vue

建立項目

建立項目最簡單的方法確定是使用腳手架，微軟官方推出了基於yeoman的腳手架vscode-generator-code,使用很是簡單。（注：yeoman是一個包含了大量腳手架的腳手架倉庫）java

// 全局安裝yeoman和vscode-generator-code
npm install -g yo generator-code

// 建立項目
yo code
複製代碼

執行建立命令後，會像使用vue-cli那樣有一些配置選項，我這邊選擇的意思是用ts開發一個新擴展，擴展名爲sneak mark,擴展id爲sneak-mark。node

項目已經建立完成，用vscode打開。此時已是一個簡單的擴展，在vscode中按F5(也能夠在側邊欄切換到調試面板啓動)會啓動一個新的vscode運行調試你的代碼（標題欄會顯示爲擴展開發主機），打開命令面版（windows下快捷鍵是ctrl+alt+p）輸入hello world會找一條命令，選中後彈出hello world的提示。git

項目配置

相關配置是在package.json中，一開始設置的擴展名，擴展id之類的在package.json中均可以修改。咱們這裏只說明兩個重要的配置，還有一些基礎的和沒用到的配置能夠查看官方項目配置文檔。項目配置裏面有一項是擴展配置，因爲內容比較多並且重要，有單獨的頁面。若是英文看起來比較吃力，能夠先看一下這篇VSCode插件開發全攻略（三）package.json詳解（這篇教程裏面也有比較全面細緻的各項說明）。github

{   
    //啓動設置爲隨vscode打開加載
    "activationEvents": [
        "*"
    ],
    //擴展配置項，最重要的配置點，官方有單獨的說明頁
    "contributes": {
        //vscode首選項設置裏面的相關內容，這裏容許用戶設置標記的顏色
        "configuration": {
            "type": "object",
            "title": "Sneak mark",
            "properties": {
                "sneakMark.markColor": {
                    "type": "string",
                    "default": "#FF000055",
                    "description": "標記顏色"
                }
            }
        }
    }
}

複製代碼

這樣配置以後咱們的擴展就會隨vscode打開加載，不過爲了用戶的體驗，官方不推薦這種加載方式，這樣的擴展裝多了，就是vscode打開變慢的罪魁禍首。咱們應該根據擴展的功能選擇最優的加載時機，好比咱們這個插件還能夠設置爲隨着打開某種格式的文件加載，好比js和json文件。web

{
    "activationEvents": [
        "onLanguage:javascript",
        "onLanguage:json"
    ]
}
複製代碼

可是爲了之後能檢查指定格式文件的功能，這裏就先使用隨vscode打開加載。
首選項設置的效果以下，咱們能夠拿到用戶設置的顏色值，做爲標記的樣式。vue-cli

功能實現

微軟官方提供了不少擴展的示例，基本上你想作的功能，都有相似的示例（示例列表和示例代碼）。
首先實現異常中文標點的標記高亮，用到的功能示例爲decorator-sample，流程就是設定一個裝飾集，裝飾集是一個位置對象數組，vscode的會對裝飾集中的位置進行額外樣式設置。

import * as vscode from 'vscode';
//擴展加載後執行的函數
export function activate(context: vscode.ExtensionContext) {
    //匹配被'',"",``符號包裹的文本
    const textRegEx = /(['"`])[\s\S]*?\1/g;
    //匹配須要標識出的標點符號，計劃後期可添加配置
    const charCodeRegEx = /(，|。|‘|’|「|」|？|！)/g;
    //獲取配置中異常中文標點的樣式
    let sneakDecorationType = getSneakDecorationType();
    //編輯中頁面
    let activeEditor = vscode.window.activeTextEditor;
    //更新數據和樣式
    function updateDecorations() {
        //獲取編輯中頁面的文本信息
        const text = activeEditor.document.getText();
        //裝飾集（這裏就是須要被修改樣式的異常中文標點）
        const sneakCharCodes: vscode.DecorationOptions[] = [];
        let match;
        //循環每個被''""``包裹的異常字符串
        while ((match = textRegEx.exec(text))) {
            const initialText = match[0];
            //字符串中是否包含中文
            const hasChinese = isChineseChar(initialText);
            //字符串中是否含有異常中文標點
            const hasChineseMark = isChineseMark(initialText);
            //若果存在中文或沒有中文標點則跳事後續步驟執行下一次循環
            if (hasChinese || !hasChineseMark) {
                continue;
            }
            let charCodeMatch;
            //循環異常字符串中的每個字符
            while ((charCodeMatch = charCodeRegEx.exec(initialText))) {
                //異常中文標點實際開始位置爲異常字符串的位置+異常中文標點在異常字符串的位置
                const startIndex = match.index + charCodeMatch.index;
                const startPos = activeEditor.document.positionAt(startIndex);
                const endPos = activeEditor.document.positionAt(startIndex + 1);
                //異常中文標點的範圍
                const decoration = {
                    range: new vscode.Range(startPos, endPos)
                };
                //將異常中文標點的位置添加進裝飾集
                sneakCharCodes.push(decoration);
            }
        }
        //激活中的編輯頁面應用樣式集
        activeEditor.setDecorations(sneakDecorationType, sneakCharCodes);
    }
    //啓動時存在打開的編輯頁面自動觸發樣式更新
    if (activeEditor) {
        updateDecorations();
    }
}
複製代碼

activate這個函數只會在擴展加載時執行一次，若是存在打開的編輯頁面就會標記出異常中文標點，可是後面再打開別的編輯頁面或者頁面中的內容有修改變化是不會更新的，因此要加兩個監聽事件來觸發。

//防止代碼敲的太快，防抖一下
function triggerUpdateDecorations() {
        if (timeout) {
            clearTimeout(timeout);
            timeout = undefined;
        }
        timeout = setTimeout(updateDecorations, 500);
    }
//切換編輯頁面事件，會觸發樣式更新
vscode.window.onDidChangeActiveTextEditor(
    editor => {
        activeEditor = editor;
        if (editor) {
            triggerUpdateDecorations();
        }
    },
    null,
    context.subscriptions
);
//編輯頁面中的內容變化，會觸發樣式更新
vscode.workspace.onDidChangeTextDocument(
    event => {
        if (activeEditor && event.document === activeEditor.document) {
            triggerUpdateDecorations();
        }
    },
    null,
    context.subscriptions
);
複製代碼