OpenHarmony之DevEco Device Tool 插件开发介绍 原创 精华

作者：赵军霞

前言

目前OpenHarmony系统开发或者设备开发使用的主流IDE为VSCode、DevEco Device Tool。DevEco Device Tool可以帮助开发者快速连接设备、安装应用程序、调试应用程序等。DevEco Device Tool提供了一些功能，如设备列表、应用程序列表、日志查看器等，可以让开发者更加方便地管理和调试设备。同时，DevEco Device Tool还提供了一些插件，如ADB插件、HDC插件等，可以扩展其功能。DevEco Device Tool底层平台是VSCode,所以DevEco Device Tool插件即VSCode插件。本文首先介绍一下插件相关的概念、分类等，接着介绍一下VSCode插件开发相关内容，最后介绍如何把VSCode插件集成到DevEco Device Tool运行环境。

1. 插件介绍

1.1 定义

插件(Plug-in,又称addin、add-in、addon或add-on)是一种遵循一定规范的应用程序接口编写出来的程序。其只能运行在程序规定的系统平台下（可能同时支持多个平台），而不能脱离指定的平台单独运行。因为插件需要调用原纯净系统提供的函数库或者数据。

1.2 原理

插件技术是能通过在软件的设计和研发过程中把软件的需求和功能进行划分，使程序分为两个主要部分：主程序和插件。插件必须依赖于应用程序才能发挥自身功能，仅靠插件是无法正常运行的。相反地，应用程序并不需要依赖插件就可以运行，这样一来，插件就可以加载到应用程序上并且动态更新而不会对应用程序造成任何改变。

主程序：把基础的功能要求设计在主程序中，另外，主程序还提供与插件的接口，包括提供加载方式，使插件可以加载到应用程序和网络传输协议中,使相应的插件能够按一定的规则进行数据交换，从而实现一些功能；

插件：是一个个实现部分功能的组件，这样通过增减插件或修改插件内部功能来调整软件的功能，由于插件是相对独立的部分，可以独立进行编辑。从而实现软件功能的扩展和不断改进。

应用场景：游戏和某些应用程序经常使用插件的体系结构来允许最初的发行者和第三方发行者增加功能性。

1.3 分类

插件可以根据其功能和用途进行分类。以下是一些常见的插件分类：

编辑器插件：用于增强编辑器的功能，如代码高亮、自动补全、代码格式化等。

调试插件：用于调试应用程序，如断点调试、日志查看器等。

版本控制插件：用于管理代码版本，如Git插件、SVN插件等。

语言支持插件：用于支持不同的编程语言，如Java插件、Python插件等。

主题插件：用于更改编辑器的外观和样式，如黑色主题、白色主题等。

工具插件：用于提供各种工具和实用程序，如文件比较工具、正则表达式工具等。

效率插件：用于提高开发效率，如代码片段插件、快捷键插件等。

数据库插件：用于连接和管理数据库，如MySQL插件、Oracle插件等。

Web开发插件：用于支持Web开发，如HTML插件、CSS插件、JavaScript插件等。

科学计算插件：用于进行科学计算和数据分析，如Matlab插件、R插件等。

不同的IDE和编辑器可能会有不同的分类方式。

2. VSCode插件介绍

2.1 特性介绍

基于VSCode API，插件可以在主题、通用功能、工作区扩展、程序语言做扩展。
主题的界面、文本、图标样式都可以自定义进行修改；通用功能如支持新增命令、支持新增配置项、支持新增快捷键、支持新增菜单项、支持新增右键菜单。
工作区扩展如支持新增活动栏项目、支持新增显示提示框、支持新增状态栏信息、支持新增显示进度条、支持新增打开文件；
程序语言方面支持新语言高亮、新语言的调试器、定义task、执行task。

2.2 环境准备

2.2.1 安装依赖

官方为了方便VSCode的插件开发，提供了Yo的脚手架工具来生成对应的项目。

 //全局安装需要的包	
npm install -g yo generator-code

yo包：是一个基于Yeoman的脚手架工具，可以帮助开发者快速生成项目模板和代码结构。它可以自动化地完成一些繁琐的工作，如创建文件夹、安装依赖、配置文件等。

generator-code包：用于生成VS Code扩展程序的模板和代码结构。generator-code包提供了一些常用的扩展程序功能模板，如代码片段、主题、语言支持等，方便开发者快速创建自己的扩展程序。

2.2.2 项目初始化

yo code命令用于在VS Code中创建一个扩展程序项目。它是基于Yeoman的脚手架工具，可以帮助开发者快速生成扩展程序的模板和代码结构。通过运行yo code命令，开发者可以选择不同的扩展程序类型，如Webview、代码片段、主题等，并设置相关的属性，如扩展程序名称、描述、版本等。同时，yo code还提供了一些常用的扩展程序功能模板，如命令、快捷键、语言支持等，方便开发者快速创建自己的扩展程序。

 //运行
yo code

2.2.3 打包方式

通过以下命令可以将插件打包，以便后续本地安装或发布应用市场。

vsce package

2.3 文件介绍

项目初始化后，生成的工程截图如下：

最主要的文件为package.json、extension.js文件。

其中extension.js是此工程的入口文件；

package.json文件是一个用于描述Node.js模块的JSON文件。它包含了模块的名称、版本、描述、入口文件、依赖项、开发者信息等。通过package.json文件，Node.js可以自动加载模块的依赖项，并执行相应的操作。同时，package.json文件也可以用于发布和管理模块，方便其他开发者使用和维护。在VS Code扩展程序中，package.json文件也是必不可少的，它包含了扩展程序的名称、版本、描述、入口文件、激活事件、贡献项等。

package.json文件中关键的三个字段为main、activationEvents、Contributes字段。

main字段：指定了模块的入口文件。当使用require()函数加载一个模块时，Node.js会根据该模块的package.json文件中的main字段指定的路径来加载模块的入口文件。如果该字段不存在，则默认加载index.js文件。

activationEvents：用于指定扩展程序的激活事件。当用户打开一个文件或者执行某个命令时，VS Code会根据activationEvents字段中指定的事件来判断是否需要激活该扩展程序。如果事件匹配成功，则VS Code会加载该扩展程序，并执行其相应的功能。activationEvents字段可以包含多个事件，每个事件都是一个字符串，可以是文件类型、命令、主题等。

Contributes：用于指定扩展程序的贡献项。通过设置contributes字段，可以让扩展程序向VS Code贡献一些功能，如命令、快捷键、主题、语言支持等。

2.4 嵌入webview

Webview API是用于在VS Code中嵌入Web内容的API，可以让开发者在VS Code中展示自己的Web应用程序，如图表、表单、地图等。Webview API提供了一些API，如postMessage、onDidReceiveMessage等，可以让Web应用程序与VS Code进行交互。

消息通道是指在VS Code中嵌入Web内容的API中，用于在Web应用程序和VS Code之间进行通信的机制。通过消息通道，Web应用程序可以向VS Code发送消息，如请求打开文件、执行命令等，同时也可以接收来自VS Code的消息，如编辑器内容变化、调试信息等。消息通道提供了一些API，如postMessage、onDidReceiveMessage等，可以让Web应用程序和VS Code进行交互。

3. DevEco Device Tool集成VSCode插件

3.1 本地加载

对于生成的插件，只在本地使用的话，可以直接使用本地加载的方式。

加载步骤：在VSCode侧边栏的“插件应用市场”栏中，点击右上角三个点图标，选择菜单中的“Install from VSIX”。

3.2 应用市场发布

插件发布应用市场的过程为申请Microsoft账号、创建Azure DevOps组织、创建令牌、创建发布账号、发布应用市场五部分，下面将展开介绍。

3.2.1 申请Microsoft账号

打开Microsoft账号注册页面，点击“注册”按钮。注册时需要输入真实的个人信息，并保护好自己的账号安全。

3.2.2 创建Azure DevOps组织

创建Azure DevOps组织过程：
1.打开Azure DevOps网站，登录您的Microsoft账号。

2.点击“创建组织”按钮，输入组织名称和描述，选择组织类型和地区，然后点击“创建”按钮。

3.在组织页面上，您可以创建项目、添加成员、设置权限等。

3.2.3 创建令牌

创建令牌通常是指在软件开发中，为了授权第三方应用程序访问某个API或服务，而生成的一种身份验证方式。具体步骤如下：

1.登录到需要授权的服务或API的管理页面，找到生成令牌的选项。

2.点击生成令牌按钮，填写相关信息，如令牌名称、有效期等。

3.系统会生成一个唯一的令牌字符串，将其保存好，以便在第三方应用程序中使用。

4.在第三方应用程序中，使用该令牌字符串作为身份验证方式，访问需要授权的服务或API。

需要注意的是，令牌的安全性非常重要，应该妥善保管，避免泄露。同时，令牌的有效期也需要根据实际情况进行设置，以保证安全性和便利性的平衡。

3.2.4 创建发布账号

登录Microsoft账号，点击右上角的“发布扩展程序”按钮。

点击“创建发布者账号”按钮，填写相关信息，如发布者名称、联系人信息等。

系统会生成一个唯一的发布者ID，将其保存好，以便在发布扩展程序时使用。

3.2.5 发布应用市场

在命令行终端中登录3.2.4创建的账号，使用以下命令即可发布插件。

vsce publish

发布之后，插件市场即可查看到发布的插件

4.总结

本文介绍OpenHarmony系统开发或者设备开发常用的IDE插件开发、发布过程，通过以上步骤，即可在VSCode、DevEco Device Tool中使用发布的插件，示例如下。

更多原创内容请关注：深开鸿技术团队

入门到精通、技巧到案例，系统化分享OpenHarmony开发技术，欢迎投稿和订阅，让我们一起携手前行共建生态。