【工具】較爲全面的瞭解 VS Code

背景

之前部門想要統一代碼編輯器， 最後決定統一用 VS Code，需要一篇比較系統的介紹文章。

剛好我之前也有寫這篇文章的想法，於是就主動報了名。

所以就有了今天這篇文章，詳細介紹一下 VS Code 。

中間參考了不少資料，如有錯誤，歡迎留言指出 :)

文章主要內容：

廢話不多說，我們直接開始吧。

正文

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 啓動後主要有下面的幾個進程：

後臺進程

後臺進程是 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 核心

核心層

核心組件

這裏簡單展示一下 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 來安排。

運行的環境分爲幾類：

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/api

Wing 插件開發文檔：http://developer.egret.com/cn/github/egret-docs/Wing/introduction/index.html

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 代碼的目錄查看，但這樣很不方便，如果使用 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 服務器端部署

Code Server 下載與運行

Coder-server 項目部署在遠程服務器上，可以實現隨時隨地打開瀏覽器寫代碼，操作步驟如下:

運行：

說明：

  1. 不指定密碼，會默認生成一個，可以在運行後看到

  2. --port 指定端口運行

  3. --host 0.0.0.0 默認是 127.0.0.1，只能本地訪問，得改成 0.0.0.0 以外網訪問

訪問後效果如下（基本和本地的 VS Code 界面一樣，只是擴展不能在線安裝）：

code-server 的優點：

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 是我們離不開的工具，它還有很多值得我們探索的地方， 期待你去發現。

好了，本篇內容就這麼多， 希望對你有所幫助。

才疏學淺， 如有錯誤， 還請指正， 謝謝。

參考資料

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/kkwKL7mpFf2zLj4TwveHGA

猜你喜歡