code-server 使用指南：如何在浏览器上使用 VS Code

code-server 使用指南：如何在浏览器上使用 VS Code

随着远程工作和团队协作的日益普及，能够在浏览器中直接使用VS Code进行开发变得越来越重要。本文将详细介绍如何通过code-server在浏览器中使用VS Code，包括安装、配置和使用方法。

项目介绍

code-server是一款在线的VS Code，只需将其部署到服务器上，就可以在浏览器上使用VS Code。本文将介绍code-server安装和使用方法，版本为v3.10.2。

下载安装

code-server安装的方式有很多，可以通过官方脚本、二进制文件或者docker安装。由于服务器上已经装了docker，所以我准备用容器的方式部署。

我启动服务的命令如下。其中，/data/project是工作目录；$HOME/.config用于存放IDE的设置。

mkdir -p ~/.config
docker run -d --name code-server -p 8080:8080 \
  -v "$HOME/.config:/home/coder/.config" \
  -v "/data/project:/home/coder/project" \
  -u "$(id -u):$(id -g)" \
  -e "DOCKER_USER=$USER" \
  codercom/code-server:latest

服务启动后，在浏览器中输入http://{ip}:8080进行访问：

根据登录页面的提示，输入容器中配置文件里的密码，登录后界面如下：

看到这界面，不能说和VS Code毫不相干吧，只能说一模一样。

使用说明

code-server的使用基本和VS Code一致。在本章中，我将和大家介绍：

• 如何安装插件
• 如何修改设置

安装插件

可以看到，code-server的界面默认是英文的，所以我打算先装个汉化插件。和VS Code一样，我们可以到插件中心搜索并安装插件：

除了插件中心，我们也可以通过VSIX离线安装插件。以安装Python插件为例，操作步骤如下：

插件安装完成后，让我们看看code-server运行代码的效果：

针不戳，代码运行正常。不过似乎哪里还有点不对劲？

修改设置

明白了，code-server默认用的是浅色主题，字体也偏小了，于是我调整了下IDE的字体和主题。

修改的方式也和VS Code无异，通过快捷键Ctrl+,调出设置界面，在文本编辑器的『字体』一栏调整字体以及大小。

在工作台的『外观』一栏中，则可以修改编辑器的主题。

写在最后

本文简单地介绍了code-server的安装和使用方法。将IDE置于浏览器上，我认为好处显而易见的：

• 可以免去安装客户端以及配置IDE的麻烦。
• 使用的开发环境一致，适合团队成员互相合作。
• 赋予了跨设备开发的能力，可以在手机或平板上进行开发。

References

[1] code-server: https://github.com/cdr/code-server
[2] 官方脚本: https://github.com/cdr/code-server/blob/main/install.sh
[3] 二进制文件: https://github.com/cdr/code-server/releases