如何在浏览器中使用Visual Studio Code在线编程

摘要

昨天分享了一篇Github发布的一个新特效，就是在任何项目按下“.”后可以开启vscode，具体可以参看下方的前情提要，通过这篇的启发，伯衡君就寻找是否有一种类似的强大网站，可以在线储存代码，在线编辑，即在线版的vscode，根据这个需求，确实被我找到了，伯衡君使用后，在一些特定编程……

开篇寄语

昨天分享了一篇Github发布的一个新特效，就是在任何项目按下“.”后可以开启vscode，具体可以参看下方的前情提要，通过这篇的启发，伯衡君就寻找是否有一种类似的强大网站，可以在线储存代码，在线编辑，即在线版的vscode，根据这个需求，确实被我找到了，伯衡君使用后，在一些特定编程下完全可以实现，那是什么呢？请看此篇……

前情提要

• 《Github在网页端推出彩蛋，一键发现新世界》

官方网站

• https://stackblitz.com/

内容详情

使软件项目开源的众多优势之一是其社区可以修补、贡献或直接分叉并制作自定义版本。 Microsoft Visual Studio Code 是一个开源代码编辑器，它是任何平台上同类应用中最受欢迎的应用之一。

不用安装庞大的安装包，现在可以在 Web 浏览器中免费运行 Visual Studio Code 的一个版本啦。

这不一定适合每个人，但如果您经常在机器之间移动，或者即使您希望能够通过 iPad 甚至智能手机等设备进行一些即兴编码，这是一个很好的探索选择。您只需打开它即可随时随地开始工作，无需配置您的环境。

如果您正在寻找一种无需设置即可使用 Visual Studio Code 的简单方法，并且只需跳入浏览器并打开，StackBlitz 是实现此目的的好方法。它完全免费使用并且基于 Visual Studio Code。只需将其连接到您的 GitHub 帐户即可登录，编辑代码后会自动同步记录，下次打开选择该项目可以继续编辑。

用户界面立即熟悉，并且有许多预先配置的模板，可帮助您单击即可开始新的工作区。 StackBlitz 的目标是 Web 开发，因此目前还没有提供一些语言，但您可以注册测试版访问 fullstack 版本，它将提供更多。此时 StackBlitz 也不支持扩展。

但是，如果您认为这是一些半生不熟的解决方案，那您就错了。 StackBlitz 使用 Progressive Web API 在您的浏览器中运行实时开发服务器，不仅允许实时预览您的工作，还允许离线使用。离线工作对于基于浏览器的代码编辑器来说是一个非常棒的功能。

比如运行一个Nodejs脚本，只需要点击Nodejs图标，一个Nodejs项目就从此诞生了，在调试页面有命令窗口，输入node index.js（或者新建一个其他文件）命令，就可以实现运行，如下图所示：

在浏览器中使用 Visual Studio Code 的一种功能更全面的方法是使用 code-server 或基于它构建的 Coder 服务。 Coder 不是免费的，尽管有 60 天的试用期，而且它也不限于 Visual Studio Code。这是一项面向更大发行版和企业使用的服务，允许使用云远程部署开发环境。

代码服务器涉及一些设置，具体步骤将根据您安装它的位置而有所不同。如果您在远程服务器上安装，您至少需要对 Linux 有一点熟悉。

幸运的是，code-server 有一个关于开始的完整教程，并且不乏来自 YouTube 等资源的在线指南，可以引导您了解 code-server 的许多不同用途。它非常灵活，一旦完成初始工作，您将在任何机器上拥有完整版的 Visual Studio Code。