code-server使用说明

因为开发Web IDE，了解到code-server。使用了有一段时间了，这里总结下code-server使用/定制遇到的一些问题

介绍

code-server即Web版Visual Studio Code。本身code-server的架构中也是将vsc作为子模块开发的，因此很多feat也都兼容。如果你需要一款强大+与vsc几乎一致的开发体验，那么code-server非常合适。

Code-Server背后的技术

1. code-server是node程序，但最后安装包里也内置了node，因此安装时不需要手动再安装node环境

2. code-server本身项目也依赖了code即visual studio code。因此也就知道了vsc也是个node，但性能确实还不错

3. code-server中的编辑器部分即monaco editor,终端部分即xterm.js。是不是都很熟悉，😊。

浏览器支持列表

按照官方人员所说，现代化的这些浏览器均支持，具体版本目前还没明确，但从技术栈来说用到了service worker.

• Chrome, Firefox,Safari, Edge

不过现如今，ie退出了历史舞台，Edge也跟Chrome对齐，service worker这块不是问题了。

安装

1. 使用官方一键安装脚本

# 支持指定版本安装
curl -fsSL https://code-server.dev/install.sh | sh -s -- --version=4.7.1

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

问题是国内网络问题，如果安装不顺利，走2

2. 使用离线安装包进行安装，注意服务器架构不同，选择不同的包

https://github.com/coder/code-server/releases

分发包区别

linux-amd64 表示 64 位 x86 架构（通常称为“PC”或“台式机”）。
linux-arm64 表示 64 位 ARM 架构（通常用于服务器、移动设备和嵌入式系统）。
linux-armv7l 表示 32 位 ARM 架构（通常用于较旧的 Raspberry Pi 或类似设备）。

后台运行

1. 手动添加到服务

   cat > /usr/lib/systemd/system/code-server.service << EOF
   [Unit]
   Description=code-server
   After=network.target
   
   [Service]
   Type=exec
   Environment=HOME=/root
   ExecStart=/usr/bin/code-server
   Restart=always
   EOF
   
   
   systemctl start code-server

   缺点是必须具备root权限，因为要添加到系统启动服务中

2. supervisor

​ 需要安装该程序，程序依赖python2环境，好处是不要求必须是root用户权限

3. &后台运行

   直接运行code-server

登录认证

$HOME/.config/code-server/config.yaml

拓展Extensions

1. 安装方式多样，直接离线安装即拓展放在目标路径下即可，也可以访问code-server web时直接商店检索安装

code-server –help

code-server命令启动服务外，也可以进行一些操作

# 列出所有命令属性
code-server --help

# 列出已安装extension
code-server --list-extensions

...

常见问题

默认打开某个文件夹

URL配置folder参数即可

http://127.0.0.1:8080/?folder=/Users/xxx

动态打开行列号

code-server cli有-r参数支持 -r filename:row:column.

相关社区讨论coder/code-server#5801

语言切换

当安装了语言包后，web里可以切换显示语言，同时也可以直接通过配置文件设置缺省语言，当然前提是对应语言包也已安装

cat << EOF >  $ROOT_PATH/.local/share/User/argv.json
{"locale": "zh-cn"}
EOF

除了该办法外，还有个方式是code-server --locale=zh-cn

命令直接参数传入，坏处就是直接覆盖了原设置语言，不建议走该方式。

端口转发

实际使用中注意到code-server下启动web, code-server本身会做端口转发，这个也是个设置项

// 启用后，将检测到新的正在运行的进程，并自动转发其侦听的端口。禁用此设置将不会阻止转发所有端口。即使禁用，扩展将仍然能够导致端口被转发，并且打开某些 URL 仍将导致端口被转发。
 "remote.autoForwardPorts": true,

microsoft/vscode#108346

心跳

注意到code-server会定期向服务器发送心跳以确保连接的稳定性，避免断开连接。默认情况下，心跳间隔是5秒。

主页面

比如code-server-4.8.3-2-linux-amd64/lib/vscode/out/vs/code/browser/workbench/workbench.html

CDN

code-server本身并不支持cdn配置，但可以通过直接改写workbench.html解决，因为所有的静态资源入口均在这里。直接将所有静态资源的URL改为CDN资源地址即可。前提是程序包中所有静态资源都已经托管到CDN

code-server在访问时，真正的动态内容主要是通过2条websocket请求和很少的几个http请求

定制化

code-server本身并没有多少定制化

1. 通过配置文件
2. logo等信息只能通过改源码解决
3. extension可以增加ide功能和一定程度ui改变，比如底部状态栏，左菜单，这点与本地vsc一致

写在最后

如果是考虑搭建web ide，可以试试code-server

相关文档

• [原issue][https://github.com/alanhg/coding-note/issues/412]
• https://github.com/coder/code-server