如何創(chuàng)建VS Code 擴(kuò)展插件
VS Code提供了強(qiáng)大的擴(kuò)展功能,我們可以通過開發(fā)插件實現(xiàn)自己的業(yè)務(wù)模型編輯器。這里我們快速介紹一下插件的創(chuàng)建、開發(fā)和發(fā)布過程。
創(chuàng)建插件開發(fā)模板
首先需要確認(rèn)系統(tǒng)中安裝了node.js,并且可以使用npm安裝程序包。然后,安裝插件的開發(fā)模板生成器:
npm install -g yo generator-code
安裝完成后,使用模板創(chuàng)建第一個擴(kuò)展項目,我們?yōu)檫@個項目創(chuàng)建一個子目錄,然后進(jìn)入命令行,在這個子目錄下執(zhí)行:
yo code
模板生成程序運行:
生成完成后,在命令行運行:
code .
這個項目在vs code 中打開了:
插件運行和調(diào)試
我們打開extension.js文件,可以看到插件啟動的代碼,我們對代碼進(jìn)行一點修改:
將里面的提示修改為我們需要的信息。然后按F5運行。這時,一個新的Vs Code界面啟動了,在這個新界面中按Ctrl+Shift+P,打開命令窗口,輸入hello world,在界面下方出現(xiàn)我們編輯的信息:
說明這個插件已經(jīng)可以運行了。
插件打包
現(xiàn)在我們看如何將這個插件打包,在其它機(jī)器上安裝使用。Vs Code的插件可以同時創(chuàng)建vsix文件發(fā)布,也可以發(fā)布到應(yīng)用商店,通過插件管理器進(jìn)行安裝。我們這里只介紹第一種方式。
首先需要安裝插件打包工具vsce:
npm i vsce -g
然后,我們還需要在package.json中增加publisher的信息:
"publisher": "zhenlei",
如果不增加這個信息,會出現(xiàn)如下錯誤:
然后還要修改打包工具創(chuàng)建的Readme.md文件,如果不修改,會出現(xiàn)如下錯誤:
現(xiàn)在我們可以打包了,在命令行中,進(jìn)入項目文件夾,運行:
vsce package
這時會提問,缺少respository,這是一個警告,我們可以忽略,繼續(xù)執(zhí)行,安裝包就創(chuàng)建完成了:
擴(kuò)展插件的安裝和卸載
可以在vs code的擴(kuò)展管理器中安裝打包好的擴(kuò)展插件,選擇從VSIX安裝:
也可以在擴(kuò)展管理器中禁用或卸載安裝好的插件:
創(chuàng)建第一個實用插件
現(xiàn)在我們創(chuàng)建一個實用的插件,這個插件使用XLST模板將XML文件轉(zhuǎn)換為另一種格式。轉(zhuǎn)換功能使用開源的組件xslt-processor完成,插件本身功能很簡單:打開xlst文件,轉(zhuǎn)換當(dāng)前的xml,將結(jié)果顯示在新的窗口。
首先使用模板創(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() {}
啟動調(diào)試,會打開新的窗口,打開一個xml文件,然后按Ctrl+Shift+p打開命令窗口,選擇“Run My XSLT”,這時會彈出文件選擇窗口,選擇xslt文件,轉(zhuǎn)換后的xml會顯示在旁邊的窗口。
到此這篇關(guān)于如何創(chuàng)建VS Code 擴(kuò)展插件的文章就介紹到這了,更多相關(guān)VS Code創(chuàng)建擴(kuò)展插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vscode 左側(cè)擴(kuò)展活動欄內(nèi)容消失的問題及解決方法
vscode左側(cè)活動欄默認(rèn)會有 一些內(nèi)容,今天一不小心,不知道怎么的,將部分內(nèi)容搞沒了,vscode 左側(cè)擴(kuò)展活動欄內(nèi)容消失了怎么辦,下面給大家分享本文幫助大家快速解決,感興趣的朋友一起看看吧2021-08-08一文詳解VSCode安裝配置使用(最新版超詳細(xì)保姆級含插件)
安裝VScode就很簡單了,一路NEXT就可以了,重點是配置使用以及插件推薦,這篇文章主要給大家介紹了關(guān)于VSCode安裝配置使用的相關(guān)資料,本文是最新版超詳細(xì)保姆級含插件,需要的朋友可以參考下2023-05-05