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

摘要： WEB IDE新时代！

• 做者：SHUHARI 的博客
• 原文：有趣的项目 - 在浏览器中运行 Visual Studio Code

Fundebug按照原文要求转载，版权归原做者全部。

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

本地运行服务

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

如下示例均基于 Coder 当前版本（1.691）。后续版本中可能会发生变化，所以若是运行有问题的话，建议参考 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），请记住该信息，以防后续输出内容太多难以找到。在后面咱们要用它来登陆。

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

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

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

运行界面

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

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

固然，这种行为是能够理解的，由于网页中没法直接调用操做系统 UI，所以相关功能都是 Coder 团队修改后才能正常使用的。

若是你使用 Docker 运行方式的话，那么你还会注意到其余一些不一样。例如，从终端的显示你会发现该命令是运行在容器中的，因此在终端中执行的结果在容器运行结束后也不会保留下来。若是你但愿保留工做结果的话，那么应当使用版本控制系统。

使用体验

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

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

使用场景

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

事实上，眼下已经有很多相似思路的 Web IDE，好比 AWS Cloud9， Eclipse Che，国内也有 Coding 的 WebIDE（目前彷佛是合并到了腾讯云）等。和相似产品比较起来，VSCode 的主要优点应该是有着更好的社区和生态环境，于是使用前景也更为广阔。

固然咱们也看到，目前在浏览器中运行 VSCode 仍然存在一些有待解决的技术问题，所以还不适合普遍采用。但这已是一个不小的成就，在程序员社区中已经讨论和研究多年的彻底在线开发，能够说是又大大迈进了一步。

关于Fundebug

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