算法题练习利器:code-server 初体验

in 编程技术分享 with 2 comments

效果图

安装与运行

首先去 code-server 的 Release 页 下载合适架构的预编译包,比如我这里使用的是 code-server-3.5.0-linux-amd64.tar.gz,基于 VS Code v1.48.2。解包后运行 bin 目录中的 code-server 就可以了。

首次运行后会生成配置文件在 ~/.config/code-server/config.yaml 如下:

bind-addr: 127.0.0.1:8080
auth: password
password: abcdefghijklmnopqrstuvwxyz
cert: false

这里可以把监听的地址、端口以及访问密码更改,然后重启 code-server,自此基本上已经可以使用了。

配置 Nginx 反向代理

这一步是可选的,但一般来说我们是需要前置代理服务器的。我使用的是宝塔面板的 Nginx 1.18,新建一个站点配置一下 TLS 证书大家应该都不陌生了,这里不再赘述,重点是配置一下反向代理。

我没有使用宝塔面板自带的反向代理配置,而是直接修改配置文件,因为 code-server 使用到了 WebSocket:

location / {
  proxy_pass http://127.0.0.1:8080;
  proxy_set_header Host $host;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection upgrade;
  proxy_set_header Accept-Encoding gzip;
}

这样就可以运行了,访问你的域名试试,可以正常登录但是登录后却是全白的页面,打开浏览器控制台,发现静态资源都报错 404 了,这是怎么回事呢?其实是宝塔面板默认配置文件的锅,我们将默认配置中的两条静态资源缓存规则删除即可:

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      30d;
    error_log off;
    access_log /dev/null;
}

location ~ .*\.(js|css)?$
{
    expires      12h;
    error_log off;
    access_log /dev/null;
}

再试一下吧,果然可以运行了。

Code 的配置

这部分其实没什么好说的,因为本质上就是 VS Code in the browser,平时怎么用就怎么用,不过因为我最近在写 C++ 算法题,安装最新的 C/C++ 插件后居然报错了,这才意识到这个魔改的 code-server 其实并不是 100% 完全兼容 VS Code 的,在查看了一下 code-server 和 C/C++ 插件 的 issues 后我发现这个问题是该插件更新了 1.0 版本后才出现的,于是我果断回退到 0.29.0 版本并 关闭了插件自动更新,问题顺利解决。

还有一个问题就是语言包插件似乎无效,不过这并无伤大雅。其他的插件并没有发现什么兼容性问题。

总结

运行在浏览器中的 VS Code 还是很有意思的,可以跨设备写代码了,iPad 似乎也能有生产力了(狗头)。使用 code-server 写了一段时间的 C++ 和 Java 还是比较满意的,推荐喜欢折腾的小伙伴们尝试一下。 :-)

Responses
  1. 可以尝试一下remote-ssh这个插件
    使用起来体验要比code-server好一些

    Reply
    1. @zcmimi

      还好吧,感觉体验差不多,code-server 有时候临时在外想用一下就很舒服,remote-ssh 之前在折腾 WSL 的时候用过,现在也还在用,感觉还是比较不错的。

      Reply