現已釋出!閱讀關於 11 月新增功能和修復的內容。

2022 年 9 月 (版本 1.72)

下載: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap

更新 1.72.1:此更新解決了這些安全問題

更新 1.72.2:此更新解決了這些問題


歡迎使用 Visual Studio Code 2022 年 9 月版本。此版本有許多更新,我們希望您會喜歡,其中一些主要亮點包括:

如果您想線上閱讀這些發行說明,請訪問 code.visualstudio.com 上的更新頁面。

內測版:想盡快嘗試新功能?您可以下載每晚的內測版構建,並儘快嘗試最新的更新。

工作臺

隱藏工具欄操作

您現在可以從工具欄中隱藏操作。右鍵單擊工具欄中的任何操作,然後選擇其隱藏命令或任何切換命令。隱藏的操作將移至 ... 更多操作 選單,可以從那裡呼叫。要恢復選單,請右鍵單擊工具欄按鈕區域並選擇 重置選單 命令。要恢復所有選單,請從命令面板執行 重置所有選單⇧⌘P(Windows、Linux Ctrl+Shift+P)。

在下面的影片中,GitLens 擴充套件的 檔案註釋 選單從編輯器工具欄中隱藏,然後透過 重置選單 恢復。

合併編輯器

選擇使用三方合併編輯器

在審查了我們收到的所有合併編輯器反饋並思考了整體體驗之後,我們決定在檢測到衝突時預設不顯示三方合併編輯器(git.mergeEditor 設定現在為 false)。做出此決定的原因可以在問題 #160806 中找到。

對於有衝突的檔案,使用者現在可以選擇 在合併編輯器中解決 來開啟三方合併編輯器。

A screenshot of a file with conflicts, showing the "Resolve in Merge Editor" button

CodeLens UI

使用者反饋表明覆選框存在一些 UX 問題。複選框不太容易被發現,並且由於未能正確表示所有可能的狀態而引起混淆。在這次迭代中,我們切換到了使用文字標籤(接受傳入接受當前接受兩者)的 CodeLens UI。

Merge editor before with checkboxes and after with CodeLens

我們將繼續迭代此設計並密切監控收到的所有反饋。

從頭重新計算結果檔案

在上次迭代中,我們試圖將合併編輯器設計為衝突檔案的另一種檢視。它沒有顯示衝突標記,而是由單獨的編輯器窗格顯示衝突的詳細資訊。這種設計的優點是開啟合併編輯器不會修改磁碟上的檔案,並且在開啟合併編輯器之前所做的使用者更改可以保留。不幸的是,這不僅令人困惑,而且並非在所有情況下都有效,因為我們的合併演算法和 Git 合併演算法並不完全一致。

在此版本中,如果使用合併編輯器開啟帶有衝突標記的檔案,我們首先使用我們的合併演算法重新計算結果檔案,而不插入任何衝突標記。單側衝突會自動解決,而適當的衝突會重置為兩個版本的共同祖先並標記為 未處理

基礎檢視

合併編輯器現在有一個單獨的基礎檢視,可用於將任何一側與共同祖先進行比較。

樹狀檢視查詢控制元件改進

您現在可以垂直移動樹狀檢視查詢控制元件,以便訪問其後面的 UI 元素。在樹狀檢視內按 ⌥⌘F(Windows、Linux Ctrl+Alt+F 以顯示查詢控制元件。

Tree view Find control supports vertical movement

此外,樹狀檢視查詢控制元件在重新開啟時會記住上次的搜尋詞。

Tree view Find control remembers last search text

某些音訊和影片檔案的內建預覽

VS Code 現在支援預覽某些音訊和影片檔案格式

Previewing an MP4 video in VS Code

目前支援以下音訊格式

  • WAV
  • MP3
  • Ogg
  • FLAC

並且可以預覽以下影片格式

  • H.264
  • VP8

對於影片檔案,請記住必須同時支援影片和音訊軌道的媒體格式。例如,許多 .mp4 檔案使用 H.264 進行影片和 AAC 音訊。VS Code 將能夠播放 .mp4 的影片部分,但由於不支援 AAC 音訊,因此不會有聲音。您需要為音軌使用 MP3。

停用增量命名

您現在可以使用 explorer.incrementalNaming 設定的新值 disabled 在檔案資源管理器中停用增量檔案命名。此值會停用在檔案資源管理器中貼上時更改檔名的邏輯。如果檔名已存在,將提示您覆蓋現有檔案,這與大多數本機資源管理器類似。

在 VS Code 應用程式資料夾內編輯時的警告

在 VS Code 應用程式資料夾內編輯檔案時,編輯器中現在會顯示警告。意外修改應用程式資料夾中的檔案是一個常見的錯誤,通常不是使用者意圖。

VS Code warns when editing its application folder files

編輯器

改進的自動滾動行為

在選擇和拖動時,編輯器過去以取決於顯示器每秒幀數 (FPS) 的方式滾動,有時當滑鼠到達編輯器邊緣時,編輯器會快速滾動。現在,當滑鼠靠近邊緣時,編輯器以更易於管理的速度(大約每秒一個視口)自動滾動,當滑鼠遠離編輯器時,滾動速度會更快,並且獨立於 FPS。

在下面的影片中,當滑鼠游標向下移動離開編輯器時,滾動速率會增加。

改進的懸停

編輯器懸停過去會非常主動地隱藏自己,尤其是當滑鼠移過編輯器的空白區域時。這使得難以觸及懸停中顯示的一些操作。現在,只要滑鼠朝它移動,懸停就會保持可見。設定 "editor.hover.sticky": false 可恢復到以前的行為。

在右側的“之後”影片中,從懸停中選擇快速修復要容易得多

新的 Code Action 組

Code Action 控制元件中提供了兩個新組:InlineMove

這些組對應於 refactor.inlinerefactor.move Code Action 型別。

新的 Code Action 顏色

您可能會注意到 Code Action 控制元件在這次迭代中看起來也有點不同。樣式已更新為使用更合適的主題顏色。最大的變化是控制元件主體現在使用 editorWidget.* 顏色而不是 menu.*

我們仍在完善這些顏色,因此如果它們不適用於給定主題,或者缺少任何顏色自定義選項,請告知我們。

擴充套件

最近更新的擴充套件

VS Code 現在在擴充套件檢視的 更新 部分的 最近更新 部分顯示最近 7 天內更新的擴充套件。

Recently Updated section in the Extensions view

需要注意的擴充套件

VS Code 現在顯示需要注意的擴充套件,這些擴充套件在擴充套件檢視的預設 已安裝 部分排序到頂部。這包括有待處理更新、已更新或已停用且需要重新載入 VS Code 的擴充套件。

Extensions requiring attention are displayed at the top of the Extensions view

活動欄中擴充套件圖示上的徽章現在顯示需要注意的擴充套件數量。

Extensions badge showing that four extensions require attention

忽略擴充套件更新

您現在可以透過單擊 更新 下拉選單中的 忽略更新 按鈕來忽略擴充套件的更新。這將從需要注意的擴充套件列表中刪除該擴充套件。

Ignore Updates option in Extensions view context menu

您可以透過取消選中相同的 忽略更新 按鈕來撤消此操作。

Checked Ignore Updates option in Extensions view context menu

請注意,安裝特定版本的擴充套件(透過 安裝其他版本)也會忽略該擴充套件的更新。

已安裝擴充套件的排序

您現在可以按 安裝計數評分名稱釋出日期更新日期 對已安裝的擴充套件列表進行排序。

Extensions view Sort By menu options

以樹狀檢視顯示結果

您現在可以在樹中檢視搜尋結果!只需單擊搜尋檢視右上角的列表/樹圖示即可在列表和樹狀檢視之間切換。

Search results shown as a tree view

主題:Night Owl Light(在 vscode.dev 上預覽)

檔案裝飾設定

在搜尋結果中,反映檔案狀態的檔名徽章和顏色現在可以開啟和關閉。設定是 搜尋 > 裝飾:徽章 (search.decorations.badges) 和 搜尋 > 裝飾:顏色 (search.decorations.colors)。

Search results file decoration settings

主題:Night Owl Light(在 vscode.dev 上預覽)

原始碼管理

發現巢狀的 Git 倉庫

為了解決一個長期存在的功能請求,我們在此里程碑中更改了倉庫發現以新增對巢狀 Git 倉庫的支援。根據巢狀倉庫的位置,您可能需要修改 git.repositoryScanMaxDepth 設定(預設為 1 級)。

新增對帶密碼短語的 SSH 金鑰的支援

當使用帶密碼短語的 SSH 金鑰進行 Git 操作時,VS Code 現在將顯示快速輸入控制元件,以便您可以輸入 SSH 金鑰的密碼短語。密碼短語不會被快取,每次執行 Git 操作時都必須輸入。

在檢出之前拉取

在此里程碑中,我們添加了一個新設定 git.pullBeforeCheckout,以簡化切換分支的過程。啟用此設定後,如果沒有傳出提交,我們將在檢出分支之前從遠端倉庫拉取並快進分支。

倉庫獲取改進

對於具有多個遠端倉庫的 Git 倉庫,呼叫 fetch 命令現在將顯示一個包含所有遠端倉庫列表的快速選擇。使用者可以選擇要獲取的特定遠端倉庫或從所有遠端倉庫獲取。

中止合併命令

有一個新命令 Git:中止合併,用於中止當前正在進行的合併操作。

終端

終端快速修復

我們開始推出一項由 Shell 整合提供支援的新功能,稱為快速修復。此功能支援音訊提示。使用 audioCues.terminalQuickFix 啟用它,以獲得有關修復可用的聲音提示。

當命令對映到使用者可能採取的一組操作時,可以使用快速修復,並且可以透過與編輯器中使用的相同鍵繫結 Ctrl+.Cmd+. 啟用。

以下是最初支援的快速修復

Git 相似命令

當 Git 命令輸入錯誤時,快速修復會建議相似的命令。

Run: git status is suggested after git sttatus is mistyped

Git 設定上游

當執行 git push 並且沒有上游遠端倉庫時,快速修復會建議使用上游遠端引數進行推送。

Run: git push set upstream is suggested

Git 建立 PR

當分支首次推送到遠端倉庫時,快速修復會建議開啟連結以建立 PR。

An open GitHub PR link action is offered

釋放埠

當使用已在使用中的埠啟動伺服器時,快速修復會提供一個操作來終止程序並釋放埠。

A server launch fails with a port 3000 in use error. An action to free port 3000 is offered.

Shell 整合改進

對 Shell 整合進行了以下改進

  • 執行最近的命令轉到最近的目錄 現在如果行有內容(或者無法可靠確定),將清除該行。
  • 刪除了 bash 指令碼對 $PREFIX 環境變數的使用,這可能會與某些構建工具衝突。
  • 完善了 zsh 指令碼以修復圍繞 $ZDOTDIR 的一些邊緣情況。
  • 更好地處理在多使用者之間共享的機器上的 zsh shell 整合。

現在支援在終端中執行的應用程式傳送的超連結。這些允許顯示指向 URL 的標籤,並以虛線下劃線顯示。

Hyperlinks appear in the terminal with dashed underlines, hovering the hyperlink reveals the URL

這是一個示例,說明如何編寫帶有標籤“VS Code”並指向 https://vscode.com.tw 的連結。

printf '\e]8;;https://vscode.com.tw\e\\VS Code\e]8;;\e\\'

或者更一般地

\x1b]8;; <URL> \x1b\ <Label> \x1b]8;;\x1b\'

VT 功能支援

此版本支援以下 VT 轉義序列

  • DECRQM:ANSI 和 DEC 私有模式報告 (CSI Ps $ p) - 此序列允許程式查詢終端所處的各種模式,例如換行或帶括號的貼上模式。
  • DECSCA:保護屬性 (CSI Ps " q) - 此屬性確定 DECSEDDECSEL 是否可以擦除內容。

音訊鈴聲

音訊鈴聲現在可以在終端中使用,並且可以透過 terminal.integrated.enableBell 啟用。

終端文件

終端文件已重構並移動到 VS Code 網站上自己的目錄中。

現在有針對以下主題的特定主題

  • 終端基礎 - 快速瞭解 VS Code 整合終端。
  • 終端配置檔案 - 瞭解如何透過配置檔案自定義終端。
  • Shell 整合 - VS Code 可以提供命令狀態、歷史記錄和快速導航等功能。
  • 外觀 - 修改終端文字、游標樣式和顏色。
  • 高階 - 對自定義鍵繫結以及 Unicode 和表情符號字元的高階支援。

希望您能夠在需要時輕鬆找到正確的文件。

任務

固定執行任務條目

任務可以固定在 任務:執行任務 列表中,以便更快、更容易地訪問。

Pinned items are the top category in the Run Task list

任務完成聲音

任務完成時會播放聲音,以實現多工處理並提高可訪問性。透過 audioCues.taskCompleted 設定配置音訊提示。

語言

在使用 Markdown 時,很容易錯誤地新增無效的檔案連結或影像引用。也許您忘記了檔名使用了 -(破折號)而不是 _(下劃線),或者您連結到的檔案被移動到了不同的目錄。通常只有在檢視 Markdown 預覽或釋出後才會發現這些錯誤。VS Code 的新 Markdown 連結驗證可以幫助捕獲這些錯誤。

要開始使用,請設定 "markdown.validate.enabled": true。VS Code 現在將分析指向標題、影像和其他本地檔案的 Markdown 連結。無效連結將報告為警告或錯誤。

A warning shown in the editor when linking to a file that does not exist

VS Code 甚至可以捕獲指向其他 Markdown 檔案中特定標題的無效連結!

您可以使用以下幾個設定來自定義連結驗證:

  • markdown.validate.fileLinks.enabled - 啟用/停用對本地檔案連結的驗證:[link](/path/to/file.md)
  • markdown.validate.fragmentLinks.enabled - 啟用/停用對當前檔案中標題連結的驗證:[link](#_some-header)
  • markdown.validate.fileLinks.markdownFragmentLinks - 啟用/停用對其他 Markdown 檔案中標題連結的驗證:[link](other-file.md#some-header)
  • markdown.validate.referenceLinks.enabled - 啟用/停用對引用連結的驗證:[link][ref]
  • markdown.validate.ignoredLinks - 跳過驗證的連結 glob 列表。如果您連結到磁碟上不存在但釋出後存在的S檔案,這很有用。

試一試,讓我們知道您對新功能的看法!

引用連結 使您可以輕鬆地在 Markdown 原始碼中多次使用同一連結

This [link][example-link] and [this link][example-link] both point to the same place!

[example-link]: http://example.com

這很方便,因為您只需更改檔案中的一處即可更新這兩個連結。

新的 提取到連結定義 重構可幫助您將現有 Markdown 連結轉換為連結定義和引用連結。此重構將轉換當前文件中連結的所有出現。例如,對於 Markdown 文件

[Markdown](https://daringfireball.net/projects/markdown/) and you: Adventures in [Markdown linking](https://daringfireball.net/projects/markdown/)!

在任何 https://daringfireball.net/projects/markdown/ 連結上執行 提取到連結定義 將導致

[Markdown][md] and you: Adventures in [Markdown linking][md]!

[md]: https://daringfireball.net/projects/markdown/

執行重構後,VS Code 將提示您輸入連結定義的名稱。在上面的示例中,我們輸入了 md

Markdown 檔案的新 組織連結定義 Code Action (source.organizeLinkDefinitions) 將所有連結定義分組到檔案底部,按字母順序排序,並刪除任何未使用的定義。可以使用 源操作 命令執行此操作。

例如,在 Markdown 原始碼中

Some [link][example] and an image:

![An image of a cat][cat-gif]

[example]: http://example.com
[cat-gif]: /keyboard-cat.gif
[some unused link]: http://example.com/file2

執行 組織連結定義

Some [link][example] and an image:

![An image of a cat][cat-gif]

[cat-gif]: /keyboard-cat.gif
[example]: http://example.com

請注意,未使用的 some unused link 定義已被刪除,並且其餘定義已按字母順序排序。

CSS / LESS / SCSS

CSS 語言支援現在理解 @property@layer at-rules。

Notebook

筆記本 JavaScript 輸出現在被評估為模組

筆記本中的 JavaScript 輸出現在被視為模組。這意味著在輸出中宣告的變數將不再洩漏到其他輸出中(對於 const 變數,甚至可能阻止執行具有衝突變數名稱的其他輸出)。

這也意味著您現在可以在 JavaScript 輸出中使用 import

%%javascript
import { myFunction } from './myModules.js';

console.log(myFunction());

筆記本大綱中支援 HTML 標題

Markdown 單元格中的 HTML 標題現在可以被檢測到並呈現在筆記本 大綱 檢視中。

HTML headers in notebook Markdown cells

Web 版 VS Code

瀏覽器多功能框中的“code”

現在有一個 Chrome/Edge 瀏覽器擴充套件,可以更輕鬆地在 vscode.dev 中開啟您的 GitHub 倉庫。

開始使用

  1. 從 Chrome 網上商店安裝擴充套件。
  2. 在瀏覽器搜尋欄中鍵入 code 以啟用多功能框。
  3. 按名稱搜尋 GitHub 倉庫並按 Enter。建議由您的瀏覽器搜尋歷史記錄填充,因此如果所需的倉庫未出現,您也可以鍵入完全限定的 <owner>/<repo> 名稱來開啟它,例如 microsoft/vscode

在下面的影片中,使用者透過鍵入 code vscodevscode.dev 中開啟 microsoft/vscode 倉庫。

此擴充套件的靈感來自 Goto GitHub Repo Chrome 擴充套件,它由前 VS Code 團隊成員 Pine Wu 建立,對此表示衷心感謝。

切換開發環境時帶走您的更改

當您瀏覽 GitHub 或 Azure Repos 倉庫(例如 https://vscode.dev/github/microsoft/vscode)時,您可以使用 繼續工作 命令來選擇用於您的倉庫的不同開發環境。

以前,如果您的虛擬工作區中有未提交的更改,則需要將它們推送到 GitHub 或 Azure Repos 才能在其他地方檢視它們。在此里程碑中,我們已將 編輯會話 整合新增到 繼續工作 功能中,以便您的未提交更改自動隨您一起轉移到目標開發環境,例如 GitHub codespace。

在下面的影片中,使用者在使用 VS Code for the Web 時對 JavaScript 檔案所做的更改,在他們建立並切換到新的 GitHub codespace 中工作時得到應用。

在此版本中,當您第一次使用帶有未提交更改的 繼續工作 時,您將可以選擇使用 編輯會話 將您的編輯帶到您選擇的開發環境,該會話使用 VS Code 服務來儲存您待處理的更改。一旦將這些更改應用到目標開發環境,它們就會從我們的服務中刪除。如果您選擇不帶未提交的更改繼續,您以後可以透過配置 "workbench.editSessions.continueOn": "prompt" 設定隨時更改此偏好。

Prompt to bring working changes with you when using Continue Working On

當您使用 VS Code for the Web 時,當您在以下環境中繼續工作時,您的未提交更改將隨您一起轉移

  • GitHub Codespaces 中的新雲託管環境
  • 您的 GitHub 倉庫的新本地克隆
  • 具有相同虛擬 GitHub 倉庫的本地 VS Code 例項

當您使用帶有 Remote Repositories 擴充套件的桌面 VS Code 時,當您在以下環境中繼續工作時,您的未提交更改將隨您一起轉移

  • GitHub Codespaces 中的雲託管環境(可透過 GitHub Codespaces 擴充套件獲得)
  • 您的 GitHub 倉庫的新本地克隆
  • 容器卷中您的 GitHub 倉庫的新克隆(可透過 Dev Containers 擴充套件獲得)
  • https://vscode.dev
  • 包含您的倉庫克隆的現有本地資料夾

問題報告

將問題閾值增加到 7500 個字元

當使用內建問題報告器報告 VS Code 或擴充套件的問題時,用於在 github.com 上開啟問題的 URL 中的字元數有限制。如果達到此限制,您將在問題正文中看到一條訊息,內容為 We have written the needed data into your clipboard because it was too large to send. Please paste.。不幸的是,有些使用者沒有注意到這條訊息,忘記將資料貼上到問題正文中。

在此里程碑中,我們將閾值增加到 7500 個字元。這是因為

  1. 某些對 URL 中的字元數有硬限制的瀏覽器不再受支援 (EOL)。
  2. GitHub 對 URL 中的字元數有自己的限制。

這使得 URL 中包含的字元數增加了近兩倍,這對於大多數使用者來說應該足夠了,並且剪貼簿訊息會更少出現。

與執行中的擴充套件編輯器一起使用的問題報告器

如果您使用命令 開發人員:顯示執行中的擴充套件 開啟 執行中的擴充套件 編輯器並選擇 報告問題 按鈕,它將顯示內建問題報告器。以前,這會將您帶到 GitHub 問題並要求您貼上,並在擴充套件倉庫中建立了許多不必要的低質量問題。擴充套件 報告問題 按鈕現在透過內建問題報告器,將允許使用者提交高質量的擴充套件問題。

對擴充套件的貢獻

遠端開發

遠端開發擴充套件允許您使用開發容器、遠端計算機或適用於 Linux 的 Windows 子系統 (WSL) 作為功能齊全的開發環境。

我們聽到了您關於 Remote - WSLRemote - Containers 擴充套件命名方式的反饋。我們打算在它們的名稱中使用 Remote 來表示您在“遠端”或“單獨”的 WSL 發行版或開發容器中進行開發,而不是傳統的本地開發。但是,這與許多人使用的“遠端”用途不同,可能會導致混淆(例如,開發容器是否在我的機器上?)。

因此,我們更新了這些擴充套件中的命名和產品內命令,使其更清晰,將它們重新命名為 WSLDev Containers。Marketplace 中的擴充套件識別符號和文件等連結保持不變,因此您在使用這兩個擴充套件時應該不會出現中斷。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

除了重新命名之外,這些擴充套件的功能和修復工作也在繼續。您可以在 遠端開發發行說明中瞭解更多資訊。

開發容器特性

開發容器功能 允許您輕鬆地將預打包的功能新增到您的開發容器中。無論是 Git 或 Docker 等工具,還是 Go 或 Java 等程式語言支援,您都可以檢視 可用功能 列表並將它們新增到您的 devcontainer.json 中。您還可以建立自己的功能,使用 功能模板 釋出並與他人共享。

GitHub 拉取請求和議題

GitHub 拉取請求和問題擴充套件取得了更多進展,該擴充套件允許您處理、建立和管理拉取請求和問題。此版本的亮點包括

  • 改進了對 GitHub Enterprise Server 的支援。這包括
    • 由 VS Code 內建的 GitHub Enterprise Server 身份驗證提供程式提供的無 PAT 身份驗證。
    • 當您開啟帶有企業倉庫的資料夾時自動檢測並提供設定入門。
    • 修復了 GitHub Enterprise Server 錯誤。
  • 用於將檔案標記為已檢視的複選框。

檢視擴充套件 0.52.0 版本更新日誌以檢視其他亮點。

GitHub Issue 筆記本

工作區編輯

GitHub Issue Notebooks 擴充套件展示了筆記本 API,並且也非常方便。本著這種精神,我們採用了工作區編輯 API 的最新改進。有新的 Code Actions

  • 將單元格移動/複製到新筆記本中。
  • 允許您使用 OR 語句拆分單元格。
  • 使用程式碼片段編輯將 label:bug 等限定值提取到變數中。
  • 針對值設定錯誤的基於程式碼片段的快速修復。

Move cell into new notebook and Quick Fix for value set violation

本地化

該擴充套件現在已完全本地化為 VS Code 支援的 13 種語言。它也是第一個使用新本地化 API 進行本地化的擴充套件,這意味著本地化適用於桌面和 Web。

Jupyter

單元格標籤和幻燈片編輯支援

我們現在可以直接在筆記本編輯器中編輯單元格標籤和幻燈片型別,而無需開啟文件的 JSON 格式。

這允許我們為 papermill 引數化筆記本或為 nbconvert 自定義筆記本。

Edit Jupyter notebook cell tags

我們現在還可以透過命令直接更新筆記本單元格的幻燈片型別,將筆記本變成簡報的幻燈片。

Edit Jupyter notebook slideshow

上面的兩個示例都使用筆記本工作區編輯 API 來編輯單元格元資料。如果您有興趣瞭解如何支援編輯其他自定義單元格元資料,可以從 GitHub 倉庫(cell-tagsslideshow)瞭解更多資訊。

改進了互動式視窗的命令互動

interactive.input.focus 命令現在將焦點置於最近使用的互動式視窗的輸入框。在下面的短影片中,命令正與自定義鍵盤快捷鍵一起使用。

Interactive Window navigation using keyboard shortcuts

互動式視窗單元格的筆記本 刪除 單元格命令已啟用,現在可以撤消。

Python 檔案單元格摺疊

Python 檔案中用 # %% 標記表示的“單元格”現在可以在編輯器中摺疊。

GitHub Enterprise Server 身份驗證支援

在此之前,GitHub Enterprise Server 使用者必須手動建立個人訪問令牌 (PAT) 才能在 VS Code 中登入 GitHub Enterprise Server(例如,用於 GitHub Pull Requests and Issues 擴充套件)。這是一個繁瑣的過程,要求使用者離開 VS Code 來建立 PAT,確保他們使用正確的許可權建立它,複製它,然後將其貼上回 VS Code。

不再需要了。現在,GitHub Enterprise Server 登入流程與 github.com 登入流程相同,使用者無需建立 PAT 即可登入 GitHub Enterprise Server。要檢視此體驗的實際效果,您可以從 Marketplace 獲取 GitHub Pull Requests and Issues 擴充套件,將 github-enterprise.uri 設定為您的 GitHub Enterprise Server URI,然後試用該擴充套件。這是一個演示新體驗的影片。

主題:熊貓主題(在 vscode.dev 上預覽)

Python

建立環境命令

添加了一個新的 建立環境 命令,它將自動為 VS Code 中的 Python 使用者建立虛擬環境或 conda 環境。使用者將能夠透過命令面板觸發該命令,選擇他們是想使用 venv 建立新的虛擬環境還是 conda 環境,最後選擇他們專案所需的直譯器。該命令還將安裝專案資料夾中 requirements.txt 檔案中概述的必要包。我們希望這個新功能能夠簡化環境建立過程,並鼓勵使用者利用環境來實現最佳編碼實踐。

Create new virtual environment with Create Environment command

面向擴充套件作者的新環境 API

Python API 現在為擴充套件提供了一種使用 Python 擴充套件找到的使用者機器上可用的 Python 環境的方法。擴充套件還可以使用它來訪問 Python 擴充套件用於執行指令碼的選定環境路徑,或將其更新為首選路徑。

請隨時在 issue #18888 中提供您的反饋。請注意,API 尚未最終確定,因此可能會根據反饋進行更改,恕不提供向後相容性。

Python 擴充套件模板

Python 擴充套件模板 可幫助您為自己喜歡的 Python 工具(例如 linter、格式化程式或程式碼分析實用程式)構建 Visual Studio Code 擴充套件。模板為您提供了將工具整合到 VS Code 中所需的基本構建塊。

預覽功能

設定配置檔案

我們在過去幾個月一直在努力支援 VS Code 中的設定配置檔案,這是社群最受歡迎的需求之一。此功能透過 workbench.experimental.settingsProfiles.enabled 設定提供預覽。試用一下,並透過在 vscode 儲存庫中建立問題或在 問題 #116740 中評論來向我們提供反饋。

設定配置檔案指示器

VS Code 在活動欄底部顯示一個設定配置檔案指示器。預設情況下,指示器中顯示配置檔名稱的前兩個字元。您還可以將短名稱自定義為任意兩個字元、表情符號或 codicon。可以使用 $(codicon-id) 語法引用 codicon。

Settings Profiles indicator

當您單擊此指示器時,會顯示一個帶有 更改短名稱 選項的選單。

Settings Profiles menu

同步設定配置檔案

VS Code 現在支援跨 VS Code 例項同步設定配置檔案。

注意: 此功能目前僅在 VS Code 的 Insiders 版本中提供。

WebAssembly 和 Web 中的 Python 執行

在過去的幾個月中,我們致力於將 WebAssembly (WASM) 帶入 VS Code。為了啟用支援,我們做了兩件事

下面的螢幕截圖顯示了執行一個 Hello World 程式。

Execute Python file in VS Code for the Web

您還可以使用命令 Python WASM:啟動 REPL 啟動 Python REPL。

Python REPL running in VS Code for the Web

請注意,庫和擴充套件都在開發中,並作為預覽版提供。WebAssembly Python 直譯器以及 VS Code 本身都存在限制。直譯器的主要限制是

  • 不支援 pip。
  • 不支援套接字。
  • 不支援執行緒。因此,不支援非同步。

但是,支援建立您自己的 Python 環境,包括源 wheel Python 包。檢視擴充套件的 README瞭解詳細資訊。

VS Code 中的限制是

  • 不支援除錯。您只能執行 Python 檔案。
  • 不支援本機 Python 模組。

但請繼續關注。我們正在醞釀一些東西來解除其中一些限制。

擴充套件創作

在乾淨環境中除錯擴充套件

在除錯擴充套件時,總存在一個問題,即擴充套件在擴充套件作者的開發環境(使用者設定和已安裝的擴充套件)中執行,而不是在更適合擴充套件目標使用者的環境中執行。

藉助最近引入的“配置檔案”功能,現在可以透過在擴充套件的除錯配置中指定配置檔案,在不同的環境中執行正在開發的擴充套件。啟用 workbench.experimental.settingsProfiles.enabled 設定以啟用配置檔案功能。

支援兩種場景

  • 透過使用在擴充套件除錯停止時自動刪除的未命名“空”配置檔案,在乾淨環境中除錯
  • 透過使用專門為正在開發的擴充套件建立的命名配置檔案,並在其中包含特定的使用者設定和擴充套件,在受控環境中除錯

此除錯配置顯示如何使用 --profile-temp 開關在乾淨環境中除錯

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile-temp", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

這是一個在受控環境中除錯的除錯配置,它使用名為“extensionContext”的先前建立的配置檔案。

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile=extensionContext", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

請注意,當在遠端位置除錯擴充套件時(透過 Remote Development 擴充套件 Dev Containers、SSH 或 WSL),使用 --profile-temp 標誌將導致此狀態訊息

Disconnected Status bar message

這是預期的,因為臨時配置檔案不包含任何擴充套件,這意味著遠端開發擴充套件也丟失了。對於遠端場景,建議您建立一個空的命名配置檔案,將遠端開發擴充套件新增到其中,然後使用 --profile=.... 命令列選項。

改進的工作區編輯 API

使用 WorkspaceEdit 編輯筆記本

工作區編輯現在可以使用 vscode.NotebookEdit 修改筆記本。vscode.NotebookEdit 類包含用於建立在筆記本中插入、替換和刪除單元格的編輯的靜態工廠函式。

const currentNotebook = vscode.window.activeNotebookEditor?.notebook;
if (currentNotebook) {
  const edit = new vscode.WorkspaceEdit();

  // Use .set to add one or more edits to the notebook
  edit.set(currentNotebook.uri, [
    // Create an edit that inserts one or more cells after the first cell in the notebook
    vscode.NotebookEdit.insertCells(/* index */ 1, [
      // ... new notebook cell data
    ])

    // Additional notebook edits...
  ]);

  await vscode.workspace.applyEdit(edit);
}

使用 WorkspaceEdit 執行程式碼片段編輯

新的 SnippetTextEdit 型別允許擴充套件使用 WorkspaceEdit 執行程式碼片段編輯。程式碼片段編輯類似於常規文字編輯,但它們允許使用者透過佔位符進行 Tab 鍵切換、插入變數、從選擇元素中進行選擇等。在此指南中瞭解有關程式碼片段的更多資訊。

請注意,程式碼片段編輯需要程式碼或筆記本編輯器,並且只能支援單個編輯器的程式碼片段編輯,否則它們的行為與常規文字編輯類似。

我們相信將程式碼片段編輯和工作區編輯結合起來可以實現新的更流暢的 Code Actions 和重構,如下面的 GitHub Issue Notebooks 擴充套件中的示例所示。

使用 WorkspaceEdit 建立帶內容的檔案

您現在可以在使用 WorkspaceEdit 建立檔案時指定內容。為此,請傳遞帶有其 options-bag 的內容。

const edit = new vscode.WorkspaceEdit();
edit.createFile(newFileUri, { contents: new Unit8Array([1, 2, 3]) });

await vscode.workspace.applyEdit(edit);

貢獻的 webview 上下文選單

新的 webview 上下文選單 API 使高階 webview 可以輕鬆自定義當用戶右鍵單擊 webview 內部時顯示的上下文選單。這個新的貢獻點使用 VS Code 的常規上下文選單,因此自定義選單與編輯器的其餘部分完美契合。Webview 還可以為 webview 的不同部分顯示自定義上下文選單。

要向 webview 新增新的上下文選單項,首先在 menus 下的新 webview/context 部分中新增一個新條目。每個貢獻都採用一個 command(這也是專案標題的來源)和一個 when 子句。when 子句應包括 webviewId == 'YOUR_WEBVIEW_VIEW_TYPE' 以確保上下文選單僅適用於您的擴充套件的 webview。

"contributes": {
  "menus": {
    "webview/context": [
      {
        "command": "catCoding.yarn",
        "when": "webviewId == 'catCoding'"
      },
      {
        "command": "catCoding.insertLion",
        "when": "webviewId == 'catCoding' && webviewSection == 'editor'"
      }
    ]
  },
  "commands": [
    {
      "command": "catCoding.yarn",
      "title": "Yarn 🧶",
      "category": "Cat Coding"
    },
    {
      "command": "catCoding.insertLion",
      "title": "Insert 🦁",
      "category": "Cat Coding"
    },
    ...
  ]
}

在 webview 內部,您還可以使用 data-vscode-context 資料屬性(或在 JavaScript 中使用 dataset.vscodeContext)設定 HTML 特定區域的上下文。data-vscode-context 值是一個 JSON 物件,它指定當使用者右鍵單擊元素時要設定的上下文。最終上下文是從文件根到單擊的元素確定的。

例如,考慮以下 HTML

<div class="main" data-vscode-context='{"webviewSection": "main", "mouseCount": 4}'>
  <h1>Cat Coding</h1>

  <textarea data-vscode-context='{"webviewSection": "editor", "preventDefaultContextMenuItems": true}'></textarea>
</div>

如果使用者右鍵單擊 textarea,將設定以下上下文

  • webviewSection == 'editor' - 這會覆蓋父元素的 webviewSection
  • mouseCount == 4 - 這是從父元素繼承的。
  • preventDefaultContextMenuItems == true - 這是一個特殊的上下文,用於隱藏 VS Code 通常新增到 webview 上下文選單中的複製和貼上條目。

如果使用者在 <textarea> 內右鍵單擊,他們將看到

Custom context menus showing in a webview

webview 中活動主題的新主題變數

webview 中的新 data-vscode-theme-id 資料屬性儲存當前活動主題的 ID。這取代了現在已棄用的 data-vscode-theme-name 屬性,該屬性跟蹤主題的全名(也可能已本地化)。

body[data-vscode-theme-id="One Dark Pro"] {
    background: hotpink;
}

如果您在 webview 中使用 data-vscode-theme-name,請遷移到新的 data-vscode-theme-id 屬性。

非同步筆記本渲染器

筆記本渲染器 API 現在更好地支援非同步筆記本渲染器。雖然這以前是隱式支援的,但現在 renderOutputItem 可以返回一個 Promise 以指示正在渲染輸出項。renderOutputItem 函式現在也傳遞了一個 AbortSignal,如果在渲染被取消時它將被中止。

renderOutputItem(outputItem: OutputItem, element: HTMLElement, signal: AbortSignal): void | Promise<void>;

如果您的渲染器執行任何非同步工作,請採用這些 API 更新,以便 VS Code 可以更好地支援您的渲染器。

Refactor.move Code Action 型別

新的 refactor.move Code Action 型別可用於移動程式碼的重構(例如將符號移動到新檔案或在檔案內重新排序程式碼)。

雖然擴充套件以前可以建立 refactor.move 型別的 Code Actions,但此型別現在已正式記錄,並且受新的 Code Action 控制元件支援

選定的樹項傳遞給檢視/標題操作

貢獻給 view/title 選單的命令將接收兩個引數:第一個是焦點樹節點,第二個是樹中所有選定的專案。

樹狀檢視 initialSize 貢獻已定型

package.json 中貢獻檢視的擴充套件可以使用 initialSize 屬性來設定其檢視的初始大小。initialSize 的工作方式類似於 CSS flex-grow

應用 initialSize 時有一些限制

  • 它只是一個 初始 大小。一旦檢視被渲染,initialSize 將不會再次應用。
  • 它僅在擴充套件同時擁有檢視和檢視容器時應用。

樹狀檢視徽章已定型

TreeView 有一個可選的 viewBadge 屬性,可用於在檢視的檢視容器上設定數字徽章。

View badge on a view in the Activity bar

未繫結斷點警告圖示

除錯擴充套件現在可以在存在帶有未繫結斷點的活動除錯會話時定義提示訊息。它將出現在斷點檢視的標題中以及將滑鼠懸停在編輯器中的灰色斷點圖示上時。這是一個在 js-debug 擴充套件中如何使用的示例。

Hovering the breakpoint warning icon

此訊息可以在偵錯程式貢獻中的新 strings 屬性中宣告,如下所示

"strings": {
  "unverifiedBreakpoints": "Message text goes here"
}

VS Code 社群討論

現在有一個 VS Code 社群討論 網站供擴充套件作者使用,作為一個聚集地來提問、與其他開發人員聯絡並展示出色的工作。在那裡您可以找到與 VS Code API 相關的公告、釋出問題或搜尋現有答案,並檢視擴充套件展示與分享

提議的 API

每個里程碑都會帶來新的提議 API,擴充套件作者可以嘗試這些 API。一如既往,我們希望得到您的反饋。以下是嘗試提議 API 的步驟

  1. 查詢您要嘗試的提議並將其名稱新增到 package.json#enabledApiProposals
  2. 使用最新的vscode-dts並執行vscode-dts dev。它會將相應的d.ts檔案下載到您的工作區中。
  3. 您現在可以根據該提議進行程式設計。

您不能釋出使用提議 API 的擴充套件。下個版本中可能會有破壞性更改,我們絕不希望破壞現有擴充套件。

可擴充套件的 JavaScript 筆記本渲染器

我們的內建 筆記本渲染器 現在公開了一個實驗性 API,允許擴充套件自定義 JavaScript 內容的渲染。此 API 目前公開一個鉤子 preEvaluate,它在評估 JavaScript 內容之前呼叫。

要嘗試使用此實驗性 API,您的擴充套件需要擴充套件 vscode.builtin-renderer API

"contributes": {
  "notebookRenderer": [
    {
      "id": "vscode-samples.my-custom-js-extension",
      "displayName": "My custom javascript renderer extension",
      "entrypoint": {
        "extends": "vscode.builtin-renderer",
        "path": "./out/main.js"
      }
    }
  ]
}

然後,您的渲染器可以在 vscode-builtin-renderer 上註冊一個渲染鉤子。

import type { RendererContext } from 'vscode-notebook-renderer';

export async function activate(ctx: RendererContext<void>) {
  const builtinRenderer = await ctx.getRenderer('vscode.builtin-renderer');
  if (!builtinRenderer) {
      throw new Error(`Could not load 'vscode.builtin-renderer'`);
  }

  builtinRenderer.experimental_registerJavaScriptRenderingHook({
    // Invoked before th js has been evaluated
    preEvaluate(outputItem: OutputItem, element: HTMLElement, script: string, signal, signal: AbortSignal): string | undefined | Promise<string | undefined> {
      // You can either modify `element` or return a new script source here
    }
  });
}

試用這個新 API,讓我們知道您的想法!

env.shell 更改事件

已新增新事件 env.onDidChangeShell,以補充 env.shell,即擴充套件主機檢測到的預設 shell。

env.onDidChangeShell(newShell => {
  console.log(newShell); // Same value as env.shell
});

樹項複選框

擬議的 checkboxState 允許您向樹項新增複選框。

Tree items with checkboxes

this.checkboxState = {
  state: vscode.TreeItemCheckboxState.Unchecked,
  tooltip: 'mark file as viewed'
};

作為 API 一部分的本地化

這次迭代中,我們引入了一個新的 API 來幫助擴充套件本地化字串。這取代了過去用於本地化的 vscode-nlsvscode-nls-dev 模組。這些模組將繼續工作,但不會再接收任何功能。新的 API 和工具旨在既熟悉又更易於使用且更靈活。此外,將其作為 VS Code API 的一部分使我們能夠為桌面版 VS Code 和 Web 版 VS Code 提供對擴充套件本地化的支援。

VS Code 擴充套件的本地化有四個重要部分

新的 vscode.l10n API

declare module 'vscode' {
  export namespace l10n {
    /**
     * A string that can be pulled out of a localization bundle if it exists.
     */
    export function t(message: string, ...args: any[]): string;
    /**
     * A string that can be pulled out of a localization bundle if it exists.
     */
    export function t(options: {
      message: string;
      args?: any[];
      comment: string[];
    }): string;
    /**
     * The bundle of localized strings that have been loaded for the extension.
     */
    export const bundle: { [key: string]: string };
    /**
     * The URI of the localization bundle that has been loaded for the extension.
     */
    export const uri: Uri | undefined;
  }
}

vscode.l10n 擬議 API 是一個新的名稱空間,提供一個函式 t,可用於宣告字串應本地化。可以呼叫該函式並傳入一個字串或具有 message 屬性的物件。如果存在本地化包,該函式將返回本地化字串,否則將返回原始字串。該函式還支援可用於格式化字串的引數和可用於為翻譯人員提供上下文的註釋。

使用新 API 的一個簡單示例

import { l10n } from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const message = l10n.t('Hello in {0}!', vscode.env.language);
  vscode.window.showInformationMessage(message);
}

在此示例中,如果存在當前語言的本地化包,則字串 Hello in {0}! 將被本地化。{0} 將替換為當前語言(預設為 en,或法語為 fr,巴西葡萄牙語為 pt-br 等)。如果不存在本地化包,則字串將按原樣返回並使用引數進行格式化。您可能想知道這些本地化包來自哪裡。我將在下一節中介紹。

vscode.l10n API 還提供對本地化字串包或包 URI 的訪問。這旨在用於子程序場景,我稍後將介紹。

重要提示:當您使用此 API 時,您還需要明確宣告本地化包的位置。這是透過在 package.json 中新增 l10n 屬性來完成的。

{
  "main": "./out/extension.js",
  "l10n": "./l10n"
}

l10n 屬性應該是包含本地化包的資料夾的相對路徑。

@vscode/l10n-dev 模組

@vscode/l10n-dev 模組是一個用於生成本地化包的新模組。您可以將其用作命令列工具或庫。兩者都用於透過掃描提供的原始碼中的 vscode.l10n.t(..) 呼叫來生成本地化包。

這是一個使用命令列工具的簡單示例

npx @vscode/l10n-dev ./src --out ./l10n

這將在 ./l10n 資料夾中放置一個 bundle.l10n.json 檔案。從那裡您可以為要支援的每個區域設定建立一個 bundle.l10n.LOCALE.json 檔案。例如,假設上面的命令生成了以下 bundle.l10n.json 檔案。

{
  "Hello": "Hello",
  "Hello {0}": "Hello {0}",
  "Hello {0}/This is a comment": {
    "message": "Hello {0}",
    "comment": ["This is a comment"]
  }
}

如果您想支援法語,您將在 bundle.l10n.fr.json 檔案中建立以下內容

{
  "Hello": "Bonjour",
  "Hello {0}": "Bonjour {0}",
  "Hello {0}/This is a comment": "Bonjour {0}"
}

注意:您不需要本地化包中的註釋,因為註釋僅對翻譯原始包的翻譯人員有用。

@vscode/l10n-dev 模組還可用於生成 XLF 檔案。VS Code 團隊生成 XLF 檔案,然後將其提供給 Microsoft 的翻譯人員。然後翻譯人員將翻譯後的 XLF 檔案返還給我們。然後我們使用 @vscode/l10n-dev 模組從翻譯後的 XLF 檔案生成本地化包。我們計劃撰寫一篇部落格文章,詳細介紹我們的整個本地化流程。

@vscode/l10n 模組

由於 vscode.l10n API 僅在擴充套件主機中可用,因此不能在子程序中使用。因此,我們建立了一個新模組,可用於在子程序中載入本地化包。該模組名為 @vscode/l10n,可以按如下方式使用

import { l10n } from '@vscode/l10n';

// Load the translations for the current locale
l10n.config({
  uri: process.env.BUNDLE_URI_FROM_EXTENSION
});

// returns the translated string or the original string if no translation is available
l10n.t('Hello World');

其理念是,負責啟動子程序的擴充套件端程式碼將使用 vscode.l10n.contentsvscode.l10n.uri API 將包或包的 URI 傳遞給子程序。然後,子程序可以使用 @vscode/l10n 模組載入包並使用 t 函式翻譯字串。@vscode/l10n 模組使用的 t 函式也將被 @vscode/l10n-dev 模組拾取,以便可以使用一個過程提取和本地化字串。

package.nls.json 檔案

關於 package.nls.json 檔案,沒有任何變化。它仍然用於宣告應本地化的預設字串,並且應位於 package.json 旁邊。您仍然可以擁有 package.nls.LOCALE.json(其中 LOCALE 是 dezh-cn 之類的東西),如果使用者已將 VS Code 設定為該區域設定,則該檔案中宣告的字串將首先被拾取。一個小例子

您的 package.json

{
  "name": "my-extension",
  "version": "0.0.1",
  "main": "./out/extension.js",
  "l10n": "./l10n",
  //...
  "contributes": {
    "commands": [
      {
        "command": "my-extension.helloWorld",
        // The key is surrounded by % characters
        "title": "%my-extension.helloWorld.title%"
      }
    ]
  }
}

您的 package.nls.json

{
  // That same key from the package.json
  "my-extension.helloWorld.title": "Hello World"
}

您的 package.nls.de.json

{
  // That same key from the package.json
  "my-extension.helloWorld.title": "Hallo Welt"
}

總結

這裡當然有很多內容需要消化,但希望這能讓您瞭解我們在 VS Code 擴充套件本地化方面的發展方向。

如果您對完整示例感興趣,可以檢視 l10n-sample

如果您有疑問或反饋,可以在以下地方告知我們

  • vscode.l10nAPI 提案
  • vscode-l10n 倉庫(@vscode/l10n-dev@vscode/l10n 模組的所在地)

日誌輸出通道

vscode.window.createOutputChannel API 現在有一個新的 log 布林選項,可用於建立僅用於日誌記錄的輸出通道。

/**
 * Creates a new {@link LogOutputChannel log output channel} with the given name.
 *
 * @param name Human-readable string which will be used to represent the channel in the UI.
 * @param options Options for the log output channel.
 */
export function createOutputChannel(
  name: string,
  options: { readonly log: true }
): LogOutputChannel;

LogOutputChannel 支援以下方法來記錄訊息

trace(message: string, ...args: any[]): void;
debug(message: string, ...args: any[]): void;
info(message: string, ...args: any[]): void;
warn(message: string, ...args: any[]): void;
error(error: string | Error, ...args: any[]): void;

擴充套件建立的日誌輸出通道在“輸出”下拉檢視中顯示為單獨的條目。寫入此日誌輸出通道的訊息以與 VS Code 日誌訊息相同的格式表示。

Log Output channel

工程

邁向“跨源隔離”

我們已做出更改,以使 VS Code 桌面版和 vscode.dev 能夠實現跨源隔離。這將啟用新的強大功能,例如共享陣列緩衝區。VS Code 本身以及擴充套件和 webview 都將從中受益。

跨源隔離目前位於功能標誌後面,啟用它可能會對從 Internet 載入資源的擴充套件和 webview 產生意外影響。您可以在為什麼強大的功能需要“跨源隔離”中閱讀更多相關資訊。我們希望儘早聽取您的反饋。

要試用此功能

  • 使用 --enable-coi 標誌執行 VS Code 桌面版,例如 code --enable-coi。
  • 執行 vscode.dev 並附加 vscode-coi 查詢。

要檢查是否啟用了跨源隔離,請使用開發工具的“應用程式”選項卡或檢查 crossOriginIsolated 全域性變數的值。

Cross Origin Isolation enabled for web

改進的啟動效能

我們在此里程碑中預留了工程時間來改善從啟動 VS Code 到在文字編輯器中看到閃爍游標所需的時間。我們始終跟蹤我們的效能資料,並注意到上一個里程碑末期效能略有下降,我們希望解決這個問題。

這是團隊的努力,每個人都在整個原始碼中貢獻了各種更改。這裡提到了一些亮點。

不再有同步 fs 呼叫

我們通常避免使用 Node.js fs API 的同步變體,因為我們知道這些方法會停止指令碼執行,直到檔案系統請求得到解決。然而,在少數情況下,我們仍然依賴同步 fs 執行,尤其是在啟動時開啟或恢復視窗時。我們能夠將所有這些呼叫更改為它們的非同步變體,從而允許其他指令碼在等待檔案系統請求返回時繼續執行。

更多主入口點捆綁

構成 VS Code 應用程式的主捆綁包有幾兆位元組大小,使用 vscode-loader 捆綁為單個檔案,並使用 esbuild 縮小。然而,在某些情況下,我們沒有投入捆綁,特別是對於

  • Electron 主程序中始終首先呼叫的 Node.js 入口點。
  • Electron 渲染器程序中用於開啟視窗的引導 JavaScript 檔案。

捆綁這兩個區域使我們能夠將啟動時查詢 JavaScript 檔案的成本減少到 Electron 主程序的一次呼叫和視窗本身的一次呼叫。

將程式碼推遲到稍後階段

最好的效能修復是刪除程式碼並且永不執行它,但這顯然不是一個可擴充套件的解決方案。另一種方法是將程式碼的執行推遲到稍後階段,例如在文字編輯器開啟之後。在此里程碑中,我們再次審查了我們的各個元件,並將其中一些推遲到稍後階段,以免阻塞關鍵的啟動路徑。

文件內部工具

為了分析效能,我們大量使用了瀏覽器的開發工具和作業系統檢查工具。但是,我們也有一些內置於 VS Code 中的工具。我們在 VS Code 開發的效能工具中記錄了自定義工具,以便更多人可以從中受益。

更快的 PR 檢查

對於拉取請求,我們執行自動單元、整合和冒煙測試。所有這些都並行發生,但每一步都需要將我們的 TypeScript 源轉譯為 JavaScript 程式碼。最初,我們使用 TypeScript 編譯器來完成此操作。它會發出 JavaScript,但也會進行型別檢查。後者非常耗時,對於測試來說並不是真正需要的。測試延遲的總時間成本約為 5 分鐘。然後我們切換到使用 TypeScript 編譯器 API 的自定義純轉譯解決方案。這要快得多,但仍然需要大約 2 分鐘。

在此里程碑中,我們切換到了 SWC (Speedy Web Compiler),它甚至更快。現在轉譯所有 TypeScript 源大約需要 12 秒。這是一個巨大的改進,使我們能夠更快地獲得拉取請求的反饋。

值得注意的修復

  • 27799 macOS:作業系統服務無法從編輯器中選取選定的文字
  • 60821 改進了“開啟最近”和“入門”頁面的最近列表之間的同步。
  • 156777 保持程序資源管理器開啟時,每分鐘洩漏 5MB 記憶體
  • 159862 在 macOS Catalina 上,處於全屏模式時,交通燈按鈕顯示錯位
  • 161305 檢視其他視窗設定時,“視窗:標題欄樣式”連結不起作用

感謝

最後但同樣重要的是,向 VS Code 的貢獻者們致以衷心的感謝

問題跟蹤

對我們問題跟蹤的貢獻

拉取請求

vscode 的貢獻

vscode-css-languageservice 的貢獻

vscode-pull-request-github 的貢獻

debug-adapter-protocol 的貢獻

© . This site is unofficial and not affiliated with Microsoft.