建立VS Code 擴充套件外掛

尋找無名的特質發表於2022-01-12
套件

VS Code提供了強大的擴充套件功能，我們可以通過開發外掛實現自己的業務模型編輯器。這裡我們快速介紹一下外掛的建立、開發和釋出過程。

建立外掛開發模板

首先需要確認系統中安裝了node.js，並且可以使用npm安裝程式包。然後，安裝外掛的開發模板生成器：

npm install -g yo generator-code

安裝完成後，使用模板建立第一個擴充套件專案，我們為這個專案建立一個子目錄，然後進入命令列，在這個子目錄下執行：

yo code

模板生成程式執行：

生成完成後，在命令列執行：

code .

這個專案在vs code 中開啟了：

外掛執行和除錯

我們開啟extension.js檔案，可以看到外掛啟動的程式碼，我們對程式碼進行一點修改：

將裡面的提示修改為我們需要的資訊。然後按F5執行。這時，一個新的Vs Code介面啟動了，在這個新介面中按Ctrl+Shift+P，開啟命令視窗，輸入hello world，在介面下方出現我們編輯的資訊：

說明這個外掛已經可以執行了。

外掛打包

現在我們看如何將這個外掛打包，在其它機器上安裝使用。Vs Code的外掛可以同時建立vsix檔案釋出，也可以釋出到應用商店，通過外掛管理器進行安裝。我們這裡只介紹第一種方式。

首先需要安裝外掛打包工具vsce:

npm i vsce -g

然後，我們還需要在package.json中增加publisher的資訊：

	"publisher": "zhenlei",

如果不增加這個資訊，會出現如下錯誤：

然後還要修改打包工具建立的Readme.md檔案，如果不修改，會出現如下錯誤：

現在我們可以打包了，在命令列中，進入專案資料夾，執行：

vsce package

這時會提問，缺少respository，這是一個警告，我們可以忽略，繼續執行，安裝包就建立完成了：

擴充套件外掛的安裝和解除安裝

可以在vs code的擴充套件管理器中安裝打包好的擴充套件外掛，選擇從VSIX安裝：

也可以在擴充套件管理器中禁用或解除安裝安裝好的外掛：

建立第一個實用外掛

現在我們建立一個實用的外掛，這個外掛使用XLST模板將XML檔案轉換為另一種格式。轉換功能使用開源的元件xslt-processor完成，外掛本身功能很簡單：開啟xlst檔案，轉換當前的xml，將結果顯示在新的視窗。

首先使用模板建立專案：

yo code

輸入這個專案的名字zlxslt，這個專案我們使用yarn作為包管理器。專案建立完成後，使用

code .

在VS Code中開啟專案。
現在需要引入xslt-processor，在終端中輸入：

yarn add xslt-processor

這個命令會在專案中安裝xslt-processor並更新專案中的package.json和yarn.lock。
在src目錄中增加檔案schema.d.ts，增加宣告語句：

declare module 'xslt-processor';

修改package.json，去掉預設建立的命令，增加新的命令：

	"activationEvents": [
		"onCommand:zlxslt.runMyXSLT"
	],

修改extension.ts:

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
import * as fs from 'fs';
import { xmlParse, xsltProcess } from 'xslt-processor';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export 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 "zlxslt" is now active!');

	const mydisposable: vscode.Disposable = vscode.commands.registerCommand('zlxslt.runMyXSLT', async (): Promise<any> => {
        const xsltFile = await vscode.window.showOpenDialog(
            {
                canSelectFiles: true,
                canSelectFolders: false,
                canSelectMany: false,
                filters: {
                    'XSLT' : ['xsl','xslt']
                }
            }
        );
        if(vscode.window.activeTextEditor !== undefined && xsltFile !== undefined) {
            const xml: string = vscode.window.activeTextEditor.document.getText();
            const xslt: string = fs.readFileSync(xsltFile[0].fsPath).toString();
            try {
                const rXml = xmlParse(xml);
                const rXslt = xmlParse(xslt);
                const result = xsltProcess(rXml, rXslt);
                const textDoc = await vscode.workspace.openTextDocument(
                    {
                        content: result,
                        language: 'xml'
                    }
                );
                
                vscode.window.showTextDocument(textDoc, vscode.ViewColumn.Beside);
           
                
            }
            catch(e) {
                vscode.window.showErrorMessage(e);
            }
        }
        else {
            vscode.window.showErrorMessage('An error occurred while accessing the XML and/or XSLT source files. Please be sure the active window is XML, and you have selected an appropriate XSLT file.');
        }
    });

	context.subscriptions.push(mydisposable);
}

// this method is called when your extension is deactivated
export function deactivate() {}

啟動除錯，會開啟新的視窗，開啟一個xml檔案，然後按Ctrl+Shift+p開啟命令視窗，選擇“Run My XSLT”，這時會彈出檔案選擇視窗，選擇xslt檔案，轉換後的xml會顯示在旁邊的視窗。

相關文章