广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >如何创建VSCode扩展插件
  • 790
分享到

如何创建VSCode扩展插件

2024-04-02 19:04:59 790人浏览 八月长安
摘要

目录创建插件开发模板插件运行和调试插件打包扩展插件的安装和卸载创建第一个实用插件VS Code提供了强大的扩展功能,我们可以通过开发插件实现自己的业务模型编辑器。这里我们快速介绍一下

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会显示在旁边的窗口。

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

--结束END--

本文标题: 如何创建VSCode扩展插件

本文链接: https://www.lsjlt.com/news/162367.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何创建VSCode扩展插件
    目录创建插件开发模板插件运行和调试插件打包扩展插件的安装和卸载创建第一个实用插件VS Code提供了强大的扩展功能,我们可以通过开发插件实现自己的业务模型编辑器。这里我们快速介绍一下...
    99+
    2022-11-12
  • php7中如何创建扩展
    这篇文章将为大家详细讲解有关php7中如何创建扩展,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。将实现如下功能:&lt;phpecho say();&gt;输出内容:$ ...
    99+
    2023-06-20
  • 如何安装php插件和扩展
    这篇文章主要为大家展示了“如何安装php插件和扩展 ”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何安装php插件和扩展 ”这篇文章吧。phalcon来源:h...
    99+
    2022-10-19
  • 如何在 Rust中创建 PHP 扩展
    这期内容当中小编将会给大家带来有关如何在 Rust中创建 PHP 扩展,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。可以编译的Rust代码到一个库里面,并写为它一些C的头文件,在C中为被调用的PHP做一个...
    99+
    2023-06-17
  • 如何使用VSCode工具创建HTML文件
    本篇内容主要讲解“如何使用VSCode工具创建HTML文件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用VSCode工具创建HTML文件”吧! &nb...
    99+
    2022-10-19
  • oracle如何创建实例、建库、建表、扩展表空间
    这篇文章主要介绍oracle如何创建实例、建库、建表、扩展表空间,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!版本:oracle 11g 一、创建实例(详细参考:http:...
    99+
    2022-10-19
  • VSCode中如何使用FreeWindow插件
    这期内容当中小编将会给大家带来有关VSCode中如何使用FreeWindow插件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。FreeWindow插件的图标是一条鱼,中间有一个“摸”字,是摸鱼的意思。原理...
    99+
    2023-06-20
  • VSCode中Snippet插件如何使用
    这篇文章主要介绍“VSCode中Snippet插件如何使用”,在日常操作中,相信很多人在VSCode中Snippet插件如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VSCode中Snippet插件如...
    99+
    2023-07-04
  • 如何在Marketing Cloud里创建extension field扩展字段
    首先在Marketing Cloud里找到创建扩展字段的tile入口,搜索关键字extension:...
    99+
    2023-06-03
  • vscode编辑器如何安装插件
    这篇文章主要为大家展示了“vscode编辑器如何安装插件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vscode编辑器如何安装插件”这篇文章吧。 在应用商店...
    99+
    2022-10-19
  • Flutter如何创建私有公共插件
    这篇文章将为大家详细讲解有关Flutter如何创建私有公共插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。创建package通过以下命令行创建一个packageflutter create&n...
    99+
    2023-06-15
  • vscode如何配置创建Node.js工程
    这篇文章主要介绍“vscode如何配置创建Node.js工程”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vscode如何配置创建Node.js工程”文章能帮助大家解决问题。下载VSCode首先,您...
    99+
    2023-07-05
  • VSCode如何配置Laradock容器和PHPCS插件
    这篇文章主要介绍了VSCode如何配置Laradock容器和PHPCS插件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本文主要记录如何在 VSCode 关联 Laradoc...
    99+
    2023-06-20
  • vscode调试go插件失败如何解决
    如果你在使用 VS Code 调试 Go 代码时遇到问题,可以尝试以下解决方案:1. 确保已安装相应的插件:在 VS Code 中,...
    99+
    2023-10-20
    vscode go
  • VSCode多行注释插件KoroFileHeader如何使用
    这篇文章主要讲解了“VSCode多行注释插件KoroFileHeader如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“VSCode多行注释插件KoroFileHeader如何使用”吧...
    99+
    2023-07-05
  • 如何开发一个vscode百度翻译插件
    本篇文章给大家分享的是有关如何开发一个vscode百度翻译插件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。每次给元素取className的时候总是时不时的要去百度翻译下,大大...
    99+
    2023-06-22
  • VSCode如何设置远端默认安装的插件
    这篇文章主要介绍VSCode如何设置远端默认安装的插件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!设置远端默认安装的插件在VSCode的配置文件settings.json中添加remote.SSH.defaultE...
    99+
    2023-06-27
  • 如何进行SAP S/4HANA扩展字段创建过程的单步调试
    如何进行SAP S/4HANA扩展字段创建过程的单步调试,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。正如我所说,扩展字段生成是通过后台作业执行以异步方式完成的。如果需要调试以...
    99+
    2023-06-04
  • SAP S/4HANA系统上如何创建扩展字段的业务上下文
    这期内容当中小编将会给大家带来有关SAP S/4HANA系统上如何创建扩展字段的业务上下文,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Fiori UI可以扩展的前提条件之一是,它应该在tcode SCF...
    99+
    2023-06-04
  • php如何获取文件扩展名
    在PHP中,可以使用pathinfo()函数来获取文件的扩展名。pathinfo()函数可以返回一个包含有关文件路径的信息的关联数组...
    99+
    2023-10-08
    php
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作