使用 code-server 搭建在线的 VS Code 编辑器

文章目录

前言

VS Code 是一个非常流行的代码编辑器,安装各种拓展下也可以当作全功能的IDE使用。VS Code本身是基于Web方案构建的,完全可以搭建服务器,然后通过浏览器访问。事实上官方就是这么设计的。现在打开任何一个GitHub项目,然后按下键盘上的 . 就可以基于浏览器的VS Code 编辑器打开该项目。

这篇文章将体验使用 code-server 搭建在线的 VS Code 编辑器。

Run VS Code on any machine anywhere and access it in the browser.

官方文档: https://coder.com/docs/code-server/latest

项目地址: https://github.com/coder/code-server

安装体验

安装 code-server 最低的要求如下:

Linux machine with WebSockets enabled, 1 GB RAM, and 2 vCPUs

我这里是在amd64架构上的Ubuntu22.04系统进行安装的,如果是其它配置可能还需要注意一些别的细节,可以参考官方文档进行处理。如果按照缓慢的话,也可以参考官方文档,手动下载安装包后再进行安装。

使用下面脚本可以一键安装:

bash 复制代码
curl -fsSL https://code-server.dev/install.sh | sh

不过我这里上面方式安装太慢了,所以直接从项目地址发布中下载了 code-server_4.23.0_amd64.deb 包进行安装:

bash 复制代码
# 安装
sudo dpkg -i code-server_4.23.0_amd64.deb
# 启动
sudo systemctl enable --now code-server@$USER

# 启动后就可以查看默认的配置了
cat ~/.config/code-server/config.yaml

# 使用编辑器修改配置
# bind-addr: 0.0.0.0:24041 # 0.0.0.0表示在所有网口上工作
# auth: password
# password: 123456 # 登录密码
# cert: false

# 重启服务以加载配置
sudo systemctl restart code-server@$USER

然后就可以通过浏览器进行访问了:


可以看到和本地版本的 VS Code 基本没啥差别。同时也可以看到访问是通过本地的浏览器进行的,但是开发环境是在远程的服务器上的。

我这里只是在局域网中访问,如果有公网IP或者是在公网的服务器中搭建的话那就可以在各处访问了,如果需要增加安全性,可以设置HTTPS,具体操作可以参考官方文档。

后记

code-server 对于一般的代码开发来说挺不错的,可以在任何有浏览器的平台上,比如手机或者平板上面开发,而且开发环境和性能都集中于服务器,一定程度上实现了随处编程的可能性(24小时在线打工人)。

相关推荐
运维全栈笔记6 小时前
Linux安装配置Tomcat保姆级教程:从部署到性能调优
linux·服务器·中间件·tomcat·apache·web
必胜刻9 小时前
全面解析 Token:从入门到 JWT 实战
golang·状态模式·web·前后端交互
独隅12 小时前
Visual Studio 2026 详细安装教程和配置指南
ide·visual studio
He少年13 小时前
【AI 辅助案例分享】
人工智能·c#·编辑器·ai编程
曲幽15 小时前
FastAPI 少有人提的实用技巧:把 Depends 依赖提到路由层,代码少写60%
python·fastapi·web·routes·depends·prefix·apiroute
vortex516 小时前
Kali Linux 安装与使用 Code-OSS / VSCodium :VSCode 轻量替代
linux·运维·编辑器
lifewange17 小时前
Pycharm和IDEA中安装Cursor的方法
ide·pycharm·intellij-idea
skilllite作者19 小时前
Zed 1.0 编辑器深度评测与实战指南
开发语言·人工智能·windows·python·编辑器·agi
里欧跑得慢1 天前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
曲幽2 天前
FastAPI 生产环境静态文件完全指南:从 /favicon.ico 404 到 HSTS 混合内容,一次全根治
python·fastapi·web·static·media·404·hsts·favicon·url_for