网页版VS Code来了,特斯拉Xbox手机都能用,随时随地写bug

2023-11-01 12:40

本文主要是介绍网页版VS Code来了,特斯拉Xbox手机都能用,随时随地写bug,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

丰色 萧箫 发自 凹非寺
量子位 报道 | 公众号 QbitAI

你可能永远不知道同事以后会在什么地方、用什么写代码!

因为微软正式发布了网页版的VS Code,只要你有浏览器,就能“为所欲为”。

ae6c7ed44da106ec1437798c87805c47.png

这下,有人直接把它“搬”到了特斯拉车里:

6a18043f04a4c9eeacaa06a9f686e226.png

还有人在Xbox上解锁:

e833b8b60d528ca0b4722e50bf05a12c.png

是时候在Xbox上开发Xbox游戏了??

你们常说的iPad买前生产力,买后爱奇艺,这下iPad也终于能coding,再也没理由摸鱼了。

不仅iPad,连手机都行,如果你不嫌屏幕小的话……

d746a0d81d8c57d23db3ac73d8ebe5aa.png

怎么样?心动吗?

反正我们一开始是很心动,所以立刻试了试。

对GitHub支持友好

我们先随便在一台Mac电脑上打开,新建文件后选择语言:

95cd24a97afebd7300aca8adb86630ed.gif

提问:所有编程语言都支持吗?

答:No,分三档。

第一档为体验几乎与桌面端相同是“webby”语言,比如JSON、HTML、CSS和LESS

其次是TypeScript、JavaScript和Python,由在浏览器中本地运行的语言服务提供支持,语法高亮、单文件自动补全、语法错误提示等功能都有,使用体验“良好”;

f912adb2477751c22e83b34527fe35e4.png

其余语言像什么C/C++、C#、Java、Rust、Go……为最后一档,只提供语法高亮、括号对上色、文本补全(别的功能需要自己装插件)。

OK,除了自己新建文件,你也能打开本地项目。

103f6da0a6c183420456fcd969e4c1b5.gif

除非你用的是什么老得不能再老的IE?不过按照官方的说法,也能凑合,能打开单个文件或者远程仓库:

a53c29f17cafcd3d396d7a192c4874ff.png

对,如果你想运行GitHub项目的话,只需在项目地址前加上vscode.dev/,就像这样:

https://github.com/microsoft/vscode => vscode.dev/https://github.com/Microsoft/vscode

f76be5c47513f163f696eb4515642475.gif

或者直接在这里输入项目地址:

0968578b22e48e4bdf3fbd1f8422a68e.png

浏览代码时,可以直接用色彩选择器选取颜色:

e112407b99ad56ca5ec05d4a5ddf5d84.gif

也可以直接生成对应代码的链接,直接分享给其他用户,方便进行讨论:

e12ab1cf247ef4b13cfa02c031d8df55.png

用VS Code,不装点插件哪行?

不过,现在这个网页版似乎支持的不多。

虽说大多数UI插件(主题、热键等)都能用,比如下面这个“Night Owl”:

a168b01f4c0ee26d1941dbf1825f185b.png

ps.可以通过Settings Sync在网页版、桌面端和GitHub仓库之间启动同步。

还有什么支持丰富图像编辑的Luna Paint,GitHub Issue Notebooks等插件也行。

59f4c57c35dade69482d5f7192dea6f1.png

但是像那种使用了操作系统模块的Node.js代码插件、运行了可执行文件的插件等就不行了(搜倒是能搜出来,不过会标记)。

6a14d4db57a78f954f75464f105dd702.png

我们试了一下,Python插件竟然提示装不了……

b9470a86d2cfd31a4f4287f5f8c72dc7.png

不过,基本的VS Code功能还是能用的,像能直接预览Markdown代码效果,也能直接保存文件到本地端:

81a34e856400fb6e5a337ea21d7d0fe7.gif

好,那咱写个“JS深拷贝”运行一下:

Oh,No!虽然它给编译留出了按键,但却无法在线编译

6c64e8d1be009df938bf0993a334cc96.png

不得不承认,浏览器相比桌面端还是有限制

而且,网页版还不支持终端……

c0ffcab7d1f83b53cddaef89aca35d30.gif

好在,对GitHub的托管支持还不错:

内置GitHub Repositories、Codespaces和Pull Request等插件,提交、拉取代码都很方便。

不像对Azure Repos,虽说也支持,但目前只能预览,读写功能还在路上,别的就更别提了。

当然,除了Mac电脑以外,我们还在iPad的Safara浏览器上试着运行了一下网页版VS Code:

9684fa2184eab21323dad14711a9fa09.png

安卓手机上也没问题,除了官宣的Chrome浏览器以外,微软当然也不会放过自带的Edge浏览器,我们又试了一下用Edge运行,OK:

b291260d56c32d0b730f59fb853ed250.png

当然,记得要将各种设备(安卓、iPad等)上的Chrome/Edge浏览器更新至最新版本,否则就会卡在下面这个界面:

f0844b842363c7131652a262b6ecc317.png

整体来说,网页版VS Code还是查看项目代码很方便的利器。

如果出门在外没带电脑,可以直接用身边的其他设备在线查看代码。(给同事挑bug)

不过,这其实不是微软第一次推出在线版本了。

微软:我们正在推动插件支持

早在Build 2019开发者大会上,微软就宣布了会有网页版本的VS Code。

最初的VS Code网页版叫VS Online (Visual Studio Online)。

后来微软发现,VS Online不仅被用来当做网页版代码编辑器,也更像是一个云代码存储空间,所以VS Online又被改名叫VS Codespaces

注意,VS Online和VS Codespaces在云端运行编译是要收费的。(没错,你也可以自己搭服务器,不收费)

45887d1e00dc152103596c44df7dcb83.png

后来VS Codespaces进一步“进化出”GitHub Codespaces,可以直接在GitHub上云编译代码。

甚至有人发现了这个快捷功能:直接在GitHub各种页面上按下“。”按键,就能进入在线编辑界面:

5f539688ef51917d0b683e7cab3db1a7.gif

现在,这个GitHub在线编辑器进化成了完整的VS Code网页版编辑器,也就是这次微软正式发布的网页版VS Code。

不过,也不是不能在浏览器上就完成代码的编译工作——你可以借助Codespaces的云服务器来付费计算:

9a2e29bab3237b340c9de4e47456f75a.png

所以也有人调侃,微软推出的这个VS Code网页版,就是为了推广微软Azure云服务器设计的(手动狗头)

最后,虽然这次发布的这个网页版VS Code还不能和桌面端媲美,但微软此番愿景就是能让大家真正实现在任何地方写任何代码,所以它叫大家“敬请期待更多”。

就比如插件,别看现在少,官方说几乎每天都有新的在加入~

而且大家还能贡献自己开发的插件,开发规范和发布规则都可去VS Code官网查看。

诶?说到随时随地写代码,这才是程序员的真实想法吧:

503d0c8693a70378b13c03861210c909.png

还有马上10.24了,莫非这也是微软提前给广大程序员们的一个惊喜?

“惊喜”传送门:
https://vscode.dev/

参考链接:
[1]https://www.zdnet.com/article/microsoft-makes-its-vs-code-tool-available-directly-in-the-browser/
[2]https://code.visualstudio.com/blogs/2021/10/20/vscode-dev
[3]https://www.youtube.com/watch?v=sy3TUb_iVJM
[4]https://news.ycombinator.com/item?id=28932206
[5]https://github.com/features/codespaces
[6]https://github.com/github/dev
[7]https://visualstudiomagazine.com/articles/2021/10/20/vs-code-web.aspx

这篇关于网页版VS Code来了,特斯拉Xbox手机都能用,随时随地写bug的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/323043

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

禁止复制的网页怎么复制

禁止复制的网页怎么复制 文章目录 禁止复制的网页怎么复制前言准备工作操作步骤一、在浏览器菜单中找到“开发者工具”二、点击“检查元素(inspect element)”按钮三、在网页中选取需要的片段,锁定对应的元素四、复制被选中的元素五、粘贴到记事本,以`.html`为后缀命名六、打开`xxx.html`,优雅地复制 前言 在浏览网页的时候,有的网页内容无法复制。比如「360

cell phone teardown 手机拆卸

tweezer 镊子 screwdriver 螺丝刀 opening tool 开口工具 repair 修理 battery 电池 rear panel 后盖 front and rear cameras 前后摄像头 volume button board 音量键线路板 headphone jack 耳机孔 a cracked screen 破裂屏 otherwise non-functiona

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】:浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器

起点中文网防止网页调试的代码展示

起点中文网对爬虫非常敏感。如图,想在页面启用调试后会显示“已在调试程序中暂停”。 选择停用断点并继续运行后会造成cpu占用率升高电脑卡顿。 经简单分析网站使用了js代码用于防止调试并在强制继续运行后造成电脑卡顿,代码如下: function A(A, B) {if (null != B && "undefined" != typeof Symbol && B[Symbol.hasInstan

(入门篇)JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能,而 JavaScript 作为前端三大基础之一,更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例,带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中,都看到过这种轮播图。它的核心功能是展示多张图片,并且用户可以通过点击按钮,左右切换图片。

Debugging Lua Project created in Cocos Code IDE creates “Waiting for debugger to connect” in Win-7

转自 I Installed Cocos Code IDE and created a new Lua Project. When Debugging the Project(F11) the game window pops up and gives me the message waiting for debugger to connect and then freezes. Also a

LLVM入门2:如何基于自己的代码生成IR-LLVM IR code generation实例介绍

概述 本节将通过一个简单的例子来介绍如何生成llvm IR,以Kaleidoscope IR中的例子为例,我们基于LLVM接口构建一个简单的编译器,实现简单的语句解析并转化为LLVM IR,生成对应的LLVM IR部分,代码如下,文件名为toy.cpp,先给出代码,后面会详细介绍每一步分代码: #include "llvm/ADT/APFloat.h"#include "llvm/ADT/S