如何在浏览器中运行 VS Code？

╰半夏微凉° 2021-11-09 05:50 512阅读 0赞

**摘要：** WEB IDE新时代！

*  作者：[SHUHARI 的博客][SHUHARI]
 *  原文：[有趣的项目 - 在浏览器中运行 Visual Studio Code][- _ Visual Studio Code]

**[Fundebug][]按照原文要求转载，版权归原作者所有。**

众所周知，`Visual Studio Code` 是基于 `Electron` 的，而`Electron` 又是一个“双头怪”——基于 Web 技术的桌面应用平台。但在最近，[Coder][] 的开发者最近做了有趣的尝试，让我们可以把整个 `VSCode` 放到浏览器中去运行，并且我们也可以很容易地去亲身体验他们的工作成果。如果你有兴趣的话，不妨跟我一起尝试一下。

### 本地运行服务 ###

简单地说，`Coder` 对 `VSCode` 进行了一些修改，以允许其作为可托管的 Web 服务来运行，该服务称为 `Code-Server`。要在我们自己的机器上运行该服务，目前有两种用法：基于 `Docker` 容器，或者自己下载运行服务程序。

以下示例均基于 `Coder` 当前版本（1.691）。后续版本中可能会发生变化，因此如果运行有问题的话，建议参考 [Coder 官网][Coder]。

### 基于 Docker ###

假如你的机器已经安装了 `Docker` 的话，那么该方式是最简便的。由于`Docker` 对 `Linux` 系统支持最佳，而 `Windows`/`MacOS` 虽然也能运行但比较别扭，所以以下示例均以 `Ubuntu` 为环境。运行容器只需要如下一行命令（你可以自行决定在什么位置加载文件卷）：

docker run -it -p 127.0.0.1:8443:8443 
        -v "${PWD}:${PWD}" 
        codercom/code-server:1.621 
        --allow-http 
        --no-auth

等待 `Docker` 完成容器下载和启动后，在浏览器中打开 `http://localhost:8443` 即可看到 `VSCode` 界面。对于国内环境，为提高网络速度，可考虑使用代理或国内的镜像源。

### 自行下载运行程序 ###

自己下载并运行的步骤要略微麻烦一些，如果不希望使用 `Docker` 的话，可参考如下命令：

wget https://github.com/codercom/code-server/releases/download/1.691-vsc1.33.0/code-server1.691-vsc1.33.0-linux-x64.tar.gz
    tar zxf code-server1.691-vsc1.33.0-linux-x64.tar.gz
    cd code-server1.691-vsc1.33.0-linux-x64
    ./code-server -d $HOME --port 8443

这时控制台将输出服务器启动的日志信息，其中包含服务器的启动密码（`Password`），请记住该信息，以防后续输出内容太多难以找到。在后面我们要用它来登录。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wMS5wbmc][]

启动后在浏览器中导航到 `https://localhost:8443/`。注意这里和 `Docker` 的运行方式有一点不同，本地运行时是强制使用 `https` 的，但使用了 `Coder` 开发者证书，因此如果你看到浏览器提示证书问题的话，请选择接受并继续。接下来会提示你输入控制台显示的密码：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wMi5wbmc][]

输入密码，等服务器启动完毕后会自动进入与 `Docker` 方式相同的界面。

这里还有一点需要提醒。按照主流浏览器的安全策略，一旦你用 `https` 方式浏览了某个网站，那么后续都会要求你继续使用该方式，即使手动输入 `http` 前缀也会强制跳转 `https`。因此，如果你先用本地方式启动，再尝试 `Docker` 的话就会遇到无法使用的问题（因为 `Docker` 方式并不支持 `https`）。这时清空一下浏览器缓存再运行就可以了。

### 运行界面 ###

无论使用哪种方式，启动后在浏览器中都会看到熟悉的界面：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wMy5wbmc][]

如果你尝试使用一下会发现，这个 `VSCode` 在某种程度上是经过“魔改”的，和本地运行的 `VSCode` 在很多方面会有微妙的差别。比如，菜单和标题栏都是在浏览器中绘制的，不像本地程序那样使用系统 UI，而右上角的最小化/最大化/关闭按钮也是没用的。此外，打开文件/文件夹界面也是 `Coder` 团队提供的网页内置界面，不再是系统的文件对话框：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wNC5wbmc][]

当然，这种行为是可以理解的，因为网页中无法直接调用操作系统 UI，因此相关功能都是 `Coder` 团队修改后才能正常使用的。

如果你使用 `Docker` 运行方式的话，那么你还会注意到其他一些不同。例如，从终端的显示你会发现该命令是运行在容器中的，所以在终端中执行的结果在容器运行结束后也不会保留下来。如果你希望保留工作结果的话，那么应当使用版本控制系统。

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wNS5wbmc][]

### 使用体验 ###

那么，在浏览器中编辑的实际体验如何呢？我尝试着编辑并运行了一些程序（当然要安装对应的编译器）、修改并提交 `Markdown` 文件，过程非常顺畅，感觉和本地版的 `VSCode` 没有什么不同。

但是，至少在目前，`Code-Server` 存在一个重大问题：无法在 `VSCode` 中正常安装各种插件。我们都知道`VSCode`要想好用的话通常要安装大量第三方插件，这就使得该工具的使用受到了很大的限制。按照官方说明，这似乎是由于插件安装机制的一些内在限制，并且开发团队也在努力解决该问题，相信再过一段时间我们会看到一个比较完善的解决方案。

### 使用场景 ###

浏览器中运行的 `VSCode` 可以用来干什么呢？一个很容易想象到的场景是远程/在线开发。既然我们已经可以从 `Docker` 容器中运行 `VSCode`，那么在此基础上添加必要的开发包以后，我们不难据此创建一个标准镜像，从而让开发者拥有一个统一、标准化的开发环境，本地安装、维护开发组件从此将不成为问题。这应该是很多程序员和项目管理者所乐见的。此外，在运维、在线教学等领域也可以发挥很大作用。

事实上，眼下已经有不少类似思路的 Web IDE，比如 [AWS Cloud9][]， [Eclipse Che][]，国内也有 Coding 的 WebIDE（目前似乎是合并到了腾讯云）等。和类似产品比较起来，`VSCode` 的主要优势应该是有着更好的社区和生态环境，因而使用前景也更为广阔。

当然我们也看到，目前在浏览器中运行 `VSCode` 仍然存在一些有待解决的技术问题，因此还不适合广泛采用。但这已经是一个不小的成就，在程序员社区中已经讨论和研究多年的完全在线开发，可以说是又大大迈进了一步。

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了20亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用！

[SHUHARI]: https://shuhari.dev/blog/
[- _ Visual Studio Code]: https://shuhari.dev/blog/2019/04/coder-run-vscode-in-browser
[Fundebug]: https://www.fundebug.com/
[Coder]: https://coder.com/
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wMS5wbmc]: /images/20211109/99d700ecd3af4dfeb9b3371f5851076f.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wMi5wbmc]: /images/20211109/d7ba2987fac743408d1aee5c70bec964.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wMy5wbmc]: /images/20211109/fa53cd2f072942749398d6521e859830.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wNC5wbmc]: /images/20211109/5684ad0293484efa9237441778085c7e.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0wNS0wNS5wbmc]: /images/20211109/68785d9d01d94e8aa26a57036473481b.png
[AWS Cloud9]: https://aws.amazon.com/cloud9/
[Eclipse Che]: https://www.eclipse.org/che/