关于VSCode的「工具」——这里有你想知道的一切我之前也有写这篇文章的想法，所以就主动报名了。于是就有了今天的这篇文章，一篇详细介绍VSCode的文章。中间参考了很多资料，如有错误请留言指出：）文章主要内容：VSCode概述VSCode介绍VSCode技术路线VSCode技术构成VSCode的努力性能优化VSCode启动速度优化VSCode代码编辑器滚动虚拟化VSCodeShading速度优化VSCode多进程架构后台进程编辑器WindowIO插件进程调试进程搜索进程`VSCode技术架构和核心VSCode技术架构VSCodeCore核心层核心组件核心环境VSCode语言支持VSCode插件系统语言支持Debugger主题/配色方案编辑器辅助扩展命令扩展菜单快捷键VSCode插件开发VSC插件在实际项目中的应用社区中一些有趣的VSC插件VSCode与Git整合Git整合功能介绍GitcommithistoryRecordVSCode远程开发支持的功能需要安装的插件打开远程目录和端口转发VSCode服务器端部署CodeServer下载运行VSCode开发实战我推荐的10款实用插件总结废话不多说，让我们直接开始吧。正文VSCode概述VSCode简介VisualStudioCode（以下简称VSC）是微软公司开发的一款开源、免费、跨平台的代码编辑器。微软希望在保持核心轻量级文本编辑器的同时，为编辑器增加项目支持、智能感知、编译调试等功能。VSC的前身是微软的云编辑器项目：Monacoeditor，作为微软云服务的一部分，提供了在线编辑源代码的能力。VSCTeam由Eclipse之父《设计模式》的作者之一著名工程师ErichGamma带领，拥有多年IDE开发经验。由于云编辑器的各种局限性，以及近年来微软对Windows以外平台的态度转变，微软决定将其扩展开发为全平台通用的代码编辑器。VSCode技术路线VSCode使用Electron，使用的代码编辑器叫做Monaco。在语言方面，VSCode使用HTML、CSS、TypeScript进行开发，Electron作为构建工具。从实现的角度来看：Electron=Node+Chromium+NativeAPI意味着Electron拥有一个Node运行环境，让用户能够与系统底层进行交互。依托Chromium提供基于Web技术（HTML、CSS、JS）的界面交互支持，同时也具备一些平台特性，比如桌面通知。VSCode技术由Electron组成。为了保护本地文件的安全，浏览器不提供对本地文件的直接访问。为了访问本地文件系统，VSC使用了Github的开源项目Electron。Electron，原名Atom-Shell，是Github为Atom编辑器编写的开源框架。它完美整合了Chromium和Node.js，让开发者可以使用HTML实现AppUI，使用Node.jsAPI访问文件系统。TypeScriptVSC的主要代码是用TypeScript编写的。目前VSC的核心有1100多个TS文件。TypeScript的语言优势为多次重构提供了保障。纯DOM操作为了保证UI响应速度，VSC没有使用现有的UI库，大部分UI采用绝对尺寸，简单粗暴的避免了大面积UI的联动刷新。VSCode努力优化性能VSCode团队为提高VSC的性能做了大量工作。VSCode的启动速度针对基于HTML技术的编辑器进行了优化。由于Chrome的限制，普遍存在启动速度慢的问题。除了基本的JS/CSS合并压缩，VSC还将特别常用的ActivityBar图标直接嵌入到css中。但即便如此，启动速度和SublimeText等编辑器还是有很大差距。这是一个技巧。当我们使用VSC打开一个文件时，VSC默认会启动一个新的VSC窗口，这个窗口需要很长时间才能启动。我们可以通过在全局设置项中设置window.openFilesInNewWindow:false来使用打开的文件。您计算机的VSC实例会打开新文件，因此几乎没有等待时间。VSCode代码编辑器滚动虚拟化，让编辑器只渲染可见部分，减少编辑大文件时浏览器的压力。同时配合csstranslate3d，避免没有变化的代码行重复渲染。VSCode着色速度优化为了不重复造轮子，VSC使用了与TextMate相同的代码着色分析语法。它是一套基于正则表达式的分析解决方案。虽然JS原生支持正则表达式，但是为了更高的效率，VSC使用了一套用C++编写的正则表达式引擎来提高效率。上面提到的VSCode多进程架构只是一些小的优化。真正保证响应速度的是多进程架构带来的优势。VSC采用多进程架构。VSC启动后主要有以下几个进程：后台进程编辑器window-后台进程启动，多进程架构写的UIActivitybarViewletsPanelsStatusbarNodejsHTML异步IOFileServiceConfigurationService插件宿主进程插件实例插件子进程-such作为TS语言服务插件实例调试进程搜索进程编辑器窗口后台进程后台进程是VSC的入口，主要负责管理编辑器生命周期、进程间通信、自动更新、菜单管理等。当我们启动VSC，后台进程会先启动，读取各种配置信息和历史记录，然后将这些信息和主窗口UI的HTML主文件路径整合成一个URL，启动一个浏览器窗口来显示编辑器的UI。后台进程会一直关注UI进程的状态。当所有的UI进程都关闭后，整个编辑器就会退出。另外，后台进程也会打开一个本地的Socket。当一个新的VSC进程启动时，它会尝试连接这个Socket，并将启动参数信息传递给它，现有的VSC会执行相关动作，这样可以保证VSC的唯一性，避免多个文件夹带来的问题。编辑器窗口编辑器窗口进程负责整个UI的显示。也就是我们看到的部分，UI都是HTML写的，需要介绍的部分不多。IO项目文件的读取和保存是通过主进程的NodeJSAPI完成的，因为所有操作都是异步的，即使有比较大的文件也不会阻塞UI。IO和UI在同一个进程，采用异步操作，在保证IO性能的基础上保证了UI的响应速度。插件进程每个UI窗口都会启动一个NodeJS子进程作为插件的宿主进程。所有插件将在此过程中一起运行。这样设计的主要目的是为了避免复杂的插件系统阻塞UI响应。这从JS和浏览器开始。在大多数操作系统中，显示器的刷新率为每秒60帧，这意味着应用程序需要在16.7毫秒内完成所有计算和UI刷新。HTMLDOM的速度一直饱受诟病，留给JS的时间就更少了。所以，所有的指令都必须在这么短的时间内完成，才能保证UI的响应性。但实际上，我们很难在这么短的时间内完成给10000行代码上色这样的任务。这就需要我们把这个耗时任务转移到其他线程或者进程中，等这个耗时任务结束后再把结果返回给UI进程。在最新版本的VSC中，所有语言支持都已更改为插件。包括之前在UI流程中使用WebWorker实现的Markdown语言支持。稍后我将介绍一个典型的语言服务是如何工作的。但是把插件放在单独的进程中也有明显的缺点，因为是单独的进程，不是UI进程，所以没办法直接访问DOM树，实时更改UI变得困难并且高效。在VSC的扩展中，系统中几乎没有用于扩展UI的API。调试过程Debugger插件与普通插件略有不同。它不运行在插件进程中，而是每次调试都会被UI打开一个新的进程。搜索进程搜索是一个非常耗时的工作，VSC也使用了一个单独的进程来实现这个功能，以保证主窗口的效率。将耗时任务分成多个进程，有效保证主进程的响应速度。VSCode技术架构和核心VSCode技术架构分层架构值得学习。源码目录结构VSCodecorecorelayerbase：提供通用服务，构建用户界面平台：注入服务和基础服务Codeeditor：MicrosoftMonacoeditor，也可以独立运行使用wrokbench：与Monaco合作，提供viewlets框架：如：浏览器状态栏和菜单栏使用electron实现桌面程序的核心组件Electron：原名AtomShell，是Github开发的一个开源框架。MomacoEdictor：VSC的核心组件。Typescript：Javascript的严格超集。LanguageServerProtocol：语言服务器，提供自动补全、定义跳转、代码格式化等与编程语言相关的功能。DegugAdapterProtocol：DAP是一种基于JSON的协议，它抽象了开发工具和调试工具之间的通信。xterm.js：是使用TS开发的前端组件，将完整的终端功能带入浏览器，可以与bash等进程对接。这里简单演示一下LSP和DAP：structurewithoutDAP：structurewithDAP：再次体现了分层的思想。整个项目的核心环境完全使用typescript实现。主进程和渲染进程运行在electron中，使用的API不同。所以core中各个目录的组织方式也是按照使用的API来安排的。运行环境分为几类：common：只使用javascritpapi代码，可以在任何环境下运行browser：浏览器api，比如运行dom；可以调用commonnode:需要用到nodeapi,比如文件io操作electron-brower:渲染进程api,可以调用common,brower,node,依赖electronrenderer-processAPIelectron-main:主进程api,可以调用:common,node依赖于electron主进程APIVSCode语言支持VScode支持几乎所有的主流编程语言。对于JS、TS、CSS、HTML、VScode提供了开箱即用的支持，但对于其他语言，则需要安装相应的插件。目前下载量最多的语言插件排行榜：VSCode插件系统插件系统对于VSC来说非常重要。为什么？在早期版本中，VSC没有插件系统，仅支持TypeScript、JavaScript和C#的intellisense，以及其余40种语言的代码着色。所以VSC才出现在微软技术社区。2015年12月，VSC发布了第一个支持扩展的版本。很快就支持许多其他语言，例如Go、C++、Java、Python、Ruby。因此，VSC以核心编辑器的极速体验和良好的扩展性实现了。语言支持VSC开发了完??整的语言支持系统，以方便支持新的编程语言。代码编辑器需要哪些功能来支持新语言？代码显示代码着色Intellisense代码提示代码跳转鼠标触摸提示查找引用错误提示代码修改自动完成重构功能兼容TextMate的代码着色分析可以简单将TextMate的语言着色配置文件复制到插件中指定包.json。语言支持通用协议VSC约定通用通信协议支持多种语言由于VSC采用多进程架构，语言开发者可以使用自己熟悉的语言为该语言编写语言服务，VSC将使用JSON-RPC的通信方式与语言服务通信，执行用户命令，获取结果。调试器类似于语言服务。VSC开放了一套通用的协议来满足不同语言平台的调试需求。主题/配色方案VSC使用与TextMate相同的配色方案文件格式。编辑辅助VSC提供编辑器操作API，可以实时获取用户输入点和当前文件代码。因此，可以根据用户当前的文档来确定可以提供的快捷操作。例如，自动添加不存在的方法等。扩展命令开发者可以在插件中定义自己的命令，这些命令会出现在“命令面板”中。开发者可以通过ctrl/cmd+shift+p或F1调用这些命令来完成复杂的操作。插件可以使用所有的NodeJSAPI，配合各种NodeJS库完成非常有想象力的功能。扩展菜单VSC提供了文件管理器菜单、编辑器菜单、文件标题菜单扩展点。方便开发者在不同的上下文中操作。快捷键开发者可以为各种自定义操作分配快捷键。VSCode插件开发VSC插件开发文档：https://code.visualstudio.com...Wing插件开发文档：http://developer.egret.com/cn...VSC的使用实际项目中的插件使用VSCPlug-ins，我们可以为项目定制一些效率工具，比如：MyStock一键下载翻译插件这是我写的一个快速下载翻译资源的插件。WMS翻译自动为隔壁项目生成插件，快速生成翻译密钥的插件：社区里有一些比较有意思的VSC插件。VSCode与Git整合Git整合功能介绍VisualStudioCode自带对Git的支持。需要安装Git版本2.0.0（及更高版本）。主要功能如下：在行号槽显示正在编辑的文件的变化。Git状态栏（位于左下角）将显示当前分支。编辑指示器和未提交或未拉取的提交数量可以在编辑器中完成。常用的Git操作：初始化仓库克隆仓库创建新分支并打标签临时存储和提交变更推送/拉取/同步远程分支解决合并冲突查看比较点击克隆仓库，在弹出的窗口中输入Git远程仓库地址up框：提交修改并推送到远程仓库（更多支持的Git命令见下图）：Git提交历史使用git时，经常需要查看修改记录，或者需要查看谁提交了什么文件等等。当然，你可以把它存放在git检查代码的目录，但是这样很不方便。如果使用vscode编辑工具编写，可以安装一个githistory工具包，如图：然后重启vscode，选择任意文件或文件夹，右击可以看到git:history选项卡。点击弹出GitHistory页面，如下图：VSCode远程开发支持的功能VSCode用于远程开发，可以支持在物理机、容器、WindowsSubsystemforLinux上进行无缝远程开发（WSL），并且可以做到：部署相同的操作系统进行开发，或者使用更大或更专业的硬件将开发环境作为沙箱使用，以免影响本地电脑配置，让新手容易上手，并让每个人都处于一致的开发环境中使用原始本地环境不可用的工具或运行时，或管理它们的多个版本在WSL中开发Linux应用程序从多台不同的计算机访问现有的开发环境调试在其他地方运行的应用程序（例如客户站点或thecloud）通过SSH连接到本地虚拟机，模拟远程开发的操作过程。使用VSCode远程连接服务器的原理如下。VSCode将在远程主机上运行一个服务器，并通过SSH在本地连接到远程服务器。需要安装的插件在VSCode扩展页面搜索：Remote-SSH安装Remote-SSH扩展后，会在最左边看到一个新的状态栏图标：远程状态栏图标可以快速显示VSCode在哪个上下文中运行（本地或远程），点击这个图标或者点击F1键然后输入Remote-SSH，就会弹出Remote-SSH的相关命令。选择Remote-SSH:ConnecttoHost命令，然后按照以下格式输入远程主机的连接信息，连接主机：user@hostname，然后根据提示输入登录密码。VSCode将打开一个新窗口，然后您将看到“VSCode服务器”正在SSH主机上初始化的通知，一旦在远程主机上安装了VSCode服务器，它就可以运行扩展并与本地VSCode实例通信。您可以通过查看状态栏中的指示器来判断您已连接到虚拟机，该指示器显示虚拟机的主机名。一旦连接到远程SSH主机，您就可以与远程机器上的文件进行交互。如果你打开集成终端，你会发现你现在在远程Linux下。使用端口转发打开远程目录您现在可以使用bashshell浏览远程主机上的文件系统，还可以使用文件>打开文件夹浏览和打开远程目录上的文件夹。另外，如果我们在开发一个WEB应用，为了能够浏览到远程主机上的应用，我们可以使用另外一个端口转发功能来实现。在VSCode服务器端部署CodeServer下载并运行Coder-server项目部署在远程服务器上，你可以随时随地打开浏览器编写代码。操作步骤如下：ssh到服务器下载二进制版的code-serverwgethttps://github.com/cdr/code-s...unpacktar-xvzfcode-server-3.9.0-linux-amd64.tar.gz重命名mvcode-server-3.9.0-linux-amd64.tar.gzcode-serveroperation:cdcode-serverexportPASSWORD="password"&&./bin/code-server--port8080--host0.0.0.0说明：如果不指定密码，默认生成一个，运行后可以看到--port指定运行的端口--host0.0.0.0默认为127.0.0.1，只能在本地访问。外网访问必须改成0.0.0.0。效果如下（与本地VSCode界面基本一致，只是无法在线安装扩展）：可以联网，可以调试代码。安全性高：有时候你可能不用电脑，但又要完成一些分配给你的任务，你可以从git仓库中pull代码到当前电脑来完成，但是可能会留下一些你想留下的记录，云编码可以确保您不留下任何痕迹。方便调试：因为代码运行在服务器环境，如果这个服务器恰好是你使用的服务器，所见即所得，后续代码部署不需要解决环境兼容问题。统一性高：有时你可能需要多个团队在同一个区域开发代码，但你的队友可能有完全不同的环境，甚至会因为环境配置而拖慢项目进度。这时候创建多个账号，分给队友。服务器上的云编程可以完美解决这个问题。code-server的缺点：对云服务器的要求非常高：不仅是内存和CPU，还有网络带宽。而且运行代码的加载时间相比本地vscode也有所延迟。没有网络就无法编写代码：因为它是基于浏览器与服务器之间的交互，所以没有网络就无法打开网页。无法编写太大的项目：vscode本身就是一个轻量级的ide。如果你想开发一个特别大的网站，你必须使用其他IDE。原生支持的开发插件更全面。无法调试图形页面：也不是完全无法调试，可以通过浏览器访问，但是这需要你的服务器上有更多的带宽，代价是更高的延迟，也许你只是想写一个html页面，但是每次写几行就想预览一下效果，但是code-server需要等半天才能从服务器发送页面，这绝对不是本地访问可以比的。VSCode开发实践前端实用插件推荐AutoCloseTagBracketPairColorizerESLint...GitLensImportCostPrettierPeacockSvgviewerIndent-rainbowReloadSummaryVSCode是我们离不开的工具，它还有很多值得探索的地方，期待你的加入发现。以上就是本文的全部内容，希望对您有所帮助。如有错误，请指正，谢谢。如果觉得内容有帮助，可以关注我的公众号，及时了解最新动态，共同学习！参考资料https://www.electronjs.org/do...https://zhuanlan.zhihu.com/p/...http://imzc.me/dev/2016/08/15...http：//imzc.me/dev/2016/08/16...https://codeteenager.github.i...https://segmentfault.com/a/11...
