Skip to main content
下载 IDE

JoyCoder

名词解释#

JoyCoder

寓意：一个越用越嗨的研发百宝箱~
说明：基于VSCode插件体系，将日常工作流GUI化、集成化、智能化、保姆化，提供快速开始、命令行工厂、编码辅助、工具辅助四大块能力，解决工程化到开发体验之间“最后一公里”问题，实现研发链路的体验和效率升级。以下称为：JoyCoder。

VSCode插件

VSCode的扩展方式，从 UI 到编辑体验，几乎 VS Code 的每个部分都可以通过 插件 API 进行定制和增强。

背景分析#

日常工作中，我们开发的每个环节都会涌现出丰富的组件、工具、服务和解决方案来解决遇到的工程效率的问题，比如目前我们团队内沉淀了大量的基础组件、业务组件、脚手架、系统工具等，通过工程化、系统化等手段在很大程度上解决了开发中存在的一些普遍性问题。随着各类工具的出现以及工程化的发展，代码研发模式也从较单一的 IDE 编辑延展到终端命令、本地工具、线上研发平台、各类文档相互穿插交织的方式。

回溯一位研发同学的目前的编码流程，我们会发现几个现象：

  1. 在IDE和很多研发工具中不断切换。比如上传切图需要打开图片上传工具，上传完成并粘贴链接后再回到IDE编码并拷贝链接，以我们团队去年的春晚活动为例，这样的操作需要重复167次；
  2. 在IDE和文档之间不断切换，比如组件文档、脚手架文档、各类开发文档；
  3. 开发新项目时，需要拷贝并删减其他项目，将其改为属于自己项目的初始框架；
  4. 在当前开发的项目和旧项目及他人项目之间切换，寻找拷贝一些常用或特定代码；
  5. 根据各种脚手架规则学习并手动组装、执行命令行，以便让项目正常编译或发布；

下图是传统手段下切图构建的部分流程，可以看出这是一件重复频率非常高也比较繁琐耗时的工作。

那么，如何解决以上问题；开发体验和效率升级的下一阶段的突破口又是什么；能否有一个工具集，能在完整的开发周期中为开发者保驾护航，最大化的集成研发过程中的能力与服务，提升研发体验和效率呢？最终我们期望通过 IDE 的方式和视角来找寻答案，原因在于：

  1. IDE 是开发同学日常工作中使用最高频的软件工具，没有之一
  2. IDE 刚好能作为研发编辑工具与研发工具服务的结合平台，提高工具、服务之间的串联效率，提升链路的完整性和交互体验，最终完成研发链路的体验和效率升级。
  3. 基于 VSCode 强大的插件体系，我们有技术支撑来通过自动化、集成化、智能化手段来解决上述问题

下图是我们针对上传图片场景在 IDE 层面的解决方案，利用 IDE 能力优化效率和体验。

功能演示 以上，就是 JoyCoder 项目的出发点。

技术实现#

VSCode插件开发介绍#

可以实现哪些能力#

VSCode 主要提供了6种开放能力：通用能力、声明类语言特性（基础支持）、程序类语言特性（高级支持）、工作区 UI 扩展、主题、调试。

如何编写一个VSCode插件#

开发 VSCode 插件需要本地环境安装了 NodeJS 和 GIT ，然后借助脚手架 Yomen 和 generator-code 来快速生成项目框架

// 安装yomen generator-codenpm install yo generator-code// 根据提示选择配置，快速生成项目框架yo code

生成的项目目录结构如下： VSCode 插件的核心实现主要在 package.json 和 extension.js 文件中。

package.json：插件的声明文件，包含 2 个重要配置项 activationEvents、contributes。

  • activationEvents 主要用于指定插件的触发事件。基于性能的考虑，VSCode 插件推荐都是 lazy load 的，只有激活的时候才启用插件。
  • contributes 主要是描述插件的拓展点，定义插件要扩展 VSCode 哪部分功能。常用扩展项有代码片段（snippets）、命令（commands）、菜单（menus）、快捷键（keybindings）、主题（themes）。通常完成命令的开发后，会将其与菜单/快捷键进行关联，以便调用。

extension.js：插件的执行入口文件，通常包括激活（activate）和禁用（deactivate）2 个方法。VSCode 会在激活插件的时候会执行 active 钩子，在卸载插件的时候执行deactivate 钩子。

如何调试VSCode#

使用 Yomen 生成的模板自带 VSCode 运行能力，在插件项目窗口按下 F5 就会创建一个新的 VSCode 窗口(Extension Development Host)，可以在该窗口进行调试。

打包#

插件的打包需要借助 VSCE 这个工具打包成 .vsix 文件

// 全局安装vscenpm install -g vsce// 打包vsce package

打包后会生成一个以 .vsix 结尾的文件，可以通过本地安装或发布至应用市场供他人安装使用。

JoyCoder 整体架构#

JoyCoder架构图.png 这是 JoyCoder 的整体架构，最底层是基于 VSCode 的插件体系，然后以我们已有的物料和系统为支撑，再通过三层配置来实现我们的个性化需求。再上面就是我们实现或者利用的一些插件能力，同时通过插件内嵌 H5 的方式来承载输出一些更丰富的内容。再往上就是快速开始、智能编码、命令行工厂、工具辅助四大能力矩阵，以此组成一个研发助手。

JoyCoder AI架构#

JoyCoder-AI架构图.png

结语#

面向研发场景，通过 IDE 插件体系能力来打通 IDE 与基础设施及研发体系，将研发链路中的一些重复操作进行收敛，并在一定程度上解决流程割裂，没有形成完整 SOP 的问题，以此来实现研发链路的体验和效率升级，提升研发同学的编码幸福感。

同时也让大家基于我们 JoyCoder 统一的 IDE 体系把更多的精力投入到更深层次能力的建设和创新中去，形成未来日常工作的基础设施，同时也形成技术生态的良性循环。

总结一下，我们通过 JoyCoder 解决了以下几个层面的问题：

  1. 一键引用标准化、可定制、覆盖多场景的项目开发最佳实践
  2. 将研发链路中高频使用的工具 GUI 化、集成化。通过 GUI 操作简化工程复杂度，通过定制集成提高链路的完整性
  3. 将常用 CLI 集成至命令行工厂，降低 CLI 学习和使用成本
  4. 为常用场景提供辅助编码能力，如代码自动补全、代码片段、定义跳转、信息提示等
  5. 基于物料拼装提高项目开发效率，且物料支持动态扩展
  6. 提供一些常用工具辅助，如代码重复检测、GIT 辅助、快速搜索等

欢迎大家使用、参与共建或提出宝贵建议~