如何創(chuàng)建VS Code 擴展插件
VS Code提供了強大的擴展功能，我們可以通過開發(fā)插件實現(xiàn)自己的業(yè)務模型編輯器。這里我們快速介紹一下插件的創(chuàng)建、開發(fā)和發(fā)布過程。
創(chuàng)建插件開發(fā)模板
首先需要確認系統(tǒng)中安裝了node.js，并且可以使用npm安裝程序包。然后，安裝插件的開發(fā)模板生成器：
npm install -g yo generator-code
安裝完成后，使用模板創(chuàng)建第一個擴展項目，我們?yōu)檫@個項目創(chuàng)建一個子目錄，然后進入命令行，在這個子目錄下執(zhí)行：
yo code
模板生成程序運行：
生成完成后，在命令行運行：
code .
這個項目在vs code 中打開了：
插件運行和調試
我們打開extension.js文件，可以看到插件啟動的代碼，我們對代碼進行一點修改：
將里面的提示修改為我們需要的信息。然后按F5運行。這時，一個新的Vs Code界面啟動了，在這個新界面中按Ctrl+Shift+P，打開命令窗口，輸入hello world，在界面下方出現(xiàn)我們編輯的信息：
說明這個插件已經(jīng)可以運行了。
插件打包
現(xiàn)在我們看如何將這個插件打包，在其它機器上安裝使用。Vs Code的插件可以同時創(chuàng)建vsix文件發(fā)布，也可以發(fā)布到應用商店，通過插件管理器進行安裝。我們這里只介紹第一種方式。
首先需要安裝插件打包工具vsce:
npm i vsce -g
然后，我們還需要在package.json中增加publisher的信息：
"publisher": "zhenlei",
如果不增加這個信息，會出現(xiàn)如下錯誤：
然后還要修改打包工具創(chuàng)建的Readme.md文件，如果不修改，會出現(xiàn)如下錯誤：
現(xiàn)在我們可以打包了，在命令行中，進入項目文件夾，運行：
vsce package
這時會提問，缺少respository，這是一個警告，我們可以忽略，繼續(xù)執(zhí)行，安裝包就創(chuàng)建完成了：
擴展插件的安裝和卸載
可以在vs code的擴展管理器中安裝打包好的擴展插件，選擇從VSIX安裝：
也可以在擴展管理器中禁用或卸載安裝好的插件：
創(chuàng)建第一個實用插件
現(xiàn)在我們創(chuàng)建一個實用的插件，這個插件使用XLST模板將XML文件轉換為另一種格式。轉換功能使用開源的組件xslt-processor完成，插件本身功能很簡單：打開xlst文件，轉換當前的xml，將結果顯示在新的窗口。
首先使用模板創(chuàng)建項目：
yo code
輸入這個項目的名字zlxslt，這個項目我們使用yarn作為包管理器。項目創(chuàng)建完成后，使用
code .
在VS Code中打開項目。
現(xiàn)在需要引入xslt-processor，在終端中輸入：
yarn add xslt-processor
這個命令會在項目中安裝xslt-processor并更新項目中的package.json和yarn.lock。
在src目錄中增加文件schema.d.ts，增加聲明語句：
declare module 'xslt-processor';
修改package.json，去掉缺省創(chuàng)建的命令，增加新的命令：
"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會顯示在旁邊的窗口。
到此這篇關于如何創(chuàng)建VS Code 擴展插件的文章就介紹到這了,更多相關VS Code創(chuàng)建擴展插件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
HTTP協(xié)議（HyperText Transfer Protocol，超文本傳輸協(xié)議）是用于從WWW服務器傳輸超文本到本地瀏覽器的傳送協(xié)議。2011-08-08
這篇文章主要為大家介紹了Git的代碼合入流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了如何讓Visual Studio用上chatgpt,Visual chatGPT Studio是Visual Studio的一個免費擴展，它直接在IDE中添加了chatGPT功能，它允許用戶以可以根據(jù)菜單功能的方式使用chatGPT，需要的朋友可以參考下2023-05-05
vscode左側活動欄默認會有 一些內容，今天一不小心，不知道怎么的，將部分內容搞沒了，vscode 左側擴展活動欄內容消失了怎么辦，下面給大家分享本文幫助大家快速解決，感興趣的朋友一起看看吧2021-08-08
這篇文章主要介紹了git提交出現(xiàn)commit提醒信息界面怎樣退出問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了HTTP長連接與短連接使用方法及測試,需要的朋友可以參考下2020-02-02
本文非常詳細的描述了一次從web到內網(wǎng)滲透的一次過程，并對每一步過程做了詳細的圖文示例及解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
PyCharm 是一款功能強大的 Python 編輯器，具有跨平臺性。這篇文章給大家介紹2019最新的Pycharm激活碼，需要的朋友一起看看吧2019-10-10
本文主要介紹了idea對CPU的占用率過大問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
一文詳解VSCode安裝配置使用(最新版超詳細保姆級含插件)
安裝VScode就很簡單了,一路NEXT就可以了,重點是配置使用以及插件推薦,這篇文章主要給大家介紹了關于VSCode安裝配置使用的相關資料,本文是最新版超詳細保姆級含插件,需要的朋友可以參考下2023-05-05