ChromeOS 使用VSCode的新姿势

写在开头

在使用Tunnel模式连接VSCode的时候,我发现虽然Tunnel可以让不支持SSH的VSCode Web连接到个人服务器来获得几乎完善的使用体验,但是由于Tunnel会经过微软的服务器进行转发,这样一来一方面让编写代码的安全性有所下降,另一方面由于微软服务器在海外,连接的稳定性与延迟体验大打折扣。同时,在Chromebook上最明显的缺陷就是需要额外的一台机器运行VSCode,这使得Chromebook在无网络环境下编写代码的体验大打折扣。本文将介绍另一种部署方案,可以使Chromebook在无Linux环境下使用离线版VSCode。


Code Server

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

Code-Server 是一款服务端程序,只需将它部署到服务端,即可在任何地方使用 VSCode。
鉴于原生的 Chromebook 体验并不包括开启开发者模式以及 Linux 环境这两个选项,因此本文将从另一个子系统着手,即 Android 环境。本文的方案为:Termux + ConnectionForwarder + Code-Server

Termux

Termux 是本文的起点,也是运行 Code Server 的必要准备条件。Termux 是一款开源终端模拟器,可以免 root 运行Linux程序。
没有启用开发者模式\ADB 调试的 Chromebook 无法安装第三方 APK,但 Termux 已经在 Google Play 上架(目前已停止更新),可以通过 Play Store 下载安装。若可以安装第三方应用,请使用 F-Droid 下载最新版本的 Termux。
1692690129247.webp
打开 Termux 后,安装 tur-repocode-server

pkg update
pkg upgrade -y
pkg install tur-repo
pkg install code-server

配置 Code Server

Code Server默认会从~/.config/code-server/读取配置文件。因此我们可以在该目录下新建配置文件。

mkdir -p ~/.config/code-server/
vim ~/.config/code-server/config.yaml

配置文件如下:

bind-addr: 0.0.0.0:8080
auth: password
password: PASSWORD
cert: false

其中bind-addr必须设置为0.0.0.0。
配置好后,可以使用code-server命令来启动 code-server ,测试配置是否有误。此时我们无法通过浏览器访问 localhost 来进入 VSCode,因为 Android 环境在一个虚拟网络中,它与本机或局域网并不互通。
打开 Termux 侧栏并新建一个 Session,在其中使用 ifconfig 指令,可以查看到 Android 环境的网络情况。其中,eth0 所对应的 ip 即为我们可以访问的虚拟ip。
1692691123146.webp
例如,此时我访问 100.115.92.2:8080 即可正常打开 Code-Server。
1692691180593.webp
但是,由于 Android 环境的ip并没有什么规律,若每次使用都需要访问该 ip,会略显麻烦。因此可以使用 ConnectionForwarder 进行 ChromeOS 上的端口转发。


ConnectionForwarder

Open source Chromebook app for forwarding connections from/to different ports and interfaces (or to internal android IP)

ConnectionForwarder 是一款端口转发的 Chrome 程序,其专为 ChromeOS 设计,用于转发本机的不同端口。
该程序可以从 Chrome扩展商店 下载。
安装该程序后,点击 CREATE RULE 按钮,将 Sources Address 设置为127.0.0.1(localhost) ,以免同一局域网下的其他用户访问;将 Destination Address 设置为 Android,同时将目标地址的端口设置为配置文件的端口,将源端口设置为任意端口,并点击 ADD RULE 保存配置。
1692691767258.webp
最后,确保打开了 Enable ForwardingEnable Rule 两个选项。
此时,我们就可以通过 localhost:port 访问 Code Server 了。
1692691903678.webp


欢迎关注我的公众号:Saki的避风港,获取更多有趣内容。

发送你的互动

在你的页面中添加 microformats2 标记后,在下方输入框中输入你页面的地址,点击“发送”。


什么是 Webmention?

Webmention 是一个开放的 Web 标准,允许网站之间互相通知。当你的文章引用了其他网站的文章时,你可以通过 Webmention 通知对方。

互动方式

根据你想进行的互动类型,你的页面需要包含对应的 microformats2 标记:

1. 点赞 (Like)
<div class="h-entry">
  <a class="u-like-of" href="/archives/6/"></a>
  <a class="u-author h-card" href="你的网站地址">
    <img class="u-photo" src="你的头像URL" alt="你的名字">
  </a>
</div>
2. 转发 (Repost)
<div class="h-entry">
  <a class="u-repost-of" href="/archives/6/"></a>
  <a class="u-author h-card" href="你的网站地址">
    <img class="u-photo" src="你的头像URL" alt="你的名字">
  </a>
</div>
3. 回复 (Reply)
<div class="h-entry">
  <a class="u-in-reply-to" href="/archives/6/"></a>
  <p class="p-name">你的记录标题</p>
  <p class="e-content">你的回复内容</p>
  <a class="u-author h-card" href="你的网站地址">
    <img class="u-photo" src="你的头像URL" alt="你的名字">
    <span class="p-name">你的名字</span>
  </a>
</div>
评论
  1. 2024-03-22 11:20 回复

    123

提示:本地评论在提交后需经审核才会公开显示,感谢您的耐心与交流。