add vs plugin

Signed-off-by: gou-jingjing <goujingjing@kaihong.com>
This commit is contained in:
gou-jingjing 2024-05-15 20:14:35 +08:00
parent 7e62801626
commit ef9c9cfbc3
64 changed files with 281 additions and 0 deletions

View File

@ -0,0 +1,107 @@
# NAPI框架生成工具VSCode插件说明
## 简介
NAPI框架代码生成工具它可以根据用户指定路径下的ts(typescript)接口文件一键生成NAPI框架代码、业务代码框架、GN文件等。目前工具支持可执行文件、VS Code插件、IntelliJ插件三种入口本文主要介绍VS Code插件使用指导。
## 目录
├── napi_generator/src/vscode_plugin/dts2cpp # NAPI框架代码生成工具
│ ├── napi_vs_plugin # VS Code插件代码
│ │ ├── docs # VS Code插件说明
│ │ ├── src # VS Code插件源码
│ │ └── README_zh # VS Code插件说明
## 约束
系统建议Ubuntu 20.04或者Windows 10
依赖版本VS Code 1.62.0
## 使用方法
### 使用对象
系统开发者
### 使用场景
1) 系统框架层新增子系统,需对应用层提供接口。
2) 系统框架层子系统能力增强后,需对应用层提供新接口。
### 工具使用
具体的工具使用步骤,可以左键单击以下链接了解:
[工具使用说明](https://gitee.com/openharmony/napi_generator/tree/master/src/vscode_plugin/dts2cpp/napi_vs_plugin/docs/usage/INSTRUCTION_ZH.md)
### 工具输出
根据使用者指定的typescript文件工具会输出NAPI框架代码、业务代码框架、GN脚本等文件。
为了方便使用者快速上手工具可供测试的typescript文件存放在以下路径
```
napi_vs_plugin
```
在window环境下的根据输入文件@ohos.napitest.d.ts和basic.d.ts生成的输出文件如下所示
![](./docs/figures/pic-d-ts-transition.png)
其中生成的"napitest.h"文件,定义了框架代码的接口,如下所示:
```c++
#include "napitest.h"
namespace napitest {
bool func1(std::string& v1, std::string& out)
{
// TODO
return true;
}
}
```
### 集成方法
为了实现工具生成的接口被其他子系统或者应用调用需将生成的代码编译集成到OpenHarmony系统中编译生成动态库。
把工具的生成代码集成到OpenHarmony的具体操作步骤可以左键单击以下链接了解
[生成代码集成到OpenHarmony的方法](https://gitee.com/openharmony/napi_generator/blob/master/src/cli/dts2cpp/docs/usage/ENSEMBLE_METHOD_ZH.md)
## 开发说明
### 对象
工具的开发者
### 开发场景
若当前工具的功能已经不能满足开发者的全部需求,则开发者可以基于已有的源码对工具进行二次开发,来增强工具的能力,编译打包生成自定义的可执行文件和插件。
### 开发步骤
开发者可以根据如下的步骤来完成对工具VS Code插件的开发
[工具开发说明](https://gitee.com/openharmony/napi_generator/tree/master/src/vscode_plugin/dts2cpp/napi_vs_plugin/docs/guide/DEVELOP_ZH.md)
## 版本说明
当前版本已支持的特性和待开发的特性,如下所示:
[已支持特性](https://gitee.com/openharmony/napi_generator/blob/master/src/cli/dts2cpp/docs/release-notes)
[待支持特性](https://gitee.com/openharmony/napi_generator/blob/master/src/cli/dts2cpp/docs/requirement/ROADMAP_ZH.md)
## FAQ
对于常见问题解决方法指导如下:
[FAQ](https://gitee.com/openharmony/napi_generator/blob/master/src/cli/dts2cpp/docs/guide/FAQ.md)
## 相关仓
暂无

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 963 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 474 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View File

@ -0,0 +1,80 @@
# NAPI框架生成工具VSCode插件开发说明
## 简介
若当前工具功能不满足开发者需求开发者需增强工具能力则可基于已有源码进行工具二次开发编译打包生成自定义的VS Code插件。首先需下载可执行文件可执行文件下载路径如下(由于网络原因,可能会导致有的下载链接失效,因此提供了以下三个下载链接):
[可执行文件下载链接1](http://ftpkaihongdigi.i234.me:5000/sharing/yaRiKSjBI)
[可执行文件下载链接2](http://ftp.kaihong.com:5000/fsdownload/yaRiKSjBI/)
[可执行文件下载链接3](http://ftp.kaihongdigi.com:5000/fsdownload/yaRiKSjBI/)
访问密码kaihong
压缩包解压密码kaihong20231121
## VS Code插件打包说明
### Linux
1.在napi_generator目录下将napi_generator-linux下可执行文件复制到napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src/目录下,执行命令如下:
cp napi_generator-linux napi_vs_plugin/src/
2.在napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src目录下执行命令
npm i
3.在napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src目录下执行命令
npm i typescript
4.在napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src目录下执行命令
npm i vsce
5.在napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src目录下执行命令
npx vsce package
每个选项都选择y然后回车之后会在当前目录下打包生成一个插件gnapi-0.0.1.vsix。结果如下
harmony@Ubuntu-64:~/napi/napi_generator_5/src/vscode_plugin/dts2cpp/napi_vs_plugin/src$ npx vsce package
This extension consists of 3370 files, out of which 1627 are JavaScript files. For performance reasons, you should bundle your extension: https://aka.ms/vscode-bundle-extension . You should also exclude unnecessary files by adding them to your .vscodeignore: https://aka.ms/vscode-vscodeignore
DONE Packaged: /home/harmony/napi/napi_generator_5/src/vscode_plugin/dts2cpp/napi_vs_plugin/src/gnapi-0.0.1.vsix (3370 files, 44.42MB)
### Windows
1.将napi_generator目录下的napi_generator-win.exe可执行文件复制到napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src/目录下。
2.在napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src目录下执行命令
npm i
3.在napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src目录下执行命令
npm i typescript
4.在napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src目录下执行命令
npm i vsce
5.在napi_generator/src/vscode_plugin/dts2cpp/napi_vs_plugin/src目录下执行命令
npx vsce package
每个选项都选择y然后回车之后会在当前目录下打包生成一个插件gnapi-0.0.1.vsix。结果如下
E:\napi_generator\napi_generator-master\src\vscode_plugin\dts2cpp\napi_vs_plugin\src>npx vsce package
This extension consists of 3467 files, out of which 1692 are JavaScript files. For performance reasons, you should bundle your extension: https://aka.ms/vscode-bundle-extension . You should also exclude unnecessary files by adding them to your .vscodeignore: https://aka.ms/vscode-vscodeignore
DONE Packaged: E:\napi_generator\napi_generator-master\src\vscode_plugin\dts2cpp\napi_vs_plugin\src\gnapi-0.0.1.vsix (3467 files, 42.3MB)
## 工具测试
进行工具二次开发后本地可进行单元测试、story特性测试确保工具的可用性。左键单击以下链接了解详情
[单元测试](https://gitee.com/openharmony/napi_generator/blob/master/test/unittest/README_ZH.md)
[story测试](https://gitee.com/openharmony/napi_generator/blob/master/test/storytest/README_ZH.md)

View File

@ -0,0 +1,23 @@
# 手工测试用例报告
## 用例表
| 编号 | 预置条件 | 输入 | 预期输出 | 预期结果是否一致 |
| ---- | ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------------- |
| 001 | 在主界面 | 选择生成方式:文件夹<br />选择接口文件:包含多个待转换的.d.ts文件的文件夹路径<br />生成框架路径:选择生成框架路径<br />编译脚本路径:选择编译脚本路径<br />number目的类型uint32_t<br />启用import功能不勾选<br />然后点击“配置”按钮 | 界面弹出信息:“选择文件夹或者多个文件时不能配置业务代码,请选择单个文件” | 是 |
| 002 | 在主界面 | 选择生成方式:.d.ts文件<br />选择接口文件:多个.d.ts文件路径<br />生成框架路径:选择生成框架路径<br />编译脚本路径:选择编译脚本路径<br />number目的类型uint32_t<br />启用import功能不勾选<br />然后点击“配置”按钮 | 界面弹出信息:“选择文件夹或者多个文件时不能配置业务代码,请选择单个文件” | 是 |
| 003 | 在主界面 | 选择生成方式:.d.ts文件<br />选择接口文件:一个.d.ts文件路径<br />生成框架路径:空<br />编译脚本路径:选择编译脚本路径<br />number目的类型uint32_t<br />启用import功能不勾选<br />然后点击”配置“按钮 | 界面弹出信息:”请输入生成框架路径!“ | 是 |
| 004 | 在主界面 | 选择生成方式:.d.ts文件<br />选择接口文件:一个.d.ts文件路径<br />生成框架路径:选择生成框架路径<br />编译脚本路径:选择编译脚本路径<br />number目的类型uint32_t<br />启用import功能不勾选<br />然后点击”配置“按钮 | 弹出Config界面显示配置信息 | 是 |
| 005 | 在主界面 | 点击”Cancel“按钮 | 主界面消失 | 是 |
| 006 | 在显示配置信息界面 | 点击”Add“按钮 | 弹出配置界面,进行业务代码信息配置 | 是 |
| 007 | 在配置信息界面 | 配置界面的”includeName“, "cppName", "interfaceName", "serviceCode"属性任意为空或者均为空然后点击”OK“按钮 | 界面弹出信息:”配置的信息不能为空!“ | 是 |
| 008 | 在配置信息界面 | includeName: 业务代码.h文件相对于生成框架代码的相对路径<br />cppName业务代码.cpp文件相对于生成框架代码的相对路径<br />interfaceName需要配置的接口名namespace域中的接口<br />serviceCode需要在接口中配置的业务代码<br />填写完成后点击”OK“按钮 | 配置信息新增并保存成功,在显示配置信息界面的表格中显示新增的一条数据 | 是 |
| 009 | 在配置信息界面 | includeName: 业务代码.h文件相对于生成框架代码的相对路径<br />cppName业务代码.cpp文件相对于生成框架代码的相对路径<br />interfaceName需要配置的接口名interface/class中的接口<br />serviceCode需要在接口中配置的业务代码<br />填写完成后点击”OK“按钮 | 配置信息新增并保存成功,在显示配置信息界面的表格中显示新增的一条数据 | 是 |
| 010 | 在显示配置信息界面 | 选中要修改的一行数据之后点击”Update“按钮 | 弹出配置界面,并且在该界面显示待修改的这条数据信息 | 是 |
| 011 | 在配置信息界面 | 用户在显示配置信息界面选中一条数据并点击Update后原配置信息在配置界面显示用户根据需求修改这条数据输入不能为空修改之后点击”OK“按钮 | 配置信息修改并保存成功,在显示配置信息界面的表格中显示修改后的数据 | 是 |
| 012 | 在显示配置信息界面 | 选中要删除的一行数据之后点击”Delete“按钮 | 选中这行的数据被删除,表格刷新 | 是 |
| 013 | 在配置信息界面 | 点击”Cancel“按钮 | Config界面消失 | 是 |
| 014 | 在显示配置信息界面 | 点击”Cancel“按钮 | Config界面消失 | 是 |
| 015 | 在主界面 | 所有信息均已正确填入后并且点击”配置“按钮按需正确配置了业务代码点击”OK“按钮 | 界面弹出信息”Generated successfully“生成框架路径下成功生成了napi框架代码以及配置文件cfg.json在生成的框架.cpp文件中输入的配置信息被正确配置到了相应位置 | 是 |
| 016 | 在主界面 | 所有信息均已正确填入后但是没有点击”配置“按钮配置业务代码点击”OK“按钮 | 界面弹出信息”Generated successfully“生成框架路径下成功生成了napi框架代码 | 是 |

View File

@ -0,0 +1,42 @@
# NAPI框架生成工具VSCode插件使用说明
## 简介
NAPI框架生成工具目前支持三种入口分别是可执行程序、DevEco Studio上使用的IntelliJ插件、VS Code插件本文主要介绍VS Code插件使用说明。
## VS Code插件使用方法
### 说明
visual studio code 版本需1.62.0及以上。
### 步骤
1.打开VS Code在左侧边栏中选择插件安装。
![](../figures/pic-plug-in-search.png)
2.在应用商店搜索NAPI插件再单击安装。
![](../figures/pic-plug-in-select.png)
3.安装完成后就会在VS Code的插件管理器中能看到napi-gen这个插件了。
![](../figures/pic-plug-in-gnapi.png)
4.在VS Code中找到需要转换的.d.ts文件若.d.ts文件中声明了basic.d.ts文件将basic.d.ts文件放置在待转换.d.ts文件同一级目录若除此之外还声明其它.d.ts文件将此类文件放置在待转换.d.ts文件同级目录。例如
![](../figures/pic-plug-in-select-d-ts.png)
5.选择.d.ts文件,点击右键选择 Generate Napi Frame工具弹出Generate Napi Frame弹窗。接口文件文本框填写.d.ts文件路径生成框架路径文本框填写生成框架存放路径编译脚本路径默认填写number目的类型此处选择float启用import功能不选择待转换.d.ts文件未引用其它文件点击ok。
![](../figures/pic-plug-in-gen-c++.png)
![](../figures/pic-plug-in-ts-c++.png)
6.执行结束后会在out目录下生成框架代码文件。
## 集成测试
NAPI框架代码生成后系统框架开发者进行二次开发后即可集成到OpenHarmony编译系统生成对应的库文件供应用开发者调用接口。工具集成测试的具体操作步骤可以左键单击以下链接了解
[工具集成测试](https://gitee.com/openharmony/napi_generator/blob/master/src/cli/dts2cpp/docs/usage/INTEGRATION_TESTING_ZH.md)

View File

@ -0,0 +1,29 @@
{
"name": "napi_vs_plugin",
"version": "1.0.0",
"description": "This paper mainly introduces the NAPI framework code generation tool, which can generate NAPI framework code, business code framework and designed.The GN file according to the TS interface file in the path specified by the user. So developers need to focus on Nodejs related grammar framework layer, interface between c + + with JS type conversion, data type conversion, etc.. This tool is mainly used in the scenario of JS application calling NAPI interface, can focus on business logic implementation, Thus, the development efficiency can be greatly improved. Currently, the tool supports command line and VSCode plug-in.",
"main": "index.js",
"directories": {
"doc": "docs"
},
"dependencies": {
"mocha": "^9.2.1",
"node-gyp": "^8.4.1",
"stdio": "^2.1.1",
"typescript": "^4.5.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git@gitee.com:joeysun001/napi_generator.git"
},
"author": "",
"license": "ISC",
"pkg": {
"assets": [
"src/node_modules/typescript/**/*"
]
}
}