浏览器内写代码，微软发布 VS Code Server

内容导航：

浏览器内写代码，微软发布 VS Code Server

VS Code闪现，巨头纷纷入局的Web IDE缘何崛起？

如何在Visual Studio Code中调用浏览器运行HTML代码

VS Code 1.38 发布，官方图标存储库发布

一、浏览器内写代码，微软发布 VS Code Server

整理 | 彭慧中 责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

致力于为开发者提供更好工具的软件巨头微软，最近又为开发者带来了新的惊喜。

7 月 7 日，微软重磅推出 Visual Studio Code Server 服务，这是一项在远程开发机器上运行的后端服务。用户可以将该服务安装在任何位置（本地开发机器、云 VM 等），然后使用 VS Code 网页版（vscode.dev）通过浏览器安全地连接到该远程计算机上进行开发，无需设置麻烦的 SSH 或 https 。

远程开发的过去、现在及未来

2019 年，微软开发了一款扩展程序，通过这个扩展，开发者可以在本地使用 VS Code 实现远程开发，如在 WSL、Docker 容器以及通过 SSH 管理的远程物理机或虚拟机上“远程”开发应用程序。该远程开发扩展需要在远程的环境中安装服务器，以方便本地的 VS Code 与远程的源代码和运行时进行顺利交互。

2020 年，微软通过 GitHub Codespaces 在远程开发方面又向前迈进了一步，它可以让用户在本地或在浏览器中使用 VS Code 在远程虚拟机上开发应用程序，该虚拟机在云中为用户托管和管理。

事实上，VS Code 是一个多进程应用程序。从理论上来讲，输入代码的前端与后端服务，如：托管扩展、终端、调试等，分别应该在各自单独的进程中运行。

而如今，“Visual Studio Code Server”让一切成为了可能，通过 Visual Studio Code Server，用户能够将服务器安装在本地或云端的任何位置，并使用 VS Code for Web 在浏览器中远程安全访问，且无需设置任何 SSH 或 https。这意味着在完成最初的配置工作后，理论上就能够在任何位置，任何性能的电脑中，通过浏览器完成对项目的开发与修改，大大提升了工作的便捷性。（再也不用背电脑回去加班了）

图源Visual Studio Code官网

使用指南

由于 Visual Studio Code Server 目前处于预览阶段，因此用户需要通过一个注册表来申请访问，在开始使用后的几周内，会有邮件通知，在那之后可依照如下步骤使用。

以在 Windows Subsystem for Linux (WSL) 中设置 VS Code Server 为例，使用方法如下：

1、将 VS Code Server 安装在远程机器上，在终端中运行以下命令：

wget -O- https://aka.ms/install-vscode-server/setup.sh | sh

2、通过在终端中运行以下命令来启动 VS Code Server：

code-server

3、用户的远程机器将通过安全隧道与 vscode.dev 通信，无论在哪个网络上，都允许用户从 vscode.dev 连接到计算机。用户将获得一个设备代码和 URL，并验证 GitHub 帐户。

Please enter the code 7644-1186 on https://github.com/login/device

4、如果是第一次启动 VS Code Server，系统将提示用户输入连接名称。

What would you like to call this machine? (elegant-pitta)

5、在验证并提供机器名称后，CLI 会启动服务器实例并生成 vscode.dev URL。接着，用户就可以在任意设备上打开此 URL 来写代码了。

用户体验

微软的该服务一经推出，就引来不少开发者跃跃欲试。

一些开发者对此赞不绝口：“这类服务超级有用！首先，我可以从家里的笔记本电脑连接到我的工作电脑（12 核），给家用笔记本提供与工作电脑相同的速度。不仅如此，我也可以在火车上做同样的事情，并节省大量的电量。在我们公司，我们也通过 GitPod 给那些机器性能较差且很难找到强大的计算机部件的开发者使用。”

图源Hacker News

同时，还有开发者表示：“这对那些有严格安全限制的公司来说是超级有用的。在工作中，我被迫在一个空气密封的环境中工作，这是为了防止不需要的东西进入我们的网络，同时也要防止需要的东西离开我们的网络。而设置远程扩展是一件很麻烦的事情，因为不可能手动安装服务器。“

图源Hacker News

如果你也对 Visual Studio Code Server 感兴趣，何不立即尝试一下，并告诉我们你的感受呢？

参考资料：https://code.visualstudio.com/blogs/2022/07/07/vscode-server

一、VS Code闪现，巨头纷纷入局的Web IDE缘何崛起？

我发了，我装的。

就在前几天，微软简短的发布了Visual Studio Code for the Web 的公告，而没过一阵，这则公告就被删除了，现在点经相关内容已经是404状态了。虽然公告的内容已经删除，但是我们依旧可以看到存档的版本。

这个劲爆的消息很快就在社区中引起了大家的热议。

根据已经删除的公告内容，我们了解到Visual Studio Code for the Web 是一个基于 Web 的在线代码编辑器，无需下载安装可以直接在浏览器中运行。删除帖子内容的公告解释说“每个人都可以免费使用 VS Code for the Web”。从内容来看这项服务和当前 GitHub的Web的编辑器差不多。我们可以使用它来浏览托管在GitHub和本地机器上的源代码。用户可以导航到GitHub文件和源代码存储库，对代码内容提交和修改，同时还可以在编辑器中打开查看仓库具体内容，进行使用。

其实这并不是Web IDE第一次与大家见面，伴随着EclipseCon上基于web的Eclipse工作台的演示，以及当如Heroku这种基于web的IDE同时也是RoR应用托管环境的出现，已经预示着基于Web的IDE会逐渐成为主流。甚至早在三年之前Gitee就推出了自己的"Web IDE"。

作为一种在线集成开发环境，Web IDE的使用无需本地安装开发环境，只需打开浏览器就能立即开发，同时支持断点调试、版本管理、团队开发等功能。与传统本地IDE相比，它的优点几乎是不言而喻的。

1、快捷 ，以往的开发环境搭建每更换一次电脑，就要重新安装开发环境，同时写完代码后代码都在本地内容保存，如果没推到远程仓库，在别的电脑上也拿不到你最新的代码。但是Web IDE无需重新安装，且在编码过程中随时保存，哪怕我们的电脑突然坏掉，我们也可以在别的设备上登陆后拿到我们之前写好写的代码，在任意一台电脑上打开浏览器就能立即编码开发。同时我们可以随时通过浏览器去访问代码内容，手机、平板似乎也可以成为我们编程的工具，真正实现了敲代码自由，不再需要担心同步问题；

2、高效 ，Web IDE支持团队实时在线进行代码沟通协调，多人开发时需要调整大家的本地环境，而在在线编辑的情况下大家的编程环境相同，只需要进行一次环境配置，提高了软件的开发效率；

3、协同 ，代码通过实时保存在云端，并进行多重备份，即使本地电脑硬盘坏了，也不会造成代码丢失。同时当我们需要进行合作，或者将代码内容给别的小伙伴查看的时候，只需要将存储地址发给小伙伴，不需要进行环境配置就可以帮助你调试代码内容，多人协同进行代码编辑也更加方便。

作为开发者心目中的效率神器，桌面版 VS Code 一直是免费的，并且拥有强大的功能，而基于Web 的 VS Code 的优势不仅仅包括了以上提到的三点内容，在新公告中微软表示「VS Code for the Web 可以升级到 GitHub Codespaces 实例」，以适用于需要完整远程环境、构建、调试、充分使用扩展和访问终端的情况。

放眼市场，现在国内巨头们也在推广和使用Web IDE，阿里云发布Kaitian IDE，腾讯云发布Cloud Studio，华为云发布CloudIDE,IT社区bfwwiki发布BfwStudio等。

这就意味着开发者走向随时随地办公，往前又迈近一步。

不过，我们都知道Visual Studio Code的功能点非常多，而且作为一款生产力工具，我们对它响应速度要求也比较高。即将上线的Web版本IDE是否可以提供让我们满意性能呢？我们期待微软在Web应用上做出突破性创新，大幅提升Web应用的响应速度，打消开发者的担忧。

二、如何在Visual Studio Code中调用浏览器运行HTML代码

在Visual Studio Code中调用浏览器运行HTML代码的方法：

1.下载 插件

2.拷贝文件里面德尔html_5.xsd到D:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html

3、运行注册文件VS-2010-x64.reg 根据自己系统而定

4、打开VS2010 或者执行VWD 导航到Tools > Options > Text Editor HTML > Validation 选择HTML 5 as Target。

5、重新启动 完成

三、VS Code 1.38 发布，官方图标存储库发布

Microsoft Visual Studio是VS的全称。VS是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等。所写的目标代码适用于微软支持的所有平台，包括Microsoft Windows、Windows Mobile、Windows CE、.NET Framework、.Net Core、.NET Compact Framework和Microsoft Silverlight 及Windows Phone。

在 1.37 版本中，支持了替换字符串时保留大小写。此版本中，在进行全局替换字符串时，大小写也会保留，同时现在也支持保留连字号分隔的单词。

微软发布了所有 VS code 图标的存储库，以供扩展使用。每个图标有 dark/light 版本。

此版本带来了一些 TypeScript 语言的改进，包括更严格的生成器和对 import.meta 的支持，以及 JavaScript 和 TypeScript 的一些新的工具特性，和以往一样，这个版本还包括许多重要的 bug 修复。

当你在 JavaScript 或 TypeScript 源代码中添加导入或应用重构时，VS Code 会在文件中的现有代码中尝试推断是否包含分号：

参考更多完整内容，请查看 VS Code 官网的发布说明