重磅！微軟發(fā)布 vscode.dev，把 VS Code 帶入瀏覽器！
翻譯 | 韓老師 + Google Translate 作者 | Chris Dias
早在 2019 年，當(dāng).dev頂級(jí)域名開放時(shí)，我們趕緊注冊(cè)了vscode.dev。像許多購(gòu)買.dev域名的人一樣，我們不知道我們將用它做啥。反正，也占個(gè)坑吧！
將 VS Code 帶入瀏覽器
直到今天，當(dāng)你轉(zhuǎn)到 https://vscode.dev 時(shí)，你將看到一個(gè)完全在瀏覽器中運(yùn)行的輕量級(jí) VS Code。在本地機(jī)器上打開一個(gè)文件夾并開始編碼。
無(wú)需任何的安裝。如絲般順滑。
隨著 vscode.dev 的出現(xiàn)，我們最終實(shí)現(xiàn)了我們最初的愿景，即構(gòu)建一個(gè)可以在瀏覽器中完全無(wú)服務(wù)器運(yùn)行的開發(fā)工具。
那么，我們可以在 VS Code for the Web 上做什么呢？
使用云工具進(jìn)行本地開發(fā)
支持文件系統(tǒng)訪問(wèn) API（目前的 Edge 和 Chrome）的現(xiàn)代瀏覽器允許網(wǎng)頁(yè)訪問(wèn)本地文件系統(tǒng)（在你的許可下）。這個(gè)簡(jiǎn)單的本地機(jī)器網(wǎng)關(guān)，快速打開了一些使用 VS Code for the Web 作為零安裝本地開發(fā)工具的有趣場(chǎng)景，例如：
本地文件查看和編輯。在 Markdown 中快速記筆記（和預(yù)覽?。?。即使你在無(wú)法安裝完整 VS Code 的受限機(jī)器上，仍然可以使用 vscode.dev 查看和編輯本地文件。 結(jié)合瀏覽器工具構(gòu)建客戶端 HTML、JavaScript 和 CSS 應(yīng)用程序以進(jìn)行調(diào)試。 在 Chromebook 等低功率機(jī)器上編輯代碼，因?yàn)槟銦o(wú)法（或者說(shuō)“輕松地”）在 Chromebook 安裝 VS Code。 在 iPad 上開發(fā)。你可以上傳/下載文件（甚至使用 Files 應(yīng)用程序?qū)⑺鼈兇鎯?chǔ)在云中），以及使用內(nèi)置的 GitHub 存儲(chǔ)庫(kù)擴(kuò)展遠(yuǎn)程打開存儲(chǔ)庫(kù)。
而且，如果你的瀏覽器不支持本地文件系統(tǒng) API，仍然可以通過(guò)瀏覽器上傳和下載單個(gè)文件來(lái)打開它們。
由于 VS Code for the Web 完全在瀏覽器中運(yùn)行，因此與你在桌面應(yīng)用程序中可以執(zhí)行的操作相比，某些體驗(yàn)自然會(huì)受到更多限制。例如，終端和調(diào)試器不可用。這是有道理的，因?yàn)槟銦o(wú)法在瀏覽器沙箱中編譯、運(yùn)行和調(diào)試 Rust 或 Go 應(yīng)用程序（盡管 Pyodide 和 Web 容器等新興技術(shù)有一天可能會(huì)改變這一點(diǎn)）。
更微妙的是代碼編輯、導(dǎo)航和瀏覽體驗(yàn)，在桌面上，這些體驗(yàn)通常由需要文件系統(tǒng)、運(yùn)行時(shí)和計(jì)算環(huán)境的語(yǔ)言服務(wù)和編譯器提供支持。在瀏覽器中，這些體驗(yàn)由完全在瀏覽器中運(yùn)行的語(yǔ)言服務(wù)（無(wú)文件系統(tǒng)，無(wú)運(yùn)行時(shí)）提供支持，這些服務(wù)提供源代碼標(biāo)記化和語(yǔ)法著色、完成和許多單文件操作。
因此，在瀏覽器中時(shí)，體驗(yàn)通常分為以下幾類：
好：對(duì)于大多數(shù)編程語(yǔ)言，vscode.dev 為你提供代碼語(yǔ)法著色、基于文本的完成和括號(hào)對(duì)著色。使用Tree-sitter語(yǔ)法樹，我們能夠?yàn)榱餍姓Z(yǔ)言（如 C/C++、C#、Java、PHP、Rust 和 Go）提供額外的體驗(yàn)，例如大綱/轉(zhuǎn)到符號(hào)和符號(hào)搜索。
更好：TypeScript、JavaScript 和 Python 體驗(yàn)都由在瀏覽器中本地運(yùn)行的語(yǔ)言服務(wù)提供支持。使用這些編程語(yǔ)言，你將獲得“良好”體驗(yàn)以及豐富的單文件補(bǔ)全、語(yǔ)義突出顯示、語(yǔ)法錯(cuò)誤等。
最好：對(duì)于許多“webby”語(yǔ)言，例如 JSON、HTML、CSS 和 LESS，vscode.dev 中的編碼體驗(yàn)幾乎與桌面相同（包括 Markdown 預(yù)覽?。?。
擴(kuò)展
大多數(shù) UI 自定義擴(kuò)展（例如主題、鍵映射和代碼段）都可以在 vscode.dev 中使用，你甚至可以通過(guò) Settings Sync 在瀏覽器、桌面和 GitHub 代碼空間之間啟用漫游。
使用了操作系統(tǒng)模塊的 Node.js 代碼的擴(kuò)展，或者運(yùn)行了可執(zhí)行文件的擴(kuò)展，仍然會(huì)顯示在擴(kuò)展搜索結(jié)果中，但被明確標(biāo)記為不可用。
也就是說(shuō)，越來(lái)越多的擴(kuò)展已經(jīng)更新到可以在瀏覽器中使用，而且每天都有更多的擴(kuò)展。
例如，Luna Paint - Image Editor 擴(kuò)展允許你直接在 VS Code 中編輯光柵圖像。該擴(kuò)展為 VS Code 帶來(lái)了豐富的設(shè)計(jì)工具（例如圖層和混合工具），當(dāng)然你也可以將圖像保存到本地磁盤。
在 GitHub Issue Notebooks 帶來(lái)了 GitHub Issues 的 Notebook 體驗(yàn)。有了它，你可以將查詢、結(jié)果，甚至描述查詢目的的 Markdown 混合到一個(gè)編輯器中。
如果您正在學(xué)習(xí)Spring Boot，推薦一個(gè)連載多年還在繼續(xù)更新的免費(fèi)教程：http://blog.didispace.com/spring-boot-learning-2x/
VS Code 的許多擴(kuò)展都基于 GitHub。例如，CodeTour擴(kuò)展允許你創(chuàng)建代碼庫(kù)的指導(dǎo)性演練，而WikiLens擴(kuò)展將 VS Code 和你的存儲(chǔ)庫(kù)變成一個(gè)強(qiáng)大的筆記工具（具有雙向鏈接）。為了方便訪問(wèn) GitHub 中的代碼，VS Code for the Web 內(nèi)置了GitHub Repositories、Codespaces和Pull Request擴(kuò)展。你可以進(jìn)行快速編輯、審查 PR，并繼續(xù)進(jìn)行本地克隆。如果你想要更強(qiáng)大的語(yǔ)言體驗(yàn)或需要在合并提交之前構(gòu)建、運(yùn)行和測(cè)試更改，你可以使用 GitHub Codespace 來(lái)獲得更強(qiáng)的開發(fā)體驗(yàn)，
哇噻，聽起來(lái)很像github.dev不是嗎？為什么是兩個(gè)呢 ？？！！
真是個(gè)好問(wèn)題呀！
github.dev是深度集成到 GitHub 中的 Web 版 VS Code 定制實(shí)例。登錄是自動(dòng)的，URL格式如下github.com的/organization/repo模式，使你可以簡(jiǎn)單地改變.com到.dev以編輯代碼。
除了 GitHub 上的存儲(chǔ)庫(kù)，VS Code for the Web 還支持 Azure Repos（Azure DevOps 的一部分）。為了同時(shí)使用這兩者，VS Code for the Web 支持兩種路由，vscode.dev/github以及vscode.dev/azurerepos. 不過(guò)，你不必記住這一點(diǎn)，只需在你擁有的任何 URL 前面加上“vscode.dev”，就行了！
例如，更改https://github.com/microsoft/vscode為：
https://vscode.dev/github.com/Microsoft/vscode
對(duì)于 Azure Repos，執(zhí)行相同操作。更改https://dev.azure.com/…為：
https://vscode.dev/dev.azure.com/…
今天，對(duì) Azure Repos 的支持處于讀取存儲(chǔ)庫(kù)的預(yù)覽模式，但我們正在努力盡快提供完整的讀/寫功能。
如果你不在 GitHub 或 Azure DevOps 上，則可以通過(guò)擴(kuò)展提供對(duì)其他存儲(chǔ)庫(kù)托管服務(wù)的支持，就像在桌面上一樣。如上所述，這些擴(kuò)展需要支持在瀏覽器中完全運(yùn)行。
另外，如果您正在學(xué)習(xí)Spring Cloud，推薦一個(gè)連載多年還在繼續(xù)更新的免費(fèi)教程：https://blog.didispace.com/spring-cloud-learning/
再聊聊 URL
就像在桌面上一樣，您可以通過(guò)支持幾乎所有后端、語(yǔ)言和服務(wù)的豐富擴(kuò)展生態(tài)系統(tǒng)，來(lái)定制 VS Code for the Web。不像在桌面上，很容易讓我們能夠提供自定義體驗(yàn)與通過(guò)獨(dú)特的預(yù)安裝的擴(kuò)展程序vscode.dev的網(wǎng)址（例如vscode.dev/github和vscode.dev/azurerepos）。
例如，嘗試瀏覽到 vscode.dev/theme/sdras.。
在這里你可以直接體驗(yàn) @sarah_edo 的夜貓子顏色主題。無(wú)需安裝！如果您是主題作者，你甚至可以在 README 中創(chuàng)建一個(gè)徽章，讓用戶直接從 Marketplace 試用你的主題（在 VS Code for the Web 用戶指南中了解更多信息：https://code.visualstudio.com/docs/editor/vscode-web#_themes）。
如你所見，vscode.devURL 是我們提供輕量級(jí)新體驗(yàn)的強(qiáng)大方式。另一個(gè)示例，是 Live Share 來(lái)賓會(huì)話，也將通過(guò)https://vscode.dev/liveshareURL在瀏覽器中可用。在sessionId將被傳遞到擴(kuò)展，使加入的體驗(yàn)如絲般順滑。
vscode.devURL的可能性是無(wú)窮無(wú)盡的，我們很高興在未來(lái)幾個(gè)月內(nèi)與你分享更多想法。
未來(lái)的路，怎么走？
將 VS Code 引入瀏覽器是對(duì)產(chǎn)品最初愿景的實(shí)現(xiàn)。這也是一個(gè)全新的開始。
任何擁有瀏覽器和互聯(lián)網(wǎng)連接的人，都可以使用我們的編輯器。這是未來(lái)我們可以真正從任何地方編輯任何內(nèi)容的基礎(chǔ)。
敬請(qǐng)期待更多！
往期推薦
技術(shù)交流群最近有很多人問(wèn)，有沒(méi)有讀者交流群，想知道怎么加入。加入方式很簡(jiǎn)單，有興趣的同學(xué)，只需要點(diǎn)擊下方卡片，回復(fù)“加群“，即可免費(fèi)加入我們的高質(zhì)量技術(shù)交流群！
點(diǎn)擊閱讀原文，送你免費(fèi)Spring Boot教程！