🚀 在 VS Code 中

2021 年 5 月 (版本 1.57)

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

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

下載:Windows:x64 Arm64 | Mac:通用 Intel Silicon | Linux:deb rpm tarball Arm snap


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

如果您想要線上閱讀這些發行說明,請前往 code.visualstudio.com 上的更新

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

搶先體驗版: 想要盡快試用新功能嗎?您可以下載每晚的搶先體驗版組建,並試用最新的更新。

工作台

工作區信任

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 屬性指定適用的確切擴充功能版本,如果您想要為所有版本設定狀態,則可以移除 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。其他一些可用的選項包括 readmegettingStartedInEmptyWorkbenchnewUntitledFilenone
  • workbench.welcomePage.walkthroughs.openOnInstall - 是否在安裝時自動開啟擴充功能貢獻的逐步解說。

在我們完全逐步淘汰現有的歡迎頁面之前,新頁面將稱為 入門

遠端存放庫

遠端存放庫擴充功能在 1.56 中以內建預覽功能推出,現在已公開可用,但不再內建於 VS Code 中,因此您需要從 VS Code Marketplace 安裝它。

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

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

Remote Repositories Remote Explorer view

主題:Amethyst Dark Theme

若要深入了解遠端存放庫,您可以查看遠端存放庫部落格文章YouTube 影片

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

在此版本中,已改善將編輯器拖曳到其他視窗的功能。您現在可以將差異編輯器、自訂編輯器和整個編輯器群組拖曳到另一個視窗,以在該處開啟編輯器。

Improved editor drag and drop across windows

主題:GitHub Light Theme

注意: 如果您經常使用此功能,請務必啟用自動儲存 (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

輸出工具列

清除儲存格輸出」動作和選取不同輸出轉譯器或 mimetype 的按鈕現在已合併到儲存格輸出旁邊的單一 ... 省略符號功能表中。可以透過將 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:「清除儲存格輸出」動作和選取不同輸出轉譯器或 mimetype 的按鈕已合併到儲存格輸出旁邊的單一 ... 省略符號功能表中。可以使用此設定停用新功能表。
  • notebook.consolidatedRunButton:有兩個新的動作:「執行上方儲存格」和「執行儲存格和下方」。它們預設會顯示在儲存格工具列中,但啟用此設定會將它們移至執行按鈕旁邊的新內容功能表。
  • notebook.dragAndDropEnabled:停用儲存格的拖放功能。您仍然可以使用命令 (預設為 Alt+Up/Alt+Down) 重新排列儲存格。
  • 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 Icons

更新 macOS 的 Touch Bar 圖示

我們已更新我們的 macOS Touch Bar 圖示,使其與我們更新的圖示風格對齊。

macOS Touch Bar icons 預設檢視

macOS Touch Bar icons while debugging with more controls 偵錯時

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,但關閉時,建議將不會顯示標示為已淘汰的項目。

整合式終端機

終端機分頁

終端機分頁在 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 設定為 false 來返回下拉式選單,計畫是在未來繼續支援此選項。

終端機設定檔改善

終端機設定檔系統在此版本中有許多改善,以下是一些重點

  • 如果在啟動 VS Code 時還原終端機,則會遵循 defaultProfile,並將其用於工作和偵錯。
  • Intellisense 現在適用於 settings.json 中的 icondefaultProfile
  • overrideName 現在適用於預設設定檔。
  • 現在可以在工作區設定中設定 defaultProfile。現在也由新的工作區信任功能控制。
  • 如果使用 defaultProfileshellshellArgs 設定,現在會要求您將已淘汰的設定移轉至設定檔系統。
  • 現在可以在設定檔上設定 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.inheritEnvv1.36 以來一直可用,但實作存在一些瑕疵,可能會因 Linux 上的權限問題而失敗,並且可能無法在 macOS 上如預期般運作。

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

Windows 上的原生換行支援

終端機中的換行會驅動工作問題比對器和連結偵測。過去,Windows 終端機使用啟發式方法將行標記為換行,因為模擬 Unix pty 的模擬技術不支援換行。這在 Windows 的最新版本中已變更,並且在更新至 Windows 10 21376+ (目前僅限搶先體驗版) 時,此啟發式方法將會停用,且換行應如 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 DevTools 中的元素。

Demonstration of clicking the "Inspect" icon and clicking through elements in Edge 主題:Codesong

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

支援 sourcemap 中已重新命名的識別項

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

A screenshot paused at a breakpoint. Minified code is being run, but the variables, watch, and debug console views show that variables can be accessed by the original names. 主題:Codesong

「變數」檢視、「監看式」檢視和「偵錯主控台 REPL」中支援已重新命名的變數。您可以透過在工具產生的 sourcemap 檔案中尋找非空白的「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 的詳細資訊。

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

Navigating code using JSDoc @link tags

JSDoc @link 標籤的寫法如下:{@link symbolName}。您也可以選擇性地指定文字以取代符號名稱呈現:{@link class.property Alt text}

@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

記錄可能會大幅影響效能,因此最好保持停用狀態,除非您正積極嘗試診斷問題。

擴充功能的貢獻

遠端開發

持續開發 遠端開發擴充功能,可讓您使用容器、遠端電腦或 Windows Linux 子系統 (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.parsestringify,並針對空白檔案進行特殊處理。控制器會傳回儲存格文字的大寫變體 - 一次是純文字,一次是 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 檔案的 notebook 類型。此外,每當開啟這類 notebook 時,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.inlineValuestrue,則在除錯期間會顯示內嵌值。

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 / tsconfigtypeAcquisition 區段

"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 類型在 TerminalOptionsTerminalExtensionOptions 上受到支援,可用於設定終端機的圖示,該圖示會顯示在終端機的索引標籤上

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 開發人員活動,您仍然可以隨選觀看會議。請查看 Visual Studio Code at Build 2021 部落格文章,我們在其中整理了一份我們認為 VS Code 使用者會感興趣的會議清單。

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

瀏覽器除錯

新主題 VS Code 中的瀏覽器除錯 說明了 Edge 和 Chrome 瀏覽器的內建除錯支援。您可以設定 VS Code 以啟動新的瀏覽器除錯工作階段 (透過 Debug: Open Link 命令) 或附加到正在執行的瀏覽器。

PyTorch

有一個新主題介紹如何在 VS Code 中使用 PyTorch 機器學習架構。在 VS Code 中的 PyTorch 支援 文章中,您將了解如何使用 PyTorch 和 TensorFlow 資料類型擴充 Jupyter Notebooks。

PyTorch logo

重要修正

  • 71966: Often getting full window hangs
  • 85332: Windows: freeze on file delete
  • 95077: Terminal "word" link provider does not support wrapping
  • 108804: Do not wait for shell environment resolution before opening window
  • 120004: Weird letter spacing in Integrated Terminal for VS Code
  • 125035: Debug Console filter text should be preserved across reloads
  • 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 的貢獻