Serverless Devs VSCode 插件开发讨论

[anycodes]

开发背景

尽管，目前的Serverless Devs已经可以通过组件化的加持，完成更多的功能，但是在开发态的介入，仍然是非常重要和值得关注的，当开发者可以通过部分IDE插件，进行Serverless架构的使用，将会是非常方便的。

目前主流的云厂商或者开源项目都有或多或少的 VSCode 插件，例如：

所以，为了更方便的为开发者们提供便利，Serverless Devs的VSCode插件版，也应该规划起来了。

整体功能

Serverless Devs 本身是一个插件化，组件化，应用化的工具，在命令行上面有足够的灵活性，那么在VSCode的加持下，他的功能应该是比那得更好用，更易用，可以借助天然的cli+gui，可以让开发者“辛福感”进一步提升。从整体规划来看，Serverless Devs VSCode Plugin应该具备几个特点：

• CLI+GUI；
• 高度定制化能力；
• 更智能，更聪明；

VSCode插件功能划分

如上图为例，对整个VSCode插件，常见的可自定义部分划分为5个区域：

1. Serverless Devs 提供若干可支持的组件，用户可自定义显示；
2. 针对不同组件，组件可自定义按钮和命令；
3. 针对不同的文件，组件可自定义按钮和命令；
4. 执行状态
5. Serverless Devs 提供若干功能支持；

区域1: 提供若干可支持的组件，用户可自定义显示；

区域1的主要包括两个层面：

• 系统功能的显示
• 自定义组件的显示

系统功能的显示

• 创建
  • 直接创建：类似于s init，可以快速引导式创建应用
  • 应用中心：打开应用中心页面，进行快速创建
• 设置
  • 账号配置：进行账号的管理和配置
  • 组件管理：进行组件的管理和配置
  • 更多设置：进行缓存空间配置，源配置，数据上报配置等

相关页面

直接创建

直接创建是类似于 s init 的方法，直接进行创建的逻辑，用来快速创建，点击之后，由下拉选择的形式选择不同的组件：

然后引导式创建：

应用中心

点击应用中心，可以弹出应用中心的页面：

选择不同的应用可以进入引导式创建：

当然，点击应用的名字，还可以看到应用的具体信息：

账号配置

组件管理

更多设置

自定义组件的显示

通过下拉框，选择要默认显示出来的组件：

[ ] Fc
[ ] Application
[ ] SAE
--------------
配置组件显示

值得一提的是，那些组件可以用来在上面进行显示？这个是由组件开发者决定的，希望的是，可以用来被显示的组件是一种远端资源管理能力，具体参考区域2说明。

区域2：针对不同组件，组件可自定义按钮和命令；

需要针对组件，进行规范升级，增加用来判断，组件是否可以作为默认显示在VSCodePlugin中的字段。如果字段被选中，那么组件应该提供几个重要的方法：

1. 远端资源获取的方法
2. 远端资源可操作的方法

以FC组件为例，可以提供对应的按钮配置：

1. 地区选择
2. 账号选择
3. 刷新。

还要提供对应的功能：

1. 获取地区的方法
2. 获取资源列表的方法

同时，针对资源还需要提供资源级别的按钮配置和对应方法：

• 服务
  • 同步
  • 控制台
  • 更多
    • 版本管理
      • 查看版本
      • 发布版本
      • 删除版本
    • 别名管理
      • 查看别名
      • 更新别名
      • 发布别名
      • 删除别名
    • 预留/按量
      • 查看预留
      • 配置预留
      • 配置按量
    • 删除服务
• 函数
  • 同步
    • 同步全部
    • 同步配置
    • 同步代码
  • 日志
  • 触发
    • 同步触发
    • 异步触发
  • 控制台
  • 更多
    • 删除函数

区域3：针对不同的文件（指的是符合Serverless Devs 规范的 Yaml 文件），组件自定义按钮和命令；

作用在：系统可以检测出一个应用的配置（以s.yaml为主）

• 部署按钮（如果有，此处为部署按钮）
• 应用操作：聚合所有组件命令

deploy
plan
build

• 服务操作

Myservice
deploy：部署
plan：计划变更
-----------------
Test
deploy：部署
plan：计划变更

• 自定义命令：针对当前项目，可以自定义一些命令配置（配置可以缓存到当前的.s目录下）：
  

区域4： 执行状态

【讨论】组件每次执行，在这里显示traceId等信息，用来状态展示。【更多功能后续更新】

区域5：Serverless Devs 提供若干功能支持

• 查看文档功能
  • 不同组件的文档链接
• s edit 功能
• s verify 功能

编辑功能

1. 编辑的所有的符合Serverless Devs规范的Yaml都需要进行：

• 代码提醒
  • 参数名，参数解释，取值范围，参数事例
• 校验（s verify）

2. 尽管是VSCode插件没，同样提供可视化的编辑功能；

安装后的引导/欢迎页面： Webview页面

【待讨论】希望这部分是一个新手引导的过程
【待讨论】可以在这个页面增加一定的默认配置功能，例如配置某个云厂商的组件为默认组件等

---

• 由于本人没有怎么过多的研究过VSCode插件内容，所以不确定上面的功能是否可以完全实现，如果有问题随时沟通；
• 灵活性也代表着会丧失一定的便利性，上面的内容，更多是考虑灵活与便利的兼容，但是仍有不足，欢迎讨论；

[taosher]

先记录两个技术侧想法

• YAML Intellisense可以参考 redhat的vscode-yaml插件，结合json schema来做。如果我们的插件是一个插件pack（即包含vscode-yaml的插件），这部分开发工作量会大大降低，体验也接近原生intellisense （ https://raw.githubusercontent.com/redhat-developer/vscode-yaml/main/images/demo.gif ）

• 插件如果考虑webide兼容，要支持VSX标准，可能对VSCode API的使用要有些限制。参考Theia的API兼容文档( https://eclipse-theia.github.io/vscode-theia-comparator/status.html )

[DevDengChao]

JSON Schema +1

[ghost]

沙发

[heimanba]

需要先出vscode.config 的规范

[anycodes]

移步：https://github.com/Serverless-Devs/serverless-devs-vscode-plugin