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

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

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


image.png


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


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


image.png


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


  • 本地文件查看和编辑
  • 插件机制
  • 拉取 Github
  • 自定义主题


本地文件查看和编辑



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


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


  • 本地文件查看和编辑,快速编写例如 markdown 这种轻量的格式。
  • 在不能(轻松)安装 VS Code 的低端机器(如 Chromebook)上编辑代码。
  • 在 iPad 上开发。你可以通过上传/下载文件来编写代码(甚至使用 Files App将它们存储在云中),以及使用内置的 GitHub 存储库扩展远程打开存储库。


image.png


插件机制



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


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


image.png


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


拉取 Github



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


image.png


image.png


image.png


image.pngimage.pngimage.png


这看起来和 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

image.png


总结



插件机制还是令人惊艳的,正如官方所说,越来越多的插件正在发布,并且也定制了[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/

相关文章
|
8天前
|
机器学习/深度学习 人工智能 自然语言处理
|
3月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
6天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
153 7
|
6月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
342 1
|
3月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
4月前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
1848 3
|
4月前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
1117 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
6月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
197 5
|
5月前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
390 2
|
6月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
154 6

热门文章

最新文章