如何編寫 VS Code 擴充套件

通過為流行的程式碼編輯器編寫自己的擴充套件來新增缺失的功能。

Visual Studio Code（VS Code）是微軟為 Linux、Windows 和 macOS 建立的跨平台程式碼編輯器。遺憾的是，微軟版本的 VS Code 是在 Microsoft Software License 下發布的，這不是一個開源的許可證。然而，它的原始碼是開源的，在 MIT 許可證下由 VSCodium 專案發布。

VSCodium 和 VS Code一樣，支援擴充套件、內嵌式 Git 控制、GitHub 整合、語法高亮、偵錯、智慧程式碼補完、程式碼片段等。換句話說，對於大多數使用者來說，使用 VS Code 和 VSCodium 沒有什麼區別，而且後者是完全開源的！

什麼是 VS Code 擴充套件？

擴充套件extension可以讓你為 VS Code 或 VSCodium 新增功能。你可以在 GUI 中或從終端安裝擴充套件。

你也可以構建自己的擴充套件。有幾個你可能想學習如何構建擴充套件的原因：

想要新增一些功能： 如果缺失你想要的功能，你可以建立一個擴充套件來新增它。
為了樂趣和學習： 擴充套件 API 允許你探索 VSCodium 是如何工作的，這是一件有趣的事情。
為了提高您的技能： 建立擴充套件可以提高你的程式設計技能。
為了成名： 建立一個對他人有用的擴充套件可以提高你的公眾形象。

安裝工具

在你開始之前，你必須已經安裝了 Node.js、npm 和 VS Code 或 VSCodium。

要生成一個擴充套件，你還需要以下工具：Yeoman，是一個開源的用戶端腳手架工具，可以幫助你搭建新專案；以及 vscode-generator-code，是 VS Code 團隊建立的 Yeoman 生成器。

構建一個擴充套件

在本教學中，你將構建一個擴充套件，它可以為應用程式初始化一個 Docker 映象。

生成一個擴充套件骨架

要在全域性範圍內安裝並執行 Yeoman 生成器，請在命令提示字元或終端中輸入以下內容：

npm install -g yo generator-code

導航到要生成擴充套件的資料夾，鍵入以下命令，然後按回車：

yo code

根據提示，你必須回答一些關於你的擴充套件的問題：

你想建立什麼型別的擴充套件？ 使用上下箭頭選擇其中一個選項。在本文中，我將只介紹第一個選項，New Extension (TypeScript)。
你的擴充套件名稱是什麼？ 輸入你的擴充套件名稱。我的叫 initdockerapp。（我相信你會有一個更好的名字。）
你的擴充套件的識別符號是什麼？ 請保持原樣。
你的擴充套件的描述是什麼？ 寫一些關於你的擴充套件的內容（你可以現在填寫或稍後編輯它）。
初始化 Git 倉庫？ 這將初始化一個 Git 倉庫，你可以稍後新增 set-remote。
使用哪個包管理器？ 你可以選擇 yarn 或 npm；我使用 npm。

按確認鍵後，就會開始安裝所需的依賴項。最後顯示：

"Your extension initdockerapp has been created!"

乾的漂亮！

檢查專案的結構

檢查你生成的東西和專案結構。導航到新的資料夾，並在終端中鍵入 cd initdockerapp。

一旦你進入該目錄，鍵入 .code。它將在你的編輯器中開啟，看起來像這樣。

Project file structure in VSCodium

（Hussain Ansari, CC BY-SA 4.0）

最需要注意的兩個檔案是 src 資料夾內的 package.json 和 extension.ts。

package.json

首先來看看 package.json，它應該是這樣的：

{        "name": "initdockerapp",        "displayName": "initdockerapp",        "description": "",        "version": "0.0.1",        "engines": {                "vscode": "^1.44.0"        },        "categories": [                "Other"        ],        "activationEvents": [                "onCommand:initdockerapp.initialize"        ],        "main": "./out/extension.js",        "contributes": {                "commands": [                        {                                "command": "initdockerapp.initialize",                                "title": "Initialize A Docker Application"                        }                ]        },        "scripts": {                "vscode:prepublish": "npm run compile",                "compile": "tsc -p ./",                "lint": "eslint src --ext ts",                "watch": "tsc -watch -p ./",                "pretest": "npm run compile && npm run lint",                "test": "node ./out/test/runTest.js"        },        "devDependencies": {                "@types/vscode": "^1.44.0",                "@types/glob": "^7.1.1",                "@types/mocha": "^7.0.2",                "@types/node": "^13.11.0",                "eslint": "^6.8.0",                "@typescript-eslint/parser": "^2.26.0",                "@typescript-eslint/eslint-plugin": "^2.26.0",                "glob": "^7.1.6",                "mocha": "^7.1.1",                "typescript": "^3.8.3",                "vscode-test": "^1.3.0"        }}{        "name": "initdockerapp",        "displayName": "initdockerapp",        "description": "",        "version": "0.0.1",        "engines": {                "vscode": "^1.44.0"        },        "categories": [                "Other"        ],        "activationEvents": [                "onCommand:initdockerapp.initialize"        ],        "main": "./out/extension.js",        "contributes": {                "commands": [                        {                                "command": "initdockerapp.initialize",                                "title": "Initialize A Docker Application"                        }                ]        },        "scripts": {                "vscode:prepublish": "npm run compile",                "compile": "tsc -p ./",                "lint": "eslint src --ext ts",                "watch": "tsc -watch -p ./",                "pretest": "npm run compile && npm run lint",                "test": "node ./out/test/runTest.js"        },        "devDependencies": {                "@types/vscode": "^1.44.0",                "@types/glob": "^7.1.1",                "@types/mocha": "^7.0.2",                "@types/node": "^13.11.0",                "eslint": "^6.8.0",                "@typescript-eslint/parser": "^2.26.0",                "@typescript-eslint/eslint-plugin": "^2.26.0",                "glob": "^7.1.6",                "mocha": "^7.1.1",                "typescript": "^3.8.3",                "vscode-test": "^1.3.0"        }}

如果你是 Node.js 開發者，其中一些可能看起來很熟悉，因為 name、description、version 和 scripts 是 Node.js 專案的常見部分。

有幾個部分是非常重要的：

engines：說明該擴充套件將支援哪個版本的 VS Code / VSCodium。
categories：設定擴充套件型別；你可以從 Languages、Snippets、Linters、Themes、Debuggers、Formatters、Keymaps 和 Other中選擇。
contributes：可用於與你的擴充套件一起執行的命令清單。
main：擴充套件的入口點。
activationEvents：指定啟用事件發生的時間。具體來說，這決定了擴充套件何時會被載入到你的編輯器中。擴充套件是懶載入的，所以在啟用事件觸發之前，它們不會被啟用。

src/extension.ts

接下來看看 src/extension.ts，它應該是這樣的：

// The module 'vscode' contains the VSCodium extensibility API// Import the module and reference it with the alias vscode in your code belowimport * as vscode from "vscode";const fs = require("fs");const path = require("path");// this method is called when your extension is activated// your extension is activated the very first time the command is executedexport function activate(context: vscode.ExtensionContext) {        // Use the console to output diagnostic information (console.log) and errors (console.error)        // This line of code will only be executed once when your extension is activated        console.log('Congratulations, your extension "initdockerapp" is now active!');               // The command has been defined in the package.json file        // Now provide the implementation of the command with registerCommand        // The commandId parameter must match the command field in package.json        let disposable = vscode.commands.registerCommand('initdockerapp.initialize', () => {                // The code you place here will be executed every time your command is executed                let fileContent =`                FROM node:alpine                WORKDIR /usr/src/app                COPY package.json .                RUN npm install                               COPY . .                               EXPOSE 3000                CMD ["npm", "start"]                `;                               fs.writeFile(path.join(vscode.workspace.rootPath, "Dockerfile"), fileContent, (err:any) => {                        if (err) {                                return vscode.window.showErrorMessage("Failed to initialize docker file!");                        }                        vscode.window.showInformationMessage("Dockerfile has been created!");                });        });        context.subscriptions.push(disposable);}// this method is called when your extension is deactivatedexport function deactivate() {}

這是為你的擴充套件寫程式碼的地方。已經有一些自動生成的程式碼了，我再來分析一下。

注意，vscode.command.registerCommand 裡面的 initdockerapp.initialize 和 package.json 裡面的命令是一樣的。它需要兩個引數。

要註冊的命令名稱
執行命令的功能

另一個需要注意的函數是 fs.writeFile，這是你寫在 vscode.command.registerCommand 函數裡面的。這將在你的專案根目錄下建立一個 Dockerfile，並在其中附加程式碼來建立一個 Docker 映象。

偵錯擴充套件

現在你已經寫好了擴充套件，是時候偵錯它了。點選“Run”選單，選擇“Start Debugging”（或者直接按 F5）開啟偵錯視窗。

在偵錯視窗裡面點選“Add Folder”或“Clone Repository”按鈕，開啟該專案。

接下來，用 Ctrl+Shift+P（在 macOS 上，用 Command 鍵代替 Ctrl）開啟命令面板，執行 Initialize A Docker Application。

第一次執行此命令時，自 VSCodium 啟動後，啟用函數尚未執行。因此，呼叫啟用函數，並由啟用函數註冊該命令。
如果命令已註冊，那麼它將被執行。

你會看到右下角有一條資訊，上面寫著：Dockerfile has been created!。這就建立了一個 Dockerfile，裡面有一些預定義的程式碼，看起來是這樣的：

Running the new extension command

（Hussain Ansari, CC BY-SA 4.0）

總結

有許多有用的 API 可以幫助你建立你想要構建的擴充套件。VS Code 擴充套件 API 還有許多其他強大的方法可以使用。

你可以在 VS Code 擴充套件 API 文件中了解更多關於 VS Code API 的資訊。