「 工具篇 」关于 VS Code - 你想知道的都在这里

时间  2021-05-07 标签 css html 前端 java node linux git github web 正则表达式

背景

以前部门想要统一代码编辑器， 最后决定统一用 VS Code。css

我以前也有写这篇文章的想法，因而就主动报了名。html

因此就有了今天这篇，一篇详细介绍 VS Code 的文章。前端

中间参考了很多资料，若有错误，欢迎留言指出 :)java

文章主要内容：node

  • VS Code 概览linux

    • VS Code 介绍
    • VS Code 技术路线
    • VS Code 技术组成
    • VS Code 为优化性能作的努力
    • VS Code 启动速度优化
    • VS Code 代码编辑器滚动虚拟化
    • VS Code 着色速度优化
    • VS Code 多进程架构
    • 后台进程
    • 编辑器窗口
    • IO
    • 插件进程
    • Debug 进程
    • 搜索进程

  • `VSCode 技术架构与核心git

    • VS Code 技术架构

    • VSCode 核心github

      • 核心层
      • 核心组件
      • 核心环境
  • VS Code 语言支持

  • VS Code 插件系统web

    • 语言支持
    • Debugger
    • 主题/配色方案
    • 编辑器辅助
    • 扩展命令
    • 扩展菜单
    • 快捷键

  • VS Code 插件开发正则表达式

    • VSC 插件在实际项目中的运用
    • 社区里一些有趣的 VSC 插件

  • VS Code 与 Git 集成

    • Git 集成功能介绍
    • Git 提交历史记录

  • VS Code 远程开发

    • 支持的功能
    • 须要安装的插件
    • 打开远程目录与端口转发

  • VS Code 服务器端部署

    • Code Server 下载与运行

  • VS Code 开发实践

    • 我推荐的10个实用插件
  • 总结

废话很少说，咱们直接开始吧。

正文

VS Code 概览

VS Code 介绍

Visual Studio Code (下面简称VSC) 是由微软公司开发的开源、免费、跨平台的代码编辑器。

微软但愿它在保持核心轻量化文本编辑器的基础上，为编辑器添加项目支持、智能感知和编译调试。

Visual Studio Code

VSC 的前身是微软基于云端的编辑器项目：Monaco 编辑器，它做为微软云服务的一部分，提供在线编辑源代码的能力。

VSC Team 由著名工程师 Erich Gamma 领导，Erich 是《设计模式》做者之一，Eclipse 之父，拥有多年的 IDE 开发经验。

Erich Gamma

因为云端编辑器的种种限制，和微软近年来对Windows外平台的态度转变，微软决定由它扩展开发为一个全平台通用的代码编辑器。

VS Code 技术路线

VSCode 采用了 Electron，使用的代码编辑器名为 Monaco。

在语言上，VSCode 使用了 HTML，CSS，TypeScript 进行开发，使用 Electron 做为构建工具。

从实现上来看:

Electron = Node + Chromium + Native API

也就是说 Electron 拥有 Node 运行环境，赋予了用户与系统底层进行交互的能力。

依靠 Chromium 提供基于 Web 技术（HTML、CSS、JS）的界面交互支持，另外还具备一些平台特性，好比桌面通知等。

VS Code 技术组成

Electron

为了保护本地文件的安全性，浏览器都没有提供直接的本地文件访问权限。

为了实现本地文件系统的访问，VSC 采用了 Github 的开源项目 Electron。

Electron 原名 Atom-Shell，是 Github 为 Atom 编辑器编写的一个开源框架。

它将 Chromium 和 Node.js 完美融合，让开发者能用使用 HTML 来实现 App UI，用 Node.js API 来访问文件系统。

TypeScript

VSC 的主要代码都是用 TypeScript 编写，目前 VSC 的核心有 1100 多个 TS 文件，TypeScript 的语言优点为屡次重构提供了保障。

纯 DOM 操做

为了保证 UI 响应速度，VSC 没有采用现有的 UI 库，大部分 UI 采用绝对尺寸，简单粗暴的避免大面积 UI 的联动刷新。

VS Code 为优化性能作的努力

VS Code team 作了不少工做来提升 VSC 的性能。

VS Code 启动速度优化

基于 HTML 技术的编辑器，受限于 Chrome 通常都会有启动速度慢的问题。

除了基本的 JS / CSS 合并压缩外，VSC 还将特别经常使用的 ActivityBar icon 直接内嵌在了 css 中。

可是即使如此，启动速度跟 Sublime Text 等编辑器仍是有比较大的差距。

这里说一个技巧，当咱们用 VSC 打开一个文件的时候，VSC 会默认启动一个新的 VSC 窗口，这样启动的时间比较长，咱们能够经过设置全局设置项里的 window.openFilesInNewWindow: false 来使用已经打开的 VSC 实例打开新文件，这样就几乎没有了等待的时间。

VS Code 代码编辑器滚动虚拟化

让编辑器只渲染可见的部分，减少大文件编辑对浏览器的压力。

同时配合 css translate3d, 避免重复渲染没有改变的代码行。

VS Code 着色速度优化

为了避免重复发明轮子，VSC 采用了跟 TextMate 同样的代码着色分析语法。

它是基于正则表达式的一套分析方案，虽然 JS 原生支持正则表达式，但为了更高的效率，VSC 使用了 C++ 编写的一套正则表达式引擎来提升效率。

VS Code 多进程架构

前面讲的这些都只是一些小的优化，真正保证响应速度的仍是多进程架构带来的优点。

VS Code 多进程架构

VSC 采用多进程架构，VSC 启动后主要有下面的几个进程：

  • 后台进程

  • 编辑器窗口 - 由后台进程启动，也是多进程架构

    • HTML 编写的 UI

      • Activitybar
      • Viewlets
      • Panels
      • Editors
      • Statusbar

  • Nodejs 异步 IO

    • FileService
    • ConfigurationService

  • 插件宿主进程

    • 插件实例

      • 插件子进程 - 如 TS 语言服务
      • 插件实例
    • Debug 进程
    • Search 进程
  • 编辑器窗口

后台进程

后台进程是 VSC 的入口，主要负责管理编辑器生命周期，进程间通讯，自动更新，菜单管理等。

咱们启动 VSC 的时候，后台进程会首先启动，读取各类配置信息和历史记录，而后将这些信息和主窗口 UI 的 HTML 主文件路径整合成一个 URL，启动一个浏览器窗口来显示编辑器的 UI。

后台进程会一直关注 UI 进程的状态，当全部 UI 进程被关闭的时候，整个编辑器退出。

此外后台进程还会开启一个本地的 Socket，当有新的 VSC 进程启动的时候，会尝试链接这个 Socket，并将启动的参数信息传递给它，由已经存在的 VSC 来执行相关的动做，这样可以保证 VSC 的惟一性，避免出现多开文件夹带来的问题。

编辑器窗口

编辑器窗口进程负责整个 UI 的展现。

也就是咱们所见的部分, UI 所有用 HTML 编写没有太多须要介绍的部分。

IO

项目文件的读取和保存由主进程的 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。

Debug 进程

Debugger 插件跟普通的插件有一点区别，它不运行在插件进程中，而是在每次 debug 的时候由UI单独新开一个进程。

搜索进程

搜索是一个十分耗时的任务，VSC 也使用的单独的进程来实现这个功能，保证主窗口的效率。

将耗时的任务分到多个进程中，有效的保证了主进程的响应速度。

VSCode 技术架构与核心

VS Code 技术架构

分层架构值得咱们好好学习。

源码目录结构

VSCode 核心

核心层

  • 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 ：

https://code.visualstudio.com/api/language-extensions/language-server-extension-guide

没有 DAP 的结构：

具有 DAP 的结构：

https://code.visualstudio.com/blogs/2018/08/07/debug-adapter-protocol-website

又一次体现了分层的思想。

核心环境

整个项目彻底使用 typescript 实现，electron 中运行主进程和渲染进程，使用的 api 有所不一样，因此在 core 中每一个目录组织也是按照使用的 api 来安排。

运行的环境分为几类：

  • common: 只使用 javascritp api 的代码，能在任何环境下运行
  • browser: 浏览器 api, 如操做 dom; 能够调用 common
  • node: 须要使用 node 的 api,好比文件 io 操做
  • electron-brower: 渲染进程 api, 能够调用 common, brower, node, 依赖electron renderer-process API
  • electron-main: 主进程 api, 能够调用: common, node 依赖于electron main-process API

VS 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 的代码着色分析

能够简单的将 TextMate 的语言着色配置文件拷贝到插件中，并在 package.json 中指定便可。

语言支持通用协议

VSC 约定了一种通用的通讯协议来支持多种语言

因为 VSC 采用多进程的架构，语言的开发者可使用本身熟悉的语言编写这门语言的语言服务，VSC 将采用 JSON-RPC 通讯的方式跟语言服务沟通，执行用户命令，获取结果。

Debugger

同语言服务相似，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 插件在实际项目中的运用

利用 VSC 插件，咱们能够为项目定制一些效率工具， 好比：

  1. MyStock 一键下载翻译插件

这个是我写的快捷下载翻译资源的插件。

  1. WMS 翻译自动生成插件

隔壁项目的， 快捷生成翻译key的插件：

社区里一些有趣的 VSC 插件

  1. 小霸王

  1. 韭菜盒子

还有不少，就不一一列出来了。

VS Code 与 Git 集成

Git 集成功能介绍

Visual Studio Code 自带对 Git 的支持。

须要已经安装好 2.0.0（及以上）版本的 Git。

主要功能以下：

  • 在行号槽显示正在编辑的文件的改动状况
  • Git状态栏（位于左下角）会显示当前所在分支，编辑指示符以及未提交或者未拉取的提交的数量

  • 可以在编辑器内完成经常使用的 Git 操做：

    • 初始化一个仓库
    • 克隆一个仓库
    • 新建分支和标签
    • 暂存和提交修改
    • 对一个远程分支进行推送/拉取/同步
    • 解决合并冲突
    • 查看比较

点击克隆存储库，在弹出框输入Git远程库地址:

提交修改并推送到远程仓库（更多支持的Git命令见下图）:

Git 提交历史记录

在使用git的时候，常常须要查看修改记录，或者须要查看谁提交了什么文件等，固然能够到存放git代码的目录查看，但这样很不方便，若是使用vscode编辑工具写的话，能够安装一个 git history 的工具包，如图：

而后重启 vscode，选择任何一个文件或者文件夹，右键就能够看到git:history 标签了。

点击弹出Git History页面，以下图：

VS Code 远程开发

支持的功能

VS Code 用来作远程开发，能够支持在物理机、容器以及Windows Subsystem for Linux(WSL)上实现无缝远程开发，能够作到：

  • 在部署相同的操做系统上进行开发，或者使用更大或更专业的硬件
  • 把开发环境做为沙箱，以避免影响本地计算机配置
  • 让新手轻松上手，让每一个人都保持一致的开发环境
  • 使用本来在本地环境不可用的工具或运行时，或者管理它们的多个版本
  • 在WSL里开发Linux应用
  • 从多台不一样的计算机访问现有的开发环境
  • 调试在其它位置(好比客户网站或云端)运行的应用程序

下面是经过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 服务器端部署

Code Server 下载与运行

Coder-server项目部署在远程服务器上，能够实现随时随地打开浏览器写代码，操做步骤以下:

  • ssh链接到服务器上
  • 下载code-server二进制版本 wget https://github.com/cdr/code-s...
  • 解压 tar -xvzf code-server-3.9.0-linux-amd64.tar.gz
  • 重命名 mv code-server-3.9.0-linux-amd64.tar.gz code-server

运行：

  • cd code-server
  • export PASSWORD="password" && ./bin/code-server --port 8080 --host 0.0.0.0

说明：

  1. 不指定密码，会默认生成一个，能够在运行后看到
  2. --port 指定端口运行
  3. --host 0.0.0.0 默认是127.0.0.1，只能本地访问，得改为0.0.0.0之外网访问

访问后效果以下（基本和本地的VS Code界面同样，只是扩展不能在线安装）：

code-server的优势：

  • 高便携性：不管你在哪里，只要手边有电脑，能联网，就能够进行代码的调试。
  • 高安全性：可能有些时候你用的并非你的电脑，可是你又不得不去完成一些分配的任务，你能够把代码从git仓库拉取到当前电脑完成，可是可能会留下一些你不想要留下的记录，云编码则是能保证你不留下痕迹。
  • 方便调试：由于是在服务器环境上运行代码，因此若是这台服务器正好是你使用的服务器的话，则你所见即所得，无需解决在后续代码部署上的环境兼容问题。
  • 高统一性：有些时候你可能须要多个团队开发同一区域的编码，可是可能你的队友们环境彻底不同甚至会由于环境配置拖慢工程，这个时候建立多个帐户分发给你的队友们在服务器上进行云编程，那么能够完美解决这个问题。

code-server的缺点：

  • 对云服务器有很是高的要求：这不只仅是对内存和cpu的要求，对网络带宽也有很大的需求。并且运行代码的加载时间相比本地vscode也是有必定的延时。
  • 没有网络就不能写代码：由于是基于浏览器和服务器之间的交互，没有网络就打不开网页。
  • 没法编写太大工程：vscode本生就是一个轻量级ide，若是你要进行一个特别大的网站开发的话，确定是要用其余ide的，原生支持的开发插件更全面。
  • 没法调试图形化页面：也不是彻底不能调试，能够经过浏览器进行访问，可是这须要你的服务器进行更大的带宽，并且代价是更高的延时，可能你只是要写一个html页面，可是每写几行就想预览效果，而code-server须要你等半天将页面从服务器发送过来，这确定是不能和本地访问相媲美的。

VS Code 开发实践

前端实用插件推荐

  1. AutoCloseTag

  1. Bracket Pair Colorizer

  1. ESLint

...

  1. GitLens

  1. Import Cost

  1. Prettier

  1. Peacock

  1. Svg viewer

  1. Indent-rainbow

  1. Reload

总结

VS Code 是咱们离不开的工具，它还有不少值得咱们探索的地方， 期待你去发现。

本篇内容就这么多， 但愿对你有所帮助。

才疏学浅， 若有错误， 还请指正， 谢谢。

若是以为内容有帮助， 能够关注下个人公众号，掌握最新动态，一块儿学习！

image.png

参考资料

联系我们 沪ICP备13005482号-10