🚀 在 VS Code 中！

2021 年 5 月 (版本 1.57)

更新 1.57.1：此更新解決了這些 問題。

工作區信任功能解決了 CVE-2021-34529。

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

歡迎使用 Visual Studio Code 2021 年 5 月發行版本。此版本中有許多更新，我們希望您會喜歡，其中一些主要重點包括

如果您想在線上閱讀這些版本資訊，請前往 Updates，網址為 code.visualstudio.com。

觀看重點，了解 VS Code 團隊發行派對中此版本的新功能。您可以在我們的 YouTube 頻道上找到活動錄影。

Insiders：想要盡快試用新功能嗎？您可以下載每晚的 Insiders 組建，並在最新更新可用時立即試用。

工作台

工作區信任

Visual Studio Code 非常重視安全性，並希望協助您安全地瀏覽和編輯程式碼，無論來源或作者為何。工作區信任功能可讓您決定專案資料夾是否應允許或限制自動程式碼執行。

Trust this folder dialog

注意：如有疑問，請將資料夾保留在受限模式。您隨時可以稍後啟用信任。

安全的程式碼瀏覽

很高興有這麼多原始碼可在公開儲存庫和檔案共用中取得。無論是編碼任務或問題，可能都已經有可用的良好解決方案。但是，使用開放原始碼和工具確實存在風險，您可能會讓自己暴露於惡意程式碼執行和漏洞。

當工作區在受限模式中開啟時，「工作區信任」透過防止自動程式碼執行來提供額外的安全性層。

注意：如果您想要停用「工作區信任」功能，您可以將 security.workspace.trust.enabled 設定為 false。只有在您確信自己知道正在處理的檔案的來源和完整性時，才停用「工作區信任」。

受限模式

當「工作區信任」對話方塊提示時，如果您選擇否，我不信任作者，VS Code 將進入受限模式以防止程式碼執行。工作台會在頂端顯示橫幅，其中包含透過「工作區信任」編輯器管理資料夾的連結，以及深入了解，將您帶到工作區信任使用者指南。

Workspace Trust Restricted Mode banner

您也會在狀態列中看到「受限模式」徽章。

Workspace Trust Restricted Mode Status bar badge

「受限模式」會嘗試透過停用或限制多個 VS Code 功能的運作來防止自動程式碼執行：工作、偵錯、工作區設定和擴充功能。

若要查看在「受限模式」中停用的完整功能清單，您可以透過橫幅中的管理連結或按一下狀態列中的「受限模式」徽章來開啟「工作區信任」編輯器。

Workspace Trust editor

信任工作區

如果您信任專案的作者和維護者，您可以信任本機電腦上的專案資料夾。例如，通常可以安全地信任來自知名 GitHub 組織的儲存庫，例如 github.com/microsoft 或 github.com/docker。當您開啟新資料夾時，初始「工作區信任」提示可讓您信任該資料夾及其子資料夾。

您也可以叫出「工作區編輯器」並快速切換資料夾的信任狀態。有多種方式可以叫出「工作區編輯器」對話方塊。

在受限模式中

  • 受限模式橫幅 管理 連結
  • 受限模式狀態列項目

您也可以隨時使用

  • 來自命令面板的工作區：管理工作區信任命令 (⇧⌘P (Windows、Linux Ctrl+Shift+P))
  • 來自活動列中管理齒輪的管理工作區信任

Manage Workspace Trust command in the Manage gear context menu

選取資料夾

當您信任資料夾時，它會新增至「工作區信任」編輯器中顯示的信任的資料夾與工作區清單。

Workspace Trust editor Trusted Folders and Workspaces list

您可以手動從此清單新增、編輯和移除資料夾，而啟用信任的活動資料夾會以粗體反白顯示。

您也可以選擇信任父資料夾。這會將信任套用至父資料夾和所有子資料夾。如果您有多個具有受信任內容的資料夾共置在一個資料夾下，這會很有幫助。

啟用擴充功能

如果您想要使用「受限模式」，但您最愛的擴充功能不支援「工作區信任」會發生什麼事？如果擴充功能雖然實用且功能正常，但未積極維護且尚未宣告其「工作區信任」支援，就可能會發生這種情況。若要處理這種情況，您可以使用 extensions.supportUntrustedWorkspaces 設定覆寫擴充功能的信任狀態。

注意：請小心覆寫擴充功能的「工作區信任」支援。可能是擴充功能作者有充分的理由在「受限模式」中停用其擴充功能。

您可以在下方看到 Prettier 擴充功能的 settings.json 使用者項目。

  "extensions.supportUntrustedWorkspaces": {
    "esbenp.prettier-vscode": {
      "supported": true,
      "version": "6.4.0"
    },
  },

您可以使用 supported 屬性啟用或停用「工作區信任」支援。version 屬性指定適用的確切擴充功能版本，如果您想要為所有版本設定狀態，可以移除版本欄位。

如果您想深入了解擴充功能作者如何評估和判斷要在「受限模式」中限制哪些功能，您可以閱讀工作區信任擴充功能指南。

設定

以下是可用的「工作區信任」設定

  • security.workspace.trust.enabled - 啟用「工作區信任」功能。預設值為 true。
  • security.workspace.trust.startupPrompt - 是否在啟動時顯示「工作區信任」對話方塊。預設值為每個不同的資料夾或工作區僅顯示一次。
  • security.workspace.trust.emptyWindow - 是否永遠信任空白視窗 (沒有開啟的資料夾)。預設值為 true。
  • security.workspace.trust.untrustedFiles - 控制如何處理工作區中的鬆散檔案。預設值為提示。
  • extensions.supportUntrustedWorkspaces - 覆寫擴充功能「工作區信任」宣告。true 或 false。

若要深入了解「工作區信任」，您可以閱讀工作區信任使用者指南。

全新的開始使用體驗

在過去的幾次迭代中，我們一直在努力更新 VS Code 的歡迎頁面，我們很高興宣布，從這次迭代開始，我們的新歡迎頁面 (開始使用) 預設會為所有使用者啟用。在這個新體驗中，VS Code 的核心和已安裝的擴充功能都可以將「逐步解說」貢獻到歡迎頁面，這些「逐步解說」旨在協助您開始使用 VS Code 本身或新的擴充功能。例如，Luna Paint 擴充功能貢獻了一個逐步解說，其中包含指南，可協助您了解影像編輯器的每個元件。

New welcome page, showing some of the walkthroughs core and extensions can contribute

此外，一旦您完成 (或關閉) 所有逐步解說，VS Code 就會重新排列內容，使您可以按一下滑鼠即可存取最近的工作區數量加倍。

New welcome page with all walkthroughs dismissed, showing extra recent workspaces entries

設定

  • workbench.startupEditor - 控制啟動時要顯示的預設編輯器。新值 gettingStarted 取代了舊的預設值 welcome。其他一些可用的選項包括 readme、gettingStartedInEmptyWorkbench、newUntitledFile 或 none。
  • workbench.welcomePage.walkthroughs.openOnInstall - 是否在安裝時自動開啟擴充功能貢獻的逐步解說。

新的頁面將稱為開始使用，直到我們完全淘汰現有的「歡迎」頁面為止。

遠端儲存庫

遠端儲存庫擴充功能在 1.56 版中以內建預覽功能推出，現在已公開發行，但不再內建於 VS Code 中，因此您需要從 VS Code Marketplace 安裝。

快速回顧一下，遠端儲存庫擴充功能可讓您直接從 VS Code 內立即瀏覽、搜尋、編輯和提交至任何 GitHub 儲存庫，而無需複製或在本機擁有儲存庫。

在此迭代中，雖然我們主要專注於錯誤修正和潤飾擴充功能以供發行，但我們確實新增了一些新功能。您現在可以在遠端檔案總管中看到您的遠端儲存庫，以快速開啟或比較您可能擁有的任何未提交變更。此外，您可以將來自相同儲存庫的變更套用至目前的遠端儲存庫，讓您可以快速輕鬆地將未提交的變更從一個分支移至另一個分支。

Remote Repositories Remote Explorer view

佈景主題：紫水晶深色佈景主題

若要深入了解「遠端儲存庫」，您可以查看遠端儲存庫部落格文章和 YouTube 影片。

改良跨視窗的編輯器拖放功能

在此版本中，已改良對將編輯器拖曳到其他視窗的支援。您現在可以將差異編輯器、自訂編輯器和整個編輯器群組拖曳到另一個視窗，以在那裡開啟編輯器。

Improved editor drag and drop across windows

佈景主題：GitHub 淺色佈景主題

注意：如果您經常使用此功能，請務必啟用自動儲存 (files.autoSave)，以便一個視窗中的變更自動反映在另一個視窗中。

移除 Cmd+W / Ctrl+W 鍵盤快速鍵，在未開啟編輯器時關閉視窗

我們收到 意見反應，指出使用者在透過快速使用 Cmd+W / Ctrl+W 關閉最後一個編輯器後，VS Code 視窗 (執行個體) 突然關閉時感到沮喪。團隊中的快速民意調查也顯示，許多人已取消指派此鍵盤快速鍵以關閉視窗，因此我們繼續移除 Cmd+W / Ctrl+W 作為在未開啟編輯器時關閉視窗的鍵盤快速鍵。

您可以透過在您的使用者 keybindings.json 檔案中設定以下內容，輕鬆地將鍵盤快速鍵帶回來

macOS

{
  "key": "cmd+w",
  "command": "workbench.action.closeWindow",
  "when": "!editorIsOpen && !multipleEditorGroups"
}

Windows/Linux

{
  "key": "ctrl+w",
  "command": "workbench.action.closeWindow",
  "when": "!editorIsOpen && !multipleEditorGroups"
}

注意：在所有平台上，都有一個專用的已指派鍵盤快速鍵可關閉視窗

  • macOS：Cmd+Shift+W
  • Linux：Alt+F4
  • Windows：Alt+F4

Notebook 版面配置自訂

我們在這個月新增了數個 Notebook 版面配置設定，讓使用者可以自訂 Notebook 編輯器以符合其工作流程。預設開啟的自訂項目為

Notebook 工具列

我們在編輯器中新增了一個 Notebook 工具列，您可以在其中輕鬆存取動作，例如插入儲存格、執行所有儲存格或切換核心。可以透過將 notebook.globalToolbar 設定為 false 來停用工具列。

Notebook toolbar

輸出工具列

清除儲存格輸出動作和用於選取不同輸出轉譯器或 MIME 類型的按鈕現在已合併到儲存格輸出旁邊的單一 ... 省略符號選單中。可以透過將 notebook.consolidatedOutputButton 設定為 false 來停用此功能

Notebook output toolbar

焦點儲存格在邊界上的反白顯示

VS Code 現在支援在儲存格的邊界區域中轉譯焦點儲存格反白顯示，這有助於在 Notebook 包含許多儲存格時識別哪個儲存格具有焦點。設定 notebook.cellFocusIndicator 可以是 gutter (新的預設值) 或 border，以反白顯示整個儲存格邊界。

Notebook focus indicator on gutter

滑鼠游標停留在上方時顯示摺疊圖示

Markdown 儲存格上的摺疊圖示現在在滑鼠游標停留在上方時可見，而不是一直可見。您可以透過將 notebook.showFoldingControls 設定為 mouseover (預設值) 或 always 來自訂行為。

Notebook show focus icon on mouse over

本月實作的完整 Notebook 版面配置設定清單如下

  • notebook.cellFocusIndicator：新增選項，讓儲存格可以使用儲存格側邊的彩色長條 (gutter) 來指示其焦點狀態，類似於 Jupyter。
  • notebook.cellToolbarVisibility：決定儲存格工具列應在儲存格具有焦點或滑鼠游標停留在上方時顯示。預設值為僅在儲存格具有焦點時顯示。
  • notebook.compactView：啟用時，儲存格會以更精簡的樣式轉譯，且空白空間較少。預設為啟用。
  • notebook.consolidatedOutputButton：清除儲存格輸出動作和用於選取不同輸出轉譯器或 MIME 類型的按鈕已合併到儲存格輸出旁邊的單一 ... 省略符號選單中。可以使用此設定停用新的選單。
  • notebook.consolidatedRunButton：有兩個新的動作，在上方執行儲存格和執行儲存格和下方。它們預設會顯示在儲存格工具列中，但啟用此設定會將它們移至執行按鈕旁邊的新內容選單。
  • notebook.dragAndDropEnabled：停用儲存格的拖放功能。您仍然可以使用命令 (Alt+向上鍵/Alt+向下鍵 (預設值)) 重新排列儲存格。
  • notebook.globalToolbar：將工具列新增至 Notebook 編輯器的頂端。
  • notebook.insertToolbarLocation：控制用於插入新儲存格的按鈕應顯示在儲存格之間、工具列中、兩者皆是還是隱藏。
  • notebook.showCellStatusBar：此設定有一個新選項 visibleAfterExecute，會在儲存格執行之前隱藏儲存格狀態列以節省空間。一旦執行，它就會變成可見，讓使用者可以檢閱執行詳細資料。
  • notebook.showFoldingControls：控制 Markdown 標題上出現的摺疊符號是永遠可見，還是僅在滑鼠游標停留在上方時可見。
  • notebook.editorOptionsCustomizations：讓使用者可以自訂 Notebook 中的儲存格編輯器設定。

下圖顯示數個這些設定的效果 (頂端的工具列、邊界反白顯示、輸出 ... 按鈕)

Notebook layout changes

更新快速選取和建議小工具色彩

我們已更新快速選取和小工具中的焦點狀態，以更好地與我們的樹狀結構小工具樣式對齊。這引入了一些新的色彩語彙基元，可控制焦點前景

  • list.focusHighlightForeground
  • quickInputList.focusForeground
  • editorSuggestWidget.selectedForeground

Quick Pick style in light theme

Suggest style in light theme

圖示佈景主題：Fluent 圖示

更新 macOS 的觸控列圖示

我們已更新 macOS 觸控列圖示，使其與我們更新的圖示風格對齊。

macOS 觸控列圖示 預設檢視

偵錯時具有更多控制項的 macOS 觸控列圖示 偵錯時

Webview 的內容選單

VS Code 現在支援在 Webview 內顯示簡單的內容選單，例如 Markdown 預覽、版本資訊和擴充功能詳細資料頁面

A context menu in a webview

此內容選單目前包含用於複製和貼上文字的動作。我們可能會在未來將其他動作新增至選單。

如果此內容選單干擾您擴充功能中的 Webview，您可以透過在 contextmenu 事件上呼叫 preventDefault 來防止它顯示

document.body.addEventListener('contextmenu', e => {
  e.preventDefault(); // cancel the built-in context menu
});

編輯器

建議預覽

啟用新的設定 editor.suggest.preview 後，游標位置會顯示選取的建議或程式碼片段預覽。

Suggestion preview showing smart completions for the letter 'i'

佈景主題：Dark+ (預設深色)

隱藏已過時的建議

有一個新的設定 editor.suggest.showDeprecated，預設為 on，但當設定為 off 時，建議將不會顯示標示為已過時的項目。

整合式終端機

終端機索引標籤

終端機索引標籤在 1.56 版中以預覽功能推出，現在預設為啟用。新的索引標籤檢視預設只會在至少有兩個終端機時顯示。對於單一終端機，索引標籤會「內嵌」到面板標題中。這也引入了終端機狀態的概念，例如是否有工作正在執行、成功或失敗

Single inlined terminal tab, terminal tabs with status, and collapsed terminal tabs

以下是此版本中的一些重點

  • 可以變更索引標籤的色彩，以啟用快速導覽和區分它們。
  • 可以拖放索引標籤以允許重新排列。
    drag and drop
  • 將終端機群組中的索引標籤拖曳到空白區域會將其從群組中移除 (取消分割終端機，也可透過內容選單使用)。
    unsplit
  • 將索引標籤拖曳到主要終端機區域允許加入群組 (也可透過內容選單使用)。
    dragging a terminal tab to join a tab group
  • Alt 現在會在按一下索引標籤、+ 按鈕或單一索引標籤時分割終端機。同樣適用於中鍵按一下以終止終端機。
    split terminal buttons
  • 除非索引標籤清單夠大以避免意外分割/終止終端機，否則不會顯示內嵌動作。
  • 當終止終端機而只剩下一個終端機時，索引標籤清單在滑鼠離開檢視之前不會隱藏。

如果您不喜歡新的 UX，您可以透過將 "terminal.integrated.tabs.enabled": false 設定為下拉式選單，計畫是繼續支援此選項。

終端機設定檔改良

終端機設定檔系統在此版本中進行了許多改良，以下是一些重點

  • 如果終端機在啟動 VS Code 時還原，則會遵守 defaultProfile，並將用於工作和偵錯。
  • IntelliSense 現在適用於 icon 和 defaultProfile 的 settings.json。
  • overrideName 現在適用於預設設定檔。
  • 現在可以在工作區設定中設定 defaultProfile。這現在也由新的「工作區信任」功能控制。
  • 如果使用 defaultProfile 和 shell 或 shellArgs 設定，現在會要求您將已過時的設定移轉至設定檔系統。
  • 現在可以在設定檔上設定 color。

標題序列支援

設定 terminal.integrated.experimentalUseTitleEvent 設定已升級為穩定版本，成為 terminal.integrated.titleMode。預設情況下，此設定將為 executable，這會根據偵測到的前景程序命名終端機

Running 'git show' will result in the terminal's title changing to 'git'

當設定為 sequence 時，標題將根據 Shell 設定的內容。這需要 Shell 支援才能運作，在運作中的範例是 oh-my-zsh 的預設提示，其中顯示有關工作階段的其他資訊

The oh-my-zsh default prompt will show the computer's name and current working directory

改良以乾淨環境啟動

設定 terminal.integrated.inheritEnv 自 v1.36 以來就已可用，但實作存在一些缺陷，在 Linux 上可能因權限問題而失敗，並且可能無法在 macOS 上如預期般運作。

由於 VS Code 設定其基礎環境的方式有所改良，現在可以存取啟動時的初始環境，這也是大多數終端機的運作方式。當 inheritEnv 設定為 true 時，VS Code 現在將使用初始環境，而當 false 時，則使用來源的「Shell 環境」。此設定可協助終端機更像一般終端機。但是，如果您的設定檔/rc 設定未正確設定，您可能會遇到問題。

Windows 上的原生換行支援

終端機中的換行驅動工作問題比對器和連結偵測。從歷史上看，Windows 終端機一直使用啟發式方法將行標示為換行，因為模擬 Unix pty 的模擬技術不支援換行。這在最近的 Windows 版本上有所變更，並且在更新至 Windows 10 21376+ (目前僅限 Insiders) 時，將停用此啟發式方法，並且換行應如 Windows 終端機中一樣正常運作。

工作

終端機索引標籤上的工作狀態

工作狀態現在顯示在其終端機索引標籤中。對於背景工作，狀態僅在有相關聯的問題比對器時才會顯示。

Task status on a terminal tab

自動關閉工作終端機

工作 presentation 屬性有一個新的 close 屬性。將 close 設定為 true 會導致終端機在工作結束時關閉。

{
  "type": "shell",
  "command": "node build/lib/preLaunch.js",
  "label": "Ensure Prelaunch Dependencies",
  "presentation": {
    "reveal": "silent",
    "close": true
  }
}

偵錯

JavaScript 偵錯

與往常一樣，完整的變更清單可在 vscode-js-debug 變更記錄中找到。

Edge 開發人員工具整合

JavaScript 偵錯工具與 Microsoft Edge 開發人員工具整合，為瀏覽器偵錯提供 DOM、樣式和網路檢查器，可透過偵錯工具列中的新「檢查」圖示存取。

Debugger inspect button

下面的短片示範選取「檢查」按鈕並在 Edge 開發人員工具中瀏覽元素。

示範按一下「檢查」圖示並在 Edge 中按一下瀏覽元素 佈景主題：Codesong

如果您尚未使用 Microsoft Edge 進行瀏覽器偵錯，您可以透過在您的 launch.json 中將 "type": "chrome" 或 "type": "pwa-chrome" 取代為 "type": "pwa-msedge" 來切換至它。Blazor 應用程式也支援此功能，方法是在其啟動組態中設定 "browser": "edge"。

支援來源對應中重新命名的識別碼

JavaScript 偵錯工具現在支援來源對應中重新命名的識別碼，這是一項長期要求的功能。這在偵錯縮小的程式碼時特別有用

在斷點暫停的螢幕擷取畫面。正在執行縮小的程式碼，但變數、監看式和偵錯主控台檢視顯示可以透過原始名稱存取變數。 佈景主題：Codesong

變數檢視、監看式檢視和偵錯主控台 REPL 中支援重新命名的變數。您可以透過尋找其產生的來源對應檔案中非空白的 "names" 陣列來檢查您的工具是否發出重新命名。

在 [中斷點] 檢視中顯示命中的中斷點

當中斷點被命中時，VS Code 現在會在 [中斷點] 檢視中選取並顯示它。這應該更容易了解哪個確切的中斷點導致程式中斷。

目前只有 JS-debug 擴充功能支援此功能，但我們預期其他偵錯擴充功能很快也會跟進。

As the user steps in the program, a breakpoint that got hit is selected and revealed in the BREAKPOINTS view

語言

TypeScript 4.3.2

VS Code 現在隨附 TypeScript 4.3.2。此主要更新包含許多 TypeScript 語言改良功能，以及 JavaScript 和 TypeScript 工具的許多改良和錯誤修正。

您可以在 TypeScript 部落格上閱讀有關 TypeScript 4.3 的詳細資訊。

JSDoc @link 支援

VS Code 現在支援 JavaScript 和 TypeScript 註解中的 JSDoc @link 標籤。這些標籤可讓您在文件中建立可按一下的符號連結

Navigating code using JSDoc @link tags

JSDoc @link 標籤撰寫為：{@link symbolName}。您也可以選擇性地指定要轉譯以取代符號名稱的文字：{@link class.property Alt text}。

Hover、建議和簽章說明中支援 @link。我們也已更新 VS Code 擴充性類型宣告檔案 vscode.d.ts 以使用 @link。

import 陳述式中的完成

當您接受建議時，JavaScript 和 TypeScript 中的自動匯入會自動新增匯入。使用 VS Code 1.57，它們現在在撰寫 import 陳述式本身時也適用

Auto imports in an import statement

如果您需要手動新增匯入，這可以節省時間。

非 JS/TS 檔案的「前往定義」

許多現代 JavaScript 捆綁器和架構使用 import 陳述式來匯入資產，例如影像和樣式表。我們現在支援透過前往定義來導覽這些匯入

Navigating to a non-JS/TS import

當您使用 Ctrl/Cmd 按一下來導覽您的程式碼時，這可能最有用。

排序匯入來源動作

JavaScript 和 TypeScript 的排序匯入程式碼動作會排序您的匯入。但是，與組織匯入不同，它不會移除任何未使用的匯入。

您也可以透過設定在儲存時啟用匯入排序

"editor.codeActionsOnSave": {
    "source.sortImports": true
}

推斷函式傳回類型快速修正

TypeScript 的推斷函式傳回類型重構會將明確的傳回類型註釋新增至函式

The Infer function return type refactoring in action

如果您想要新增更明確的類型，這會很有用。當您想要將傳回類型擷取到具名類型/介面，或者如果您需要修改函式的傳回類型時，此重構也可以節省時間。

提示停用 TS Server 記錄

如果您長時間啟用 TypeScript 伺服器記錄，VS Code 現在會提示您

TS server logging enabled notification

記錄可能會嚴重影響效能，因此最好保持停用，除非您正在積極嘗試診斷問題。

擴充功能貢獻

遠端開發

遠端開發擴充功能的工作仍在繼續進行中，可讓您使用容器、遠端電腦或 適用於 Linux 的 Windows 子系統 (WSL) 作為功能完整的開發環境。

1.57 版中的功能重點包括

  • 控制轉送埠的所需通訊協定。
  • 選擇性監看轉送埠衝突。
  • 開發容器支援「工作區信任」安全性功能。
  • 改良開發容器中的環境變數偵測。

您可以在遠端開發版本資訊中了解新的擴充功能功能和錯誤修正。

擴充功能撰寫

Notebook API

我們已最終確定大部分 Notebook API。API 結構化為三個獨立的部分

  1. NotebookSerializer API，與 notebooks 貢獻點結合使用，可讓 VS Code 開啟、修改和儲存 Notebook 文件。
  2. 呈現儲存格輸出的 Notebook 轉譯器。它們是透過擴充功能 package.json 檔案的 notebookRenderer 貢獻點新增的。
  3. NotebookController API，用於為程式碼儲存格產生輸出。

簡單 Notebook 序列化程式和 Echo 控制器的範例。序列化程式使用 JSON.parse 和 stringify，並針對空白檔案進行特殊處理。控制器傳回儲存格文字的大寫變體，一次以純文字形式，一次以 HTML 形式。

// serialize/deserialize notebook
vscode.workspace.registerNotebookSerializer(
  'echobook',
  new (class implements vscode.NotebookSerializer {
    // serializer is relying on JSON.parse/stringify
    deserializeNotebook(content: Uint8Array) {
      return JSON.parse(new TextDecoder().decode(content) || '{"cells":[]}');
    }
    serializeNotebook(data: vscode.NotebookData) {
      return new TextEncoder().encode(JSON.stringify(data));
    }
  })()
);

// notebook controller
vscode.notebooks.createNotebookController(
  'myId',
  'echobook',
  'Echo',
  (cells, _notebook, controller) => {
    for (let cell of cells) {
      // execution means to echo in upper-case, once as plain text and once as html
      const execution = controller.createNotebookCellExecution(cell);
      execution.start();
      const echo = cell.document.getText().toUpperCase();
      const textItem = vscode.NotebookCellOutputItem.text(echo, 'text/plain');
      const htmlItem = vscode.NotebookCellOutputItem.text(`<b>${echo}</b>`, 'text/html');
      const output = new vscode.NotebookCellOutput([textItem, htmlItem]);
      execution.replaceOutput(output);
      execution.end(true);
    }
  }
);

此範例靜態註冊 *.echobook 檔案的筆記本類型。此外，每當開啟此類筆記本時，VS Code 都會發出 onNotebook:echobook 啟動事件。

"contributes": {
  "notebooks": [{
      "type": "echobook",
      "displayName": "Echobook",
      "selector": [{
        "filenamePattern": "*.echobook"
      }]
  }]
}

狀態列項目 'id' 和 'name' 屬性

我們已完成 StatusBarItem 識別碼和名稱屬性的 API。識別碼可以從 createStatusBarItem 方法的新多載傳遞，而 name 屬性可以在 StatusBarItem 本身上動態變更。

這些新屬性用於狀態列上的上下文選單，為個別項目提供名稱，並允許使用者顯示和隱藏項目。如果您未提供這些屬性，選單將會把來自單一擴充功能的所有狀態項目聚合在單一項目下。

Status bar item menu

如果您的擴充功能貢獻於狀態列，請考慮更新至新的 API。

在新終端機中列印訊息

當使用 window.createTerminal 建立終端機時，現在可以透過 TerminalOptions.message 設定訊息，該訊息會列印在終端機的頂部。此訊息支援 ANSI 跳脫序列以啟用文字樣式。

vscode.window.createTerminal({
  name: `My terminal`,
  message: '\x1b[3;1mSome custom message\x1b[0m'
});

Terminal displaying a custom message

內嵌值的新主題色彩

新增了色彩以主題化偵錯工具內嵌值。

  • editor.inlineValuesBackground：偵錯內嵌值前景文字的色彩。
  • editor.inlineValuesForeground：偵錯內嵌值背景的色彩。

提醒您，內嵌值會在偵錯期間顯示，適用於已註冊內嵌值提供者的偵錯擴充功能，或者當設定 debug.inlineValues 為 true 時。

Debug inline values are shown with the foreground and background color customized

vscode-webview.d.ts

新發布的 @types/vscode-webview 套件為 VS Code 在 webview 內部公開的 API 新增了類型定義。

您可以使用 npm install --save-dev @types/vscode-webview 安裝這些類型。如果您的專案中未選取 webview 類型，請嘗試將它們新增至 jsconfig / tsconfig 的 typeAcquisition 區段。

"typeAcquisition": {
  "include": [
    "@types/vscode-webview"
  ]
}

或在您的程式碼中新增三斜線參考。

///<reference types="@types/vscode-webview"/>

改進的 webview 陣列緩衝區傳輸

在舊版的 VS Code 中，將類型化陣列傳送到 webview 或從 webview 傳送類型化陣列有一些怪異之處。

  • 類型化陣列，例如 UInt8Array，序列化效率低落。當您需要傳輸數 MB 的資料時，這可能會導致效能問題。
  • 傳送的類型化陣列在接收端不會重新建立為正確的類型。如果您傳送 UInt8Array，接收器反而會取得一個通用物件，其中包含 UInt8Array 的資料值。

雖然這兩個問題都是錯誤，但我們也無法在不潛在破壞依賴現有行為的擴充功能的情況下修復它們。同時，新編寫的擴充功能絕對沒有理由想要目前令人困惑且效率低落的行為。

因此，我們已決定為現有的擴充功能保留現有的行為，但將新的擴充功能轉移到更正確的行為。這是透過查看您擴充功能 package.json 中的 engines 值來完成的。

"engines": {
  "vscode": "^1.57.0",
}

如果擴充功能以 VS Code 1.57+ 為目標，則類型化陣列應在接收器端重新建立，並且大型類型化陣列與 webview 之間的傳輸應更有效率。

偵錯工作階段上的 parentSession

不久前，VS Code 新增了對階層式偵錯工作階段的支援，但擴充功能 API 中未公開有關階層的任何資訊。為了處理這個問題，DebugSession 介面上新增了一個屬性，用於參考父工作階段（如果有的話）。工作階段的父工作階段永遠不會變更。

export interface DebugSession {
  /**
    * The parent session of this debug session, if it was created as a child.
    * @see DebugSessionOptions.parentSession
    */
  readonly parentSession?: DebugSession;

  // ...

改進的 VS Code Insiders 版本目標設定

當開發使用建議 API 的擴充功能時，可能會發布包含重大變更的新 Insiders 組建。為了為使用者提供更流暢的過渡，您現在可以使用日期標籤精確地鎖定 Insiders 版本。例如，將 engines.vscode 設定為 ^1.56.0-20210428 將以任何在 2020 年 4 月 28 日 UTC 時間 0:00 或之後建立的 VS Code 1.56（或更新版本）組建為目標。這讓您可以在即將發布的 Insiders 版本之前安全地發布過時的擴充功能更新。

"engines": {
  "vscode": "^1.56.0-20210428",
}

樹狀結構懸停支援命令 URI

當 TreeItem 具有受信任的 Markdown 工具提示時，該工具提示可以包含格式為 [this is a link](command:workbench.action.quickOpenView) 的命令。這遵循與 Markdown 中支援命令連結的所有其他位置相同的格式。

建議的擴充功能 API

每個里程碑都伴隨著新的建議 API，擴充功能作者可以試用它們。與往常一樣，我們希望收到您的回饋。以下是您試用建議 API 必須執行的操作：

  • 您必須使用 Insiders 版本，因為建議 API 經常變更。
  • 您必須在擴充功能的 package.json 檔案中包含此行程式碼："enableProposedApi": true。
  • 將最新版本的 vscode.proposed.d.ts 檔案複製到您專案的原始碼位置。

您無法發布使用建議 API 的擴充功能。下一個版本中可能會有重大變更，而我們絕不希望破壞現有的擴充功能。

測試

我們原先打算在此迭代中完成測試 API 的第一部分，但由於其他正在進行中的功能數量眾多而被延遲。雖然此迭代中測試 API 沒有重大變更，但我們持續在改進其編輯器體驗方面取得進展。例如，「預覽」檢視新增了分割檢視，讓您可以瀏覽目前和過去測試執行的結果。

分割檢視右側顯示參考樣式樹狀結構的「預覽」檢視影像 主題：Codesong

測試新增了一組新的快速鍵，作為以 Ctrl+; 開頭的和絃鍵，現在「預覽」檢視對 Markdown 訊息有更好的支援，並且修復了許多錯誤。

如果您使用 Test Explorer UI 擴充功能進行測試，您可以切換開啟設定 testExplorer.useNativeTesting 以切換到新的原生 UI。在下一個迭代中，我們計畫增加此設定的宣傳，並開始與合作夥伴擴充功能團隊採用。

終端機設定檔貢獻

此 API 將使擴充功能能夠貢獻於終端機設定檔系統。擴充功能需要執行一些操作才能使其運作。首先在 package.json 中貢獻設定檔。

"contributes": {
  "terminal": {
    "profiles": [
      {
        "title": "Profile from extension",
        "id": "my-ext.terminal-profile",
        "icon": "lightbulb"
      }
    ]
  },
}

然後在新的 onTerminalProfile 啟動事件上啟動擴充功能。

"activationEvents": [
  "onTerminalProfile:my-ext.terminal-profile"
]

最後，在啟動事件中註冊提供者。

vscode.window.registerTerminalProfileProvider('my-ext.terminal-profile', {
  provideProfileOptions(token) {
    return {
      name: 'Profile from extension',
      shellPath: 'cmd.exe'
    };
  }
});

如果啟用了建議 API，則擴充功能貢獻的設定檔應顯示在設定檔列表中。

Extension contributed profile is displayed in the profiles list

終端機選項中的 iconPath 支援

標準的 iconPath 類型在 TerminalOptions 和 TerminalExtensionOptions 上受到支援，以設定終端機的圖示，該圖示會顯示在終端機的索引標籤上。

readonly iconPath?: Uri | { light: Uri; dark: Uri } | ThemeIcon;

變更 Pseudoterminal 的標題

新的事件 Pseudoterminal.onDidChangeName 啟用了對基於 Pseudoterminal 的終端機的控制。

const writeEmitter = new EventEmitter<string>();
const nameEmitter = new EventEmitter<string>();
const pty = {
  onDidWrite: writeEmitter.event,
  open: () => writeEmitter.fire('Type to change the title of the terminal'),
  close: () => {
    /* noop*/
  },
  handleInput: (data: string) => nameEmitter.fire(data)
};
const terminal = vscode.window.createTerminal({
  name: `My Terminal`,
  pty
});
terminal.show();

啟用檔案系統提供者宣告檔案為唯讀

檔案系統提供者現在可以透過 FileStat 上的新 permissions 屬性，將個別檔案標記為唯讀，方法是將屬性的值設定為 FilePermission.Readonly。唯讀檔案不可編輯。

注意： 如果所有檔案都應視為唯讀，您可以在呼叫 registerFileSystemProvider 時使用現有的 isReadonly 選項。

在 asExternalUri 中支援工作區 URI

先前存在的 vscode.env.asExternalUri API 現在支援 處理工作區 URI。這讓擴充功能作者可以建立系統範圍的 URI，以直接開啟給定的工作區。

例如：

const uri = await vscode.env.asExternalUri('file:///Users/john/work/code');

產生的 uri 可以由作業系統開啟，而 VS Code 將開啟該工作區。

工程

Electron 沙箱支援的進度

在此里程碑中，我們持續使 VS Code 視窗準備好啟用 Electron 的 沙箱 和 上下文隔離 功能。

具體來說：

  • 我們從渲染器中使用的更多程式碼中移除了 Node.js 依賴性。
  • 我們繼續研究完全捨棄 webview 的使用，並將我們的自訂檢視和編輯器切換到 iframe。

文件

Build 2021 的 VS Code

如果您錯過了 Microsoft Build 2021 開發人員活動，您仍然可以隨選觀看這些會議。查看 Build 2021 的 Visual Studio Code 部落格文章，我們在其中整理了我們認為 VS Code 使用者會感興趣的會議列表。

What's New in VS Code Build 2021 session on YouTube

瀏覽器偵錯

新的主題 VS Code 中的瀏覽器偵錯 描述了 Edge 和 Chrome 瀏覽器的內建偵錯支援。您可以設定 VS Code 以啟動新的瀏覽器偵錯工作階段（透過偵錯：開啟連結命令）或附加到正在執行的瀏覽器。

PyTorch

有一個關於如何在 VS Code 中使用 PyTorch 機器學習框架的新主題。在 VS Code 中的 PyTorch 支援 文章中，您將了解如何使用 PyTorch 和 TensorFlow 資料類型擴充 Jupyter Notebook。

PyTorch logo

值得注意的修正

  • 71966：經常遇到整個視窗掛起
  • 85332：Windows：刪除檔案時凍結
  • 95077：終端機「單字」連結提供者不支援換行
  • 108804：開啟視窗前不要等待 shell 環境解析
  • 120004：VS Code 整合式終端機中的奇怪字母間距
  • 125035：偵錯主控台篩選文字應在重新載入後保留
  • iOS/iPadOS：針對 iOS/iPadOS 平台進行了多項修復

感謝您

最後但同樣重要的是，衷心感謝以下人士本月對 VS Code 的貢獻：

對我們的問題追蹤的貢獻

對 vscode 的貢獻

對 vscode-css-languageservice 的貢獻

對 vscode-eslint 的貢獻

對 vscode-js-debug 的貢獻

對 vscode-languageserver-node 的貢獻

對 vscode-pull-request-github 的貢獻

對 vscode-vsce 的貢獻

對 language-server-protocol 的貢獻

對 monaco-languages 的貢獻

對 monaco-typescript 的貢獻