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 将会有更广泛的应用。