以前部门想要统一代码编辑器, 最后决定统一用 VS Code。css
我以前也有写这篇文章的想法,因而就主动报了名。html
因此就有了今天这篇,一篇详细介绍 VS Code 的文章。前端
中间参考了很多资料,若有错误,欢迎留言指出 :)java
文章主要内容:node
VS Code 概览
linux
`VSCode 技术架构与核心git
VSCode 核心github
VS Code 语言支持
VS Code 插件系统
web
VS Code 插件开发
正则表达式
VS Code 与 Git 集成
VS Code 远程开发
VS Code 服务器端部署
VS Code 开发实践
总结
废话很少说,咱们直接开始吧。
VS Code 概览
Visual Studio Code (下面简称VSC) 是由微软公司开发的开源、免费、跨平台
的代码编辑器。
微软但愿它在保持核心轻量化文本编辑器
的基础上,为编辑器添加项目支持
、智能感知
和编译调试
。
VSC 的前身是微软基于云端的编辑器项目:Monaco 编辑器
,它做为微软云服务的一部分,提供在线编辑源代码的能力。
VSC Team 由著名工程师 Erich Gamma 领导,Erich 是《设计模式》做者之一,Eclipse 之父,拥有多年的 IDE 开发经验。
因为云端编辑器的种种限制,和微软近年来对Windows外平台的态度转变,微软决定由它扩展开发为一个全平台通用的代码编辑器。
VSCode 采用了 Electron,使用的代码编辑器名为 Monaco
。
在语言上,VSCode 使用了 HTML,CSS,TypeScript 进行开发,使用 Electron
做为构建工具。
从实现上来看:
Electron
= Node
+ Chromium
+ Native API
也就是说 Electron 拥有 Node 运行环境,赋予了用户与系统底层进行交互的能力。
依靠 Chromium
提供基于 Web 技术(HTML、CSS、JS)的界面交互支持,另外还具备一些平台特性,好比桌面通知等。
为了保护本地文件的安全性,浏览器都没有提供直接的本地文件访问权限。
为了实现本地文件系统的访问,VSC 采用了 Github 的开源项目 Electron。
Electron 原名 Atom-Shell
,是 Github 为 Atom 编辑器编写的一个开源框架。
它将 Chromium 和 Node.js 完美融合,让开发者能用使用 HTML 来实现 App UI,用 Node.js API 来访问文件系统。
VSC 的主要代码都是用 TypeScript 编写,目前 VSC 的核心有 1100 多个 TS 文件,TypeScript 的语言优点为屡次重构提供了保障。
为了保证 UI 响应速度,VSC 没有采用现有的 UI 库,大部分 UI 采用绝对尺寸,简单粗暴的避免大面积 UI 的联动刷新。
VS Code team 作了不少工做来提升 VSC 的性能。
基于 HTML 技术的编辑器,受限于 Chrome 通常都会有启动速度慢的问题。
除了基本的 JS / CSS 合并压缩外,VSC 还将特别经常使用的 ActivityBar icon 直接内嵌在了 css 中。
可是即使如此,启动速度跟 Sublime Text 等编辑器仍是有比较大的差距。
这里说一个技巧,当咱们用 VSC 打开一个文件的时候,VSC 会默认启动一个新的 VSC 窗口,这样启动的时间比较长,咱们能够经过设置全局设置项里的 window.openFilesInNewWindow: false
来使用已经打开的 VSC 实例打开新文件,这样就几乎没有了等待的时间。
让编辑器只渲染可见的部分,减少大文件编辑对浏览器的压力。
同时配合 css translate3d
, 避免重复渲染没有改变的代码行。
为了避免重复发明轮子,VSC 采用了跟 TextMate 同样的代码着色分析语法。
它是基于正则表达式的一套分析方案,虽然 JS 原生支持正则表达式,但为了更高的效率,VSC 使用了 C++
编写的一套正则表达式引擎来提升效率。
前面讲的这些都只是一些小的优化,真正保证响应速度的仍是多进程架构
带来的优点。
VSC 采用多进程架构,VSC 启动后主要有下面的几个进程:
编辑器窗口 - 由后台进程启动,也是多进程架构
HTML 编写的 UI
Nodejs 异步 IO
插件宿主进程
插件实例
后台进程是 VSC 的入口,主要负责管理编辑器生命周期,进程间通讯,自动更新,菜单管理等。
咱们启动 VSC 的时候,后台进程会首先启动
,读取各类配置信息和历史记录
,而后将这些信息和主窗口 UI 的 HTML 主文件路径整合成一个 URL,启动一个浏览器窗口来显示编辑器的 UI。
后台进程会一直关注 UI 进程的状态,当全部 UI 进程被关闭的时候,整个编辑器退出。
此外后台进程还会开启一个本地的 Socket
,当有新的 VSC 进程启动的时候,会尝试链接这个 Socket,并将启动的参数信息传递给它,由已经存在的 VSC 来执行相关的动做,这样可以保证 VSC 的惟一性,避免出现多开文件夹带来的问题。
编辑器窗口进程负责整个 UI 的展现。
也就是咱们所见的部分, UI 所有用 HTML 编写没有太多须要介绍的部分。
项目文件的读取和保存由主进程的 NodeJS API 完成,由于所有是异步操做,即使有比较大的文件,也不会对 UI 形成阻塞。
IO 跟 UI 在一个进程,并采用异步操做
,在保证 IO 性能的基础上也保证了 UI 的响应速度。
每个 UI 窗口会启动一个 NodeJS 子进程做为插件的宿主进程。全部的插件会共同运行在这个进程中。
这样设计最主要的目的就是: 避免复杂的插件系统阻塞 UI 的响应
。这要从JS和浏览器提及。
在大部分的操做系统中,显示器的刷新频率是 60
帧每秒,也就是说应用须要在 16.7 毫秒
内完成全部的计算和 UI 刷新。
HTML DOM 的速度向来为人诟病,留给JS的时间就更少了。因此要在这么短的时间内完成全部指令才能保证 UI 的响应速度。
可是事实上咱们很难在这么短的时间内完成诸如对一万行代码进行着色这种任务。这就须要咱们将这种耗时比较长的任务转移到其余的线程或进程
来作,等耗时任务结束,再将结果返回给 UI 进程便可。
VSC 最近的版本中, 将全部的语言支持都改为了插件
。包括以前在 UI 进程用 Web Worker 实现的 Markdown 语言支持。后面我会介绍一个典型的语言服务的工做方式。
可是将插件放在一个单独进程也有很明显的缺点,由于是一个单独的进程,而不是 UI 进程,因此没有办法直接访问 DOM 树,想要实时高效的改变 UI 变得很难,在 VSC 的扩展体系中几乎没有对 UI 进行扩展的 API。
Debugger 插件跟普通的插件有一点区别,它不运行在插件进程中
,而是在每次 debug 的时候由UI单独新开一个进程
。
搜索是一个十分耗时的任务,VSC 也使用的单独的进程来实现这个功能,保证主窗口的效率。
将耗时的任务分到多个进程中
,有效的保证了主进程的响应速度
。
分层架构值得咱们好好学习。
base
: 提供通用服务和构建用户界面platform
: 注入服务和基础服务代码editor
: 微软 Monaco 编辑器,也可独立运行使用wrokbench
: 配合 Monaco 而且给 viewlets 提供框架:如:浏览器状态栏,菜单栏利用 electron 实现桌面程序Electron
: 原名 Atom Shell, 是由Github 开发的开源框架。Momaco Edictor
: VSC 最核心的组件。Typescript
: Javascript 的严格超集。Language Server Protocol
: 语言服务器, 提供了诸如自动补全, 定义跳转,代码格式化等与编程语言相关的功能。Degug Adaptor Protocol
: DAP 是一个基于JSON 的协议, 他抽象了开发工具与调试工具之间的通讯。Xterm.js
: 是一个使用TS 开发的前端组件, 它把完整的终端功能带入了浏览器,可能够与bash这样的进程相链接。这里简单展现一下 LSP 和 DAP :
没有 DAP 的结构:
具有 DAP 的结构:
又一次体现了分层的思想。
整个项目彻底使用 typescript 实现,electron 中运行主进程和渲染进程,使用的 api 有所不一样,因此在 core 中每一个目录组织也是按照使用的 api 来安排。
运行的环境分为几类:
common
: 只使用 javascritp api 的代码,能在任何环境下运行browser
: 浏览器 api, 如操做 dom; 能够调用 commonnode
: 须要使用 node 的 api,好比文件 io 操做electron-brower
: 渲染进程 api, 能够调用 common, brower, node, 依赖electron renderer-process APIelectron-main
: 主进程 api, 能够调用: common, node 依赖于electron main-process APIVS Code 语言支持
VS code 几乎支持全部主流的编程语言。
对于JS, TS, CSS, HTML, VS code 提供了开箱即用的支持, 但对于其余语言来讲, 则须要安装相应的插件。
目前下载量最高的语言插件排行:
VS Code 插件系统
插件系统对 VSC 相当重要。
为何 ?
在早期的版本中 VSC 并无插件系统,只支持 TypeScript、JavaScript和C#的智能感知, 还有其他40中语言的代码着色。
因此 VSC 只是出如今微软技术的社区中。15 年 12 月份,VSC 发布了第一个支持扩展的版本。
不久以后就出现了许多其余语言的支持,好比 Go 语言、C++、Java、Python、Ruby。
因此说有了核心编辑器的极速体验
,加上良好的扩展能力
才成就了 VSC。
VSC 制订了一套完善的语言支持体系,方便支持新的编程语言。
一个代码编辑器须要哪些功能来支持一种新语言?
代码显示
智能感知
代码修改
能够简单的将 TextMate 的语言着色配置文件拷贝到插件中,并在 package.json 中指定便可。
VSC 约定了一种通用的通讯协议来支持多种语言
因为 VSC 采用多进程的架构,语言的开发者可使用本身熟悉的语言编写这门语言的语言服务,VSC 将采用 JSON-RPC 通讯的方式跟语言服务沟通,执行用户命令,获取结果。
同语言服务相似,VSC 开放了一组通用协议来知足不一样语言不通平台的调试需求。
VSC 采用了跟 TextMate 相同的配色方案文件格式。
VSC 提供了编辑器操做 API,你可以实时获取用户输入点、当前文件代码。从而能够根据用户当前文档肯定能够提供的快捷操做。好比自动添加不存在的方法等。
开发者能够在插件中定义本身的命令,这些命令会出如今“命令面板” 中,开发者能够经过 ctrl/cmd + shift + p
或 F1
来调用这些命令,完成复杂的操做。
插件可使用全部的 NodeJS API,配合各类 NodeJS 库,可以完成很是有想象力的功能。
VSC 提供了文件管理器菜单,编辑器菜单,文件标题菜单扩展点。方便开发者针对不一样的上下文进行操做。
开发者能够为各类自定义操做
指定快捷键。
VS Code 插件开发
VSC 插件开发文档: https://code.visualstudio.com...
Wing 插件开发文档: http://developer.egret.com/cn...
利用 VSC 插件,咱们能够为项目定制一些效率工具, 好比:
这个是我写的快捷下载翻译资源的插件。
隔壁项目的, 快捷生成翻译key的插件:
还有不少,就不一一列出来了。
VS Code 与 Git 集成
Visual Studio Code 自带对 Git 的支持。
须要已经安装好 2.0.0(及以上)版本的 Git。
主要功能以下:
可以在编辑器内完成经常使用的 Git 操做:
点击克隆存储库
,在弹出框输入Git远程库地址
:
提交修改并推送到远程仓库(更多支持的Git命令见下图):
在使用git的时候,常常须要查看修改记录,或者须要查看谁提交了什么文件等,固然能够到存放git代码的目录查看,但这样很不方便,若是使用vscode编辑工具写的话,能够安装一个 git history 的工具包,如图:
而后重启 vscode
,选择任何一个文件或者文件夹,右键
就能够看到git:history
标签了。
点击弹出Git History页面,以下图:
VS Code 远程开发
VS Code 用来作远程开发,能够支持在物理机、容器以及Windows Subsystem for Linux(WSL)上实现无缝远程开发,能够作到:
下面是经过SSH来链接本地虚拟机,模拟远程开发的操做流程。
使用VS Code 远程链接服务器的原理以下,VS Code 会在远程主机上运行一个Server,本地经过SSH链接到远程服务器。
在VS Code 扩展页面搜索: Remote - SSH
安装了 Remote - SSH 扩展后,你会在最左边看到一个新的状态栏图标
:
远程状态栏图标能够快速显示 VS Code 在哪一个上下文中运行(本地或远程),点击该图标或者点击 F1 按键而后输入Remote-SSH 便会弹出 Remote-SSH 的相关命令。
选择 Remote-SSH: Connect to Host
命令,而后按如下格式输入远程主机的链接信息,链接到主机:user@hostname,而后根据提示输入登陆的密码。
VSCode 将打开一个新窗口,而后你会看到 “VSCode 服务器 “正在 SSH 主机上初始化的通知,一旦 VSCode 服务器安装在远程主机上,它就能够运行扩展并与你的本地 VSCode 实例通讯了。
经过查看状态栏中的指示器,能够知道已链接到虚拟机了,它显示的是虚拟机的主机名
。
一旦链接到远程的 SSH 主机,就能够与远程机器上的文件进行交互 ,若是打开集成终端,会发现如今是在远程的 Linux 下面了。
如今可使用 bash shell 浏览远程主机上的文件系统,还可使用 "文件">"打开文件夹" 浏览和打开远程目录上的文件夹。
此外,若是开发的是 WEB 应用,为了可以浏览到远程主机上的应用,咱们能够利用另外一个端口转发的功能来实现。
VS Code 服务器端部署
Coder-server项目部署在远程服务器上,能够实现随时随地打开浏览器写代码,操做步骤以下:
运行:
说明:
访问后效果以下(基本和本地的VS Code界面同样,只是扩展不能在线安装):
VS Code 开发实践
AutoCloseTag
Bracket Pair Colorizer
ESLint
...
GitLens
Import Cost
Prettier
Peacock
Svg viewer
Indent-rainbow
Reload
总结
VS Code 是咱们离不开的工具,它还有不少值得咱们探索的地方, 期待你去发现。
本篇内容就这么多, 但愿对你有所帮助。
才疏学浅, 若有错误, 还请指正, 谢谢。
若是以为内容有帮助, 能够关注下个人公众号,掌握最新动态,一块儿学习!