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

最新推荐文章于 2024-08-08 07:36:06 发布

Xpitz

最新推荐文章于 2024-08-08 07:36:06 发布

阅读量1.4k

点赞数

文章标签： vscode 开源软件

本文链接：https://blog.csdn.net/jiangyou0k/article/details/118995327

版权

本文介绍了如何使用code-server将VSCode部署到服务器，实现浏览器上的在线开发环境。通过docker容器部署code-server，然后展示了如何安装插件、修改设置，并讨论了这种模式在团队合作和跨设备开发中的优势。

摘要由CSDN通过智能技术生成

文章首发于个人公号：「阿拉平平」

我平时写脚本或项目，通常是在 IDE 配好远程服务器再同步代码。但最近同事和我吐槽，他的电脑重装了系统，导致要重新安装和配置 IDE。这让我意识到，如果 IDE 能够部署到服务端，是不是一种更好的团队合作模式呢？于是我找到了 code-server，和大家分享下。

项目介绍

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

下载安装

code-server 安装的方式有很多，可以通过官方脚本^[2]、二进制文件^[3] 或者 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