OpenHarmony之DevEco Device Tool 插件開發介紹

作者：趙軍霞 2023-06-20 15:40:58

本文介紹OpenHarmony系統開發或者設備開發常用的IDE插件開發、發布過程，通過以上步驟，即可在VSCode、DevEco Device Tool中使用發布的插件。

https://ost.51cto.com

前言

目前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、定義

插件(Plug-in,又稱addin、add-in、addon或add-on)是一種遵循一定規范的應用程序接口編寫出來的程序。其只能運行在程序規定的系統平臺下（可能同時支持多個平臺），而不能脫離指定的平臺單獨運行。因為插件需要調用原純凈系統提供的函數庫或者數據。

2、原理

插件技術是能通過在軟件的設計和研發過程中把軟件的需求和功能進行劃分，使程序分為兩個主要部分：主程序和插件。插件必須依賴于應用程序才能發揮自身功能，僅靠插件是無法正常運行的。相反地，應用程序并不需要依賴插件就可以運行，這樣一來，插件就可以加載到應用程序上并且動態更新而不會對應用程序造成任何改變。

主程序：把基礎的功能要求設計在主程序中，另外，主程序還提供與插件的接口，包括提供加載方式，使插件可以加載到應用程序和網絡傳輸協議中,使相應的插件能夠按一定的規則進行數據交換，從而實現一些功能；

插件：是一個個實現部分功能的組件，這樣通過增減插件或修改插件內部功能來調整軟件的功能，由于插件是相對獨立的部分，可以獨立進行編輯。從而實現軟件功能的擴展和不斷改進。

應用場景：游戲和某些應用程序經常使用插件的體系結構來允許最初的發行者和第三方發行者增加功能性。

3、分類

插件可以根據其功能和用途進行分類。以下是一些常見的插件分類：

編輯器插件：用于增強編輯器的功能，如代碼高亮、自動補全、代碼格式化等。
調試插件：用于調試應用程序，如斷點調試、日志查看器等。
版本控制插件：用于管理代碼版本，如Git插件、SVN插件等。
語言支持插件：用于支持不同的編程語言，如Java插件、Python插件等。
主題插件：用于更改編輯器的外觀和樣式，如黑色主題、白色主題等。
工具插件：用于提供各種工具和實用程序，如文件比較工具、正則表達式工具等。
效率插件：用于提高開發效率，如代碼片段插件、快捷鍵插件等。
數據庫插件：用于連接和管理數據庫，如MySQL插件、Oracle插件等。
Web開發插件：用于支持Web開發，如HTML插件、CSS插件、JavaScript插件等。
科學計算插件：用于進行科學計算和數據分析，如Matlab插件、R插件等。

不同的IDE和編輯器可能會有不同的分類方式。

二、VSCode插件介紹

1、特性介紹

基于VSCode API，插件可以在主題、通用功能、工作區擴展、程序語言做擴展。
主題的界面、文本、圖標樣式都可以自定義進行修改；通用功能如支持新增命令、支持新增配置項、支持新增快捷鍵、支持新增菜單項、支持新增右鍵菜單。
工作區擴展如支持新增活動欄項目、支持新增顯示提示框、支持新增狀態欄信息、支持新增顯示進度條、支持新增打開文件；
程序語言方面支持新語言高亮、新語言的調試器、定義task、執行task。

2、環境準備

（1）安裝依賴

官方為了方便VSCode的插件開發，提供了Yo的腳手架工具來生成對應的項目。

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

yo包：是一個基于Yeoman的腳手架工具，可以幫助開發者快速生成項目模板和代碼結構。它可以自動化地完成一些繁瑣的工作，如創建文件夾、安裝依賴、配置文件等。
generator-code包：用于生成VS Code擴展程序的模板和代碼結構。generator-code包提供了一些常用的擴展程序功能模板，如代碼片段、主題、語言支持等，方便開發者快速創建自己的擴展程序。

（2）項目初始化

yo code命令用于在VS Code中創建一個擴展程序項目。它是基于Yeoman的腳手架工具，可以幫助開發者快速生成擴展程序的模板和代碼結構。通過運行yo code命令，開發者可以選擇不同的擴展程序類型，如Webview、代碼片段、主題等，并設置相關的屬性，如擴展程序名稱、描述、版本等。同時，yo code還提供了一些常用的擴展程序功能模板，如命令、快捷鍵、語言支持等，方便開發者快速創建自己的擴展程序。

//運行
yo code

OpenHarmony之DevEco Device Tool 插件開發介紹-開源基礎軟件社區

（3）打包方式

通過以下命令可以將插件打包，以便后續本地安裝或發布應用市場。

vsce package

3、文件介紹

項目初始化后，生成的工程截圖如下：

OpenHarmony之DevEco Device Tool 插件開發介紹-開源基礎軟件社區

最主要的文件為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貢獻一些功能，如命令、快捷鍵、主題、語言支持等。

4、嵌入webview

Webview API是用于在VS Code中嵌入Web內容的API，可以讓開發者在VS Code中展示自己的Web應用程序，如圖表、表單、地圖等。Webview API提供了一些API，如postMessage、onDidReceiveMessage等，可以讓Web應用程序與VS Code進行交互。

OpenHarmony之DevEco Device Tool 插件開發介紹-開源基礎軟件社區

消息通道是指在VS Code中嵌入Web內容的API中，用于在Web應用程序和VS Code之間進行通信的機制。通過消息通道，Web應用程序可以向VS Code發送消息，如請求打開文件、執行命令等，同時也可以接收來自VS Code的消息，如編輯器內容變化、調試信息等。消息通道提供了一些API，如postMessage、onDidReceiveMessage等，可以讓Web應用程序和VS Code進行交互。