🚀 在 VS Code 中取得 ！

2022 年 6 月 (版本 1.69)

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

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

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

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

如果您想在線上閱讀這些發行說明，請前往 更新，網址為 code.visualstudio.com。

觀看發行派對： 聆聽 VS Code 團隊討論一些新功能。您可以在我們的 YouTube 頻道上找到活動錄影。

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

工作台

三向合併編輯器

在此版本中，我們繼續開發三向合併編輯器。此功能可以透過將 git.mergeEditor 設定為 true 來啟用，並將在未來的版本中預設啟用。

合併編輯器可讓您快速解決 Git 合併衝突。啟用後，可以透過按一下原始碼控制檢視中的衝突檔案來開啟合併編輯器。核取方塊可用於接受和合併它們的或您的變更

所有語言功能在合併編輯器中都可用 (包括診斷、中斷點和測試)，因此您可以立即獲得有關合併結果中任何問題的回饋。

結果也可以直接編輯。請注意核取方塊如何如預期般更新

關閉合併編輯器或接受合併時，如果並非所有衝突都已解決，則會顯示警告。

合併編輯器支援文字層級合併 - 只要變更不相交，雙方都可以套用。如果插入順序很重要，則可以交換。在任何時候，衝突也可以手動解決。

我們很樂意聽取您的意見反應！若要與我們分享合併衝突，請使用命令合併編輯器 (開發人員)：從 JSON 複製輸入、基礎和結果的內容，並將內容貼到您的 GitHub 問題中。

命令中心

命令中心已進行潤飾，現在可以試用。透過 window.commandCenter 設定啟用它。

命令中心取代了正常的標題列，可讓您快速搜尋專案中的檔案。按一下主要區段以顯示「快速開啟」下拉式清單，其中包含您最近的檔案和搜尋方塊。

The Command Center and its hover message atop the window

佈景主題：GitHub 佈景主題

命令中心在右側也有一個按鈕，可透過 '?' 顯示「快速存取」選項。左側是返回和前進按鈕，可導覽您的編輯器歷程記錄。

設定編輯器已修改指示器

設定編輯器現在會顯示設定何時具有語言覆寫。在內容方面，語言覆寫永遠優先於非語言特定覆寫，因此如果設定的值似乎不會影響特定檔案類型的設定行為，則可能是該設定具有語言覆寫。

指示器文字已變更為更清晰簡潔。下面的簡短影片顯示了新的其他位置已修改指示器。將滑鼠停留在指示器上方會顯示一個浮動視窗，其中顯示語言覆寫 (如果適用)。影片稍後會顯示新的預設覆寫指示器，文字為預設值已變更。

佈景主題：淺粉紅色

請勿打擾模式

新的「請勿打擾模式」在啟用時會隱藏所有非錯誤通知彈出視窗。進度通知將自動顯示在狀態列中。隱藏的通知仍然可以在通知中心檢視。

Do Not Disturb mode shown in the Status bar and Notification center

您可以透過開啟通知中心 (選取狀態列右側的鈴鐺圖示) 並按一下斜線鈴鐺圖示來切換「請勿打擾模式」。「請勿打擾模式」在狀態列中以斜線鈴鐺圖示表示。

在淺色和深色佈景主題之間切換

新的命令可讓您在偏好的淺色和深色佈景主題之間切換，喜好設定：在淺色/深色佈景主題之間切換。在淺色佈景主題中時，命令會切換到深色佈景主題，反之亦然。

在高對比佈景主題中時，命令會保持在高對比，並切換到相反色彩佈景主題的偏好高對比佈景主題。

偏好的佈景主題由下列設定定義

  • workbench.preferredDarkColorTheme
  • workbench.preferredLightColorTheme
  • workbench.preferredHighContrastColorTheme
  • workbench.preferredHighContrastLightColorTheme

迷你地圖內容功能表

VS Code 迷你地圖會在編輯器側邊顯示原始碼檔案的高階輪廓。您可以使用檢視：切換迷你地圖命令來切換迷你地圖的顯示狀態，或使用編輯器 > 迷你地圖：已啟用 (editor.minimap.enabled) 設定來完全停用迷你地圖。在此版本中，現在有一個內容功能表可以輕鬆顯示或隱藏迷你地圖。

Minimap context menu

您也可以使用大小 (editor.minimap.size)、比例 (editor.minimap.scale) 和滑桿 (editor.minimap.showSlider) 設定來調整外觀。如果迷你地圖已隱藏，您仍然可以透過在側邊裝訂邊按一下滑鼠右鍵來顯示內容功能表。

共用功能表

可以從檔案 > 共用子功能表中使用複製 vscode.dev 連結命令，以快速取得開啟 GitHub 存放庫的 vscode.dev 連結。共用子功能表也可以從編輯器內容功能表中使用。

終端機

Shell 整合

自 1 月發行版本以來一直處於預覽狀態的 PowerShell、bash 和 zsh 的 Shell 整合現在已脫離預覽！我們計劃在 1.70 版本中預設啟用它。

若要啟用 Shell 整合功能，請在設定編輯器中勾選終端機 > 整合式 > Shell 整合：已啟用，或在您的 settings.json 中設定值

"terminal.integrated.shellIntegration.enabled": true

Shell 整合可讓 VS Code 的終端機更瞭解 Shell 內部的運作方式，以便啟用更多功能。Shell 整合的目標之一是零組態需求。這是透過在啟用設定時，透過 Shell 引數和/或環境變數自動將 Shell 整合指令碼「注入」到 Shell 工作階段中來實現的。在某些情況下，這無法運作，例如在子 Shell 或某些複雜的 Shell 設定中，但我們也針對更進階的情況提供了手動安裝途徑。

以下是 Shell 整合目前提供的功能摘要

命令裝飾和概觀尺規

Shell 整合能夠取得在終端機內執行的命令結束代碼。使用此資訊，會在行左側新增裝飾，以指出命令是否成功或失敗。這些裝飾也會顯示在捲軸的概觀尺規中，就像在編輯器中一樣。

Blue circles appear next to successful commands, red circles with crosses appear next to failed commands. The color of the circles appears in the scroll bar

裝飾可以支援內容動作，例如重新執行命令

Clicking a successful command decoration shows a context menu containing items: Copy Output, Copy Output as HTML, Rerun Command and How does this work?

可以使用下列設定來設定命令裝飾

  • terminal.integrated.shellIntegration.decorationIcon
  • terminal.integrated.shellIntegration.decorationIconSuccess
  • terminal.integrated.shellIntegration.decorationIconError

命令導覽

Shell 整合偵測到的命令會饋送到命令導覽功能 (Ctrl/Cmd+向上鍵、Ctrl/Cmd+向下鍵)，使其具有更可靠的命令位置。此功能可讓您在命令之間快速導覽，並選取其輸出。

執行最近的命令

終端機：執行最近的命令命令會從各種來源浮現歷程記錄到「快速選取」中，提供與 Shell 反向搜尋 (Ctrl+R) 類似的功能。最近的命令來自目前工作階段的歷程記錄、此 Shell 類型的先前工作階段歷程記錄，以及常見的 Shell 歷程記錄檔案。

The "run recent command" command shows a Quick Pick with commands ran previously that can be filtered similar to the Go to File command

命令的其他一些功能

  • 在「目前工作階段」區段中，「快速選取」的右側有一個剪貼簿圖示，將在編輯器中開啟命令輸出。
  • 可以按住 Alt 將文字寫入終端機，而無需執行它。
  • 先前工作階段區段中儲存的歷程記錄量由 terminal.integrated.shellIntegration.history 設定決定。

目前預設未將任何快速鍵指派給執行最近的命令，但作為範例，可以使用下列快速鍵將其連結到 Ctrl+Space

{
    "key": "ctrl+space",
    "command": "workbench.action.terminal.runRecentCommand",
    "when": "terminalFocus"
},

前往最近的目錄

與「執行最近的命令」功能類似，終端機：前往最近的目錄命令會追蹤已造訪的目錄，並允許快速篩選和導覽 (cd) 到這些目錄

<video src="/assets/updates/1_69/terminal-si-go-to-dir.mp4" autoplay loop controls muted title="「前往最近的目錄」命令會顯示一個「快速選取」，其中包含先前導覽到的目錄，選取一個目錄將執行「cd 路徑」">

可以按住 Alt 將文字寫入終端機，而無需執行它。

目前的工作目錄偵測

Shell 整合會告訴我們目前的工作目錄是什麼。此資訊先前在 Windows 上不可能判斷，而無需大量駭客攻擊，並且在 macOS 和 Linux 上需要輪詢，這對效能不利。

目前的工作目錄用於解析相對連結、顯示最近命令執行的目錄，以及支援分割目前的工作目錄 "terminal.integrated.splitCwd": "inherited" 功能。

不斷成長的 Shell 設定支援

此版本我們改進了與 bash-preexec 的整合，新增了對 powerlevel10k 的基本支援，並偵測到更多 Shell 整合無法運作的情況，並優雅地停用該功能。我們預期隨著時間的推移，這個領域會有大量的改進。

SetMark 序列支援

終端機現在支援序列 'OSC 1337 ; SetMark ST'，最初由 iTerm2 建立，使其有可能在行的左側以及捲軸中新增標記

When the sequence is written to the terminal, a small grey circle will appear to the left of the command, with a matching annotation in the scroll bar

佈景主題：藍寶石佈景主題

以下是一些如何在指令碼中觸發此操作的範例

  • bash：echo -e 'Mark this line\x1b]1337;SetMark\x07'
  • pwsh：Write-Host "Mark this line`e]1337;SetMark`a"

簡單 Powerline 字形的自訂轉譯

四個常見的角括號 Powerline 符號現在以自訂方式轉譯，類似於 方塊繪圖和區塊元素字元，當終端機中啟用 GPU 加速時。這帶來了幾個好處

  • 永遠不會使用子像素反鋸齒，這可能會在任一側造成難看的紅色或藍色輪廓，從而破壞「Powerline」。
  • 這些字元將在無需安裝修補字型的情況下運作。
  • 行高會影響這些字元。

之前

Line height would not be respected, leading to a Powerline symbol with a different height to adjacent cells. Additionally, a blue outline could appear when sub-pixel anti-aliasing was used

之後

Line height is now respected and greyscale anti-aliasing is used for improved rendering

來自 VS Code 的訊息格式一致

先前，終端機中由 VS Code 直接寫入的訊息 (而非處理程序) 使用了幾種不同的格式。現在，這在整個板上都是一致的，具有響亮的格式和更細微的格式

Loud formatting starts the line with an asterisk with the inverted style, followed by a message using a blue background

Subtle formatting starts the line with an asterisk with the inverted style, followed by a message using the default background

協助工具改進

終端機在此迭代中進行了一些協助工具改進

  • 現在預設在終端機：開啟偵測到的連結...命令中提供更多連結，並能夠搜尋終端機緩衝區的其餘部分。
  • 終端機：執行最近的命令命令現在允許在按住 Alt 的情況下輸入結果命令，而無需執行它。
  • 在終端機中尋找功能改進了螢幕閱讀器公告。
  • 向上鍵和向下鍵可以在導覽模式 (Ctrl+向上鍵) 中使用，而無需使用修飾鍵。
  • 向上翻頁鍵和向下翻頁鍵現在可以在導覽模式 (Ctrl+向上鍵) 中使用，以按頁捲動。

處理程序重新連線和復原改進

終端機持續性收到了一些 UX 和可靠性改進

  • 先前，重新載入視窗 n 次會顯示 n 個工作階段還原訊息。現在，工作階段還原訊息應該只在該特定工作階段有輸入時顯示。
  • 先前包含日期的工作階段還原訊息已縮減為僅「歷程記錄已還原」，以減少雜訊。
  • 「環境變數集合」功能 (通知使用者擴充功能想要變更環境 (例如，為了支援自動 Git 驗證)) 現在跨重新載入運作。

工作

裝飾

在幾個迭代之前，我們新增了裝飾到終端機緩衝區和概觀尺規，這要歸功於 Shell 整合功能，以改進終端機的導覽。裝飾現在也標記了工作的興趣點，可以使用命令導覽功能 (Ctrl/Cmd+向上鍵、Ctrl/Cmd+向下鍵) 跳轉到這些點。

對於啟動/停止工作，裝飾會出現在工作啟動旁邊，並根據執行的結束代碼 (如果有的話) 設定樣式。

A task fails and an error decoration is added. A task succeeds and a success decoration is added

對於監看工作，裝飾會出現在每次編譯回報的第一個問題旁邊。

A watch task's first error is marked with a decoration

圖示和色彩支援

現在可以使用 Codicon id 和終端機 ANSI color 屬性為工作設定 icon。例如

{
  "label": "test",
  "type": "shell",
  "command": "echo test",
  "icon": { "id": "light-bulb", "color": "terminal.ansiBlue" }
}

The task custom icon appears in the terminal tabs list

kind 屬性設定為 test 的工作預設使用 beaker 圖示。

原始碼控制

Git 存放庫的「動作按鈕」提交

在 1.61 版本中，為 Git 存放庫新增了發佈和同步變更「動作按鈕」。在此里程碑中，我們新增了一個提交按鈕，該按鈕具有主要動作以及一組次要動作。次要動作可以使用 git.postCommitCommand 設定來控制，並讓您在提交後也執行推送或同步。

隨著提交「動作按鈕」的加入，有一個新的設定 git.showActionButton，您可以使用它來控制「原始碼控制」檢視中顯示的 Git 動作按鈕。您仍然可以使用一般 scm.showActionButton 設定來全域停用任何擴充功能 (實作原始碼控制提供者) 貢獻的任何動作按鈕的顯示狀態。

使用編輯器撰寫提交訊息

在此里程碑中，每當未在提交輸入方塊中提供訊息時，您現在可以使用完整的文字編輯器來撰寫提交訊息。若要使用此新流程，請在未提供提交訊息的情況下按一下提交按鈕。

您現在可以在編輯器中撰寫您的提交訊息。若要接受提交訊息並完成提交作業，請關閉編輯器索引標籤，或選取編輯器工具列中的接受提交訊息按鈕。若要取消提交作業，您可以清除文字編輯器的內容並關閉編輯器索引標籤，或選取編輯器工具列中的捨棄提交訊息按鈕。

您可以停用此新流程，並回復到使用快速輸入控制的先前體驗，方法是切換 git.useEditorAsCommitInput 設定。變更設定後，您必須重新啟動 VS Code 才能使變更生效。

若要對在整合式終端機中執行的 git commit 命令使用相同的流程，請啟用 git.terminalGitEditor 設定。啟用設定後，您必須重新啟動終端機工作階段。

分支保護指示器

上一個里程碑，我們新增了 git.branchProtection 設定，您可以使用它來設定要保護的特定分支。在此里程碑中，為受保護分支的狀態列和分支選擇器新增了視覺指示器 (鎖定圖示)。

狀態列

The branch protection icon is shown in the Status bar

分支選擇器

The branch protection icon is shown in the branch picker

偵錯

改良的「逐步執行目標」UI

某些偵錯工具允許在行上暫停時直接逐步執行特定函式呼叫。在此迭代中，我們改進了此功能的 UI

  • 在原始碼行上的目標區域按一下滑鼠右鍵，然後選取逐步執行目標，如果有的話，將自動逐步執行目標區域。
  • 命令面板中提供了一個新的命令偵錯：逐步執行目標，以及 ⌘F11 (Windows、Linux Ctrl+F11) 鍵盤快速鍵。

在偵錯主控台中導覽

透過「快速存取」功能表存取主控台

現在有一個「快速存取」功能表可以檢視您的偵錯主控台清單。在功能表中，您可以選取主控台名稱以在底部面板中顯示它。在這裡，您可以搜尋和篩選您的主控台名稱。

佈景主題：GitHub 深色柔和

有三種不同的方式可以存取此「快速存取」功能表

  • 在「快速開啟」功能表 (⌘P (Windows、Linux Ctrl+P)) 中輸入 ?，然後選取選項以檢視偵錯主控台。

  • 使用偵錯：選取偵錯主控台命令。

  • 在「快速開啟」功能表中手動輸入 debug consoles (帶有尾隨空格字元)。

透過「檢視」功能表存取主控台

您也可以從現有的「檢視」功能表內存取偵錯主控台清單。在「快速開啟」功能表中輸入 view (帶有尾隨空格)，然後捲動到偵錯主控台面板標題。您將看到可用的偵錯主控台清單。

在主控台之間切換

您現在可以使用 ⇧⌘[ (Windows、Linux Ctrl+PageUp) 導覽至上一個偵錯主控台，並使用 ⇧⌘] (Windows、Linux Ctrl+PageDown) 前往下一個主控台。

已載入指令碼搜尋和篩選

先前，您只能從執行和偵錯功能表中的樹狀檢視中檢視您已載入的指令碼。現在，您可以使用新的偵錯：開啟已載入的指令碼...命令搜尋和導覽至指令碼。它的運作方式與前往檔案...命令完全相同，但您可以導覽至已載入的指令碼。

JavaScript 偵錯

原始碼對應切換

您現在可以透過按一下「呼叫堆疊」檢視標題中的 🧭 指南針圖示，輕鬆開啟和關閉原始碼對應。當原始碼對應關閉時，在原始碼中設定的中斷點仍然可以運作，但會移至已編譯程式碼中的對等位置，並且偵錯工具將逐步執行已編譯程式碼，而不是原始碼。

佈景主題：程式歌曲

當原始碼對應關閉時，偵錯工具列中會顯示一個類似的按鈕，可以重新開啟它們。切換狀態會保留在工作區中。

toString() 變數預覽

如果變數或屬性具有自訂 toString() 方法，則會呼叫它以在變數檢視和浮動視窗中轉譯預覽。對於具有良好字串表示的複雜類型，這是對一般物件預覽的改進。

例如，VS Code 的 Range 具有 toString 方法，可讓您更輕鬆地一目了然地消化

Displaying the toString() method output in the Variables view

「逐步執行目標」支援

JavaScript 偵錯工具現在支援逐步執行目標，讓您可以輕鬆逐步執行程式碼行上的函式呼叫。

Step Into Targets dropdown

可以透過偵錯：逐步執行目標命令 (⌘F11 (Windows、Linux Ctrl+F11)) 或在該行上按一下滑鼠右鍵來存取此功能。

JavaScript 偵錯中未繫結的中斷點警告圖示

如果您正在偵錯 TypeScript/JavaScript 專案，並且在設定原始碼對應或讓中斷點繫結時遇到問題，VS Code 現在將在「中斷點」檢視中顯示提示訊息，其中包含指向 JavaScript 偵錯工具中斷點疑難排解工具的連結。當您將滑鼠停留在編輯器中的灰色中斷點圖示上方時，也會看到提示。

hovering the breakpoint warning icon

當顯示此提示的 API 完成時，其他偵錯工具將能夠顯示提示，並顯示它們自己的適當訊息。

編輯器

使用預覽重構

先前，沒有任何方法可以檢閱重構將套用的變更。為了改進重構體驗，現在有一個使用預覽重構命令，可以從命令面板存取。使用預覽重構...的運作方式與重構...命令完全相同，但會開啟重構預覽面板。使用者可以選取重構預覽，以在編輯器中開啟重構預覽的較大檢視。此迭代主要著重於預覽來自重構的程式碼變更，未來的版本將會加入自訂程式碼動作功能表控制項。

Refactor preview panel showing a refactoring that results in two changes

使用預覽重構...在工作台中開啟窗格，並開啟重構預覽編輯器檢視。

語言

支援 Markdown 中的角括號連結

Markdown 可讓您使用角括號來撰寫包含空格或其他特殊字元的連結目的地

[Some link](<path to file with spaces.md>)

在此迭代中，我們改進了對角括號連結的支援，以便在編輯器中正確醒目提示和可按一下它們。

Emmet 內嵌完成設定

Emmet 有一個新的設定 emmet.useInlineCompletions，允許在檔案中發生內嵌完成。目前，最好僅針對編輯 HTML 和 CSS 檔案啟用此設定。

下面的簡短影片是在 editor.quickSuggestions 設定設定為 off 以用於所有項目的情況下錄製的。

語言指示器中的 JSON 通知

當有太多摺疊範圍、文件符號或色彩裝飾器要顯示時，VS Code 不再使用通知，而是使用 JSON 語言指示器來通知使用者。

JSON notifications from the Status bar JSON language indicator

HTML 最終換行字元格式器設定變更

設定 html.format.endWithNewline 已移除，改為使用 files.insertFinalNewline。

files.insertFinalNewline 適用於所有程式設計語言。如果您想要每個語言有不同的設定，您可以使用語言範圍

{
  "[html]": {
    "files.insertFinalNewline": true
  }
}

筆記本

支援筆記本內擴充功能建議

為了協助改進筆記本的入門體驗 (當未安裝必要的擴充功能時)，我們已更新擴充功能建議流程，並讓您直接從筆記本視窗安裝擴充功能。這大大減少了從未安裝擴充功能到 VS Code 中可執行儲存格所需的步驟數。此迭代為 Python Jupyter 筆記本啟用了此體驗，後續將支援更多筆記本類型和語言。

A Quick Pick depicting two entries. The top entry is selected that has a light bulb to its left and says 'Install suggested extensions Python + Jupyter'

註解

切換編輯器註解

新的命令註解：切換編輯器註解會切換所有編輯器註解功能，包括註解範圍裝訂邊裝飾、行懸停時的 "+"，以及所有編輯器註解小工具。註解將在禪模式中自動停用。

拖曳以進行多行註解

可以拖曳「新增註解」"+" 按鈕以新增多行註解。

企業

Windows 上的 UpdateMode 群組原則

VS Code 現在支援 以 Windows 登錄為基礎的群組原則，允許系統管理員在他們管理的機器上建立和部署原則。

第一個支援的 VS Code 原則是 UpdateMode，它會覆寫 update.mode 設定，並控制 VS Code 是否在新版本發行時自動更新。

請參閱 企業 文件中的 Windows 上的群組原則，以瞭解更多資訊。

VS Code for the Web

佈景主題測試工具支援內建佈景主題

佈景主題測試工具是 vscode.dev 中的一個路由，可用於展示和試用色彩佈景主題，而無需安裝它。這適用於 Marketplace 上的佈景主題擴充功能，方法是指定擴充功能 ID 和佈景主題名稱。例如，若要查看 GitHub 佈景主題擴充功能 (擴充功能 ID github.github-vscode-theme)「GitHub 深色預設」佈景主題，您可以使用 URL 啟動 vscode.dev

https://vscode.dev/editor/theme/github.github-vscode-theme/GitHub%20Dark%20Default

Color theme tester with vscode.dev showing GitHub Theme extension GitHub Dark Default

佈景主題測試工具現在也可以與 VS Code 中的內建佈景主題搭配使用。使用 vscode.theme-defaults 作為擴充功能 ID 預留位置，然後使用您想要查看的佈景主題名稱。

例如，若要測試「高對比淺色」佈景主題，您可以使用下列 URL

https://vscode.dev/editor/theme/vscode.theme-defaults/Default%20High%20Contrast%20Light

擴充功能的局部本地化支援

在上一個迭代中，在 vscode.dev 中，我們引入了核心產品提供的字串本地化。在此迭代中，我們包含更多字串 - 特別是擴充功能在其擴充功能資訊清單中提供的靜態字串。擴充功能提供的字串仍然有其他區段需要本地化 (在其原始碼中宣告的字串)，因此我們將在下一個迭代中繼續這項工作。

設定顯示語言命令

對於某些使用者來說，無法設定其瀏覽器使用的語言。為了解決此問題，Web 版 VS Code 現在具有設定顯示語言命令，可讓您覆寫瀏覽器設定為預設語言的語言。

此外，您可以使用清除顯示語言喜好設定命令移除此覆寫。

VS Code Server (私人預覽)

在 VS Code 中，我們希望使用者能夠順暢地利用使其最具生產力的環境。VS Code 遠端開發擴充功能可讓您直接從 VS Code 在 Windows Subsystem for Linux (WSL)、透過 SSH 的遠端機器和開發容器中工作。這些擴充功能會在遠端環境中安裝伺服器，讓本機 VS Code 可以順利地與遠端原始碼和執行階段互動。

我們現在正在提供獨立 「VS Code Server」 的私人預覽，這是一項以遠端擴充功能使用的相同基礎伺服器為基礎建置的服務，加上一些額外功能，例如互動式 CLI 和促進與 vscode.dev 的安全連線，而無需 SSH 連線。

The VS Code Server's help menu and a remote VS Code connection

我們的最終目標是增強您今天使用的 code CLI，以開啟 VS Code 的桌面和 Web 執行個體，無論您的專案儲存在何處。當我們積極朝這個目標努力時，VS Code Server 是我們渴望作為私人預覽發行以取得您的意見反應的絕佳里程碑。

您可以在其公告 部落格文章 和 影片 中瞭解有關如何開始使用 VS Code Server 的更多資訊，並在其 文件 中檢閱更多詳細資訊。

擴充功能的貢獻

ESLint

ESLint 擴充功能的 2.2.6 版已發行。除了各種 錯誤修正 之外，現在所有支援的 ESLint 語言都可以在筆記本儲存格中支援 Linting。

ESlint validating notebook cells

Jupyter

IPyWidgets

現在除了 Python 以外的 Kernel 也支援 IPyWidgets 了，例如 Common Lisp 和 IHaskell。

許多與資源 (圖片、腳本等) 載入相關的 IPyWidget 問題已獲得解決，從而改善了對小工具的支援，例如 VegaFusion、ipyleaflet、Chemiscope、mobilechelonian 和 ipyturtle。

其他值得注意的 IPyWidget 修復包括在 Jupyter Output widget 內顯示複雜和巢狀 (包括互動式) 輸出。

網頁擴充功能

我們在支援網頁版 Jupyter 擴充功能中的更多核心功能方面取得了進展。

本月，以下功能已移植到網頁擴充功能

  • 匯出互動式視窗
  • 偵錯互動式視窗
  • 互動式視窗中的可摺疊儲存格

如果您想試用此功能，請從您的本機啟動 Jupyter 並使用

jupyter notebook --no-browser --NotebookApp.allow_origin_pat=https://.*\.vscode-cdn\.net

然後從 vscode.dev 內使用命令 Jupyter: Specify Jupyter server for connections 連線到它。

如需更多資訊 (以及發表評論)，請參閱此討論項目。

GitHub Pull Requests 和 Issues

在 GitHub Pull Requests and Issues 擴充功能方面取得了更多進展，該擴充功能可讓您處理、建立和管理提取請求和問題。此版本的重點包括

  • 新的設定 "githubPullRequests.ignoredPullRequestBranches"，可忽略提取請求的分支。
  • 使用設定 "githubPullRequests.pushBranch" 在建立 PR 時，可以跳過 發布分支？ 對話方塊。
  • 自動合併核取方塊現在可在 Overview 編輯器中使用。

查看擴充功能 0.46.0 版本的變更記錄，以查看其他重點。

預覽功能

TypeScript 4.8 支援

此更新包含對即將發布的 TypeScript 4.8 版本的支援。有關 TypeScript 團隊目前正在進行的工作的更多詳細資訊，請參閱 TypeScript 4.8 迭代計畫。

若要開始使用 TypeScript 4.8 每夜建置版本，請安裝 TypeScript Nightly 擴充功能。

Markdown 連結驗證

我們持續精進 Markdown 檔案中的連結驗證。此實驗性功能可以幫助捕捉 Markdown 檔案中指向圖片或標題的損壞連結。

除了修復許多錯誤並提高效能外，我們還重新命名了一些設定，以使其功能更清晰。以下是新的設定名稱

  • markdown.experimental.validate - 啟用/停用所有連結驗證功能。
  • markdown.experimental.validate.fileLinks.enabled- 啟用/停用驗證本地檔案的連結：[link](/path/to/file.md)
  • markdown.experimental.validate.fileLinks.markdownFragmentLinks- 啟用/停用驗證本地檔案連結的片段部分：[link](/path/to/file.md#some-header)
  • markdown.experimental.validate.fragmentLinks.enabled- 啟用/停用驗證目前檔案中標題的連結：[link](#_some-header)
  • markdown.experimental.validate.referenceLinks.enabled- 啟用/停用驗證參考連結：[link][ref]。
  • markdown.experimental.validate.ignoreLinks - 跳過驗證的連結清單。如果您連結到磁碟上不存在但在 Markdown 發布後確實存在的檔案，這會很有用。

試用看看，並告訴我們您對新功能的看法！

設定檔

在過去幾個月中，我們一直致力於在 VS Code 中支援 設定檔，這是社群最受歡迎的請求之一。在這個里程碑中，我們很高興宣布此功能已準備好在 Insiders 版本中透過 workbench.experimental.settingsProfiles.enabled 設定進行預覽。請試用此功能，並透過在我們的 VS Code 儲存庫 中建立問題或在 issue #116740 中評論來告知我們您的意見回饋。

設定檔包含設定、鍵盤快速鍵、擴充功能、狀態、工作和程式碼片段。您可以為不同的開發環境 (例如 Web、機器學習) 或多個程式語言課堂 (例如 Python、Java) 或個人模式 (例如工作或示範) 自訂 VS Code，並將它們儲存為設定檔。您可以根據您正在處理的專案或您正在上的課堂或當您正在簡報時，同時開啟具有不同設定檔的多個工作區 (資料夾)。

以下示範了如何為 Web 開發環境自訂 VS Code 並從中建立設定檔。

這裡展示了如何輕鬆地從開發設定檔變更為示範設定檔。

您可以同時在 Web 開發設定檔中開啟您的 React 專案，並在 Python 課堂設定檔中開啟 Python 課堂專案，如下圖所示。

Multiple opened Profiles

您可以使用設定中的以下色彩自訂金鑰來自訂設定檔狀態列項目的前景和背景顏色。

"workbench.colorCustomizations": {
    "statusBarItem.settingsProfilesBackground": "#ce4918",
    "statusBarItem.settingsProfilesForeground": "#e0dfdb",
}

您可以使用 設定齒輪 選單中 設定檔 子選單中提供的 移除設定檔... 動作來管理和移除設定檔。

Removing Settings Profiles

即使您可以針對每個設定檔自訂 VS Code，但有些設定只能在應用程式層級自訂。例如，所有應用程式範圍的設定 (例如 update.mode、語言套件擴充功能、設定同步啟用和工作區信任狀態) 都在應用程式層級跨所有設定檔自訂。

在 VS Code for the Web 和桌面版之間存取編輯工作階段

在這個里程碑中，我們宣布 VS Code 中 編輯工作階段 的預覽版。編輯工作階段讓您在繼續處理儲存庫時，無論 VS Code 在哪裡可用 (無論是 VS Code for the Web、桌面版 VS Code 還是跨不同機器)，都可以攜帶未提交的變更。

例如，您可以使用編輯工作階段來傳輸和存取工作變更

  • 從 github.dev 中的儲存庫到該儲存庫的本機桌面複製。
  • 從 Windows 裝置上的儲存庫複製到 macOS 裝置上的該儲存庫複製。

編輯工作階段目前在 workbench.experimental.editSessions.enabled 設定後方的預覽版中。在此初始版本中，您可以使用以下命令來儲存和恢復您的工作變更

  • 編輯工作階段：儲存目前編輯工作階段
  • 編輯工作階段：恢復最新編輯工作階段

若要開始使用編輯工作階段，請使用 編輯工作階段：儲存目前編輯工作階段 命令，並在出現提示時使用 GitHub 或 Microsoft 驗證登入。然後在另一部機器或 VS Code 執行個體上的儲存庫中使用 編輯工作階段：恢復最新編輯工作階段 命令，以將所有修改檔案的工作內容還原到您的工作區。您可以隨時使用 編輯工作階段：登出 命令登出編輯工作階段。

當我們繼續迭代編輯工作階段體驗時，請試用看看，並透過在 issue #141293 中評論來與我們分享您的意見回饋。

擴充功能撰寫

可迭代的 vscode.d.ts 集合類型

為了讓您更輕鬆地使用 vscode.d.ts 中的集合類型，在此迭代中，我們讓它們都變成可迭代的。這允許您將 for...of 迴圈和展開與這些類型一起使用

const data: vscode.DataTransfer = ...;
for (const [mime, item] of data) {
    const str = await item.asString();
    ...
}

完整的新可迭代類型集為

  • DiagnosticCollection
  • DataTransfer
  • EnvironmentVariableCollection
  • TestItemCollection

可擴充的 Notebook 渲染器

Notebook 渲染器 允許擴充功能自訂儲存格和輸出在 Notebook 中的呈現方式。在此迭代中，我們擴展了 Notebook 渲染器 API，以允許渲染器擴增另一個渲染器，包括來自 VS Code 的一些內建渲染器。這允許擴充功能將新功能新增到 Notebook 渲染，而無需重新實作完整的渲染器。它還提供了更好的使用者體驗，因為使用者不必在新渲染器之間切換以查看正確呈現的內容。

Notebook Extend Markdown Renderer Sample 示範了擴充功能如何使用表情符號支援來擴展 VS Code 的內建 Markdown 渲染器。讓我們快速看一下關鍵部分！

可擴充 Notebook 渲染器的 API 是故意鬆散定義的。若要開始使用，我們的擴充功能需要貢獻一個新的 Notebook 渲染器。因為我們正在擴展現有的渲染器，所以我們在這裡使用 entrypoint 欄位來指定要擴展的渲染器的 ID (在本例中為 VS Code 的內建 vscode.markdown-it-renderer) 以及要載入的渲染器腳本的路徑

"notebookRenderer": [
    {
        "id": "sample.markdown-it.emoji-extension",
        "displayName": "Markdown it Emoji renderer",
        "entrypoint": {
            "extends": "vscode.markdown-it-renderer",
            "path": "./out/emoji.js"
        }
    }
]

現在，只要 vscode.markdown-it-renderer 啟動，此渲染器就會啟動。

現在若要擴展 vscode.markdown-it-renderer，我們的渲染器可以在基礎渲染器上呼叫方法。此方法特定於基礎渲染器。在本例中，我們首先使用 getRenderer 取得基礎渲染器，然後在其上呼叫 extendMarkdownIt 以擴增它用於渲染的 Markdown-It 執行個體

import type * as MarkdownIt from 'markdown-it';
import type { RendererContext } from 'vscode-notebook-renderer';

interface MarkdownItRenderer {
    extendMarkdownIt(fn: (md: MarkdownIt) => void): void;
}

export async function activate(ctx: RendererContext<void>) {
    // Acquire the base renderer
    const markdownItRenderer = await ctx.getRenderer('vscode.markdown-it-renderer') as MarkdownItRenderer | undefined;
    if (!markdownItRenderer) {
        throw new Error(`Could not load 'vscode.markdown-it-renderer'`);
    }

    // Load our Markdown-It extension
    const emoji = require('markdown-it-emoji');

    // Call the base renderer's extension method (extendMarkdownIt) to augment
    // the Markdown-It with emoji support.
    markdownItRenderer.extendMarkdownIt((md: MarkdownIt) => {
        return md.use(emoji, {});
    });
}

這裡需要注意的關鍵部分是 extendMarkdownIt 只是基礎渲染器傳回的方法。其他可擴充的渲染器可以輕鬆地傳回它們自己的擴充點。

查看 Notebook Extend Markdown Renderer Sample 以取得擴展 VS Code 內建 Markdown-It 渲染器的完整範例。

從 DataTransfers 讀取外部檔案

擴充功能現在可以使用 DataTransfer 讀取外部檔案。這可以用於樹狀結構拖放 API，以及放入編輯器 API 提案中

export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscode.TreeDragAndDropController<Node> {

    public async handleDrop(target: Node | undefined, sources: vscode.DataTransfer, token: vscode.CancellationToken): Promise<void> {
        // Get a list of all files
        const files: vscode.DataTransferFile[] = [];
        sources.forEach((item) => {
            const file = item.asFile();
            if (file) {
                files.push(file);
            }
        });

        const decoder = new TextDecoder();

        // Print out the names and first 100 characters of the file
        for (const file of files) {
            const data = await file.data();
            const text = decoder.decode(data);
            const fileContentsPreview = text.slice(0, 100);
            console.log(file.name + ' — ' + fileContentsPreview + '\n');
        }

        ...
    }
}

Webview 中的高對比度淺色

Webview 現在可以使用 vscode-high-contrast-light CSS 類別來針對 高對比度淺色佈景主題

.vscode-high-contrast-light .error {
    color: red;
}

vscode-high-contrast-light 類別會自動新增至 Webview 的 body 元素。

測試項目標籤中的圖示

標準 $(icon) 格式的 Codicons 現在可以用於 TestItem.label 中，以在測試總管檢視以及測試結果中顯示圖示。

原始碼控制輸入方塊啟用

擴充功能作者現在可以使用 enabled 屬性來切換原始碼控制檢視中輸入方塊的啟用狀態。

JSON 單字模式變更

每種語言都帶有一個單字模式，該模式定義在該語言中哪些字元屬於單字。JSON 與所有其他語言不同之處在於，它包含字串常值和完整字串常值內容的引號。現在它遵循其他語言，僅包含字母、數字和連字號。

此變更將修復擴展選取範圍 (命令：擴展選取範圍) 時的問題，允許在字串內進行單字完成，並修復一些程式碼建議異常。

依賴單字模式的擴充功能 (例如用於程式碼完成中的預設取代範圍) 需要更新其實作，以明確聲明所有完成的取代範圍。

偵錯配接器協定

  • 為了為 Step Into Target 功能提供更好的使用者體驗，已將其他資訊新增至 DAP 的 StepInTarget 類型。透過 line、column、endLine 和 endColumn 這四個屬性，step-into 目標現在可以連結到對應的原始碼範圍。
  • 將程式引數傳遞給 debuggee 受到兩個衝突目標的阻礙：一些使用者希望能夠將 所有字元 傳遞給 debuggee，而其他使用者希望使用 某些字元 與底層 shell 通訊。為了更好地支援這兩種使用案例，我們正在研究 DAP 的 runInTerminal 請求，以控制程式引數中特殊字元的逸出。提案已經可用。如果您是對此 DAP 新增功能感興趣的偵錯擴充功能作者，我們將感謝您的意見回饋。
  • 此外，我們還解決了 Debug Adapter Protocol 的幾個文件問題。這些問題包括圍繞術語「用戶端」和「falsey」的澄清、更精確的總和檢查碼和日期字串規範，以及 Source.origin 的改進措辭。

建議的 API

每個里程碑都帶有新的提議 API，擴充功能作者可以試用它們。與往常一樣，我們希望收到您的意見回饋。以下是試用提議 API 的步驟

  1. 找到您想要試用的提案，並將其名稱新增至 package.json#enabledApiProposals。
  2. 使用最新的 vscode-dts 並執行 vscode-dts dev。它會將對應的 d.ts 檔案下載到您的工作區。
  3. 您現在可以針對提案進行程式設計。

您無法發布使用提議 API 的擴充功能。下一個版本中可能會出現重大變更，我們永遠不想破壞現有的擴充功能。

貼上編輯提供者

我們已更新 documentPaste API 提案，使其更易於正確實作，尤其是在使用多個游標時。

提醒您，此 API 讓擴充功能可以掛鉤到文字編輯器內部的複製和貼上。擴充功能可以使用它來修改貼上時插入的文字。文件貼上擴充功能範例 顯示了運作中的更新 API

/**
 * Provider that maintains a count of the number of times it has copied text.
 */
class CopyCountPasteEditProvider implements vscode.DocumentPasteEditProvider {
  private readonly countMimeTypes = 'application/vnd.code.copydemo-copy-count';

  private count = 0;

  prepareDocumentPaste?(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): void | Thenable<void> {
    dataTransfer.set(this.countMimeTypes, new vscode.DataTransferItem(this.count++));
    dataTransfer.set('text/plain', new vscode.DataTransferItem(this.count++));
  }

  async provideDocumentPasteEdits(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): Promise<vscode.DocumentPasteEdit | undefined> {
    const countDataTransferItem = dataTransfer.get(this.countMimeTypes);
    if (!countDataTransferItem) {
      return undefined;
    }

    const textDataTransferItem = dataTransfer.get('text') ?? dataTransfer.get('text/plain');
    if (!textDataTransferItem) {
      return undefined;
    }

    const count = await countDataTransferItem.asString();
    const text = await textDataTransferItem.asString();

    // Build a snippet to insert
    const snippet = new vscode.SnippetString();
    snippet.appendText(`(copy #${count}) ${text}`);

    return { insertText: snippet };
  }
}

export function activate(context: vscode.ExtensionContext) {
  // Enable our provider in plaintext files
  const selector: vscode.DocumentSelector = { language: 'plaintext' };

  // Register our provider
  context.subscriptions.push(
    vscode.languages.registerDocumentPasteEditProvider(
      selector,
      new CopyCountPasteEditProvider(),
      {
        pasteMimeTypes: ['text/plain']
      }
    )
  );
}

WebUSB、WebSerial 和 WebHID 在網頁上的存取權

現在有實驗性支援可以從 網頁擴充功能 使用 WebUSB、Web Serial 和 WebHID。

若要存取這些 API，您的擴充功能首先需要透過執行以下命令之一來請求存取所需的裝置

  • workbench.experimental.requestUsbDevice
  • workbench.experimental.requestSerialPort
  • workbench.experimental.requestHidDevice

這些命令會提示使用者選取裝置。每個命令都採用 裝置篩選器清單 作為其引數。例如

import * as vscode from 'vscode';

await vscode.commands.executeCommand('workbench.experimental.requestUsbDevice', {
  filters: [
    { vendorId: 0x404 } // Your custom filter or empty if you want users to select any device
  ]
});

命令完成後，您的擴充功能可以使用一般的網頁 API 來存取使用者已授與存取權的任何裝置

const devices = await navigator.usb.getDevices();
// Do something with devices

所有一般的網頁裝置 API 都應運作，但需要向使用者顯示 UI 元素 (例如 requestDevice) 的 API 除外。

目前，此功能僅適用於網頁，並且支援僅限於 Chrome 和 Edge 瀏覽器。另請記住，此功能仍處於實驗階段，因此我們可能會迭代其設計。試用看看並分享您的意見回饋！

工程

Electron 18 更新

在這個里程碑中，我們完成了將 Electron 18 捆綁到 VS Code 桌面版的探索，我們要感謝所有參與 Insiders 自行託管的人員。此更新隨附 Chromium 100.0.4896.160 和 Node.js 16.13.2。

文件

TypeScript 編輯和重構

有兩個新主題重點介紹 VS Code 中的 TypeScript 編輯 和 重構。您將在那裡了解特定功能，例如 內嵌提示、CodeLens 和特定於 TypeScript 的 格式化 選項，以及可用的程式碼重構。

值得注意的修正

  • 109565 使用大寫鎖定切換輸入法時，終端機始終顯示大寫字母
  • 146491 活動和非活動選單之間的顏色差異遺失
  • 149538 無法在中國登入 Microsoft 或 GitHub 帳戶
  • 149890 無法拖曳項目並將其放到空的樹狀檢視中
  • 150934 RPM 不應將捆綁的程式庫列為「provides」
  • 151158 儲存 Notebook 時，在未命名的 Notebook 中保留選取的 Kernel
  • 151664 提高使用螢幕閱讀器逐步執行程式碼時公告的效率
  • 151739 workbench.action.submitComment 在首次回覆評論串時無法運作 & 編輯評論時令人困惑
  • 152067 僅在展開評論時顯示評論串範圍
  • 152141 在程序結束時捨棄工作狀態
  • 152642 新增了一個按鈕，只需按一下即可移除監看式運算式

感謝您

最後但同樣重要的是，衷心感謝 VS Code 的貢獻者。

網頁擴充功能

擴充功能作者啟用以 網頁擴充功能 形式執行程式碼的擴充功能 (以下清單介於 2022 年 6 月 7 日至 7 月 4 日之間)

問題追蹤

對我們的問題追蹤的貢獻

提取請求

對 vscode 的貢獻

對 vscode-generator-code 的貢獻

對 vscode-js-debug 的貢獻

對 vscode-pull-request-github 的貢獻

對 debug-adapter-protocol 的貢獻

對 devcontainers/cli 的貢獻