🚀 在 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+Up、Ctrl/Cmd+Down) 中，以提供更可靠的命令位置。此功能允許在命令之間快速瀏覽並選取其輸出。

執行最近的命令

終端機：執行最近的命令命令會從各種來源在快速選取中浮現歷程記錄，提供與 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 序列支援

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

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 字形的自訂轉譯

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

  • 永遠不會使用子像素反鋸齒，這可能會在任一側造成難看的紅色或藍色輪廓，從而破壞「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+Up) 中，可以使用向上和向下鍵，而無需使用修飾鍵。
  • 現在可以在導覽模式 (Ctrl+Up) 中使用向上和向下翻頁鍵來按頁捲動。

程序重新連線和復原改進

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

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

工作

裝飾

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

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

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'

註解

切換編輯器註解

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

拖曳以進行多行註解

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

企業

Windows 上的 UpdateMode 群組原則

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

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

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

適用於網頁的 VS Code

佈景主題測試器支援內建佈景主題

佈景主題測試器是 vscode.dev 中的一個路由，可用於展示和試用色彩佈景主題，而無需安裝。這已適用於 Marketplace 上的佈景主題擴充功能，方法是指定擴充功能 ID 和佈景主題名稱。例如，若要查看 GitHub 佈景主題擴充功能 (擴充功能 ID github.github-vscode-theme) 的「GitHub Dark Default」佈景主題，您可以使用以下 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 中的內建佈景主題一起使用。針對擴充功能 ID 預留位置使用 vscode.theme-defaults，然後使用您要查看的佈景主題名稱。

例如，若要測試「High Contrast Light」佈景主題，您可以使用以下 URL

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

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

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

設定顯示語言命令

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

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

VS Code 伺服器 (私人預覽)

在 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 語言都可以在 Notebook 儲存格中支援 Linting。

ESlint validating notebook cells

Jupyter

IPyWidgets

IPyWidgets 現在支援 Python 以外的核心，例如 Common Lisp 和 IHaskell。

已解決許多與資源載入 (影像、指令碼等) 相關的 IPyWidget 問題，從而改善對小工具的支援，例如 VegaFusion、ipyleaflet、Chemiscope、mobilechelonian 和 ipyturtle。

其他值得注意的 IPyWidget 修正包括在 Jupyter Output 小工具中顯示複雜和巢狀 (包括互動式) 輸出。

Web 擴充功能

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

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

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

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

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

然後從 vscode.dev 內使用 Jupyter: 指定 Jupyter 伺服器以進行連線 命令連線到它。

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

GitHub Pull Requests 和 Issues

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

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

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

預覽功能

TypeScript 4.8 支援

此更新包含對即將發佈的 TypeScript 4.8 版本的支援。請參閱 TypeScript 4.8 迭代計畫，以瞭解更多關於 TypeScript 團隊目前正在處理的詳細資訊。

若要開始使用 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、語言套件擴充功能、設定同步啟用和工作區信任狀態) 都在應用程式層級跨所有設定檔自訂。

跨 Web 版和桌面版 VS Code 存取編輯工作階段

在此里程碑中，我們宣佈 VS Code 中 編輯工作階段 的預覽版。當您在任何可使用 VS Code 的地方 (無論是 Web 版 VS Code、桌面版 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) 格式的 Codicon 現在可以用於 TestItem.label 中，以在測試總管檢視以及測試結果中顯示圖示。

原始檔控制輸入方塊啟用

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

JSON 單字模式變更

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

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

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

偵錯配接器協定

  • 為了為 逐步執行目標 功能提供更好的使用者體驗，已將其他資訊新增至 DAP 的 StepInTarget 類型。透過 line、column、endLine 和 endColumn 這四個屬性，逐步執行目標現在可以連結到對應的原始碼範圍。
  • 將程式引數傳遞至偵錯程式受到兩個衝突目標的阻礙：某些使用者希望能夠將所有字元傳遞至偵錯程式，而其他使用者則希望使用某些字元來與基礎 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 在 Web 上的存取

現在有實驗性支援，可從 Web 擴充功能使用 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
  ]
});

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

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

所有一般的 Web 裝置 API 都應該可以運作，除了那些需要向使用者顯示 UI 元素 (例如 requestDevice) 的 API 之外。

目前，此功能僅適用於 Web，並且支援僅限於 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 使用 Caps Lock 切換輸入法時，終端機始終顯示大寫字母
  • 146491 使用中和非使用中選單之間的色彩差異遺失
  • 149538 無法在中國登入 Microsoft 或 GitHub 帳戶
  • 149890 無法拖曳項目並將其放到空白的樹狀檢視中
  • 150934 RPM 不應將捆綁的程式庫列為「provides」
  • 151158 儲存 Notebook 時，在未命名的 Notebook 中保留選取的核心
  • 151664 提高螢幕閱讀器逐步執行程式碼時公告的效率
  • 151739 workbench.action.submitComment 在首次回覆註解執行緒時無法運作 & 編輯註解時令人困惑
  • 152067 僅在展開註解時顯示註解執行緒範圍
  • 152141 在處理程序結束時捨棄工作狀態
  • 152642 新增按鈕以單擊移除監看式運算式

感謝您

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

Web 擴充功能

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

問題追蹤

對我們的問題追蹤的貢獻

提取要求

對 vscode 的貢獻

對 vscode-generator-code 的貢獻

對 vscode-js-debug 的貢獻

對 vscode-pull-request-github 的貢獻

對 debug-adapter-protocol 的貢獻

對 devcontainers/cli 的貢獻