背景

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

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

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

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

文章主要內(nèi)容：

• VS Code 概覽
• VS Code 介紹
• VS Code 技術(shù)路線
• VS Code 技術(shù)組成
• VS Code 為優(yōu)化性能做的努力
• VS Code 啟動速度優(yōu)化
• VS Code 代碼編輯器滾動虛擬化
• VS Code 著色速度優(yōu)化
• VS Code 多進(jìn)程架構(gòu)
• 后臺進(jìn)程
• 編輯器窗口
• IO
• 插件進(jìn)程
• Debug 進(jìn)程
• 搜索進(jìn)程
• `VSCode 技術(shù)架構(gòu)與核心
• 核心層
• 核心組件
• 核心環(huán)境
• VS Code 技術(shù)架構(gòu)
• VSCode 核心
• VS Code 語言支持
• VS Code 插件系統(tǒng)
• 語言支持
• Debugger
• 主題/配色方案
• 編輯器輔助
• 擴(kuò)展命令
• 擴(kuò)展菜單
• 快捷鍵
• VS Code 插件開發(fā)
• VSC 插件在實(shí)際項(xiàng)目中的運(yùn)用
• 社區(qū)里一些有趣的 VSC 插件
• VS Code 與 Git 集成
• Git 集成功能介紹
• Git 提交歷史記錄
• VS Code 遠(yuǎn)程開發(fā)
• 支持的功能
• 需要安裝的插件
• 打開遠(yuǎn)程目錄與端口轉(zhuǎn)發(fā)
• VS Code 服務(wù)器端部署
• Code Server 下載與運(yùn)行
• VS Code 開發(fā)實(shí)踐
• 我推薦的10個實(shí)用插件
• 總結(jié)

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

正文

VS Code 概覽

VS Code 介紹

Visual Studio Code (下面簡稱VSC) 是由微軟公司開發(fā)的開源、免費(fèi)、跨平臺的代碼編輯器。

微軟希望它在保持核心輕量化文本編輯器的基礎(chǔ)上，為編輯器添加項(xiàng)目支持、智能感知和編譯調(diào)試。

VSC 的前身是微軟基于云端的編輯器項(xiàng)目：Monaco 編輯器，它作為微軟云服務(wù)的一部分，提供在線編輯源代碼的能力。

VSC Team 由著名工程師 Erich Gamma 領(lǐng)導(dǎo)，Erich 是《設(shè)計模式》作者之一，Eclipse 之父，擁有多年的 IDE 開發(fā)經(jīng)驗(yàn)。

由于云端編輯器的種種限制，和微軟近年來對Windows外平臺的態(tài)度轉(zhuǎn)變，微軟決定由它擴(kuò)展開發(fā)為一個全平臺通用的代碼編輯器。

VS Code 技術(shù)路線

VSCode 采用了 Electron，使用的代碼編輯器名為 Monaco。

在語言上，VSCode 使用了 HTML，CSS，TypeScript 進(jìn)行開發(fā)，使用 Electron 作為構(gòu)建工具。

從實(shí)現(xiàn)上來看:

Electron = Node + Chromium + Native API

也就是說 Electron 擁有 Node 運(yùn)行環(huán)境，賦予了用戶與系統(tǒng)底層進(jìn)行交互的能力。

依靠 Chromium 提供基于 Web 技術(shù)（HTML、CSS、JS）的界面交互支持，另外還具有一些平臺特性，比如桌面通知等。

VS Code 技術(shù)組成

Electron

為了保護(hù)本地文件的安全性，瀏覽器都沒有提供直接的本地文件訪問權(quán)限。

為了實(shí)現(xiàn)本地文件系統(tǒng)的訪問，VSC 采用了 Github 的開源項(xiàng)目 Electron。

Electron 原名 Atom-Shell，是 Github 為 Atom 編輯器編寫的一個開源框架。

它將 Chromium 和 Node.js 完美融合，讓開發(fā)者能用使用 HTML 來實(shí)現(xiàn) App UI，用 Node.js API 來訪問文件系統(tǒng)。

TypeScript

VSC 的主要代碼都是用 TypeScript 編寫，目前 VSC 的核心有 1100 多個 TS 文件，TypeScript 的語言優(yōu)勢為多次重構(gòu)提供了保障。

純 DOM 操作

為了保證 UI 響應(yīng)速度，VSC 沒有采用現(xiàn)有的 UI 庫，大部分 UI 采用絕對尺寸，簡單粗暴的避免大面積 UI 的聯(lián)動刷新。

VS Code 為優(yōu)化性能做的努力

VS Code team 做了很多工作來提高 VSC 的性能。

VS Code 啟動速度優(yōu)化

基于 HTML 技術(shù)的編輯器，受限于 Chrome 一般都會有啟動速度慢的問題。

除了基本的 JS / CSS 合并壓縮外，VSC 還將特別常用的 ActivityBar icon 直接內(nèi)嵌在了 css 中。

但是即便如此，啟動速度跟 Sublime Text 等編輯器還是有比較大的差距。

這里說一個技巧，當(dāng)我們用 VSC 打開一個文件的時候，VSC 會默認(rèn)啟動一個新的 VSC 窗口，這樣啟動的時間比較長，我們可以通過設(shè)置全局設(shè)置項(xiàng)里的 window.openFilesInNewWindow: false 來使用已經(jīng)打開的 VSC 實(shí)例打開新文件，這樣就幾乎沒有了等待的時間。

VS Code 代碼編輯器滾動虛擬化

讓編輯器只渲染可見的部分，減小大文件編輯對瀏覽器的壓力。

同時配合 css translate3d, 避免重復(fù)渲染沒有改變的代碼行。

VS Code 著色速度優(yōu)化

為了不重復(fù)發(fā)明輪子，VSC 采用了跟 TextMate 一樣的代碼著色分析語法。

它是基于正則表達(dá)式的一套分析方案，雖然 JS 原生支持正則表達(dá)式，但為了更高的效率，VSC 使用了 C++ 編寫的一套正則表達(dá)式引擎來提高效率。

VS Code 多進(jìn)程架構(gòu)

前面講的這些都只是一些小的優(yōu)化，真正保證響應(yīng)速度的還是多進(jìn)程架構(gòu)帶來的優(yōu)勢。

VSC 采用多進(jìn)程架構(gòu)，VSC 啟動后主要有下面的幾個進(jìn)程：

• 后臺進(jìn)程
• 編輯器窗口 - 由后臺進(jìn)程啟動，也是多進(jìn)程架構(gòu)
• Activitybar
• Viewlets
• Panels
• Editors
• Statusbar
• HTML 編寫的 UI
• Nodejs 異步 IO
• FileService
• ConfigurationService
• 插件宿主進(jìn)程
• 插件子進(jìn)程 - 如 TS 語言服務(wù)
• 插件實(shí)例
• 插件實(shí)例
• Debug 進(jìn)程
• Search 進(jìn)程
• 編輯器窗口

后臺進(jìn)程

后臺進(jìn)程是 VSC 的入口，主要負(fù)責(zé)管理編輯器生命周期，進(jìn)程間通信，自動更新，菜單管理等。

我們啟動 VSC 的時候，后臺進(jìn)程會首先啟動，讀取各種配置信息和歷史記錄，然后將這些信息和主窗口 UI 的 HTML 主文件路徑整合成一個 URL，啟動一個瀏覽器窗口來顯示編輯器的 UI。

后臺進(jìn)程會一直關(guān)注 UI 進(jìn)程的狀態(tài)，當(dāng)所有 UI 進(jìn)程被關(guān)閉的時候，整個編輯器退出。

此外后臺進(jìn)程還會開啟一個本地的 Socket，當(dāng)有新的 VSC 進(jìn)程啟動的時候，會嘗試連接這個 Socket，并將啟動的參數(shù)信息傳遞給它，由已經(jīng)存在的 VSC 來執(zhí)行相關(guān)的動作，這樣能夠保證 VSC 的唯一性，避免出現(xiàn)多開文件夾帶來的問題。

編輯器窗口

編輯器窗口進(jìn)程負(fù)責(zé)整個 UI 的展示。

也就是我們所見的部分, UI 全部用 HTML 編寫沒有太多需要介紹的部分。

IO

項(xiàng)目文件的讀取和保存由主進(jìn)程的 NodeJS API 完成，因?yàn)槿渴钱惒讲僮鳎幢阌斜容^大的文件，也不會對 UI 造成阻塞。

IO 跟 UI 在一個進(jìn)程，并采用異步操作，在保證 IO 性能的基礎(chǔ)上也保證了 UI 的響應(yīng)速度。

插件進(jìn)程

每一個 UI 窗口會啟動一個 NodeJS 子進(jìn)程作為插件的宿主進(jìn)程。所有的插件會共同運(yùn)行在這個進(jìn)程中。

這樣設(shè)計最主要的目的就是: 避免復(fù)雜的插件系統(tǒng)阻塞 UI 的響應(yīng)。這要從JS和瀏覽器說起。

在大部分的操作系統(tǒng)中，顯示器的刷新頻率是 60 幀每秒，也就是說應(yīng)用需要在 16.7 毫秒內(nèi)完成所有的計算和 UI 刷新。

HTML DOM 的速度向來為人詬病，留給JS的時間就更少了。所以要在這么短的時間內(nèi)完成所有指令才能保證 UI 的響應(yīng)速度。

但是事實(shí)上我們很難在這么短的時間內(nèi)完成諸如對一萬行代碼進(jìn)行著色這種任務(wù)。這就需要我們將這種耗時比較長的任務(wù)轉(zhuǎn)移到其他的線程或進(jìn)程來做，等耗時任務(wù)結(jié)束，再將結(jié)果返回給 UI 進(jìn)程即可。

VSC 最近的版本中, 將所有的語言支持都改成了插件。包括之前在 UI 進(jìn)程用 Web Worker 實(shí)現(xiàn)的 Markdown 語言支持。后面我會介紹一個典型的語言服務(wù)的工作方式。

但是將插件放在一個單獨(dú)進(jìn)程也有很明顯的缺點(diǎn)，因?yàn)槭且粋€單獨(dú)的進(jìn)程，而不是 UI 進(jìn)程，所以沒有辦法直接訪問 DOM 樹，想要實(shí)時高效的改變 UI 變得很難，在 VSC 的擴(kuò)展體系中幾乎沒有對 UI 進(jìn)行擴(kuò)展的 API。

Debug 進(jìn)程

Debugger 插件跟普通的插件有一點(diǎn)區(qū)別，它不運(yùn)行在插件進(jìn)程中，而是在每次 debug 的時候由UI單獨(dú)新開一個進(jìn)程。

搜索進(jìn)程

搜索是一個十分耗時的任務(wù)，VSC 也使用的單獨(dú)的進(jìn)程來實(shí)現(xiàn)這個功能，保證主窗口的效率。

將耗時的任務(wù)分到多個進(jìn)程中，有效的保證了主進(jìn)程的響應(yīng)速度。

VSCode 技術(shù)架構(gòu)與核心

VS Code 技術(shù)架構(gòu)

分層架構(gòu)值得我們好好學(xué)習(xí)。

源碼目錄結(jié)構(gòu)

VSCode 核心

核心層

• base: 提供通用服務(wù)和構(gòu)建用戶界面
• platform: 注入服務(wù)和基礎(chǔ)服務(wù)代碼
• editor: 微軟 Monaco 編輯器，也可獨(dú)立運(yùn)行使用
• wrokbench: 配合 Monaco 并且給 viewlets 提供框架：如：瀏覽器狀態(tài)欄，菜單欄利用 electron 實(shí)現(xiàn)桌面程序

核心組件

• Electron: 原名 Atom Shell， 是由Github 開發(fā)的開源框架。
• Momaco Edictor: VSC 最核心的組件。
• Typescript: Javascript 的嚴(yán)格超集。
• Language Server Protocol: 語言服務(wù)器， 提供了諸如自動補(bǔ)全， 定義跳轉(zhuǎn)，代碼格式化等與編程語言相關(guān)的功能。
• Degug Adaptor Protocol: DAP 是一個基于JSON 的協(xié)議， 他抽象了開發(fā)工具與調(diào)試工具之間的通信。
• Xterm.js: 是一個使用TS 開發(fā)的前端組件， 它把完整的終端功能帶入了瀏覽器，可可以與bash這樣的進(jìn)程相連接。

這里簡單展示一下 LSP 和 DAP ：

沒有 DAP 的結(jié)構(gòu)：

具備 DAP 的結(jié)構(gòu)：

又一次體現(xiàn)了分層的思想。

核心環(huán)境

整個項(xiàng)目完全使用 typescript 實(shí)現(xiàn)，electron 中運(yùn)行主進(jìn)程和渲染進(jìn)程，使用的 api 有所不同，所以在 core 中每個目錄組織也是按照使用的 api 來安排。

運(yùn)行的環(huán)境分為幾類：

• common: 只使用 javascritp api 的代碼，能在任何環(huán)境下運(yùn)行
• browser: 瀏覽器 api, 如操作 dom; 可以調(diào)用 common
• node: 需要使用 node 的 api,比如文件 io 操作
• electron-brower: 渲染進(jìn)程 api, 可以調(diào)用 common, brower, node, 依賴electron renderer-process API
• electron-main: 主進(jìn)程 api, 可以調(diào)用: common, node 依賴于electron main-process API

VS Code 語言支持

VS code 幾乎支持所有主流的編程語言。

對于JS, TS, CSS, HTML, VS code 提供了開箱即用的支持， 但對于其他語言來說， 則需要安裝相應(yīng)的插件。

目前下載量最高的語言插件排行：

VS Code 插件系統(tǒng)

插件系統(tǒng)對 VSC 至關(guān)重要。

為什么 ？

在早期的版本中 VSC 并沒有插件系統(tǒng)，只支持 TypeScript、JavaScript和C#的智能感知， 還有其余40種語言的代碼著色。

所以 VSC 只是出現(xiàn)在微軟技術(shù)的社區(qū)中。15 年 12 月份，VSC 發(fā)布了第一個支持?jǐn)U展的版本。

不久之后就出現(xiàn)了許多其他語言的支持，比如 Go 語言、C++、Java、Python、Ruby。

所以說有了核心編輯器的極速體驗(yàn)，加上良好的擴(kuò)展能力才成就了 VSC。

語言支持

VSC 制訂了一套完善的語言支持體系，方便支持新的編程語言。

一個代碼編輯器需要哪些功能來支持一種新語言?

• 代碼顯示
• 代碼著色
• 智能感知
• 代碼提示
• 代碼跳轉(zhuǎn)
• 鼠標(biāo)觸碰提示
• 查找引用
• 錯誤提示
• 代碼修改
• 自動補(bǔ)全
• 重構(gòu)功能

兼容 TextMate 的代碼著色分析

可以簡單的將 TextMate 的語言著色配置文件拷貝到插件中，并在 package.json 中指定即可。

語言支持通用協(xié)議

VSC 約定了一種通用的通信協(xié)議來支持多種語言

由于 VSC 采用多進(jìn)程的架構(gòu)，語言的開發(fā)者可以使用自己熟悉的語言編寫這門語言的語言服務(wù)，VSC 將采用 JSON-RPC 通信的方式跟語言服務(wù)溝通，執(zhí)行用戶命令，獲取結(jié)果。

Debugger

同語言服務(wù)類似，VSC 開放了一組通用協(xié)議來滿足不同語言不同平臺的調(diào)試需求。

主題/配色方案

VSC 采用了跟 TextMate 相同的配色方案文件格式。

編輯器輔助

VSC 提供了編輯器操作 API，你能夠?qū)崟r獲取用戶輸入點(diǎn)、當(dāng)前文件代碼。從而可以根據(jù)用戶當(dāng)前文檔確定可以提供的快捷操作。比如自動添加不存在的方法等。

擴(kuò)展命令

開發(fā)者可以在插件中定義自己的命令，這些命令會出現(xiàn)在“命令面板” 中，開發(fā)者可以通過 ctrl/cmd + shift + p 或 F1 來調(diào)用這些命令，完成復(fù)雜的操作。

插件可以使用所有的 NodeJS API，配合各種 NodeJS 庫，能夠完成非常有想象力的功能。

擴(kuò)展菜單

VSC 提供了文件管理器菜單，編輯器菜單，文件標(biāo)題菜單擴(kuò)展點(diǎn)。方便開發(fā)者針對不同的上下文進(jìn)行操作。

快捷鍵

開發(fā)者可以為各種自定義操作指定快捷鍵。

VS Code 插件開發(fā)

VSC 插件開發(fā)文檔：https://code.visualstudio.com/api

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

VSC 插件在實(shí)際項(xiàng)目中的運(yùn)用

利用 VSC 插件，我們可以為項(xiàng)目定制一些效率工具， 比如：

1. MyStock 一鍵下載翻譯插件

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

2. WMS 翻譯自動生成插件

隔壁項(xiàng)目的， 快捷生成翻譯key的插件：

社區(qū)里一些有趣的 VSC 插件

1. 小霸王

2. 韭菜盒子

還有很多，就不一一列出來了。

VS Code 與 Git 集成

Git 集成功能介紹

Visual Studio Code 自帶對 Git 的支持。

需要已經(jīng)安裝好 2.0.0（及以上）版本的 Git。

主要功能如下：

• 在行號槽顯示正在編輯的文件的改動情況
• Git狀態(tài)欄（位于左下角）會顯示當(dāng)前所在分支，編輯指示符以及未提交或者未拉取的提交的數(shù)量
• 能夠在編輯器內(nèi)完成常用的 Git 操作：
• 初始化一個倉庫
• 克隆一個倉庫
• 新建分支和標(biāo)簽
• 暫存和提交修改
• 對一個遠(yuǎn)程分支進(jìn)行推送/拉取/同步
• 解決合并沖突
• 查看比較

點(diǎn)擊克隆存儲庫，在彈出框輸入Git遠(yuǎn)程庫地址:

提交修改并推送到遠(yuǎn)程倉庫（更多支持的Git命令見下圖）:

Git 提交歷史記錄

在使用git的時候，經(jīng)常需要查看修改記錄，或者需要查看誰提交了什么文件等，當(dāng)然可以到存放git代碼的目錄查看，但這樣很不方便，如果使用vscode編輯工具寫的話，可以安裝一個 git history 的工具包，如圖：

然后重啟 vscode，選擇任何一個文件或者文件夾，右鍵就可以看到git:history 標(biāo)簽了。

點(diǎn)擊彈出Git History頁面，如下圖：

VS Code 遠(yuǎn)程開發(fā)

支持的功能

VS Code 用來做遠(yuǎn)程開發(fā)，可以支持在物理機(jī)、容器以及Windows Subsystem for Linux(WSL)上實(shí)現(xiàn)無縫遠(yuǎn)程開發(fā)，可以做到：

• 在部署相同的操作系統(tǒng)上進(jìn)行開發(fā)，或者使用更大或更專業(yè)的硬件
• 把開發(fā)環(huán)境作為沙箱，以免影響本地計算機(jī)配置
• 讓新手輕松上手，讓每個人都保持一致的開發(fā)環(huán)境
• 使用原本在本地環(huán)境不可用的工具或運(yùn)行時，或者管理它們的多個版本
• 在WSL里開發(fā)Linux應(yīng)用
• 從多臺不同的計算機(jī)訪問現(xiàn)有的開發(fā)環(huán)境
• 調(diào)試在其它位置(比如客戶網(wǎng)站或云端)運(yùn)行的應(yīng)用程序

下面是通過SSH來連接本地虛擬機(jī)，模擬遠(yuǎn)程開發(fā)的操作流程。

使用VS Code 遠(yuǎn)程連接服務(wù)器的原理如下，VS Code 會在遠(yuǎn)程主機(jī)上運(yùn)行一個Server，本地通過SSH連接到遠(yuǎn)程服務(wù)器。

需要安裝的插件

在VS Code 擴(kuò)展頁面搜索: Remote - SSH

安裝了 Remote - SSH 擴(kuò)展后，你會在最左邊看到一個新的狀態(tài)欄圖標(biāo):

遠(yuǎn)程狀態(tài)欄圖標(biāo)可以快速顯示 VS Code 在哪個上下文中運(yùn)行（本地或遠(yuǎn)程），點(diǎn)擊該圖標(biāo)或者點(diǎn)擊 F1 按鍵然后輸入Remote-SSH 便會彈出 Remote-SSH 的相關(guān)命令。

選擇 Remote-SSH: Connect to Host 命令，然后按以下格式輸入遠(yuǎn)程主機(jī)的連接信息，連接到主機(jī)：user@hostname，然后根據(jù)提示輸入登錄的密碼。

VSCode 將打開一個新窗口，然后你會看到 “VSCode 服務(wù)器 “正在 SSH 主機(jī)上初始化的通知，一旦 VSCode 服務(wù)器安裝在遠(yuǎn)程主機(jī)上，它就可以運(yùn)行擴(kuò)展并與你的本地 VSCode 實(shí)例通信了。

通過查看狀態(tài)欄中的指示器，可以知道已連接到虛擬機(jī)了，它顯示的是虛擬機(jī)的主機(jī)名。

一旦連接到遠(yuǎn)程的 SSH 主機(jī)，就可以與遠(yuǎn)程機(jī)器上的文件進(jìn)行交互 ，如果打開集成終端，會發(fā)現(xiàn)現(xiàn)在是在遠(yuǎn)程的 Linux 下面了。

打開遠(yuǎn)程目錄與端口轉(zhuǎn)發(fā)

現(xiàn)在可以使用 bash shell 瀏覽遠(yuǎn)程主機(jī)上的文件系統(tǒng)，還可以使用 "文件">"打開文件夾" 瀏覽和打開遠(yuǎn)程目錄上的文件夾。

此外，如果開發(fā)的是 WEB 應(yīng)用，為了能夠?yàn)g覽到遠(yuǎn)程主機(jī)上的應(yīng)用，我們可以利用另一個端口轉(zhuǎn)發(fā)的功能來實(shí)現(xiàn)。

VS Code 服務(wù)器端部署

Code Server 下載與運(yùn)行

Coder-server項(xiàng)目部署在遠(yuǎn)程服務(wù)器上，可以實(shí)現(xiàn)隨時隨地打開瀏覽器寫代碼，操作步驟如下:

• ssh連接到服務(wù)器上
• 下載code-server二進(jìn)制版本 wget https://github.com/cdr/code-server/releases/download/v3.9.0/code-server-3.9.0-linux-amd64.tar.gz
• 解壓 tar -xvzf code-server-3.9.0-linux-amd64.tar.gz
• 重命名 mv code-server-3.9.0-linux-amd64.tar.gz code-server

運(yùn)行：

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

說明：

1. 不指定密碼，會默認(rèn)生成一個，可以在運(yùn)行后看到
2. --port 指定端口運(yùn)行
3. --host 0.0.0.0 默認(rèn)是127.0.0.1，只能本地訪問，得改成0.0.0.0以外網(wǎng)訪問

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

code-server的優(yōu)點(diǎn)：

• 高便攜性：無論你在哪里，只要手邊有電腦，能聯(lián)網(wǎng)，就可以進(jìn)行代碼的調(diào)試。
• 高安全性：可能有些時候你用的并不是你的電腦，但是你又不得不去完成一些分配的任務(wù)，你可以把代碼從git倉庫拉取到當(dāng)前電腦完成，但是可能會留下一些你不想要留下的記錄，云編碼則是能保證你不留下痕跡。
• 方便調(diào)試：因?yàn)槭窃诜?wù)器環(huán)境上運(yùn)行代碼，所以如果這臺服務(wù)器正好是你使用的服務(wù)器的話，則你所見即所得，無需解決在后續(xù)代碼部署上的環(huán)境兼容問題。
• 高統(tǒng)一性：有些時候你可能需要多個團(tuán)隊開發(fā)同一區(qū)域的編碼，但是可能你的隊友們環(huán)境完全不一樣甚至?xí)驗(yàn)榄h(huán)境配置拖慢工程，這個時候創(chuàng)建多個賬戶分發(fā)給你的隊友們在服務(wù)器上進(jìn)行云編程，那么可以完美解決這個問題。

code-server 的缺點(diǎn)：

• 對云服務(wù)器有非常高的要求：這不僅僅是對內(nèi)存和cpu的要求，對網(wǎng)絡(luò)帶寬也有很大的需求。而且運(yùn)行代碼的加載時間相比本地vscode也是有一定的延時。
• 沒有網(wǎng)絡(luò)就不能寫代碼：因?yàn)槭腔跒g覽器和服務(wù)器之間的交互，沒有網(wǎng)絡(luò)就打不開網(wǎng)頁。
• 無法編寫太大工程：vscode本身就是一個輕量級ide，如果你要進(jìn)行一個特別大的網(wǎng)站開發(fā)的話，肯定是要用其他ide的，原生支持的開發(fā)插件更全面。
• 無法調(diào)試圖形化頁面：也不是完全不能調(diào)試，可以通過瀏覽器進(jìn)行訪問，但是這需要你的服務(wù)器進(jìn)行更大的帶寬，而且代價是更高的延時，可能你只是要寫一個html頁面，但是每寫幾行就想預(yù)覽效果，而code-server需要你等半天將頁面從服務(wù)器發(fā)送過來，這肯定是不能和本地訪問相媲美的。

VS Code 開發(fā)實(shí)踐

前端實(shí)用插件推薦

1. AutoCloseTag

2. Bracket Pair Colorizer

3. ESLint

...

4. GitLens

5. Import Cost

6. Prettier

7. Peacock

8. Svg viewer

9. Indent-rainbow

10. Reload

總結(jié)

VS Code 是我們離不開的工具，它還有很多值得我們探索的地方， 期待你去發(fā)現(xiàn)。

好了，本篇內(nèi)容就這么多， 希望對你有所幫助。

才疏學(xué)淺， 如有錯誤， 還請指正， 謝謝。

參考資料

• https://www.electronjs.org/docs/tutorial/application-architecture#electron-應(yīng)用架構(gòu)
• https://zhuanlan.zhihu.com/p/99587182
• http://imzc.me/dev/2016/08/15/vscode-the-architecture/
• http://imzc.me/dev/2016/08/16/vscode-the-extensions/
• https://codeteenager.github.io/vscode-analysis/learn/
• https://segmentfault.com/a/1190000020833042