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


阿拉平平

读完需要

5

分钟

速读仅需 2 分钟


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


1. 项目介绍


   

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


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 进行访问:

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

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

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

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


3. 使用说明


   

code-server 的使用基本和 VS Code 一致。在本章中,我将和大家介绍:
  • 如何安装插件

  • 如何修改设置


3.1 安装插件


   

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

code-server 使用指南:如何在浏览器上使用 VS Code
除了插件中心,我们也可以通过 VSIX 离线安装插件。以安装 Python 插件为例,操作步骤如下:
code-server 使用指南:如何在浏览器上使用 VS Code

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

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

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


3.2 修改设置


   

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

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

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

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

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

4. 写在最后


   

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

  • 可以免去安装客户端以及配置 IDE 的麻烦。

  • 使用的开发环境一致,适合团队成员互相合作。

  • 赋予了跨设备开发的能力,可以在手机或平板上进行开发。

References

[1] code-serverhttps://github.com/cdr/code-server

[2] 官方脚本: https://github.com/cdr/code-server/blob/main/install.sh

[3] 二进制文件: https://github.com/cdr/code-server/releases

原文始发于微信公众号(阿拉平平):code-server 使用指南:如何在浏览器上使用 VS Code

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/287728.html

(0)
码上实战的头像码上实战

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!