Web 版VS Code 的自主搭建與應用

解定東

（南京理工大學泰州科技學院移動互聯網學院，江蘇 泰州225300）

1 概述

Visual Studio Code（通常簡稱VS Code）是一款目前非常流行的免費開源的代碼編輯器。由于其支持插件擴展，通過豐富的插件用戶可以獲得更多高級的功能，所以通常作為IDE 使用。一經推出，便深受廣大程序開發人員的喜愛[1]。IDE（Integrated Development Environment，集成開發環境）是一種輔助程序開發人員開發程序的應用程序。程序開發人員可以借助IDE 編寫程序源代碼、并編譯打包成可供用戶使用的程序。

隨著云計算的流行，傳統的在本地計算機上安裝使用的IDE 正朝著Web IDE 的方向發展。Web IDE 又稱為Cloud IDE，即主要通過瀏覽器遠程使用的IDE。程序開發人員可以通過Web IDE 更方便、高效的在線完成程序開發的相關工作。

因此，許多知名科技公司（或組織）近幾年相繼推出了自己的Web IDE 產品。如亞馬遜的Cloud9、微軟的Visual Studio Codespaces（簡稱VS Codespaces）、GitHub 的Codespaces、Coding的Cloud Studio、Eclipse 的Theia[2]等。

然而，它們大多數是基于公有云提供Web IDE 服務。對于不希望使用公有云服務，且具備自主搭建條件的程序開發人員，可以考慮自主搭建Web 版VS Code 使用。

2 自主搭建Web 版VS Code 的主要過程

目前，主要有三種方式可以搭建Web 版VS Code。其一，使用微軟官方提供的VS Codespaces；其二，通過VSCode 開源項目的源代碼自己構建Web 版VS Code；其三，使用第三方公司（或組織）開發的Web 版VS Code。

由于微軟官方提供的VS Codespaces 目前只能在微軟Auzre 公有云上搭建，所以在此不考慮這種方式；由于通過VSCode 開源項目的源代碼自己構建的Web 版VS Code 穩定性很差，主要適用于學習其源代碼或者二次開發VS Code，所以不推薦這種方式。

因此，本文介紹使用第三方公司Coder 開發的code-server，在一臺運行Ubuntu 20.04 LTS 操作系統的服務器上，基于Docker 自主搭建Web 版VS Code。如果使用的版本不同，可作參考。

2.1 硬件需求

準備一臺能夠正常聯網的本地服務器或私有云服務器（本文統稱為服務器），推薦使用Linux 操作系統。由于該服務器主要以Web 的方式對外提供服務，因此必須能夠正常聯網。服務器硬件性能視實際使用規模而定，但至少應具備1GB 內存。

2.2 安裝Docker

Docker 是一個開源的應用容器引擎。程序開發人員可以打包應用及其依賴到一個可移植的容器中。容器使用沙箱機制，可以方便快速地在其它操作系統中部署應用[3]。目前主要分為社區版（Docker CE）與企業版（Docker EE）。前者為免費版本，適合個人開發者和小型團隊使用；后者為收費版本，專為企業和IT 團隊而設計，相比社區版增加了一些額外功能，提供了更安全的保障。

Docker 官方提供了快速安裝的腳本，可以在Linux 操作系統中“一鍵”安裝Docker CE。通過SSH 連接到服務器，執行以下命令。

curl -fsSL https://get.docker.com | bash -s docker ——mirror Aliyun

安裝成功之后，會輸出安裝成功的提示信息。為了避免平常通過sudo 運行Docker，還需要再執行（root 用戶除外）以下命令。

sudo usermod -aG docker username

其中username 需要替換為當前用戶的用戶名。執行命令之后，重啟服務器生效。

2.3 安裝并運行code-server

code-server 是由Coder 技術公司基于VS Code 開源項目開發的Web 版VS Code。類似的有Eclipse Theia，但是code-server的知名度更高。在服務器中安裝好code-server，主要通過瀏覽器使用，與微軟提供的VS Codespaces 功能基本一致。

2.3.1 下載或更新鏡像，執行以下命令。

docker pull codercom/code-server

2.3.2 在服務器中新建一個目錄，用來映射Docker 容器中的目錄。執行以下代碼在當前用戶的根目錄下新建一個名為“mycode”的目錄。

cd ～&& mkdir mycode

2.3.3 啟動Docker 容器，執行以下命令。

docker run -d -p 80:8080 -v /home/username/mycode:/home/coder/ -u“$(id -u):$(id -g)”——name=“mycode”——restart=always -e PASSWORD=passwd codercom/code-server——auth password

其中：-p 參數設置端口映射，容器的8080 端口映射到服務器的80 端口；-v 參數設置目錄映射，容器中的/home/coder/目錄映射到服務器的/home/username/mycode 目錄，其中username需要替換為當前用戶的用戶名；-u 參數設置用戶，$ (id -u):$(id-g) 即所有在容器之外的操作以當前用戶的權限執行；——name=“mycode”參數設置容器的名稱；——restart=always 參數設置自動啟動容器；-e 設置環境變量， 這里設置了PASSWORD=passwd，其中passwd 需要替換為自己設置的密碼；——auth 參數設置是否需要密碼才能使用。

2.3.4 打開瀏覽器，訪問服務器的IP 地址，然后輸入密碼（如果設置了密碼），即可使用Web 版VS Code。運行效果如圖1所示。

圖1 Web 版VS Code 運行效果

2.3.5 停止或啟動已被停止的code-server，分別執行以下命令。

docker stop mycode docker start mycode

3 Web 版VS Code 的應用

在傳統的程序開發流程中存在許多問題。于是，遠程開發應運而生。通過連接遠程服務器，直接在服務器環境中完成開發工作。而Web IDE 是遠程開發的一種實現形式，很好地解決了本地開發流程中存在的問題，在開發全流程中扮演著越來越重要的角色[4]。

因此，VS Code 作為目前最受歡迎的IDE 之一，其Web 版除了具備在本地計算機上安裝使用的VS Code 的代碼高亮、自動補全、版本控制、終端、實時調試、插件擴展等優勢之外，還具備對本地計算機的性能要求不高、無需在本地配置開發環境、不依賴特定的設備、便于分享協作且更安全等獨特的優勢。

3.1 高效的程序開發工作平臺

基于Web 版VS Code 和其它能夠提升工作效率的技術，可以構建高效的程序開發工作平臺。

傳統的在本地計算機開發，通常對計算機的性能有一定的要求，本地計算機的性能太弱會影響工作效率。而Web 版VS Code 對本地計算機的性能要求不高，且無需安裝特別的客戶端，只要有瀏覽器就能使用，擁有流暢的使用體驗。

傳統的在本地計算機開發，通常需要在本地計算機配置復雜的開發環境，除了需要安裝相應的程序，還需要考慮網絡、安全等因素。而Web 版VS Code 無需在本地計算機配置開發環境，只需要在服務器上統一配置，就能直接進入開發狀態。

傳統的在本地計算機開發，通常需要在特定的設備上完成開發流程中的某些過程。而Web 版VS Code 不依賴特定的設備，除了通過計算機中安裝的瀏覽器能夠進行程序開發，通過智能手機、平板電腦等設備也能隨時隨地進行程序開發。

傳統的在本地計算機開發，通常需要將代碼借助版本控制系統上傳到服務器才能開展協作。而Web 版VS Code 直接將代碼存儲在服務器，便于即時分享協作。同時，如果在私有云自主搭建Web 版VS Code，會更安全。運維管理過程可以自主掌控，方便設置權限、采取更多的安全措施。

3.2 高效的程序開發教學平臺

基于在線教學平臺，融合Web 版VS Code，可以構建高效的程序開發教學平臺。

傳統的程序開發教學過程，通常需要學生自己搭建繁瑣的開發環境，這對于剛接觸的學生來說可能很困難。而Web 版VS Code 不需要學生親自搭建開發環境，通過瀏覽器使用，就能擁有一致的開發環境，提高學生的學習積極性。

傳統的程序開發教學過程，學生不便于隨時隨地學習，程序通常需要在本地計算機上才能運行。而Web 版VS Code 可以讓學生擺脫這一限制，在課堂外身邊沒有計算機的環境下，也能進行程序開發學習。

傳統的程序開發教學過程，學生不便于邊學邊練，教師也不便于及時了解學生的程序開發進度。而Web 版VS Code 可以與在線教學平臺融合，學生通過同一個網頁既能完成學習，又能完成練習；教師通過教學平臺能實時看到學生的代碼和學習進度。

4 結論

自主搭建Web 版VS Code，既簡單方便又安全可靠。基于Web 版VS Code，可以構建高效的程序開發平臺和在線教學平臺。通過使用Web 版VS Code，可以提高程序開發的工作效率、提升程序開發的教學效果。隨著信息技術的發展，Web 版VS Code 將會有更廣泛的應用。