「工具篇」關於 VS Code - 你想知道的都在這裏

時間 2021-05-07

標籤 css html 前端 java node linux git github web 正則表達式欄目 CSS 简体版

原文原文鏈接

背景

以前部門想要統一代碼編輯器，最後決定統一用 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) 是由微軟公司開發的開源、免費、跨平臺的代碼編輯器。

微軟但願它在保持核心輕量化文本編輯器的基礎上，爲編輯器添加項目支持、智能感知和編譯調試。

VSC 的前身是微軟基於雲端的編輯器項目：Monaco 編輯器，它做爲微軟雲服務的一部分，提供在線編輯源代碼的能力。

VSC Team 由著名工程師 Erich Gamma 領導，Erich 是《設計模式》做者之一，Eclipse 之父，擁有多年的 IDE 開發經驗。

因爲雲端編輯器的種種限制，和微軟近年來對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 多進程架構

前面講的這些都只是一些小的優化，真正保證響應速度的仍是多進程架構帶來的優點。

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 ：

沒有 DAP 的結構：

具有 DAP 的結構：

又一次體現了分層的思想。

核心環境

整個項目徹底使用 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 插件，咱們能夠爲項目定製一些效率工具，好比：

MyStock 一鍵下載翻譯插件

這個是我寫的快捷下載翻譯資源的插件。

WMS 翻譯自動生成插件

隔壁項目的，快捷生成翻譯key的插件：

社區裏一些有趣的 VSC 插件

小霸王

韭菜盒子

還有不少，就不一一列出來了。

`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

說明：

不指定密碼，會默認生成一個，能夠在運行後看到
--port 指定端口運行
--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須要你等半天將頁面從服務器發送過來，這確定是不能和本地訪問相媲美的。