资讯专栏INFORMATION COLUMN

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

joyvw / 2528人阅读

摘要:启动后在浏览器中导航到。这时清空一下浏览器缓存再运行就可以了。当然我们也看到,目前在浏览器中运行仍然存在一些有待解决的技术问题,因此还不适合广泛采用。

摘要: WEB IDE新时代!

作者:SHUHARI 的博客

原文:有趣的项目 - 在浏览器中运行 Visual Studio Code

Fundebug按照原文要求转载,版权归原作者所有。

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

本地运行服务

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

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

基于 Docker

假如你的机器已经安装了 Docker 的话,那么该方式是最简便的。由于DockerLinux 系统支持最佳,而 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,那么在此基础上添加必要的开发包以后,我们不难据此创建一个标准镜像,从而让开发者拥有一个统一、标准化的开发环境,本地安装、维护开发组件从此将不成为问题。这应该是很多程序员和项目管理者所乐见的。此外,在运维、在线教学等领域也可以发挥很大作用。

事实上,眼下已经有不少类似思路的 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、微脉、青团社等众多品牌企业。欢迎大家免费试用!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106402.html

相关文章

  • 如何WSL下使用VS Code

    摘要:使开发人员能够在上运行环境,而无需付出更多使用虚拟机时的开销。虽然本文的标题是在下使用,但也同样适用于其他应用程序。在应用商店搜索。在这我们使用下,这能再之后减少很多麻烦。结论使用和,我们可以在上安装并使用图形界面运行上的应用程序。 自微软开始宣布拥抱开源以来,我认为微软发布的最棒的两大功能是:Visual Studio Code(VS Code)和Windows子系统Linux(WS...

    ymyang 评论0 收藏0
  • 如何WSL下使用VS Code

    摘要:使开发人员能够在上运行环境,而无需付出更多使用虚拟机时的开销。虽然本文的标题是在下使用,但也同样适用于其他应用程序。在应用商店搜索。在这我们使用下,这能再之后减少很多麻烦。结论使用和,我们可以在上安装并使用图形界面运行上的应用程序。 自微软开始宣布拥抱开源以来,我认为微软发布的最棒的两大功能是:Visual Studio Code(VS Code)和Windows子系统Linux(WS...

    habren 评论0 收藏0
  • 搭配 VS Code Remote 远程开发扩展 WSL 下开发

    摘要:注意远程开发扩展需要。在中打开文件夹在中打开适用于的子系统中的文件夹与从命令提示符打开文件夹非常相似。打开终端窗口使用开始菜单项或从命令提示符键入。 ❗ 注意:远程开发扩展需要 Visual Studio Code Insiders。 Visual Studio Code Remote - WSL 扩展允许你直接借助 VS Code 令 「适用于 Linux 的 Windows 子系统...

    alighters 评论0 收藏0
  • [译] 使用 VS Code 加速前端开发

    摘要:在对比我最近几个月所用的开发工具后,我发现了一些惊人的东西。永远不停止使用。将警告未使用的代码。预检查使用,,和非常有用。不再需要使用开启服务器,创建应用程序,并打开浏览器。尝试使用别的东西,立即出现错误。 原文:Supercharging Frontend Development with VS Code 作者:zachcodes 过去几天,为了在开发 GraphQL / Rea...

    keithxiaoy 评论0 收藏0
  • VS Code插件开发介绍(一)

    摘要:发布插件插件开发完后就可以发布了,需要安装安装完后,需要去注册并生成一个。总结本文介绍了插件开发的基本流程,实现了一个简单的插件。更多的开发技巧,可以看这个系列的第二篇插件开发介绍二 前言 前段时间做了一个基于命令行的效率工具,可以自动生成组件的模板代码。自己用起来还觉得挺好,但在组内案例几次后大家都不愿意用,究其原因还是命令行工具使用起来门槛有点高,不方便。由于组内已经统一使用VS ...

    thursday 评论0 收藏0

发表评论

0条评论

joyvw

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<