VSCODE（二）核心组件

VSCODE都有哪些重要的组件？他的优点是什么？

• Electron
• Monaco Editor
• TypeScript
• Language Sever Protocol
• Debug Adapter Protocol
• Xterm.js

一、Electron

是由Github开发的一种利用前端技术栈完成跨平台界面编写开源框架。这个组件可以开发任何跨平台GUI界面，而不局限于VSCODE中的编辑器。

二、Monaco Editor

Monaco Editor是一个基于浏览器的代码编辑器，它能让浏览器具备代码编辑功能，包括：

• 智能提示
• 代码验证
• 语法高亮
• 代码片段
• 代码格式化
• 代码跳转
• 键盘快捷键
• 文件比较

国内著名的代码托管平台码云就是使用的基于浏览器的在线IDE（Gitee Web IDE）。

三、TypeScript

Electron使得前端技术栈如：JavaScript、CSS和HTML来开发界面成为可能，Visual Studio没有选择JavaScript实现Monaco Eiditor，而是采用了自研的TypeScript。原因是TypeScript具有一个很大的优点：类型的支持，也就是类型推断、命名空间等，像是Atom、WebStrom、VIM开始全面支持TypeScript。

四、Language Sever Protocol（LSP）

在说这个协议之前，我们得先了解一下语言服务器（Language Sever），它是VSCODE的一种特殊的扩展，给多种语言提供了加强的编辑体验，也就是说你可以在VSCODE中使用自动补全、错误检查、跳转到定义等特性支持。在VSCODE完成对语言服务器中遇到的以下问题：

• 首先，语言服务器是用其原生编程语言实现的，将其集成运行时为Node.JS的VSCODE中比较困难；
• 其次，语言服务器解析时资源消耗大，VSCODE的性能可能受到影响
• 最后，多语言工具和编辑器配合需要消耗大量开发时间。对于语言工具（C++ Python Java）而言，它需要为不同编辑器提供对应API；对编辑器而言，则需要对不同语言的不统一的API提供支持。假设有N个语言，M个编辑器，则一共需要N*M个实现，工作量是相当大的。

于是微软搞出了同一的服务器协议（Language Sever Protocol，LSP）。 工作量从降成了M*N。许多编辑器/IDE如：微软自家的Visual Studio、Eclipse IDE、Sublime、Emacs和QT都支持了LSP协议。

五、Debug Adapter Protocol (DAP)

DAP是一个基于JSON的协议，他抽象了开发工具和调试工具之间的通信。在说明这个协议之前，我们来看看一个基本调试工具都需有什么功能：

• 各种类型的断点
• 变量查看
• 多进程、线程的支持
• 调用堆栈
• 表达式监控
• 调试控制台

对于不同语言的开发工具（Node.js、Python、C#），编辑器和IDE需要分别为这些工具实现调试界面的API，那么微软是如何做的？

各个公司有各个公司的想法，微软索性做了一个适配器，复用了各个公司现有的调试工具。这个好处在于：

• Debug Adapter可以被不同开发工具使用；
• 实现了“前端”和“后端”的解耦，各个开发工具都可以利用这个协议实现自己的调试功能。

以GDB为例，其协议使用过程如下图所示：

六、Xterm.js

集成终端（Integrated Terminal）是VSCODE的重要功能之一，其使用了开源项目Xterm.js实现，Xterm.js是一个使用TypeScript开发的前段组件，将完整的终端功能带入了浏览器，Xterm.js不是一个终端应用，而是一个前端组件，可以与CMD、PowerShell、WSL、Bash、sh、zsh直接相连，实现了内置终端功能。

[1] https://code.visualstudio.com/blogs/2018/08/07/debug-adapter-protocol-website/ [2] Visual Studio权威指南