參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

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 頻道上找到活動錄影

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

工作臺

三向合併編輯器

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

合併編輯器允許您快速解決 Git 合併衝突。啟用後,可以透過單擊“原始碼管理”檢視中的衝突檔案來開啟合併編輯器。複選框可用於在“對方”或“您的”中接受和合並更改。

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

結果也可以直接編輯。請注意複選框如何按預期更新。

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

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

我們很樂意聽取您的反饋!要與我們分享合併衝突,請使用命令“合併編輯器(開發):從 JSON 複製輸入、基準和結果內容”,然後將內容貼上到您的 GitHub 問題中。

命令中心

命令中心已進行完善,現在可以試用。透過 window.commandCenter 設定啟用它。

命令中心取代了正常的標題欄,可讓您快速搜尋專案中的檔案。單擊主區域以顯示帶有您最近檔案和搜尋框的快速開啟下拉選單。

The Command Center and its hover message atop the window

主題:GitHub 主題

命令中心右側還有一個按鈕,可透過“?”顯示快速訪問選項。左側是“返回”和“前進”按鈕,用於瀏覽您的編輯器歷史記錄。

設定編輯器修改指示器

設定編輯器現在顯示設定何時具有語言覆蓋。就上下文而言,語言覆蓋始終優先於非語言特定覆蓋,因此,如果某個設定的值似乎不影響該設定對某種檔案型別的行為,則可能是該設定具有語言覆蓋。

指示器文字已更改,使其更清晰簡潔。下面的短影片演示了新的“在其他位置修改”指示器。將滑鼠懸停在指示器上會顯示一個懸停提示,其中顯示適用的語言覆蓋。影片後面顯示了帶有文字“預設值已更改”的新預設覆蓋指示器。

主題:Light Pink

免打擾模式

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

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

主題:Sapphire Theme

以下是一些如何在指令碼中觸發此功能的示例:

  • 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) 使用向上翻頁和向下翻頁來按頁滾動。

程序重新連線和恢復改進

終端永續性獲得了一些使用者體驗和可靠性改進:

  • 以前,重新載入視窗 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 Dark Dimmed

有三種不同的方法可以訪問此快速訪問選單:

  • 在“快速開啟”選單 (⌘P (Windows, Linux Ctrl+P)) 中鍵入 ?,然後選擇檢視“除錯控制檯”的選項。

  • 使用“除錯:選擇除錯控制檯”命令。

  • 在“快速開啟”選單中手動鍵入 debug consoles (帶尾隨空格字元)。

透過“檢視”選單訪問控制檯

您還可以從現有“檢視”選單中訪問除錯控制檯列表。在“快速開啟”選單中鍵入 view (帶尾隨空格),然後向下滾動到“除錯控制檯”面板標題。您將看到可用除錯控制檯的列表。

在控制檯之間切換

您現在可以使用 ⇧⌘[ (Windows, Linux Ctrl+PageUp) 導航到上一個除錯控制檯,並使用 ⇧⌘] (Windows, Linux Ctrl+PageDown) 轉到下一個控制檯。

已載入指令碼的搜尋和過濾

以前,您只能從“執行和除錯”選單中的樹檢視中檢視已載入的指令碼。現在,您可以使用新的“除錯:開啟已載入指令碼...”命令搜尋並導航到指令碼。它的工作方式與“轉到檔案...”命令類似,但您可以導航到已載入的指令碼。

JavaScript 除錯

Sourcemap 切換

現在,您可以透過單擊“呼叫堆疊”檢視標題中的 🧭 指南針圖示,輕鬆切換 Sourcemap 的開/關。當 Sourcemap 關閉時,在原始碼中設定的斷點仍然有效,但會移動到編譯程式碼中的等效位置,偵錯程式將逐步執行編譯程式碼而不是原始碼。

主題:Codesong

當 Sourcemap 關閉時,除錯工具欄中會顯示一個類似的按鈕,可以將其重新開啟。切換狀態在工作區中持久化。

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 專案,並且在配置 sourcemap 或繫結斷點時遇到問題,VS Code 現在將在“斷點”檢視中顯示一條提示訊息,其中包含指向 JavaScript 偵錯程式斷點故障排除工具的連結。當您將滑鼠懸停在編輯器中的灰色斷點圖示上時,也會看到此提示。

hovering the breakpoint warning icon

當顯示此提示的 API 最終確定後,其他偵錯程式將能夠使用其自己的適當訊息顯示提示。

編輯器

重構帶預覽

以前,無法檢視重構將應用的更改。為了改善重構體驗,現在有一個“重構帶預覽”命令,可以從命令面板訪問。“重構帶預覽...”的工作方式與“重構...”命令類似,但會開啟一個重構預覽面板。使用者可以選擇重構預覽以在編輯器中開啟重構預覽的更大檢視。本次迭代主要關注重構的程式碼更改預覽,未來的功能和自定義“程式碼操作”選單控制元件將隨之而來。

Refactor preview panel showing a refactoring that results in two changes

重構帶預覽...”在工作臺中開啟一個窗格,並開啟重構預覽編輯器檢視。

語言

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
  }
}

Notebook

支援筆記本內擴充套件建議

為了幫助改善筆記本的入門體驗,當所需擴充套件未安裝時,我們更新了擴充套件建議流程,並允許您直接從筆記本視窗安裝擴充套件。這大大減少了從未安裝擴充套件到 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'

評論

切換編輯器註釋

新的命令“註釋:切換編輯器註釋”可切換所有編輯器註釋功能,包括註釋範圍邊欄裝飾、行懸停時的“+”以及所有編輯器註釋小部件。在 Zen 模式下,註釋將自動停用。

拖動以進行多行註釋

“添加註釋”的“+”按鈕可以拖動以新增多行註釋。

企業

Windows 上的 UpdateMode 組策略

VS Code 現在支援 基於 Windows 登錄檔的組策略,這允許系統管理員在他們管理的機器上建立和部署策略。

VS Code 支援的第一個策略是 UpdateMode,它會覆蓋 update.mode 設定,並控制 VS Code 在新版本釋出時是否自動更新。

有關更多資訊,請參閱 企業 文件中關於 Windows 組策略的部分。

Web 版 VS Code

主題測試器支援內建主題

主題測試器是 vscode.dev 中的一個路由,可用於展示和試用顏色主題而無需安裝。這已透過指定擴充套件 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 中的內建主題一起使用。將 vscode.theme-defaults 用作擴充套件 ID 佔位符,然後是您要檢視的主題名稱。

例如,要測試“高對比度淺色”主題,您可以使用以下 URL:

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

擴充套件的部分本地化支援

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

配置顯示語言命令

對於某些使用者來說,配置瀏覽器使用的語言是不可能的。為了解決這個問題,VS Code 網頁版現在提供了“配置顯示語言”命令,允許您覆蓋瀏覽器設定的預設語言。

此外,您可以使用“清除顯示語言首選項”命令來移除此覆蓋。

VS Code Server(私人預覽)

在 VS Code 中,我們希望使用者能夠無縫地利用最能提高他們生產力的環境。VS Code 遠端開發擴充套件允許您直接從 VS Code 中在適用於 Linux 的 Windows 子系統 (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 的桌面和網路例項。雖然我們正在積極地朝著這個目標努力,但 VS Code Server 是一個重要的里程碑,我們渴望將其作為私人預覽版釋出,以獲取您的反饋。

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

對擴充套件的貢獻

ESLint

ESLint 擴充套件的 2.2.6 版本已釋出。除了各種錯誤修復外,現在還支援所有受支援的 ESLint 語言的筆記本單元格中的 linting。

ESlint validating notebook cells

Jupyter

IPyWidgets

現在支援除 Python 之外的核心(例如 Common LispIHaskell)的 IPyWidgets

許多與資源(影像、指令碼等)載入相關的 IPyWidget 問題已得到解決,從而改進了對 VegaFusionipyleafletChemiscopemobilechelonianipyturtle 等小部件的支援。

其他值得注意的 IPyWidget 修復包括在 Jupyter 輸出小部件中顯示覆雜和巢狀(包括互動式)輸出。

Web 擴充套件

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

本月,以下功能已移植到 Web 擴充套件:

  • 匯出互動式視窗
  • 除錯互動式視窗
  • 互動式視窗中的可摺疊單元格

如果您想體驗此功能,請在本地機器上啟動 Jupyter,命令如下:

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

然後從 vscode.dev 內部使用命令Jupyter: 指定用於連線的 Jupyter 伺服器連線到它。

有關更多資訊(和評論),請參閱此討論項

GitHub 拉取請求和議題

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

  • 新的設定 "githubPullRequests.ignoredPullRequestBranches" 用於忽略拉取請求的分支。
  • 使用設定 "githubPullRequests.pushBranch" 建立 PR 時,可以跳過“釋出分支?”對話方塊。
  • 現在,“概述”編輯器中提供了自動合併複選框。

檢視擴充套件 0.46.0 版本的更新日誌以瞭解其他亮點。

預覽功能

TypeScript 4.8 支援

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

要開始使用 TypeScript 4.8 每晚構建,請安裝 TypeScript Nightly 擴充套件。

我們繼續完善 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 儲存庫中建立問題或在 問題 #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 網頁版和桌面版之間訪問編輯會話

在這個里程碑中,我們宣佈了 VS Code 中編輯會話的預覽版。編輯會話使您可以在 VS Code 可用的任何地方(無論是 VS Code 網頁版、桌面版 VS Code 還是不同機器上)繼續處理儲存庫時,帶上您未提交的更改。

例如,您可以使用編輯會話來傳輸和訪問工作更改:

  • github.dev 中的儲存庫到該儲存庫的本地桌面克隆。
  • 從 Windows 裝置上的儲存庫克隆到 macOS 裝置上的該儲存庫克隆。

編輯會話目前處於預覽階段,受 workbench.experimental.editSessions.enabled 設定控制。在此初始版本中,您可以使用以下命令儲存和恢復您的工作更改:

  • 編輯會話:儲存當前編輯會話
  • 編輯會話:恢復最新編輯會話

要開始使用編輯會話,請使用“編輯會話:儲存當前編輯會話”命令,並在出現提示時使用 GitHub 或 Microsoft 身份驗證登入。然後,在另一臺機器或 VS Code 例項上的儲存庫中使用“編輯會話:恢復最新編輯會話”命令,將所有修改檔案的內容恢復到您的工作區。您可以隨時使用“編輯會話:登出”命令退出編輯會話。

隨著我們繼續迭代編輯會話體驗,請嘗試一下並透過在 問題 #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

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

筆記本渲染器允許擴充套件自定義單元格和輸出在筆記本中的呈現方式。本次迭代,我們擴充套件了筆記本渲染器 API,允許渲染器增強另一個渲染器,包括 VS Code 中的一些內建渲染器。這允許擴充套件為筆記本渲染新增新功能,而無需重新實現完整的渲染器。它還提供了更好的使用者體驗,因為使用者無需在新的渲染器之間切換即可看到正確呈現的內容。

筆記本擴充套件 Markdown 渲染器示例展示了擴充套件如何透過表情符號支援來擴充套件 VS Code 的內建 Markdown 渲染器。讓我們快速看看關鍵部分!

可擴充套件筆記本渲染器的 API 被有意地鬆散定義。首先,我們的擴充套件需要貢獻一個新的筆記本渲染器。因為我們正在擴充套件一個現有渲染器,所以我們在這裡使用 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 只是基本渲染器返回的一個方法。其他可擴充套件渲染器可以輕鬆地返回自己的擴充套件點。

檢視 筆記本擴充套件 Markdown 渲染器示例,獲取擴充套件 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');
        }

        ...
    }
}

Webviews 中的高對比度淺色主題

Webview 現在可以使用 vscode-high-contrast-light CSS 類來定位 高對比度淺色主題

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

vscode-high-contrast-light 類會自動新增到 webview 的 body 元素中。

測試項標籤中的圖示

現在可以在 TestItem.label 中使用標準 $(icon) 格式的 Codicons,以便在測試資源管理器檢視和測試結果中顯示圖示。

原始碼管理輸入框啟用

擴充套件作者現在可以使用 enabled 屬性切換原始碼管理檢視中輸入框的啟用狀態。

JSON 單詞模式更改

每種語言都有一個單詞模式,它定義了在該語言中哪些字元屬於一個單詞。JSON 與所有其他語言不同,因為它包含字串文字的引號和完整的字串文字內容。它現在遵循其他語言,只包含字母、數字和連字元。

此更改將修復擴充套件選擇(命令:擴充套件選擇)時的問題,允許在字串中進行單詞補全,並修復一些程式碼建議異常。

依賴於單詞模式的擴充套件,例如用於程式碼補全的預設替換範圍,需要更新其實現以明確宣告所有補全的替換範圍。

除錯介面卡協議

  • 為了為“步入目標”功能提供更好的使用者體驗,已向 DAP 的 StepInTarget 型別添加了額外資訊。透過四個屬性 linecolumnendLineendColumn,步入目標現在可以連結到相應的源範圍。
  • 將程式引數傳遞給除錯物件受到兩個相互衝突的目標的阻礙:一些使用者希望能夠將所有字元傳遞給除錯物件,而另一些使用者希望使用某些字元與底層 Shell 進行通訊。為了更好地支援這兩種用例,我們正在開發 DAP 的 runInTerminal 請求來控制程式引數中特殊字元的轉義。一個提案已經可用。如果您是對此 DAP 附加功能感興趣的除錯擴充套件作者,我們將非常感謝您的反饋。
  • 此外,我們還解決了 除錯介面卡協議 的幾個文件問題。其中包括對“客戶端”和“假值”術語的澄清,更精確的校驗和和日期字串規範,以及對 Source.origin 的改進措辭。

提議的 API

每個里程碑都會帶來新的提議 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 擴充套件使用 WebUSBWeb SerialWebHID 提供了實驗性支援。

要訪問這些 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 元素的 API,例如 requestDevice

目前,此功能僅適用於網路,並且支援僅限於 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 儲存筆記本時保留未命名筆記本中選定的核心
  • 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 的貢獻