Web 版VS Code 的自主搭建與應(yīng)用

解定東

（南京理工大學(xué)泰州科技學(xué)院移動(dòng)互聯(lián)網(wǎng)學(xué)院，江蘇 泰州225300）

1 概述

Visual Studio Code（通常簡(jiǎn)稱(chēng)VS Code）是一款目前非常流行的免費(fèi)開(kāi)源的代碼編輯器。由于其支持插件擴(kuò)展，通過(guò)豐富的插件用戶(hù)可以獲得更多高級(jí)的功能，所以通常作為IDE 使用。一經(jīng)推出，便深受廣大程序開(kāi)發(fā)人員的喜愛(ài)[1]。IDE（Integrated Development Environment，集成開(kāi)發(fā)環(huán)境）是一種輔助程序開(kāi)發(fā)人員開(kāi)發(fā)程序的應(yīng)用程序。程序開(kāi)發(fā)人員可以借助IDE 編寫(xiě)程序源代碼、并編譯打包成可供用戶(hù)使用的程序。

隨著云計(jì)算的流行，傳統(tǒng)的在本地計(jì)算機(jī)上安裝使用的IDE 正朝著Web IDE 的方向發(fā)展。Web IDE 又稱(chēng)為Cloud IDE，即主要通過(guò)瀏覽器遠(yuǎn)程使用的IDE。程序開(kāi)發(fā)人員可以通過(guò)Web IDE 更方便、高效的在線(xiàn)完成程序開(kāi)發(fā)的相關(guān)工作。

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

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

2 自主搭建Web 版VS Code 的主要過(guò)程

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

由于微軟官方提供的VS Codespaces 目前只能在微軟Auzre 公有云上搭建，所以在此不考慮這種方式；由于通過(guò)VSCode 開(kāi)源項(xiàng)目的源代碼自己構(gòu)建的Web 版VS Code 穩(wěn)定性很差，主要適用于學(xué)習(xí)其源代碼或者二次開(kāi)發(fā)VS Code，所以不推薦這種方式。

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

2.1 硬件需求

準(zhǔn)備一臺(tái)能夠正常聯(lián)網(wǎng)的本地服務(wù)器或私有云服務(wù)器（本文統(tǒng)稱(chēng)為服務(wù)器），推薦使用Linux 操作系統(tǒng)。由于該服務(wù)器主要以Web 的方式對(duì)外提供服務(wù)，因此必須能夠正常聯(lián)網(wǎng)。服務(wù)器硬件性能視實(shí)際使用規(guī)模而定，但至少應(yīng)具備1GB 內(nèi)存。

2.2 安裝Docker

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

Docker 官方提供了快速安裝的腳本，可以在Linux 操作系統(tǒng)中“一鍵”安裝Docker CE。通過(guò)SSH 連接到服務(wù)器，執(zhí)行以下命令。

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

安裝成功之后，會(huì)輸出安裝成功的提示信息。為了避免平常通過(guò)sudo 運(yùn)行Docker，還需要再執(zhí)行（root 用戶(hù)除外）以下命令。

sudo usermod -aG docker username

其中username 需要替換為當(dāng)前用戶(hù)的用戶(hù)名。執(zhí)行命令之后，重啟服務(wù)器生效。

2.3 安裝并運(yùn)行code-server

code-server 是由Coder 技術(shù)公司基于VS Code 開(kāi)源項(xiàng)目開(kāi)發(fā)的Web 版VS Code。類(lèi)似的有Eclipse Theia，但是code-server的知名度更高。在服務(wù)器中安裝好code-server，主要通過(guò)瀏覽器使用，與微軟提供的VS Codespaces 功能基本一致。

2.3.1 下載或更新鏡像，執(zhí)行以下命令。

docker pull codercom/code-server

2.3.2 在服務(wù)器中新建一個(gè)目錄，用來(lái)映射Docker 容器中的目錄。執(zhí)行以下代碼在當(dāng)前用戶(hù)的根目錄下新建一個(gè)名為“mycode”的目錄。

cd ～&& mkdir mycode

2.3.3 啟動(dòng)Docker 容器，執(zhí)行以下命令。

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 參數(shù)設(shè)置端口映射，容器的8080 端口映射到服務(wù)器的80 端口；-v 參數(shù)設(shè)置目錄映射，容器中的/home/coder/目錄映射到服務(wù)器的/home/username/mycode 目錄，其中username需要替換為當(dāng)前用戶(hù)的用戶(hù)名；-u 參數(shù)設(shè)置用戶(hù)，$ (id -u):$(id-g) 即所有在容器之外的操作以當(dāng)前用戶(hù)的權(quán)限執(zhí)行；——name=“mycode”參數(shù)設(shè)置容器的名稱(chēng)；——restart=always 參數(shù)設(shè)置自動(dòng)啟動(dòng)容器；-e 設(shè)置環(huán)境變量， 這里設(shè)置了PASSWORD=passwd，其中passwd 需要替換為自己設(shè)置的密碼；——auth 參數(shù)設(shè)置是否需要密碼才能使用。

2.3.4 打開(kāi)瀏覽器，訪(fǎng)問(wèn)服務(wù)器的IP 地址，然后輸入密碼（如果設(shè)置了密碼），即可使用Web 版VS Code。運(yùn)行效果如圖1所示。

圖1 Web 版VS Code 運(yùn)行效果

2.3.5 停止或啟動(dòng)已被停止的code-server，分別執(zhí)行以下命令。

docker stop mycode docker start mycode

3 Web 版VS Code 的應(yīng)用

在傳統(tǒng)的程序開(kāi)發(fā)流程中存在許多問(wèn)題。于是，遠(yuǎn)程開(kāi)發(fā)應(yīng)運(yùn)而生。通過(guò)連接遠(yuǎn)程服務(wù)器，直接在服務(wù)器環(huán)境中完成開(kāi)發(fā)工作。而Web IDE 是遠(yuǎn)程開(kāi)發(fā)的一種實(shí)現(xiàn)形式，很好地解決了本地開(kāi)發(fā)流程中存在的問(wèn)題，在開(kāi)發(fā)全流程中扮演著越來(lái)越重要的角色[4]。

因此，VS Code 作為目前最受歡迎的IDE 之一，其Web 版除了具備在本地計(jì)算機(jī)上安裝使用的VS Code 的代碼高亮、自動(dòng)補(bǔ)全、版本控制、終端、實(shí)時(shí)調(diào)試、插件擴(kuò)展等優(yōu)勢(shì)之外，還具備對(duì)本地計(jì)算機(jī)的性能要求不高、無(wú)需在本地配置開(kāi)發(fā)環(huán)境、不依賴(lài)特定的設(shè)備、便于分享協(xié)作且更安全等獨(dú)特的優(yōu)勢(shì)。

3.1 高效的程序開(kāi)發(fā)工作平臺(tái)

基于Web 版VS Code 和其它能夠提升工作效率的技術(shù)，可以構(gòu)建高效的程序開(kāi)發(fā)工作平臺(tái)。

傳統(tǒng)的在本地計(jì)算機(jī)開(kāi)發(fā)，通常對(duì)計(jì)算機(jī)的性能有一定的要求，本地計(jì)算機(jī)的性能太弱會(huì)影響工作效率。而Web 版VS Code 對(duì)本地計(jì)算機(jī)的性能要求不高，且無(wú)需安裝特別的客戶(hù)端，只要有瀏覽器就能使用，擁有流暢的使用體驗(yàn)。

傳統(tǒng)的在本地計(jì)算機(jī)開(kāi)發(fā)，通常需要在本地計(jì)算機(jī)配置復(fù)雜的開(kāi)發(fā)環(huán)境，除了需要安裝相應(yīng)的程序，還需要考慮網(wǎng)絡(luò)、安全等因素。而Web 版VS Code 無(wú)需在本地計(jì)算機(jī)配置開(kāi)發(fā)環(huán)境，只需要在服務(wù)器上統(tǒng)一配置，就能直接進(jìn)入開(kāi)發(fā)狀態(tài)。

傳統(tǒng)的在本地計(jì)算機(jī)開(kāi)發(fā)，通常需要在特定的設(shè)備上完成開(kāi)發(fā)流程中的某些過(guò)程。而Web 版VS Code 不依賴(lài)特定的設(shè)備，除了通過(guò)計(jì)算機(jī)中安裝的瀏覽器能夠進(jìn)行程序開(kāi)發(fā)，通過(guò)智能手機(jī)、平板電腦等設(shè)備也能隨時(shí)隨地進(jìn)行程序開(kāi)發(fā)。

傳統(tǒng)的在本地計(jì)算機(jī)開(kāi)發(fā)，通常需要將代碼借助版本控制系統(tǒng)上傳到服務(wù)器才能開(kāi)展協(xié)作。而Web 版VS Code 直接將代碼存儲(chǔ)在服務(wù)器，便于即時(shí)分享協(xié)作。同時(shí)，如果在私有云自主搭建Web 版VS Code，會(huì)更安全。運(yùn)維管理過(guò)程可以自主掌控，方便設(shè)置權(quán)限、采取更多的安全措施。

3.2 高效的程序開(kāi)發(fā)教學(xué)平臺(tái)

基于在線(xiàn)教學(xué)平臺(tái)，融合Web 版VS Code，可以構(gòu)建高效的程序開(kāi)發(fā)教學(xué)平臺(tái)。

傳統(tǒng)的程序開(kāi)發(fā)教學(xué)過(guò)程，通常需要學(xué)生自己搭建繁瑣的開(kāi)發(fā)環(huán)境，這對(duì)于剛接觸的學(xué)生來(lái)說(shuō)可能很困難。而Web 版VS Code 不需要學(xué)生親自搭建開(kāi)發(fā)環(huán)境，通過(guò)瀏覽器使用，就能擁有一致的開(kāi)發(fā)環(huán)境，提高學(xué)生的學(xué)習(xí)積極性。

傳統(tǒng)的程序開(kāi)發(fā)教學(xué)過(guò)程，學(xué)生不便于隨時(shí)隨地學(xué)習(xí)，程序通常需要在本地計(jì)算機(jī)上才能運(yùn)行。而Web 版VS Code 可以讓學(xué)生擺脫這一限制，在課堂外身邊沒(méi)有計(jì)算機(jī)的環(huán)境下，也能進(jìn)行程序開(kāi)發(fā)學(xué)習(xí)。

傳統(tǒng)的程序開(kāi)發(fā)教學(xué)過(guò)程，學(xué)生不便于邊學(xué)邊練，教師也不便于及時(shí)了解學(xué)生的程序開(kāi)發(fā)進(jìn)度。而Web 版VS Code 可以與在線(xiàn)教學(xué)平臺(tái)融合，學(xué)生通過(guò)同一個(gè)網(wǎng)頁(yè)既能完成學(xué)習(xí)，又能完成練習(xí)；教師通過(guò)教學(xué)平臺(tái)能實(shí)時(shí)看到學(xué)生的代碼和學(xué)習(xí)進(jìn)度。

4 結(jié)論

自主搭建Web 版VS Code，既簡(jiǎn)單方便又安全可靠?；赪eb 版VS Code，可以構(gòu)建高效的程序開(kāi)發(fā)平臺(tái)和在線(xiàn)教學(xué)平臺(tái)。通過(guò)使用Web 版VS Code，可以提高程序開(kāi)發(fā)的工作效率、提升程序開(kāi)發(fā)的教學(xué)效果。隨著信息技術(shù)的發(fā)展，Web 版VS Code 將會(huì)有更廣泛的應(yīng)用。