從0到1開發一款自己的vscode外掛

一、vscode外掛是什麼？

大家對vscode肯定都不陌生，其是微軟推出的一款輕量級程式碼編輯器，在使用的時候總會時不時的安裝一些外掛去協助我們進行開發，這些外掛就是利用vscode給我們開放的一些API的基礎上進行擴充套件功能的開發，從而解決開發中的一些問題，提高生產效率。這種外掛化思想一方面使該程式碼編輯器更輕量化；另一方面能夠充分利用社群的力量，為其提供更加多元化的外掛。（下圖是我做的一個小外掛的效果圖）

二、vscode外掛能做什麼？

vscode外掛能做什麼？其核心點在於vscode為其提供了哪些開放能力，只有其開放的能力才能為我們所用，就官網來看，利用vscode外掛能夠做以下事情（該部分來自於vscode官網擴充套件能力概述部分）：

1. 通用功能

可以在任何擴充套件中使用的核心功能，主要包括以下幾點：

（1）能夠新增命令、配置項、快捷鍵、選單項、右鍵選單；

（2）儲存工作區或全域性資料；

（3）展示通知資訊；

（4）使用快速選擇收集使用者的輸入；

（5）開啟檔案選擇器讓使用者去選擇檔案或資料夾；

（6）使用Progress API去闡述長時間執行的操作；

2. 主題化

控制vscode的外觀，包括編輯器中原始碼的顏色和vscode ui的顏色，其主要包含三種型別的主題：

（1）顏色主題：其允許將顏色應用於VS Code UI元件和編輯器中的文字；

（2）檔案圖示主題：檔案圖示顯示在VS Code UI中的位置，例如檔案資源管理器、快速開啟列表和編輯器選項卡；

（3）產品圖示主題：在整個UI中使用的一組圖示

3. 宣告性語言特性

宣告性語言功能為程式語言新增了基本的文字編輯支援，例如括號匹配、自動縮排和語法突出顯示。

4. 程式語言特性

程式語言功能新增了豐富的程式語言支援，例如懸停、轉到定義、診斷錯誤、IntelliSense 和 CodeLens。

5. 擴充套件工作臺

工作臺是指包含標題欄、活動欄、側邊欄、控制板、編輯組、狀態列等UI元件的整體Visual Studio Code UI。VS Code提供了各種API，允許將自己的元件新增到工作臺。

6. 除錯

可以通過編寫將 VS Code 的除錯 UI 連線到特定偵錯程式或執行時的偵錯程式擴充套件來利用 VS Code 的除錯功能。

三、vscode外掛實戰

vscode外掛其實是vscode對外提供了一些能力，如果不是特別需要其實沒有必要完整的學習整體內容，僅僅需要了解其大體開發思路、能夠解決的問題，之所以這麼說是因為（以上純個人觀點，不一定正確）學習該部分的內容需要一定精力，但學後並不一定能夠在自己專案中得到使用，深入學習投入於產出並不成正比，所以本次我只會講述入門級內容，具體的內容扔需要讀者在需要這一部分能力的時候再深入研究。

3.1 專案初始化

官方為了方便開發人員進行vscode外掛的開發，提供了對yo應的腳手架來生成對應的專案。

// 安裝需要的包
npm install -g yo generator-code
// 執行
yo code

上述命令其實安裝了兩個包（yo和generator-code)，這兩個包用途如下：

1. yo模組全域性安裝後就安裝了Yeoman，Yeoman是通用型專案腳手架工具，可以根據一套模板，生成一個對應的專案結構
2. generator-code模組是VS Code擴充套件生成器，與yo配合使用才能構建專案。

3.2 重要檔案

在專案生成之後，目錄結構如下所示，其中最重要的檔案是package.json和extension.js，瞭解這兩個檔案基本上就可以入門開發一個vscode外掛了。

#### 3.2.1 package.json

該檔案是vscode擴充套件的清單檔案，裡面有很多欄位，官方對每個欄位都進行了詳細闡述，本次我們重點闡述以下初始化後期清單檔案。

{
    "name": "demo", // 外掛名
    "displayName": "外掛", // 顯示在應用市場的名字
    "description": "我的第一個外掛測試", // 具體描述
    "version": "0.0.1", // 外掛的版本號
    "engines": {
        "vscode": "^1.60.0" // 最低支援的vscode版本
    },
    "categories": [
        "Other" // 擴充套件類別
    ],
    // 啟用事件組，在那些事件情況下被啟用
    "activationEvents": [
        "onCommand:demo.helloWorld"
    ],
    // 外掛的主入口檔案
    "main": "./extension.js",
    // 貢獻點
    "contributes": {
        // 命令
        "commands": [
            {
                "command": "demo.helloWorld",
                "title": "Hello World"
            }
        ]
    },
    "scripts": {
        "lint": "eslint .",
        "pretest": "npm run lint",
        "test": "node ./test/runTest.js"
    },
    // 開發依賴項
    "devDependencies": {
        "@types/vscode": "^1.60.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.2.2",
        "@types/node": "14.x",
        "eslint": "^7.27.0",
        "glob": "^7.1.7",
        "mocha": "^8.4.0",
        "typescript": "^4.3.2",
        "vscode-test": "^1.5.2"
    }
}

在這份清單檔案中，重點關注的主要有三部分內容：activationEvents、main以及contributes，其是整個檔案中的重中之重。

1. main

指明瞭該外掛的主入口在哪，只有找到主入口整個專案才能正常的運轉、

2. activationEvents

指明該外掛在何種情況下才會被啟用，因為只有啟用後外掛才能被正常使用，官網已經指明瞭啟用的時機，這樣我們就可以按需設定對應時機。（具體每個時機用的時候詳細檢視即可）

• onLanguage 開啟解析為特定語言檔案時被啟用，例如"onLanguage:python"
• onCommand 在呼叫命令時被啟用

• onDebug 在啟動除錯話之前被啟用

  • onDebugInitialConfigurations
  • onDebugResolve
• workspaceContains 每當開啟資料夾並且該資料夾包含至少一個與 glob 模式匹配的檔案時
• onFileSystem 每當讀取來自特定方案的檔案或資料夾時
• onView 每當在 VS Code 側欄中展開指定 id 的檢視
• onUri 每當開啟該擴充套件的系統範圍的 Uri 時
• onWebviewPanel
• onCustomEditor
• onAuthenticationRequest
• * 只要一啟動vscode，外掛就會被啟用
• onStartupFinished

3. contributes

通過擴充套件註冊contributes用來擴充套件Visual Studio Code中的各項技能，其有多個配置，如下所示：

• breakpoints 斷點
• colors 主題顏色
• commands 命令
• configuration 配置
• configurationDefaults 預設的特定於語言的編輯器配置
• customEditors 自定義編輯器
• debuggers
• grammars
• iconThemes
• jsonValidation
• keybindings 快捷鍵繫結
• languages
• menus
• problemMatchers
• problemPatterns
• productIconThemes
• resourceLabelFormatters
• snippets 特定語言的片段
• submenus
• taskDefinitions
• themes 顏色主題
• typescriptServerPlugins
• views
• viewsContainers
• viewsWelcome
• walkthroughs

3.2.2 extension.js檔案

該檔案時其入口檔案，即package.json中main欄位對應的檔案（不一定叫extension.js這個名字），該檔案中將匯出兩個方法：activate和deactivate，兩個方法的執行時機如下所示：

1. activate

這是外掛被啟用時執行的函式

2. deactivate

這是外掛被銷燬時呼叫的方法，比如釋放記憶體等。

3.3 實戰

上述已經對vscode外掛有了基礎的認識，下面就進行一個簡單的實戰，打造屬於自己的一個vscode外掛，此外掛的功能如下：

1. 通過在檔案編輯區域或檔名上右擊彈出按鈕，點選按鈕獲取檔案的大小、建立時間和修改時間；
2. 如果獲取的是資料夾，則指明該檔案是資料夾，不是檔案，給予提示。

3.3.1 package.json修改項

{
    // ……
    // 在getFileState指令下啟用
    "activationEvents": [
        "onCommand:getFileState"
    ],
    // 入口檔案
    "main": "./extension.js",
    "contributes": {
        // 命令
        "commands": [
            {
                "command": "getFileState",
                "title": "File State"
            }
        ],
        // 選單項
        "menus": {
            // 編輯上下文選單
            "editor/context": [
                {
                    "when": "editorFocus",
                    "command": "getFileState",
                    "group": "navigation"
                }
            ],
            // 資源管理器上下文選單
            "explorer/context": [
                {
                    "command": "getFileState",
                    "group": "navigation"
                }
            ]
        }
    },
    // ……
}

3.3.2 主函式內容

const vscode = require('vscode');
const fs = require('fs');

function activate(context) {
    console.log('外掛已經被啟用');

    // 註冊命令
    let commandOfGetFileState = vscode.commands.registerCommand('getFileState', uri => {
        // 檔案路徑
        const filePath = uri.path.substring(1);
        fs.stat(filePath, (err, stats) => {
            if (err) {
                vscode.window.showErrorMessage(`獲取檔案時遇到錯誤了${err}!!!`)
            }

            if (stats.isDirectory()) {
                vscode.window.showWarningMessage(`檢測的是資料夾，不是檔案，請重新選擇！！！`);
            }

            if (stats.isFile()) {
                const size = stats.size;
                const createTime = stats.birthtime.toLocaleString();
                const modifyTime = stats.mtime.toLocaleString();

                vscode.window.showInformationMessage(`
                    檔案大小為:${size}位元組;
                    檔案建立時間為:${createTime};
                    檔案修改時間為:${modifyTime}
                `, { modal: true });
            }
        });
        
        const stats = fs.statSync(filePath);
        console.log('stats', stats);
        console.log('isFile', stats.isFile());
    });

    // 將命令放入其上下文物件中，使其生效
    context.subscriptions.push(commandOfGetFileState);
}

function deactivate() {}

module.exports = {
    activate,
    deactivate
}

3.3.3 效果圖

經過開發後，該外掛除錯效果如下所示：

3. 4 釋出

外掛看法完畢之後就是需要分享出去供大家使用，目前有三種方式：

1. 直接把資料夾發給別人，讓別人找到vscode的外掛存放目錄並放進去，然後重啟vscode，一般不推薦；
2. 打包成vsix外掛，然後傳送給別人安裝，如果你的外掛涉及機密不方便釋出到應用市場，可以嘗試採用這種方式；
3. 註冊開發者賬號，釋出到官網應用市場，這個釋出和npm一樣是不需要稽核的。

每一種方式都可行，並且網上也有很多教程講述其釋出方式，今天我重點講述一下第二種，畢竟在外掛這麼多的情況下，很多人更樂於開發一款屬於自己的專用外掛或者特定自己領域使用的外掛，完全沒必要釋出到應用市場。

1. 安裝對應的模組vsce

npm i vsce -g

2. 利用vsce進行打包，生成對應的vsix檔案

vsce package

3. 安裝到vscode

4. 安裝完成之後就可以正常的進行使用了

四、總結

因為工作中目前還沒有遇到這種需求，此次我只是對vscode外掛的開發流程進行了一個簡單的概述，並沒有進一步深入探索，待工作中有這樣的場景需要這樣的能力去解決某些問題時，能夠快速反應有這樣的解決方案，再進一步學習也為時不晚，也希望愛學習的小夥伴們也對這一部分能夠有一定了解，彌補自己知識上欠缺的一環，後續為己所用。

五、參考文獻

vscode外掛編寫實戰

vscode外掛開發全攻略

官方文件

1.如果覺得這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到

2.歡迎關注公眾號前端點線面,開啟前端救贖之路。