網(wǎng)頁(yè)版VS Code來(lái)了，特斯拉Xbox手機(jī)都能用，隨時(shí)隨地寫(xiě)bug
量子位報(bào)道公眾號(hào) QbitAI
你可能永遠(yuǎn)不知道同事以后會(huì)在什么地方、用什么寫(xiě)代碼！
因?yàn)槲④浾桨l(fā)布了網(wǎng)頁(yè)版的 VS Code，只要你有瀏覽器，就能“為所欲為”。
這下，有人直接把它“搬”到了特斯拉車?yán)铮?/p>
還有人在 Xbox 上解鎖：
是時(shí)候在 Xbox 上開(kāi)發(fā) Xbox 游戲了？？
你們常說(shuō)的 iPad 買(mǎi)前生產(chǎn)力，買(mǎi)后愛(ài)奇藝，這下 iPad 也終于能 coding，再也沒(méi)理由摸魚(yú)了。
不僅 iPad，連手機(jī)都行，如果你不嫌屏幕小的話……
怎么樣？心動(dòng)嗎？
反正我們一開(kāi)始是很心動(dòng)，所以立刻試了試。
對(duì) GitHub 支持友好
我們先隨便在一臺(tái) Mac 電腦上打開(kāi)，新建文件后選擇語(yǔ)言：
提問(wèn)：所有編程語(yǔ)言都支持嗎？
答：No，分三檔。
第一檔為體驗(yàn)幾乎與桌面端相同是“webby”語(yǔ)言，比如JSON、HTML、CSS 和 LESS；
其次是TypeScript、JavaScript 和 Python，由在瀏覽器中本地運(yùn)行的語(yǔ)言服務(wù)提供支持，語(yǔ)法高亮、單文件自動(dòng)補(bǔ)全、語(yǔ)法錯(cuò)誤提示等功能都有，使用體驗(yàn)“良好”；
其余語(yǔ)言像什么C/C++、C#、Java、Rust、Go……為最后一檔，只提供語(yǔ)法高亮、括號(hào)對(duì)上色、文本補(bǔ)全（別的功能需要自己裝插件）。
OK，除了自己新建文件，你也能打開(kāi)本地項(xiàng)目。
除非你用的是什么老得不能再老的 IE？不過(guò)按照官方的說(shuō)法，也能湊合，能打開(kāi)單個(gè)文件或者遠(yuǎn)程倉(cāng)庫(kù)：
對(duì)，如果你想運(yùn)行 GitHub 項(xiàng)目的話，只需在項(xiàng)目地址前加上vscode.dev/，就像這樣：
https://github.com/microsoft/vscode => vscode.dev/https://github.com/Microsoft/vscode
或者直接在這里輸入項(xiàng)目地址：
瀏覽代碼時(shí)，可以直接用色彩選擇器選取顏色：
也可以直接生成對(duì)應(yīng)代碼的鏈接，直接分享給其他用戶，方便進(jìn)行討論：
用 VS Code，不裝點(diǎn)插件哪行？
不過(guò)，現(xiàn)在這個(gè)網(wǎng)頁(yè)版似乎支持的不多。
雖說(shuō)大多數(shù) UI 插件（主題、熱鍵等）都能用，比如下面這個(gè)“Night Owl”：
ps.可以通過(guò) Settings Sync 在網(wǎng)頁(yè)版、桌面端和 GitHub 倉(cāng)庫(kù)之間啟動(dòng)同步。
還有什么支持豐富圖像編輯的 Luna Paint，GitHub Issue Notebooks 等插件也行。
但是像那種使用了操作系統(tǒng)模塊的 Node.js 代碼插件、運(yùn)行了可執(zhí)行文件的插件等就不行了（搜倒是能搜出來(lái)，不過(guò)會(huì)標(biāo)記）。
我們?cè)嚵艘幌拢?strong style="margin: 0px; padding: 0px; line-height: 1.5em;">Python 插件竟然提示裝不了……
不過(guò)，基本的 VS Code 功能還是能用的，像能直接預(yù)覽Markdown 代碼效果，也能直接保存文件到本地端：
好，那咱寫(xiě)個(gè)“JS 深拷貝”運(yùn)行一下：
Oh，No！雖然它給編譯留出了按鍵，但卻無(wú)法在線編譯！
不得不承認(rèn)，瀏覽器相比桌面端還是有限制。
而且，網(wǎng)頁(yè)版還不支持終端……
好在，對(duì) GitHub 的托管支持還不錯(cuò)：
內(nèi)置 GitHub Repositories、Codespaces 和 Pull Request 等插件，提交、拉取代碼都很方便。
不像對(duì) Azure Repos，雖說(shuō)也支持，但目前只能預(yù)覽，讀寫(xiě)功能還在路上，別的就更別提了。
當(dāng)然，除了 Mac 電腦以外，我們還在iPad的 Safara 瀏覽器上試著運(yùn)行了一下網(wǎng)頁(yè)版 VS Code：
在安卓手機(jī)上也沒(méi)問(wèn)題，除了官宣的 Chrome 瀏覽器以外，微軟當(dāng)然也不會(huì)放過(guò)自帶的Edge 瀏覽器，我們又試了一下用 Edge 運(yùn)行，OK：
當(dāng)然，記得要將各種設(shè)備（安卓、iPad 等）上的 Chrome/Edge 瀏覽器更新至最新版本，否則就會(huì)卡在下面這個(gè)界面：
整體來(lái)說(shuō)，網(wǎng)頁(yè)版 VS Code 還是查看項(xiàng)目代碼很方便的利器。
如果出門(mén)在外沒(méi)帶電腦，可以直接用身邊的其他設(shè)備在線查看代碼。（給同事挑 bug）
不過(guò)，這其實(shí)不是微軟第一次推出在線版本了。
微軟：我們正在推動(dòng)插件支持
早在 Build 2019 開(kāi)發(fā)者大會(huì)上，微軟就宣布了會(huì)有網(wǎng)頁(yè)版本的 VS Code。
最初的 VS Code 網(wǎng)頁(yè)版叫VS Online （Visual Studio Online）。
后來(lái)微軟發(fā)現(xiàn)，VS Online 不僅被用來(lái)當(dāng)做網(wǎng)頁(yè)版代碼編輯器，也更像是一個(gè)云代碼存儲(chǔ)空間，所以 VS Online 又被改名叫VS Codespaces。
注意，VS Online 和 VS Codespaces 在云端運(yùn)行編譯是要收費(fèi)的。（沒(méi)錯(cuò)，你也可以自己搭服務(wù)器，不收費(fèi)）
后來(lái) VS Codespaces 進(jìn)一步“進(jìn)化出”GitHub Codespaces，可以直接在 GitHub 上云編譯代碼。
甚至有人發(fā)現(xiàn)了這個(gè)快捷功能：直接在 GitHub 各種頁(yè)面上按下“。”按鍵，就能進(jìn)入在線編輯界面：
現(xiàn)在，這個(gè) GitHub 在線編輯器進(jìn)化成了完整的 VS Code 網(wǎng)頁(yè)版編輯器，也就是這次微軟正式發(fā)布的網(wǎng)頁(yè)版 VS Code。
不過(guò)，也不是不能在瀏覽器上就完成代碼的編譯工作——你可以借助 Codespaces 的云服務(wù)器來(lái)付費(fèi)計(jì)算：
所以也有人調(diào)侃，微軟推出的這個(gè) VS Code 網(wǎng)頁(yè)版，就是為了推廣微軟 Azure 云服務(wù)器設(shè)計(jì)的（手動(dòng)狗頭）
最后，雖然這次發(fā)布的這個(gè)網(wǎng)頁(yè)版 VS Code 還不能和桌面端媲美，但微軟此番愿景就是能讓大家真正實(shí)現(xiàn)在任何地方寫(xiě)任何代碼，所以它叫大家“敬請(qǐng)期待更多”。
就比如插件，別看現(xiàn)在少，官方說(shuō)幾乎每天都有新的在加入～
而且大家還能貢獻(xiàn)自己開(kāi)發(fā)的插件，開(kāi)發(fā)規(guī)范和發(fā)布規(guī)則都可去 VS Code 官網(wǎng)查看。
誒？說(shuō)到隨時(shí)隨地寫(xiě)代碼，這才是程序員的真實(shí)想法吧：
還有馬上 10.24 了，莫非這也是微軟提前給廣大程序員們的一個(gè)驚喜？
“驚喜”傳送門(mén)：
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