传统的代码托管平台提供了代码仓库的 Git/SVN 的管理,可以在平台上做代码浏览、代码评审、缺陷管理、CI 流水线等和代码相关的活动。其中代码浏览、代码评审所用的编辑器组件一般为 CodeMirror,代码高亮使用 highlight.js,常常只提供了读代码的场景。蚂蚁研发效能部门云研发团队通过自研的 OpenSumi 框架及基于 OpenSumi 框架做的专门针对于 Web IDE(无远程容器)场景的极速版 Web IDE 框架,与内部代码托管平台碰撞出了创新型的、只依赖浏览器的、IDE 风格的代码阅读、代码编写、代码提交、代码运行、代码评审等场景,极大的提高了用户在代码托管平台阅读代码、代码评审、轻研发等场景的效率。本次蚂蚁研发效能云研发团队和 CCF(中国计算机学会)GitLink 代码托管平台合作,将内部极速版 Web IDE 应用到了 Gitlink 代码托管平台上,解决了长久以来的用户反馈的很多体验问题。
## Web IDE 核心能力
对标有容器的标准版,极速版 IDE 主要在读、写、运行、提交等方面进行了探索:<br/>
**1. 读:**<br/>
a. 适配了多种代码托管平台,例如 Gitlink、Github、Gitlab 等代码托管平台,业务可以非常方便的使用代码服务的能力<br/>
b. 内置了包括 Java、TS/JS、C++、Go、Python、Rust 等几十种常见语言的语法高亮支持<br/>
c. 支持了如 Git Blame、GitGraph 等代码阅读辅助插件<br/>
**2. 写:**<br/>
a. 支持 HTML/CSS/JS/Markdown 等在线语言服务能力,支持错误诊断能力<br/>
b. 浏览器文件系统<br/>
**3. 运行:**<br/>
a. 支持基于 Skypack 的前端代码运行方案<br/>
b. 支持基于 Pyodide 的 Python 运行<br/>
**4. 提交:**<br/>
a. 支持 WebSCM,提供分支切换/新增、代码提交等能力<br/>
对标有容器的标准版,极速版 IDE 主要在读、写、运行、提交等方面进行了探索:
**1. 读:**
- a. 适配了多种代码托管平台,例如 Gitlink、Github、Gitlab 等代码托管平台,业务可以非常方便的使用代码服务的能力
- b. 内置了包括 Java、TS/JS、C++、Go、Python、Rust 等几十种常见语言的语法高亮支持
- c. 支持了如 Git Blame、GitGraph 等代码阅读辅助插件
**2. 写:**
- a. 支持 HTML/CSS/JS/Markdown 等在线语言服务能力,支持错误诊断能力
- b. 浏览器文件系统
**3. 运行:**
- a. 支持基于 Skypack 的前端代码运行方案
- b. 支持基于 Pyodide 的 Python 运行
**4. 提交:**
- a. 支持 WebSCM,提供分支切换/新增、代码提交等能力
如果说以 CodeMirror、Monaco 为代表的浏览器 IDE 组件为 Web IDE 1.0,那拥有上述能力的极速版 Web IDE 就是 Web IDE 2.0。极速版 Web IDE 方案在蚂蚁内部与 2021 年 4 月上线,承接了代码阅读、代码评审、在线笔试、代码检查结果反馈、轻量在线研发等众多场景,同年 8 月 vscode.dev 和 github.dev 上线,与之相比,极速版 Web IDE 利用 OpenSumi 框架的高扩展性,业务可以更加深度的定制模块与插件,让业务有多的想象空间。
## 代码阅读
在代码托管平台上进行代码阅读时经常需要查看当前方法在哪里被引用、当前接口在哪里被实现,极速版 Web IDE 提供编辑器 + 插件的能力,解决了上述用户需求:
- 1.变更树 a. 提供平铺和树状两种浏览方式 b. 变更树使用 OpenSumi Recycle 组件,对于大 PR 也能通过虚拟滚动高性能的查看变更文件
- 2.工具栏 a. 提供 IDE 编辑器基础设置,如字体大小、编码、忽略收尾空格等 b. 快速切换当前分支历史版本与基线的对比 c. 变更文件快速定位、设置已查看,并支持快捷键快速执行
- 3.编辑器 a. 通过 monaco fold 能力完成非变更内容的折叠 b. 自定义评论组件嵌入编辑器
- 4.插件 a. 复用代码浏览 Blame 插件能力进行代码行 Git 信息查看 除了上述能力,Gitlink 还支持了在代码评审时快速修改代码:

<center>代码评审时可修改代码</center>
## Gitlink Web IDE
Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器,但文件树、代码搜索、快捷键、IDE 皮肤、等均和平时开发时使用习惯的 IDE 差异较大,更有大部分用户仅仅是为了代码阅读将代码克隆到本地,尽管保证了一致的体验,但整个链路繁琐费时。<br/>
基于这个洞察,蚂蚁云研发团队和 Gitlink 推出 Gitlink Web IDE,可以一键快速打开 Web IDE 访问阅读项目仓库代码,实现项目与 IDE 的无缝衔接,保持研发同学的日常偏好习惯,同时完美兼容 Gitlink 代码托管平台。更重要的是,通过无容器在浏览器上直接运行一个极速版 IDE,确保「秒开」的即时体验。<br/>
Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器,但文件树、代码搜索、快捷键、IDE 皮肤、等均和平时开发时使用习惯的 IDE 差异较大,更有大部分用户仅仅是为了代码阅读将代码克隆到本地,尽管保证了一致的体验,但整个链路繁琐费时。
基于这个洞察,蚂蚁云研发团队和 Gitlink 推出 Gitlink Web IDE,可以一键快速打开 Web IDE 访问阅读项目仓库代码,实现项目与 IDE 的无缝衔接,保持研发同学的日常偏好习惯,同时完美兼容 Gitlink 代码托管平台。更重要的是,通过无容器在浏览器上直接运行一个极速版 IDE,确保「秒开」的即时体验。