Skip to content

Latest commit

 

History

History
69 lines (38 loc) · 5.58 KB

15.WebIDE技术相关资料.md

File metadata and controls

69 lines (38 loc) · 5.58 KB

WebIDE 技术相关资料

WebIDE 指基于浏览器 + 容器化技术的在线集成开发环境, 包括 Cloud Studio, Theia 在内的大部分 WebIDE 前端技术基于 VS Code 生态构建, 主要模块可以分为编辑器, 语言服务器, 调试服务以及插件系统, 而与 VS Code 不同之处是, WebIDE 前后端通信协议大部门都基于 WebSocket.

编辑器

Cloud Studio 使用与 VS Code 完全相同的编辑器内核 monaco-editor, 这是微软开源的基于浏览器的编辑器, 使用 TypeScript 编写, 其源码在 VS Code 仓库, 可以被单独构建并发布到 npm 作为一个独立的模块. Monaco Editor 除了包含基本的编辑器以外, 还有一套基于 LSP 协议的 API, 可以和 LSP 协议下的语言服务后端集成, 为编辑器提供自动完成, 纠错, 格式化等功能, 详细使用方法可以查看 Monaco Editor 主页.

Monaco Editor 相关技术及资料

  • Monaco Editor Webpack Plugin

    Monaco Editor 的 Webpack 插件, 主要负责根据指定配置自动加载并打包 Monaco 相关模块, 可以禁用部分内置语言及相关特性.

  • Monaco Textmate

    Monaco Textmate 是社区移植自 VS Code Textmate基于 Textmate 的语法高亮系统, Textmate 高亮系统本质是通过一个高性能正则引擎 oniguruma按照语法配置文件的规则逐行对源文件匹配进行标记化, 可以查看这篇文章了解 Textmate 语法声明规则. Monaco Textmate 使用 WebAssembly 加载这个正则引擎, 使其可以在浏览器调用.

  • Monarch

    Monaco Editor 的语法高亮规则, 但和 VS Code 并不是同一个实现, 所以无法使用 VS Code 主题及高亮配置, 一般建议使用上述 Monaco Textmate 方案, 另外 VS Code Textmate 官方应该也会提供浏览器可运行的版本.

  • Text Buffer Reimplementation

    VS Code (Monaco Editor) 编辑器核心 TextBuffer 的实现. 主要讲述了基于 Piece Table 数据结构的编辑器 TextBuffer 实现原理, 有兴趣可以阅读.

LSP 和 DAP

LSP 和 DAP 都是微软推出的目的为解决 IDE 语言服务和调试适配器 M x N 问题, 传统的每个 IDE 都要自行开发一套某个语言的语言服务程序和调试适配器, 而这些语言服务程序都使用不同的接口, 完全无法复用, 造成各大 IDE 开发成本过高的问题.

LSP

LSP 指 Language Server Protocol, 是由微软基于 TypeScript 及 C# 的语言服务器抽象出的一套接口协议, 该协议规定了一系列为 IDE 提供智能补全, 自动纠错等功能的接口, 支持 LSP 的编辑器前端可以无缝对接到基于 LSP 的语言服务程序.

目前已经有数十种语言支持 LSP, 包括 Vim, Emacs, Sublime Text, eclipse, Visual Studio 等传统的编辑器/ IDE 都有相应的客户端实现.

LSP 相关技术及资料

  • Monaco LanguageClient

    适用于Monaco 编辑器的 LSP 客户端, 这个项目基于 Monaco 的 API, 封装成了一个通用的 LSP 客户端, 可以与 LSP 服务端通过 WebSocket 连接.

  • VSCode WebSocket JSON RPC

    适用于 WebSocket 协议的 LSP 服务端与客户端通信框架, LSP 本身不限制通信方式, 但大部分 LSP 服务端的实现都是基于 TCP Socket 或 Stdio, VSCode WebSocket JSON RPC 可以包装 LSP 服务端的输入输出接口, 作为中转层与客户端通信.

  • Implementations Language Servers

    这里列举了支持 LSP 的语言.

DAP

DAP 是指 Debug Adapter Protocol, 是由微软基于 Visual Studio 调试器接口抽象出的一套调试适配器协议, 该协议规定了一套通用的 API, 实现一个支持 DAP 协议的调试适配器, 即可与支持 DAP 协议的调试器前端通信.

同样有数十种支持 DAP 的调试适配器, 包括常见的 C/C++, Java, Node.js, C#, Python 等主流语言, Vim, Emacs, Sublime Text, eclipse, Visual Studio 等传统编辑器/IDE 都有对应的客户端实现.

调试器前端是指可以进行调试相关操作的 GUI 程序, 它可以独立运行, 或者集成在 IDE 中. 调试适配器无关调试器的具体实现, 它只是一层对接调试器与调试器前端的通用接口.

DAP 相关技术及资料

  • VS Code Debug Adapter For Node.js

    VS Code 开源的 Node.js 调试适配器实现, 实际这个仓库还包含了 VS Code 所使用的的通用适配器, 基于这个适配器可以对接任意调试器, 使其可以与支持 DAP 的调试器前端通信.

  • Implementations Debug Adapters

    这里列举了支持 DAP 的语言和调试适配器.

插件生态

市面上主流的 WebIDE 插件系统的主要方向是兼容 VS Code 插件系统, 其中 Theia 已经可以基本兼容 VS Code 的内置插件, 而另外 Veonim 同样实现了在 Neovim 中使用 VS Code 插件.