随时随地能写代码, vscode.dev 出手了

偶然看到了 VSCode 官方发布了一条激动人心的 Twitter,vscode.dev[1] 域名上线了!

ab10cc48468970d4d09a0c9378bd873d.png

image-20211021211915942

新的域名 vscode.dev[2] 它是一个 web 版的 VSCode 。无论你是在用什么设备,不需要任何依赖,能够让你随时随地在浏览器写代码!

我们常常在提 Cloud IDE,但是以前的种种似乎都要么只是一个 VSCode 的外壳,要么就是在远端运行了一个镜像来实现。

caf5f38f3a5fc005cb75552a2e2d8e7a.png
vscode.dev running in the browser

来看看这次它带来一些不一样的地方

  • 本地文件查看和编辑

  • 插件机制

  • 拉取 Github

  • 自定义主题

本地文件查看和编辑

这次 Web VSCode 使用 File System Access API[3] ,在用户给与权限的情况下,能够操作本地文件系统,这使得我们能够直接使用浏览器去编写本地的代码。

这带来了三个比较实用的应用场景:

  • 本地文件查看和编辑,快速编写例如 markdown 这种轻量的格式。

  • 在不能(轻松)安装 VS Code 的低端机器(如 Chromebook)上编辑代码。

  • 在 iPad 上开发。你可以通过上传/下载文件来编写代码(甚至使用 Files App将它们存储在云中),以及使用内置的 GitHub 存储库扩展远程打开存储库。

3b4a59ba98c59929b59da7783a24a150.png
vscode.dev

插件机制

大多数UI自定义扩展(如主题,快捷键和代码段)都在 vscode.dev 中工作,你甚至可以通过Settings Sync[4](设置同步)使在浏览器,桌面应用和GitHub代码空间之间进行无缝衔接。

例如 Luna Paint - Image Editor[5] 插件,一个具有丰富功能的VCode插件(例如,图层和混合工具),可以直接在 web 上使用,并且你可以将图片下载到本地。

d0901f0a55b2c23c5541cf60e891cf49.png
image-20211021235956316

GitHub Issue Notebooks[6]  插件可以通过笔记的方式去管理 GitHub Issues。这样,你就可以将查询、反馈甚至Markdown笔记都集中到一个编辑器中。

拉取 Github

Web 的 VSCode 自带了 GitHub Repositories[7],Codespaces[8]和 Pull Request[9] 的扩展,能够让你轻松访问 Github中的代码。

855d5622c0daef78e23d5143a2e43ec9.gif
Github拉取代码

5ef3112438d380c66c7e1ecdc985f00b.png

Pull Request

cbcde13e743e5206175c0dfec25fb806.png

Github Codespaces(需要付费)


这看起来和 github.dev 很像。

但是 vscode.dev 除了GitHub上的存储库外,Web的 VSSode 还支持Azure Repos(Azure DevOps的一部分)。要使用两者,Web 的 VSCode 需要添加两个路由,vscode.dev/github 和 vscode.dev/azurerepos

例如  https://github.com/microsoft/vscode 改为

'https://vscode.dev/github.com/Microsoft/vscode'.

Azure Repos 也是一样, https://dev.azure.com/…  改为

'https://vscode.dev/dev.azure.com /…'.

主题

和上面快速访问 github/ azure 存储库类似,通过添加特殊的路径来展示不一样的主题。

https://vscode.dev/theme/sdras.night-owl

6ba203ebbed419301566276434facd08.png
Night Owl color theme in vscode.dev

总结

插件机制还是令人惊艳的,正如官方所说,越来越多的插件正在发布,并且也定制了[web 插件规范](Web Extensions authoring guide[10].) ,未来将会有越来越多的可能,例如 StackBlitz 推出了 直接在浏览器中使用 WebAssembly 跑 Node.js 的Web IDE WebContainers[11]。但是在浏览器无法使用终端还是比较伤,确实阉割了比较重要的功能,后续就看插件能否来填补这块的空缺,像 StackBlitz 一样推出自制的开发环境!

参考资料

[1]

vscode.dev: vscode.dev

[2]

vscode.dev: vscode.dev

[3]

File System Access API: https://developer.mozilla.org/docs/Web/API/File_System_Access_API

[4]

Settings Sync: https://code.visualstudio.com/docs/editor/settings-sync

[5]

Luna Paint - Image Editor: https://marketplace.visualstudio.com/items?itemName=Tyriar.luna-paint

[6]

GitHub Issue Notebooks: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-github-issue-notebooks

[7]

GitHub Repositories: https://code.visualstudio.com/docs/editor/github#_github-repositories-extension

[8]

Codespaces: https://code.visualstudio.com/docs/remote/codespaces

[9]

Pull Request: https://code.visualstudio.com/docs/editor/github#_getting-started-with-github-pull-requests-and-issues

[10]

web 插件规范: https://code.visualstudio.com/api/extension-guides/web-extensions

[11]

WebContainers: https://link.zhihu.com/?target=https%3A//blog.stackblitz.com/posts/introducing-webcontainers/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: https://vscode.dev 是一个在线的 Visual Studio Code 编辑器,可以直接在浏览器中使用。它提供了与桌面版 Visual Studio Code 相同的功能和体验,包括代码高亮、智能提示、调试等。用户可以通过登录自己的 GitHub 账号,将代码保存到 GitHub 仓库中。这个在线编辑器非常方便,可以让用户在任何地方都能够轻松地编代码。 ### 回答2: https://vscode.dev 是一个在线版 Visual Studio Code 代码编辑器,提供了在线编辑代码、调试、构建和部署的功能。以下是对它的介绍和评价: 1. 介绍 https://vscode.dev 是一款基于云端的代码环境,类似于 Google Docs 的在线协作编辑器,可以让用户专注于代码的编和业务的实现,而不需要担心本地开发环境的问题,也能够方便地在不同的设备上进行开发。它提供了和本地 Visual Studio Code 相同的编辑器功能,包括语法高亮、自动完成、代码折叠、版本控制、调试器、终端等。 2. 优缺点分析 优点: (1)多设备同步:在线版能够让用户在任何设备上编和部署代码,多终端同步,方便快捷。 (2)简单轻便:不需要下载和安装软件,只需在浏览器中输入 URL 链接即可开始使用。 (3)云端存储:代码存储在云端,避免了本地存储的问题,如果发生意外情况,代码不会丢失。 (4)简单的调试器:提供了代码调试器,让用户可以方便地进行调试。 缺点: (1)稳定性问题:由于是在线编,网络稳定性和速度依然是个问题,如果遇到网络问题,对开发效率就会有很大的影响。 (2)集成问题:由于需要在网页端进行开发,需要将插件和工具安装到云端编辑器中。但是,并非所有的插件和工具都能够稳定地集成到在线环境中。 3. 应用场景 在线版 Visual Studio Code 主要适用于一些个人、小型团队的开发者,可以用来开发 Web 应用、移动端应用等。它也能够提供一个轻量的编环境,让开发者快速尝试并熟悉某些新的技术,减少本地开发环境的依赖。当然,对于大型企业级项目开发,还是更适合使用本地的 Visual Studio Code 编辑器。 ### 回答3: VSCode.dev是什么? VSCode.dev是微软为开发者推出的一种在线编码平台,它可以在浏览器内运行Visual Studio Code。通过这个平台,用户可以在无需安装任何软件的情况下,快速地创建、编辑、调试和部署应用程序。用户只需使用具备web浏览器的任何设备,比如笔记本电脑、平板电脑或手机,在任何地方和任何时候都可以享受快速的编码体验。 VSCode.dev的特点: 1.在线编辑体验:VSCode.dev可以让用户在web浏览器中使用Visual Studio Code的所有强大编辑和调试功能,实现更快捷更便利的编程工作。 2.无缝集成Github:该平台和Github的无缝集成,使得用户可以轻松地检查和管理他们在Github存储库中的代码和项目。 3.云开发体验:VSCode.dev具有云开发体验,可以轻松地将代码和项目部署到任意的云服务中。 4.多设备同步:用户可以通过VSCode.dev来同步多个设备上的编辑器。 5.支持多种编程语言和开发环境:VSCode.dev支持多种编程语言和开发环境,包括JavaScript、TypeScript、PythonJava、C++等。 总体来说,VSCode.dev平台的简单性和易用性,使得它成为开发人员的选择。它可以给用户提供一个完整的在线代码编辑体验,并且还可以在不同设备之间同步您的编程环境,非常适合在不同地方和不同设备下的编程工作。如果您正在寻找一种轻量级的代码编辑器,并且希望使用Visual Studio Code的所有功能,那么VSCode.dev就是一个不错的选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值