你會在本地搭建 Web 版 VS Code 嗎，看完這一篇你就能輕鬆實現了！

  • 2020 年 2 月 21 日
  • 筆記

Visual Studio Code 是微軟推出的一款輕量級編輯器，與它一起在市場爭鋒的相似軟體還有 Atom 和 Sublime Text，面世第二年的它只佔據 7% 左右的市場，後來在短短三年時間雄踞了半壁江山，不可謂不哇塞。

近日，微軟在 Ignite 2019 大會上，正式發布了 「Visual Studio Online」。其中包含了微軟託管的 Web 版 VSCode，如今又發布了 VSCode 1.40 ，該版本已經支援開發者直接從 VSCode 的源程式碼編譯出 Web 版 VSCode，本文就將給大家介紹下如何用源程式碼自行構建 VSCode 和在本地運行 Web 版的 VSCode 的方法。

下載 VS Code 源碼

Visual Studio Code 簡稱 VSCode。需要注意的是，平時我們使用的 VSCode 是產品，而下面我們要介紹的是源碼，產品是源碼的構建結果。源碼使用的 MIT License，而產品使用的是 MICROSOFT SOFTWARE LICENSE TERMS。如果你想把 VSCode 用於商用，建議從源碼構建出新的產品，而不是直接使用官網上提供下載鏈接的 VSCode Product。

  1. 官網地址：https://code.visualstudio.com/
  2. 源碼地址：https://github.com/microsoft/vscode

我們先把源碼下載下來。

$ git clone --depth 1 https://github.com/microsoft/vscode.git

由於 VSCode 項目過於活躍，提交量非常龐大，到目前為止，已經有 56,092 次提交了，建議在下載源碼的時候加上一句 --depth 1，意思就是只下載最近一次 commit 的程式碼。

安裝相關依賴

在安裝依賴之前，我們不妨稍微分析下 VSCode 的項目結構，

➜  vscode (master) tree -L 1  .  ├── CONTRIBUTING.md  ├── LICENSE.txt  ├── README.md  ├── ThirdPartyNotices.txt  ├── azure-pipelines.yml  ├── build/  ├── cglicenses.json  ├── cgmanifest.json  ├── extensions/  ├── gulpfile.js  ├── package.json  ├── product.json  ├── remote/  ├── resources/  ├── scripts/  ├── src/  ├── test/  ├── tsfmt.json  ├── tslint.json  └── yarn.lock

未來我們需要重點關注的是 src/ 和 extensions/ 兩個目錄，前者放的是 VSCode 的核心源碼，後者放的是 VSCode 的內置插件。

眼神再晃動一下，應該還會看到幾個熟悉的關鍵詞：build/、gulpfile.js、package.json、tslint.json 和 yarn.lock。由此，我們基本可以斷定：這個倉庫是一個用 TypeScript 開發、用 yarn 管理依賴、用 gulp 進行打包的 Node.js 項目，事實上它也是一個 Electron 項目。

好了，目錄就介紹到這裡了，接著開始進行漫長的依賴安裝。

➜  vscode (master) yarn

執行 yarn 後，VSCode 會幹三件事情：

  • preinstall 腳本對 yarn 的版本做判斷
    • 要求必須 >=1.10.1
    • 並且只允許使用 yarn 來安裝依賴，npm 安裝會提示錯誤
  • 安裝 package.json 中描述的各個依賴
    • 很多依賴都需要重新編譯，而編譯過程經常會失敗
    • 失敗了怎麼辦？看錯誤提示，如果流程沒中斷，就讓它一直跑下去
    • 一直卡著，好像不跑了怎麼辦？ctrl-c 終止進程後重新執行 yarn
  • postinstall 會逐個安裝 build/remote/test/extensions 等目錄中的依賴
    • extension 的安裝比較特殊，安裝的過程中又會執行 updateGrammar 腳本
    • 整個安裝過程十分的慢，可以考慮泡杯咖啡打開電視劇……

執行完 yarn 後，整個安裝並沒有結束。剩下幾步 VSCode 會在你執行 gulp 相關腳本的時候做檢測。倘若資源不存在便會安裝，由於很多資源都在牆外，我們還是分解下動作，分步手動下載：

  1. 把 Electron 安裝起來
➜  vscode (master) yarn electron

如果下載太慢，建議在命令行打開下代理。

➜  vscode (master) proxychains4 yarn electron
  1. 把內置的幾個依賴插件安裝起來
➜  vscode (master) yarn download-builtin-extensions

如果你的網路不給力，整個過程或許會耗時很久。我這裡歷時差不多一個小時，終於把依賴下載完成了，這是我安裝依賴花的時間最長的一次。

構建程式

構建客戶端版本

由於啟動一次構建花費的時間太長，1~5min 不等（看機器性能和人品），所以我建議你使用 yarn watch 來構建，它會完成一次構建並監聽文件的變化，後續不用重新構建。

構建完成以後，你就可以執行以下命令打開 VSCode 的客戶端介面了。

➜  vscode (master) ./scripts/code.sh

命令成功執行後，就可以看到以下的介面了。

如果你是 Windows 系統，執行的腳本應該是 ./script/code.bat 。

構建 Web 版本

VSCode 1.40 及以上版本現在已經自帶支援 Web 版本了，在這之前也有一個基於 VSCode 的 Web 版，叫 Code-Server。如果你感興趣可以在「推薦一款支援在瀏覽器上運行 VS Code 的服務端神器 Code-Server」一文中進行了解！

構建 Web 版本的方法非常簡單，只需運行下面的命令即可。

# gulp watch 完成後執行  ➜  vscode (master) yarn web

構建完成後，會自動在瀏覽器窗口中打開地址為 http://localhost:8080/ 的 Web 版本 VSCode。

小結

本文主要通過傻瓜式地教學，給大家演示了下，如何將源碼變成我們熟悉的 VSCode 客戶端，同學們在動手的過程中可能還會遇到各種依賴安裝問題。不要灰心，實在不行就 rm -rf node_modules，然後重試。相信你一定會成功的，加油！

本文轉載自：「小鬍子哥的個人網站」，原文：https://url.cn/5NFuJf8，版權歸原作者所有。歡迎投稿，投稿郵箱: [email protected] 。

Tags:

VirMach 便宜 VPS