首页 > 作文

如何创建VS Code 扩展插件

更新时间:2023-04-07 21:18:05 阅读: 评论:0

目录
创建插件开发模板插件运行和调试插件打包扩展插件的安装和卸载创建第一个实用插件

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 belo山东高考分数线预测wimport * as vscode from 'vscode';import * as fs from 'fs';import { xmlpar, xsltprocess } from 'xslt-processor';// 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) {// u 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 activatedconsole.log('congratulations, your extension "zlxslt" is now active!');const mydisposable: vscode.disposable = vscode.commands.registercommand('zlxslt.runmyxslt', async (): promi<any> => {        const xsltfile = await vscode.window.showopendialog(            {                canlectfiles: true,                canlectfolders: fal,                canlectmany: fal,                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 = xmlpar(xml);                const rxslt = xmlpar(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);            }        }        el {            vscode.window.showerrormessage('an error occurred while accessing the xml and/or xslt source files. plea be sure the active window is xml, and you have lected an appropriate xslt file.');        }    });context.subscriptions.push(mydisposable);}// this method is called when your extension is deactivatedexport function deactivate() {}

启动调试,会打开新的窗口,打开一个xml文件,然后按ctrl+shift+p打开命令窗口,选择“r女士短发发型图片un my xslt”,这时会弹出文件选择窗口,选择xslt文件,转换后的xml会显示在旁边的窗口。

到此这篇关于如何创建vs code 扩展插件的文章就介绍到这了,更多相关vs code创建扩展插件内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!

本文发布于:2023-04-07 21:18:03,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/927da4dfe927dab2fcd4f36fe9988fe4.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:如何创建VS Code 扩展插件.doc

本文 PDF 下载地址:如何创建VS Code 扩展插件.pdf

下一篇:返回列表
标签:插件   项目   文件   模板
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图