VSCode工程方面的亮点有哪些?

VSCode工程方面的亮点有哪些?

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

相关推荐:《vscode基础教程》

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

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

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

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

https://link.zhihu.com/?target=https%3A//www.youtube.com/watch%3Fv%3DVs3AGfeuNKU

1.jpg
       视频截图 – Erich阐述了VS 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干脆不信任任何人,把插件们放到单独的进程里,任你折腾,主程序妥妥的。

2.jpg
   插件与主进程隔离

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会发送一个’这篇博文0’请求给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连上去工作,下图说明了它的运行模式:

3.jpg

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

响应迅速:VSCRD所有的交互都在本地UI内完成,响应迅速;远程桌面由于传输的是截屏画面,数据往返延迟很大,卡顿是常态沿用本地设置:VSCRD的UI运行在本地,遵从所有本地设置,所以你依然可以使用自己所习惯的快捷键、布局、字体,避免了工作效率层面的开销数据传输开销小:远程桌面传输的是视频数据,而VS Code传输是操作请求和响应,开销与命令行相仿,卡顿的情况进一步改善第三方插件可用:在远程工作区里,不仅VS Code的原生功能可用,所有第三方插件的功能依然可用;远程桌面的话,你得自己一个个装好远程文件系统可用:远程文件系统被完整映射到本地,这个两者差不多

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

4.jpg

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

进程级别隔离的插件模型
Extension Host(也就是图中的VS Code Server)与主程序做到了物理级别的分离,那么把Extension Host在远程或者本地跑没有本质的区别UI渲染与插件逻辑隔离,整齐划一的插件行为
所有的插件的UI都由VS Code统一渲染,所以插件里面只有纯业务逻辑,行为高度统一,跑在哪里都没区别高效的协议LSP
VS Code的两大协议LSP、这篇博文2都非常精简,天然适合网络延迟高的情况,用在远程开发上再适合不过

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

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

开发环境配置起来很繁琐,比如物联网开发,需要自己安装和配置各种工具和插件。在VSCRD里,一个远程工作区的模板即可搞定,如需安装额外的工具,也就是改改Dockerfile的事情,非常简单。这篇博文3。本地机器太弱,某些开发搞不了,比如机器学习,海量数据及和计算需求需要非常好的机器。在VSCRD里,可以直接操作远程文件系统,使用远程计算资源。

最后

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

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

更多编程相关知识,请访问:这篇博文4!!

以上就是VSCode工程方面的亮点有哪些?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/62302.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月11日 05:50:58
下一篇 2025年11月11日 06:16:26

相关推荐

  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • 为什么在 React 组件中无法获得 Tailwind CSS 语法提示?

    为什么在 React 组件中无法获得 Tailwind CSS 语法提示? 你在 VSCode 中编写 HTML 文件时,可以正常获取 Tailwind CSS 语法提示。但当你尝试在 React 组件中编写 Tailwind CSS 时,这些提示却消失不见了。这是什么原因造成的? 解决方案 要解决…

    2025年12月24日
    000
  • 如何在 VSCode 中为 React 组件启用 Tailwind CSS 提示?

    在 vscode 中为 react 组件启用 tailwind css 提示 如果你在使用 vscode 编写 react 组件时,发现 tailwind css 提示无法正常显示,这里有一个解决方法: 安装 tailwind css intellisense 插件 这是实现代码提示的关键,确保你已…

    2025年12月24日
    200
  • Vue3 中如何将页面上的 PX 单位转换为 REM?

    vue3 下如何实现某个页面 px 自适应到 rem? 在 vue3 中,您可以在某个页面中使用 px 转 rem 的自适应功能,以免影响其他项目 ui 框架。以下是实现方法: 使用 jquery 获取页面宽度,并将其作为基准值。例如,使用 375 作为基准,您可以在页面 mounted 生命周期函…

    2025年12月24日
    000
  • 如何实现 Vue 3 项目中特定页面自适应,避免影响全局 UI 框架?

    自适应页面 px 到 rem 插件探索 在 vue 3 项目中,开发者有时需要让某个特定页面具有自适应大小,即根据不同分辨率自动调整 px 到 rem 的转换。然而,传统的 px-to-rem 插件可能会影响整个项目的 ui 框架。 为了解决这个问题,这里提供了一种利用 javascript 和 v…

    2025年12月24日
    000
  • Vue 3 页面如何实现 px to rem 自适应?

    如何在 vue 3 页面中实现 px to rem 自适应? 在 vue 项目中,有时需要让特定的页面进行 px to rem 自适应,以实现自动缩放。以下是一个可用的解决方案: 使用 javascript 获取页面宽度,并以 375px 作为基准值。例如: let appwidth = $(‘#a…

    2025年12月24日
    400
  • CSS 砌体 Catness

    css 就像技术中的其他东西一样 – 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3,也称为 css masonry 布局。 theo 制作了一段视频,介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。 所有这些让我很高兴尝试 css 砌体! webkit…

    好文分享 2025年12月24日
    000
  • 如何解决VSCode中折叠部分的代码复制问题?

    Vscode中折叠代码的复制方法 当Vscode中的代码过多时,可以将其折叠起来以方便查看和编辑。不过,有时用户可能会发现折叠后复制代码时只复制了显示的部分,而折叠部分没有被复制。以下是如何解决此问题的方法: 使用快捷键Ctrl+C直接复制 当代码折叠时,直接使用Ctrl+C快捷键复制即可复制所有代…

    2025年12月24日
    000
  • 如何复制折叠的代码?

    Visual Studio Code 中如何复制折叠的代码? Visual Studio Code (vscode) 中,当遇到过长的代码时,为了提高可读性和简洁性,开发人员会经常使用折叠功能将代码折叠起来。然而,在折叠代码后,直接按住 Ctrl + C 复制代码时,只会复制展开的部分,而折叠的部分…

    2025年12月24日
    000
  • 如何在 VSCode 复制折叠的代码?

    如何复制折叠的 VSCode 代码 使用 VSCode 时,代码过长可能会造成不便。在折叠代码后,发现无法正常复制折叠的部分,令人感到烦恼。本文将介绍一种解决方案,帮助你轻松复制折叠的 VSCode 代码。 问题:如何复制折叠起来的 VSCode 代码? 当你折叠代码后,直接选中复制只会复制未折叠的…

    2025年12月24日
    000
  • CSS 太棒了!

    我正在学习什么 css 赋予了页面活力。多年来,css 变得越来越强大,并且已经开始用于制作以前需要 javascript 的动画。本周我一直在研究它的一些更高级的属性。 媒体查询 媒体查询几乎已经成为新时代设备的必需品。随着智能手机的出现,通过手机消费媒体的人比任何其他设备都多。因此,网站必须在移…

    2025年12月24日
    000
  • 试验 Tailwind CSS:快速指南

    tailwind css 是一个实用性优先的 css 框架,因其灵活性和易用性而在 web 开发人员中广受欢迎。 tailwind css 在 npm 上的每周下载量超过 950 万次(2024 年 8 月 5 日),显然它是 web 开发社区的最爱。在这篇博文中,我们将探讨如何在不设置本地开发环境…

    2025年12月24日
    000
  • VSCode如何使用HTML插件_高效开发环境配置【技巧】

    VSCode中HTML开发需配置五项功能:一、启用内置HTML语言支持;二、配置Emmet实现快捷展开;三、安装Live Server插件实现自动刷新预览;四、启用Auto Rename Tag同步修改成对标签;五、配置Prettier实现HTML格式自动化。 如果您在VSCode中编写HTML文件…

    2025年12月23日
    000
  • 怎么在vscode中运行html_vscode运行html文件步骤【教程】

    使用Live Server插件可实现实时预览,安装后右键HTML文件选择Open with Live Server即可在浏览器中自动打开并实时刷新页面。 如果您在使用 VSCode 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速预览和运行 HTML 文件。以下是具体的操作步骤: …

    2025年12月23日
    000
  • 怎么进入html5编辑_用VSCode/记事本打开.html文件即可进入HTML5编辑【进入】

    最直接编辑HTML5文件的方式是用文本编辑器打开.html文件:一、VSCode右键打开或拖拽加载;二、记事本右键打开并设UTF-8编码;三、VSCode命令面板快速搜索打开。 如果您希望对HTML5文件进行编辑,最直接的方式是使用文本编辑器打开已有的.html文件。以下是具体操作步骤: 一、使用V…

    2025年12月23日
    000
  • vscode设置html5环境_插件配置与代码片段设置【教程】

    若VS Code中HTML文件缺乏语法高亮、智能补全及HTML5结构快速生成,需安装Auto Close Tag、Auto Rename Tag、CSS class IntelliSense和HTML Boilerplate插件,启用Emmet并配置html关联与格式化设置。 如果您在 Visual…

    2025年12月23日
    000
  • 怎么在vscode运行html_vscode运行html步骤【指南】

    答案:在VSCode中运行HTML需安装Live Server扩展。1. 创建并保存HTML文件;2. 安装Ritwick Dey开发的Live Server插件;3. 右键选择“Open with Live Server”即可在浏览器中实时预览,修改后自动刷新。 在 VSCode 中运行 HTML…

    2025年12月23日
    000
  • vscode怎么编译运行html_vscode编译运行html步骤【指南】

    使用Live Server插件可实时预览HTML页面,安装后右键选择Open with Live Server即可在浏览器中查看并支持热重载。 如果您在使用 Visual Studio Code 编辑 HTML 文件,但无法查看页面效果,可能是因为缺少正确的运行环境或配置。以下是几种在 VSCode…

    2025年12月23日
    000
  • vscode怎么运行html代码框架_vscode运行html框架方法【教程】

    使用Live Server插件可快速预览HTML,安装后右键选择“Open with Live Server”即可在浏览器中实时查看页面效果。 如果您在使用 Visual Studio Code 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速运行并预览 HTML 代码。以下是几种…

    2025年12月23日
    000
  • vscode运行html慢怎么办_解vscode运行html慢问题【技巧】

    使用Live Server插件启动本地服务器预览HTML,禁用非必要扩展以释放资源,优化大体积静态文件引入方式,清除浏览器缓存并切换至高性能浏览器,调整VSCode自动保存与文件监听设置,可显著提升加载速度。 如果您在使用VSCode运行HTML文件时发现加载或预览速度较慢,可能是由于插件配置、浏览…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信