作者:李少侠

https://zhuanlan.zhihu.com/p/35303567

已获转载授权

Visual Studio Code(VS Code)近年来获得了爆炸式增长,成为广大开发者工具库中的必备神器。它作为一个开源项目,也吸引了无数第三方开发者和终端用户,成为顶尖开源项目之一。它在功能上做到了够用,体验上做到了好用,更在拥有海量插件的情况下做到了简洁流畅,实属难能可贵。

我是VS Code用户,同时也为它开发插件,插件市场里的众多Java插件基本都是我们团队的作品,所以我在日常工作中观察到不少VS Code在工程方面的亮点,下面就来逐一探讨。

简洁而聚焦的产品定位,贯穿始终

你知道VS Code的开发团队人数只有二十出头吗?

难以相信吧,大家都觉得VS Code无所不能,如此强大的工具那么几个人怎么做得出来。实际上功能丰富是个美好的错觉,因为大部分针对特定编程语言和技术的功能都是第三方插件提供的,VS Code的核心始终非常精简,这很考验产品团队的拿捏能力:做多了,臃肿,人手也不够;做少了,太弱,没人用。

他们团队选择了专注于核心功能的开发,为用户提供简洁流畅的体验,并将该思路贯穿在产品开发的每个环节。在我看来,这就是第一个亮点。

第一个亮点同时也是一个难点,因为“简洁”说到底是产品的“形态”,更关键的其实是前置问题——产品的定位,它到底解决什么问题。该问题如果从用户的角度来看,可以转换为以下几个点——我们为什么需要一个新的工具?它到底是代码编辑器(Editor)还是集成开发环境(IDE)?让我们来看看项目负责人Erich Gamma 的说法:

(视频截图 - Erich阐述了VS Code的定位:编辑器+代码理解+调试)

这张截图它阐述了VS Code的定位:编辑器+代码理解+调试。这是一个非常节制而平衡的选择,专注于开发者“最常用”的功能,同时在产品的形式上力求简洁高效。从结果来看,这个定位是相当成功的。

在这个定位的指导下,这二十多位工程师搞出了VS Code。相对较小的功能集,使得开发者们能在代码质量上精益求精,最终用户们也得到了一个性能优异的工具,这是VS Code从一众编辑器中脱颖而出的重要原因。

正因为产品定位以及团队职责上的高度节制,团队成员才能把时间花在这类问题上,写出经得起考验的代码。

与此同时,较小的团队也使得团队成员做到了行为层面的整齐划一,这点在社区互动上体现得尤为明显,大家可以去GitHub上看他们的Issues,超出产品定位范畴的请求和反馈基本都被婉拒或者转交到第三方插件项目,可以说是很专注了。

看到这里,似乎一切都好,但问题来了,码农千千万,你用Node我用Go,你搞前端我弄后台,VS Code如何满这些五花八门的需求呢?机智的你已经抢答了——海量插件。那么接下来我们来深究一下VS Code是如何经营一个庞大的插件生态的。

进程隔离的插件模型

通过插件来扩展功能的做法已经是司空见惯了,但如何保证插件和原生功能一样优秀呢?历史告诉我们:不能保证。

大家可以参考Eclipse,插件模型可以说是做得非常彻底了,功能层面也是无所不能,但存在几个烦人的问题:不稳定、难用、慢,所以不少用户转投IntelliJ的怀抱。可谓成也插件,败也插件。

问题的本质在于信息不对称,它导致不同团队写出来的代码,无论是思路还是质量,都不一致。最终,用户得到了一个又乱又卡的产品。所以要让插件在稳定性、速度和体验的层面都做到和原生功能统一,只能是一个美好的愿望。

来看看其他IDE是怎么做的,Visual Studio自己搞定所有功能,并且做到优秀,让别人无事可做,这也成就了其“宇宙第一IDE”的美名;IntelliJ与之相仿,开箱即用,插件可有可无。这么看起来,自己搞定所有的事情是个好办法,但大家是否知道,Visual Studio背后有上千人的工程团队,显然,这不是VS Code这二十几号人能搞定的。他们选择了让大家来做插件,那怎么解决Eclipse所遇到的问题呢?

这里分享一个小知识——Eclipse核心部分的开发者就是早期的VS Code团队。嗯,所以他们没有两次踏入同一条河流。与Eclipse不同,VS Code选择了把插件关进盒子里

这样做首先解决的问题就是稳定性,这个问题对于VS Code来说尤为重要。都知道VS Code基于Electron,实质上是个Node.js环境,单线程,任何代码崩了都是灾难性后果。所以VS Code干脆不信任任何人,把插件们放到单独的进程里,任你折腾,主程序妥妥的。

插件与主进程隔离

VS Code团队的这一决策不是没有原因的,正如前面提到的,团队里很多人其实是Eclipse的旧部,自然对Eclipse的插件模型有深入的思考。Eclipse的设计目标之一就是把组件化推向极致,所以很多核心功能都是用插件的形式来实现的。遗憾的是,Eclipse的插件运行在主进程中,任何插件性能不佳或者不稳定,都直接影响到Eclipse,最终结果是大家抱怨Eclipse臃肿、慢、不稳定。VS Code基于进程做到了物理级别的隔离,成功解决了该问题。实际上进程级别的隔离也带出了另一个话题,那就是界面与业务逻辑的隔离。

UI渲染与业务逻辑隔离,一致的用户体验

“不稳定”之后的问题是“难用”,具体来说就是混乱的界面和流程,究其原因就是插件之间的界面语言的“不一致”,它导致学习曲线异常陡峭,并且在面临问题时没有统一的解决路径。VS Code的做法是根本不给插件们“发明”新界面的机会。

如上图,插件们被关在Extension Host进程里,而UI则在主进程里,所以插件们天然没法直接在用户界面上做手脚。

VS Code统管所有用户交互入口,制定交互的标准,所有用户的操作被转化为各种请求发送给插件,插件能做的就是响应这些请求,专注于业务逻辑。但从始至终,插件都不能“决定”或者“影响”界面元素如何被渲染(颜色、字体等,一概不行),至于弹对话框什么的,就更是天方夜谭了。

VS Code对于用户界面的把控可以说是谨慎到变态,做过插件的人都懂的,感兴趣的同学可以去深挖一下TreeView的历史,会有更直观的体会。乍一看,第三方开发者被卡得死死的,这样不是限制了大家的创造力吗?我想说这个做法跟这个团队的背景密切相关,换一拨人很有可能会失败。他们之所以能成功,是因为该团队在开发工具领域深耕多年,他们把经验转换为观点,最终落实到了VS Code的界面元素以及交互语言上,从结果来看,广受欢迎。

界面和业务逻辑的彻底隔离,使得所有插件有了一致的行为,用户就得到了整齐划一的体验。不仅如此,这种接口和行为层面的一致性,最终转化成了另一个“伟大”的功能——Remote Development,我们稍后讨论。接下来我们要聊的是VS Code另一个创举——Language Server Protocol。

LSP——基于文本的协议

前文提到了VS Code定位中的两个特色:代码理解和调试,绝大部分都由第三方插件来实现,中间的桥梁就是两大协议——Language Server Protocol(LSP)和Debug Adapter Protocol(DAP)。两者从设计的角度来看高度相似,我们着重看一下最火的LSP。首先,为什么需要LSP?

全栈开发早已成为这个时代的主流,软件从业者们也越来越不被某个特定的语言或者技术所局限,这也对我们手里的金刚钻提出了新的挑战。

举个栗子,我用TypeScript和Node.js做前端,同时用Java写后台,偶尔也用Python做一些数据分析,那么我很有可能需要若干工具的组合,这样做的问题就在于需要在工具间频繁切换,无论从系统资源消耗和用户体验的角度来看,都是低效的。

那么有没有一种工具能在同一个工作区里把三个语言都搞定呢?没错,就是VS Code——支持多语言的开发环境,而多语言支持的基础就是Language Server Protocol(LSP)。

该协议在短短几年内取得了空前的成功,到目前为止,已经有来自微软等大厂以及社区的一百个实现,基本覆盖了所有主流编程语言。同时,它也被其他开发工具所采纳,比如Atom、Vim、Sublime、Emacs、Visual Studio和Eclipse,从另一个角度证明了它的优秀。

更难能可贵的是,该协议还做到了轻量和快速,可以说是VS Code的杀手级特性了,同时也是微软最重要的IP之一。。。哇塞,又强大又轻巧,怎么看都是个骗局啊,那我们就来看看它到底怎么做到的。

先划重点:1、节制的设计 2、合理的抽象 2、周全的细节

先来说说设计(Design),大而全是很常见的问题。如果让我来设计这么一个用来支持所有编程语言的东西,第一反应很可能是搞个涵盖所有语言特性的超集。

微软就有过这样的尝试,比如Roslyn——一个语言中立的编译器,C#和VB.NET的编译器都是基于它做的。大家都知道C#在语言特性层面是非常丰富的,Roslyn能撑起C#足以说明它的强大。那么问题来了,为啥它没有在社区得到广泛应用呢?我想根本原因是“强大”所带来的副作用:复杂、主观(Opinionated)。光是语法树就已经很复杂了,其他各种特性以及他们之间的关系更是让人望而却步,这样一个庞然大物,普通开发者是不会轻易去碰的。

相较之下,LSP显然把小巧作为设计目标之一,它选择做最小子集,贯彻了团队一贯节制的作风。它关心的是用户在编辑代码时最经常处理的物理实体(比如文件、目录)和状态(光标位置)。它根本没有试图去理解语言的特性,编译也不是它所关心的问题,所以自然不会涉及语法树一类的复杂概念。

它也不是一步到位的,而是随着VS Code功能的迭代而逐步发展的。所以它自诞生至今依然保持着小巧的身材,易懂,实现门槛也很低,迅速在社区得到了广泛的支持,各种语言的Language Server(LS)遍地开花。

小归小,功能可不能少,所以抽象就非常关键了。LSP最重要的概念是动作和位置,LSP的大部分请求都是在表达”在指定位置执行规定动作“。

举个栗子,用户把鼠标悬停在某个类名上方,查看相关的定义和文档。这时VS Code会发送一个'textDocument/hover'请求给LS,这个请求里最关键的信息就是当前的文档和光标的位置。LS收到请求之后,经过一系列内部计算(识别出光标位置所对应的符号,并找出相关文档),找出相关的信息,然后发回给VS Code显示给用户看。这样一来一回的交互,在LSP里被抽象成请求(Request)和回复(Response),LSP同时也规定了它们的规格(Schema)。在开发者看来,概念非常少,交互形式也很简单,实现起来非常轻松。

看到这里,大家应该对LSP有了更进一步的理解,它本质上是胶水,把VS Code和各种语言的LS粘在一起。但它不是普通的胶水,而是非常有品位的胶水,这品位就体现在细节上。

首先这是一个基于文本的协议,文本降低了理解和调试的难度。参考HTTP和REST的成功,很难想象如果这是一个二进制协议会是什么局面,甚至同样是文本协议的SOAP也早已作古,足以说明“简单”在打造开发者生态里的重要性。

其次这是一个基于JSON的协议,JSON可以说是最易读的结构化数据格式了,大家看看各个代码仓库里的配置文件都是啥格式就知道这是个多么正确的决定了,现在还有人在新项目里用XML吗?又一次——“简单”。

再次,这是一个基于JSONRPC的协议,由于JSON的流行,各大语言都对它有极好的支持,所以开发者根本不需要处理序列化、反序列化一类的问题,这是实现层面的“简单”。

从这些细节可以看出,VS Code团队对当今技术趋势的把握是相当精准的,他们决策充分考虑到了“简单”,牢牢抓住了社区开发者的心。所以重要的事情说三遍:

在做设计的时候一定要倾向于简单。

在做设计的时候一定要倾向于简单。

在做设计的时候一定要倾向于简单。

集大成的Remote Development

今年五月,VS Code发布了Remote Development(VSCRD),有了它,我们可以在远程环境(比如虚机、容器)里开一个VS Code工作区,然后用本地的VS Code连上去工作,下图说明了它的运行模式:

VSCRD从本质上改善了远程开发的体验,与常用的远程桌面共享相比,具体改进如下:

响应迅速:VSCRD所有的交互都在本地UI内完成,响应迅速;远程桌面由于传输的是截屏画面,数据往返延迟很大,卡顿是常态

沿用本地设置:VSCRD的UI运行在本地,遵从所有本地设置,所以你依然可以使用自己所习惯的快捷键、布局、字体,避免了工作效率层面的开销

数据传输开销小:远程桌面传输的是视频数据,而VS Code传输是操作请求和响应,开销与命令行相仿,卡顿的情况进一步改善

第三方插件可用:在远程工作区里,不仅VS Code的原生功能可用,所有第三方插件的功能依然可用;远程桌面的话,你得自己一个个装好

远程文件系统可用:远程文件系统被完整映射到本地,这个两者差不多

那么VSCRD做了什么神奇的操作能够实现以上效果呢?来看看它的架构图:

其实答案都在前文有所提及:

进程级别隔离的插件模型

Extension Host(也就是图中的VS Code Server)与主程序做到了物理级别的分离,那么把Extension Host在远程或者本地跑没有本质的区别

UI渲染与插件逻辑隔离,整齐划一的插件行为

所有的插件的UI都由VS Code统一渲染,所以插件里面只有纯业务逻辑,行为高度统一,跑在哪里都没区别

高效的协议LSP

VS Code的两大协议LSP、DAP都非常精简,天然适合网络延迟高的情况,用在远程开发上再适合不过

VS Code团队在架构上的决策无疑是非常有前瞻性的,与此同时,他们对细节的把握也是无可挑剔。正因为有了如此扎实的工程基础,VSCRD这样的功能才得以诞生,所以我认为这是集大成的作品。

还没有尝试过VSCRD的同学,这里再安利一下,它在以下场景中非常有用:

开发环境配置起来很繁琐,比如物联网开发,需要自己安装和配置各种工具和插件。在VSCRD里,一个远程工作区的模板即可搞定,如需安装额外的工具,也就是改改Dockerfile的事情,非常简单。在这里可以找到常用的编程语言和场景的模板。

本地机器太弱,某些开发搞不了,比如机器学习,海量数据及和计算需求需要非常好的机器。在VSCRD里,可以直接操作远程文件系统,使用远程计算资源。

最后

VS Code像一颗耀眼的星星,吸引着成千上万开发者为其添砖加瓦。从VS Code的成功中,我们看到了好的设计和工程实践能创造多少奇迹。放眼软件产业,各个层面的模式不断被刷新,让人激动之余,也要求从业者不断提高技能水平。从个人学习的角度来看,了解这些模式诞生的前因后果,理解工程实践中的决策过程是非常有利于提高工程能力的。

往期精彩回顾

耗时1个月整理的这份英语资源!一次性全部分享给你,手慢无!

VS Code为什么能这么牛?相关推荐

  1. Visual Studio Code为什么能这么牛X?

    点击上方"视学算法",选择"置顶或者星标" 你的关注意义重大! 作者:李少侠 链接:https://zhuanlan.zhihu.com/p/35303567 ...

  2. 不得不爱,Visual Studio Code十大超酷特性

    这大半夜的,是不是有很多码农的在熬夜奋战? 如果你最近关注了Microsoft Developer的空间,你可能会想"这是一个新的微软".如果你参加了最近的 BUILD 开发者大会 ...

  3. VS Code开源软件介绍——史上最优秀的 IDE ?

    第一次使用VS Code时你应该知道的一切配置 https://www.cnblogs.com/qianguyihao/archive/2019/04/18/10732375.html 深受C/C++ ...

  4. 编程神器 VS Code,只要这一篇就够了!

    摘要:本文从VS Code的安装和简单使用开始,剖析VS Code内在特点,以及C/C++环境为例简要介绍配置方法,最后进一步介绍了远程开发环境,及VS Code远程开发环境的配置方法. 目录 1.1 ...

  5. JVM调优:基本垃圾回收算法

    查看全文 http://www.taodudu.cc/news/show-126595.html 相关文章: GitHub 上有哪些适合新手跟进的优质项目?(附地址) 用 Pytorch 理解卷积网络 ...

  6. OCR识别通过某瓣人机验证

    本篇文章将带你使用ocr识别通过人机验证码 豆瓣很骚,莫名其妙就总会出来人机验证,用了代理也过不去,感觉是通过cookies识别你是否为爬虫,一识别就出404弹个人机验证,为了防止爆人机,也想了很多方 ...

  7. ASP.NET MVC+Bootstrap 实现短信验证

    短信验证大家都已经很熟悉了,基本上每天都在接触手机短信的验证码,比如某宝,某东购物,网站注册,网上银行等等,都要验证我们的手机号码真实性.这样做有什么好处呢. 以前咱们在做网站的时候,为了提高用户注册 ...

  8. 免费天气查询工具类源码,开箱即用,根据中国气象局API编写。高效稳定

    文章目录 引言 相关依赖 WeatherUtil工具类代码 http工具类 测试 引言 使用Java语言,根据中国气象局API编写的查询天气工具类,代码引入就能用,代码中对异常做了处理,无论是否查询成 ...

  9. 获取全国行政区域划分数据

    通过高德提供的开发者平台提供的行政区域划分接口获取2级行政区,接口链接可以到高德开发者平台拿到 第一部分代码 import json import pymysql import requestscla ...

最新文章

  1. FFT2 图像二维FFT含义解释
  2. esp32外部中断_玩转 ESP32 + Arduino (四) 电容按键 霍尔传感器 外部中断 延时 脉冲检测...
  3. 前端学习(2450):页面布局制作
  4. core java 8~9(GUI AWT事件处理机制)
  5. VSCODE 一键编译运行
  6. 微服务升级_SpringCloud Alibaba工作笔记0010---Gateway配置动态路由
  7. 数据库联接字符串大全
  8. ELM327 OBD to RS232 Interpreters
  9. CMS:文章管理之视图(4)
  10. Tableau+财务领域数据分析+应用
  11. 关于ActionForm的一些问题
  12. Linux之查看物理主机的CPU温度
  13. Metro风格的CSS框架 BootMetro
  14. httpclient-4.3.6工具类,方便直接使用
  15. 厦大计算机学硕考研难度,一个班半数考研 厦大录取仅两成 读研是鸡肋还是围城...
  16. 如何快速一键重装系统 一键重装系统图文教程
  17. 如何理解凸优化中的共轭函数的定义?
  18. 滴滴裁员20%,有员工拿了N+1赔偿,转身去新公司报到,还涨薪30%
  19. 蛋白质结构预测 AlphaFold2、ColabFold、Uni-Fold、ESMFold
  20. continue语句可以用在switch语句和3种循环语句中_必须知道的C语言知识细节:break、continue语句区别...

热门文章

  1. 急缺开源人才怎么办?来看看大厂和高校怎么解决
  2. AI 被当做炒作工具?
  3. 年收入百万美元AI科学家的烦恼与思考
  4. 十年沉浮,用Python看创业公司消亡史
  5. 算力至上?四大AI芯片大对决
  6. 即学即用的30段Python实用代码
  7. 无需成对示例、无监督训练,CycleGAN生成图像简直不要太简单
  8. Bert时代的创新:Bert应用模式比较及其它 | 技术头条
  9. 腾讯回应博鳌AI同传:系谣言,承认出现失误
  10. 重大改变!Python 或将取代 VBA 成为 Excel 官方脚本语言