天天看點

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

早在 2019 年,當<code>.dev</code>頂級域名開放時,我們趕緊注冊了<code>vscode.dev</code>。像許多購買<code>.dev</code>域名的人一樣,我們不知道我們将用它做啥。反正,也占個坑吧!

直到今天,當你轉到https://vscode.dev 時,你将看到一個完全在浏覽器中運作的輕量級 VS Code。在本地機器上打開一個檔案夾并開始編碼。

無需任何的安裝。如絲般順滑。

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

随着 vscode.dev 的出現,我們最終實作了我們最初的願景,即建構一個可以在浏覽器中完全無伺服器運作的開發工具。如需了解完整的曆史,請檢視 Erich Gamma 的 VS Code Day 演講 "VS Code An Overnight Success…10 Years in the Making"。

那麼,我們可以在 VS Code for the Web 上做什麼呢?

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

支援檔案系統通路 API(目前的 Edge 和 Chrome)的現代浏覽器允許網頁通路本地檔案系統(在你的許可下)。這個簡單的本地機器網關,快速打開了一些使用 VS Code for the Web 作為零安裝本地開發工具的有趣場景,例如:

本地檔案檢視和編輯。在 Markdown 中快速記筆記(和預覽!)。即使你在無法安裝完整 VS Code 的受限機器上,仍然可以使用 vscode.dev 檢視和編輯本地檔案。

結合浏覽器工具建構用戶端 HTML、JavaScript 和 CSS 應用程式以進行調試。

在 Chromebook 等低功率機器上編輯代碼,因為你無法(輕松地)在 Chromebook 安裝 VS Code。

在 iPad 上開發。你可以上傳/下載下傳檔案(甚至使用 Files 應用程式将它們存儲在雲中),以及使用内置的 GitHub 存儲庫擴充遠端打開存儲庫。

而且,如果你的浏覽器不支援本地檔案系統 API,仍然可以通過浏覽器上傳和下載下傳單個檔案來打開它們。

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

輕量級體驗

由于 VS Code for the Web 完全在浏覽器中運作,是以與你在桌面應用程式中可以執行的操作相比,某些體驗自然會受到更多限制。例如,終端和調試器不可用。這是有道理的,因為你無法在浏覽器沙箱中編譯、運作和調試 Rust 或 Go 應用程式(盡管 Pyodide 和 Web 容器等新興技術有一天可能會改變這一點)。

更微妙的是代碼編輯、導航和浏覽體驗,在桌面上,這些體驗通常由需要檔案系統、運作時和計算環境的語言服務和編譯器提供支援。在浏覽器中,這些體驗由完全在浏覽器中運作的語言服務(無檔案系統,無運作時)提供支援,這些服務提供源代碼标記化和文法着色、完成和許多單檔案操作。

是以,在浏覽器中時,體驗通常分為以下幾類:

好:對于大多數程式設計語言,vscode.dev 為你提供代碼文法着色、基于文本的完成和括号對着色。使用Tree-sitter文法樹,我們能夠為流行語言(如 C/C++、C#、Java、PHP、Rust 和 Go)提供額外的體驗,例如大綱/轉到符号和符号搜尋。

更好:TypeScript、JavaScript 和 Python 體驗都由在浏覽器中本地運作的語言服務提供支援。使用這些程式設計語言,你将獲得“良好”體驗以及豐富的單檔案補全、語義突出顯示、文法錯誤等。

最佳:對于許多“webby”語言,例如 JSON、HTML、CSS 和 LESS,vscode.dev 中的編碼體驗幾乎與桌面相同(包括 Markdown 預覽!)。

大多數 UI 自定義擴充(例如主題、鍵映射和代碼段)都可以在 vscode.dev 中使用,你甚至可以通過 Settings Sync 在浏覽器、桌面和 GitHub 代碼空間之間啟用漫遊。

使用了作業系統子產品的 Node.js 代碼的擴充,或者運作了可執行檔案的擴充,仍然會顯示在擴充搜尋結果中,但被明确标記為不可用。

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

也就是說,越來越多的擴充已經更新到可以在浏覽器中使用,而且每天都有更多的擴充。

注意:如果你是擴充作者并希望在浏覽器中使用你的擴充,請檢視我們的Web 擴充創作指南。

例如,Luna Paint - Image Editor擴充允許你直接在 VS Code 中編輯光栅圖像。該擴充為 VS Code 帶來了豐富的設計工具(例如圖層和混合工具),當然你也可以将圖像儲存到本地磁盤。

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

在 GitHub Issue Notebooks 帶來了 GitHub Issues 的 Notebook 體驗。有了它,你可以将查詢、結果,甚至描述查詢目的的 Markdown 混合到一個編輯器中。

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

VS Code 的許多擴充都基于 GitHub。例如,CodeTour擴充允許你建立代碼庫的指導性演練,而WikiLens擴充将 VS Code 和你的存儲庫變成一個強大的筆記工具(具有雙向連結)。為了友善通路 GitHub 中的代碼,VS Code for the Web 内置了GitHub Repositories、Codespaces和Pull Request擴充。你可以進行快速編輯、審查 PR,并繼續進行本地克隆。如果你想要更強大的語言體驗或需要在合并送出之前建構、運作和測試更改,你可以使用 GitHub Codespace 來獲得更強的開發體驗,

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

哇噻,聽起來很像<code>github.dev</code>不是嗎?為什麼是兩個呢 ??!!

真是個好問題呀!

<code>github.dev</code>是深度內建到 GitHub 中的 Web 版 VS Code 定制執行個體。登入是自動的,URL格式如下github.com的<code>/organization/repo</code>模式,使你可以簡單地改變<code>.com</code>到<code>.dev</code>以編輯代碼。

除了 GitHub 上的存儲庫,VS Code for the Web 還支援 Azure Repos(Azure DevOps 的一部分)。為了同時使用這兩者,VS Code for the Web 支援兩種路由,<code>vscode.dev/github</code>以及<code>vscode.dev/azurerepos</code>. 不過,你不必記住這一點,隻需在你擁有的任何 URL 前面加上“vscode.dev”,就行了!

例如,更改<code>https://github.com/microsoft/vscode</code>為:

對于 Azure Repos,執行相同操作。更改<code>https://dev.azure.com/…</code>為:

今天,對 Azure Repos 的支援處于讀取存儲庫的預覽模式,但我們正在努力盡快提供完整的讀/寫功能。

如果你不在 GitHub 或 Azure DevOps 上,則可以通過擴充提供對其他存儲庫托管服務的支援,就像在桌面上一樣。如上所述,這些擴充需要支援在浏覽器中完全運作。

就像在桌面上一樣,您可以通過支援幾乎所有後端、語言和服務的豐富擴充生态系統,來定制 VS Code for the Web。不像在桌面上,很容易讓我們能夠提供自定義體驗與通過獨特的預安裝的擴充程式<code>vscode.dev</code>的網址(例如<code>vscode.dev/github</code>和<code>vscode.dev/azurerepos</code>)。

例如,嘗試浏覽到 https://vscode.dev/theme/sdras.night-owl。

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

在這裡你可以直接體驗 @sarah_edo 的夜貓子顔色主題。無需安裝!如果您是主題作者,你甚至可以在 README 中建立一個徽章,讓使用者直接從 Marketplace 試用你的主題(在 VS Code for the Web 使用者指南中了解更多資訊)。

如你所見,<code>vscode.dev</code>URL 是我們提供輕量級新體驗的強大方式。另一個示例,是 Live Share 來賓會話,也将通過<code>https://vscode.dev/liveshare</code>URL在浏覽器中可用。在<code>sessionId</code>将被傳遞到擴充,使加入的體驗如絲般順滑。

重磅!微軟釋出 vscode.dev,把 VS Code 帶入浏覽器!

<code>vscode.dev</code>URL的可能性是無窮無盡的,我們很高興在未來幾個月内與你分享更多想法。

将 VS Code 引入浏覽器是對産品最初願景的實作。這也是一個全新的開始。

任何擁有浏覽器和網際網路連接配接的人,都可以使用我們的編輯器。這是未來我們可以真正從任何地方編輯任何内容的基礎。

敬請期待更多!

繼續閱讀