目錄

• 建立外掛開發模板
• 外掛執行和除錯
• 外掛打包
• 擴充套件外掛的安裝和解除安裝
• 建立第一個實用外掛

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

建立外掛開發模板

首先需要確認系統中安裝了node.，並且可以使用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 functiwww.cppcns.comon activate(context: vscode.ExtensionContext) {

	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only bhttp://www.cppcns.come executed once when your extension is activated
	console.log('Congratulations,your extension "zlxslt" is now active!');

	const mydisposable: vscode.Disposable = vscode.commands.rehttp://www.cppcns.comgisterCommand('zlxslt.runMyXSLT',async (): Promise<any> => {
        const xsltFile = await vscodehttp://www.cppcns.com.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會顯示在旁邊的視窗。

到此這篇關於如何建立VS Code 擴充套件外掛的文章就介紹到這了,更多相關VS Code建立擴充套件外掛內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！