快速开始

OpenSumi 支持 Web/Electron 两种方式集成,插件系统及其能力在两个平台下具有一致的表现。

开发插件时,你可以使用 @opensumi/cli 快速在本地启动插件开发环境。

$ npm install @opensumi/cli -g

初始化插件模板

运行 sumi init 根据提示输入插件 namepublisher ,以及 displayNamedescription

sumi-init

运行插件

首先需要安装依赖。

$ npm install

基于 @opensumi/cli 初始化的插件,在 package.json 中包含了基础的运行及构建脚本,建议开发阶段后台运行 npm run watch 实时编译插件代码。

在插件目录下运行 npm run dev 即可启动一个 Web 版本的 OpenSumi IDE,并将当前插件加载进来。

{
  "scripts": {
    "compile": "sumi compile",
    "watch": "sumi watch",
    "dev": "sumi dev -e=$(pwd)"
  }
}

或者直接在插件目录下运行 @opensumi/cli 的开发命令, sumi dev

$ sumi watch     # 监听并自动编译代码
$ sumi dev       # 启动 OpenSumi Web 版本开发环境

sumi-dev

浏览器打开 http://127.0.0.1:50999 即可打开一个 Web 版的 OpenSumi IDE。

命令使用

Engine 版本控制

在 OpenSumi 中,存在许多的发行版本,在开发插件前,你需要确保你所使用的的插件 API 在对应的 OpenSumi Engine 版本中支持,可以通过下面的命令查看当前使用的版本信息:

$ sumi engine ls

sumi-engine-ls

通过下面的命令你可以看到所有的 OpenSumi Engine 版本信息:

$ sumi engine ls-remote

在切换版本时,只需要通过下面的命令进行切换:

$ sumi engine use {版本}

在遇到插件功能表现异常时,及时更新 OpenSumi Engine 到最新版本进行测试是比较有效的验证手段。

设置编译成功回调

在运行 sumi watch 命令时,OpenSumi CLI 支持在每一次编译成功后执行回调,例如:

$ sumi watch --onSuccess 'echo hello world'

指定工作目录

在运行 sumi dev 命令时,支持指定工作目录

$ sumi dev -w=/path/to/vscode

这会将传入的路径作为 workspaceDir 参数,并将当前目录作为插件启动 OpenSumi IDE,如下图所示:

set-workspace

指定基础插件

OpenSumi CLI 不会内置任何插件,当你的插件依赖其他插件的一些能力时,可以将这些插件软链接或者直接复制到 OpenSumi CLI 的插件目录,默认插件目录为用户 Home 目录下的 .sumi-dev/extensions

指定 IDE Server 端口

OpenSumi CLI 支持通过 -p 指定 IDE Server 监听的端口,默认为 50999

$ sumi dev -p=8989 # ...

调试

# 在插件目录下运行
$ sumi dev --debug  # 启动 OpenSumi IDE 调试模式

# 或指定插件目录
$ sumi dev --debug -e=/path/to/ext1,/path/to/ext2

使用 VS Code / OpenSumi IDE 进行断点调试

插件进程本质为一个 Node.js 进程,在 VS Code 中配置 launch.json 即可调试插件代码。

// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",									       // Attach 模式
      "name": "Attach to Extension Host",
      "port": 9889,													       // 插件进程端口,不可修改
      "skipFiles": ["<node_internals>/**"],
      "sourceMaps": true,										        // 开启 SourceMap,便于源码映射
      "outFiles": ["${workspaceFolder}/out/*/.js"]	// 指定插件代码输出目录
    }
}

在 VS Code 调试面板中选择 Attach to Extension Host,即可使用 VS Code 进行断点调试

debug

在基于 OpenSumi 开发的本地客户端上调试原理也是一致的,将配置文件放置在 .sumi/launch.json 下即可。

如需在 typescript 源码中进行断点调试,需要编译时开启 Sourcemap

指定运行环境

目前支持基于 OpenSumi 框架的桌面(Electron) 版 IDE 作为插件运行环境。

在终端运行

$ sumi dev -e=/path/to/ext1,/path/to/ext2 --execute=/path/to/IDE

--execute 参数表示桌面 IDE 可执行文件路径,例如:

# Windows
$ sumi dev -e=/path/to/ext --execute=/C:\Program Files\OpenSumi\OpenSumi.exe --debug

# MacOS
$ sumi dev -e=/path/to/ext --execute=/Applications/OpenSumi.app/Contents/MacOS/OpenSumi --debug

使用桌面版 IDE 时,由于桌面版 IDE 可能包含创建、选择项目等前置流程,故无法通过参数指定 workspaceDir

打包插件

使用 sumi package 命令将你的插件打包。

sumi-package

$ sumi package

请确保插件 package.json 中包含名为 prepublishscripts 脚本。

{
  "scripts": {
    "prepublishOnly": "/* your compile script */"
  }
}

这会先运行 npm list 分析依赖,如果你需要将插件项目的 node_modules 一并打包进去,建议使用 npm install --production 安装依赖,这样会仅安装运行时必要的模块。

排除目录

运行 sumi package 命令时,支持指定排除的文件或目录,在插件项目下新建名为 .vscodeignore 的文件,格式类似 .gitignore ,支持 glob 模式匹配目录,在打包时将会排除掉这些文件:

# .vscodeignore
node_modules/
src/
yarn-error.log
# ...

或传入 --ignoreFile 参数指定 ignore 文件

$ sumi package --ignoreFile=/path/to/.ignore