Visual Studio Code 有哪些工程方面的亮点?使用指南_工程小白常识

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

Visual Studio Code 有哪些工程方面的亮点?使用指南

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

Visual Studio Code 有哪些工程方面的亮点?使用指南_工程小白常识

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

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

你知道VS Code的开发团队人数只有二十出头吗?难以相信吧,大家都觉得VS Code无所不能,如此强大的工具那么几个人怎么做得出来。实际上功能丰富是个美好的错觉,因为大部分针对特定编程语言和技术的功能都是第三方插件提供的,VS Code的核心始终非常精简,这很考验产品团队的拿捏能力:做多了,臃肿,人手也不够;做少了,太弱,没人用。他们团队选择了专注于核心功能的开发,为用户提供简洁流畅的体验,并将该思路贯穿在产品开发的每个环节。在我看来,这就是第一个亮点。

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

Visual Studio Code 有哪些工程方面的亮点?使用指南_工程小白常识

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

在这个定位的指导下,这二十多位工程师搞出了VS Code。相对较小的功能集,使得开发者们能在代码质量上精益求精,最终用户们也得到了一个性能优异的工具,这是VS Code从一众编辑器中脱颖而出的重要原因。 关于精益求精,大家可以参考这篇博文,它记录了VS Code重新实现Text Buffer的过程,同时也分享了思路历程。正因为产品定位以及团队职责上的高度节制,团队成员才能把时间花在这类问题上,写出经得起考验的代码。

与此同时,较小的团队也使得团队成员做到了行为层面的整齐划一,这点在社区互动上体现得尤为明显,大家可以去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干脆不信任任何人, 把插件们放到单独的进程里,任你折腾,主程序妥妥的。

Visual Studio 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连上去工作,下图说明了它的运行模式:

Visual Studio Code 有哪些工程方面的亮点?使用指南_工程小白常识

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

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

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

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

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

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

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

Visual Studio Code 有哪些工程方面的亮点?使用指南_工程小白常识

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

  1. 进程级别隔离的插件模型

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

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

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

  3. 高效的协议LSP

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

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

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

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

    https://github.com/microsoft/vscode-dev-containers/tree/master/containers

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

最后

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

附送彩蛋一枚,大家留意一下 《 Design Patterns 》 这本书的作者名单。 对,就是他,不谢。

海计划公众号
(0)
上一篇 2020/03/26 23:28
下一篇 2020/03/26 23:28

您可能感兴趣的内容

  • NoderCMS菜鸟知识_使用 Node.js + MongoDB 开发,拥有灵活的内容模型以及完善的权限角色机制

    NoderCMS菜鸟知识 官方网址:http://www.nodercms.com GitHub:https://github.com/welkinwong/nodercms 简介…

    2020/03/08
  • css盒子模型基础入门css全局设置border-box_盒子入门基础

    box-sizing 属性 1.content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    2.border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width,height内的。也就是说,如果你将一个元素的width设为10

    2020/04/03
  • ES7中的装饰器小白教程_装饰器入门指南

    ES7中的装饰器小白教程 装饰器 装饰器(Decorator)是ES7的一个语法,是一种与类相关的语法,用来注释或修改类和类的方法。 装饰器是一种函数,写成 @ + 函数…

    2020/03/20
  • 程序员并不适合创业,请不要无脑崇拜使用教程_创业小白基础

    我曾写过一篇名为 #我是技术男,也曾创业过,也拿过风投……# 的文章,内容主要是讲述我十年前一次创业失败的血泪史,其目的是为了告诫当下年轻一代的技术小伙伴们 “人生苦短,不要创业”。这篇文章发出之后,我粗略统计了下,算上朋友圈的,估计有超过100+的评论或留言,我把这些内容归纳为三种类型:一类是激进分子,他们讽刺我,说我满脑袋 “鸵鸟思想”,创业失败

    2020/03/23
  • webpack打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)使用说明_打包教程视频

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。这篇文章以 vue cli3.0+,webpack4.0+,nodejs10.0+ 这几个版本为例。一、打包分析1.1、速度分析我们的目的是优化打

    2020/03/23
  • 总结移动端H5开发常用技巧入门教程_技巧攻略教程

    html 篇常用的meta属性设置meta对于移动端的一些特殊属性,可根据需要自行设置
    //Android 禁止屏幕旋转
    //全屏显示
    <meta na

    2020/03/20
  • formData详细使用教程入门百科_form入门基础教程

    formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率创建formData对象 var formData=new FormData(form);// 通过append()方法追加数据fo

    2020/03/29
  • META标签的设置小白知识_标签小白攻略

    定义及用法⑴ 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。⑵ 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。⑶元数据(metadata)是关于数据的信息。元数据总是以名称/值的形式被成对传递的。⑷典型的情况是,meta 元素被用

    2020/03/23
  • Vue路由守卫之路由独享守卫使用帮助_路由入门百科

    路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合)在官方定义是这样说的:你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。const router = new VueRouter({routes: [{path:

    2020/03/26
  • 为什么程序员熬夜加班,项目还是会延期?入门基础_项目入门教程

    首先这和你熬夜加班没有半毛线关系,千万别自己感动自己,但凡是互联网项目,出现延期是常有的事情。项目延期之后,一般流程是领导开会,大家讨论,新一任背锅侠,然后下一次还是老样子.项目评审项目初期,评审是最重要的一个环节.这个需求能不能做,那个需求要怎么改,最后给到手的任务预估一个开发时间.初入开发的小白,最好有同事帮衬点,做不到的需求千万别接,不然整个项目都要卡

    2020/03/23
  • js之汉字与Unicode码的相互转化菜鸟攻略_码入门基础教程

    有时候,我们在给后端传递变量的的值中有汉字,可能由于编码的原因,传递到后端后变为乱码了。所以有时候为了省事或者其它特殊要求的时候,会把传递的汉字转换成Unicode编码后再进行传递。当然汉字转换成unicode编码,使用JS的charCodeAt()方法就可以。’好’.charCodeAt(0).toString(16)
    “597d”这段代码的意思是,把字符

    2020/04/06
  • CSS雪碧图(精灵图)使用菜鸟教程网_雪碧图菜鸟教程网

    1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图。2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服务器发送请求,那么请求的次数将大大增加。由此出现了雪碧图的概念3:用处:是一种CSS图像合并技术,方法是将众多小图标合并到同一张图上,用来减轻http请求压力。然

    2020/03/23
  • leanpub入门基础教程_电子书出版发布平台

    leanpub入门基础教程 官方网址:https://leanpub.com/ 简介描述:电子书出版发布平台 leanpub可以轻松编写,发布和销售,正在进行中的和已完成的电子书,…

    2020/03/11
  • 墨刀小白常识_原型设计工具

    墨刀小白常识 官方网址:https://modao.cc/ 简介描述:原型设计工具 墨刀是一款最简洁易用的原型设计工具,让你10分钟设计一个App,具备快速构建移动应用原型与线框图…

    2020/03/06
  • javascript构造函数使用教程_函数入门基础

    1:基本概念提起构造函数,我们需要从JS的创建对象开始,JS的创建对象有两种方式,一种是对象字面量法(把一个对象的属性和方法一一罗列出来),对象字面量法有一个明显的不足在于它不适合批量的或者是构建大量的类似或者重复的对象,由于这个限制也就有了另一种创建方式,构造函数。对象字面量 const person = {name: ‘Eric’,age: 28,

    2020/03/29
  • HTML页面乱码怎么解决?菜鸟教程下载_码基础教程

    HTML页面乱码怎么解决?菜鸟教程下载 HTML文件乱码一般是因为编码格式不匹配造成的,比如:不同编码内容混杂、浏览器不能自动检测网页编码等等;但无论是哪种情况造成乱码,在HTML…

    2020/03/19