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. 使用官方一键安装脚本跨平台支持
1
2
# 支持指定版本安装
curl -fsSL https://code-server.dev/install.sh | sh -s -- --version=4.7.1

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

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

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

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

分发包区别

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

后台运行

  1. 手动添加到服务

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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用户权限

  1. &后台运行

    直接运行code-server

登录认证

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

拓展Extensions

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

code-server –help

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

1
2
3
4
5
6
7
8
9
# 列出所有命令属性
code-server --help

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

# 安装extension
code-server --install-extension
...

常见问题

默认打开某个文件夹

URL配置folder参数即可

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

动态打开行列号

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

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

语言切换

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

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

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

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

端口转发

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

1
2
// 启用后,将检测到新的正在运行的进程,并自动转发其侦听的端口。禁用此设置将不会阻止转发所有端口。即使禁用,扩展将仍然能够导致端口被转发,并且打开某些 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定制化

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

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

写在最后

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

相关文档

[https://github.com/alanhg/coding-note/issues/412]: