現已釋出!閱讀關於 11 月新增功能和修復的內容。

2022 年 6 月(版本 1.69)

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

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

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


歡迎使用 Visual Studio Code 2022 年 6 月版。此版本中有許多更新,希望您會喜歡,其中一些主要亮點包括:

如果您想線上閱讀這些發行說明,請訪問 code.visualstudio.com 上的更新頁面。

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

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

工作臺

三向合併編輯器

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

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

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

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

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

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

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

命令中心

命令中心已打磨完畢,現在可以試用了。透過 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+UpCtrl/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 path"">

可以按住 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)中使用向上翻頁和向下翻頁按頁滾動。

程序重新連線和恢復改進

終端永續性獲得了一些 UX 和可靠性改進

  • 以前重新載入視窗 n 次會顯示 n 個會話恢復訊息。現在,會話恢復訊息應該只在該特定會話有輸入時才會顯示。
  • 以前包含日期的會話恢復訊息已減少為簡單的“歷史記錄已恢復”,以減少干擾。
  • “環境變數收集”功能(通知使用者擴充套件想要更改環境,例如支援自動 Git 身份驗證)現在在重新載入後也能正常工作。

任務

裝飾

幾個迭代之前,我們藉助 shell 整合功能向終端緩衝區和概覽標尺添加了裝飾,以改進終端導航。現在,裝飾還會標記任務的興趣點,可以使用命令導航功能(Ctrl/Cmd+UpCtrl/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 中的一條路徑,可用於展示和試用顏色主題而無需安裝它。這對於 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 中的內建主題一起使用。將 vscode.theme-defaults 用於擴充套件 ID 佔位符,然後使用您要檢視的主題名稱。

例如,要測試“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 伺服器”的私人預覽,該服務基於遠端擴充套件使用的相同底層伺服器構建,並具有一些附加功能,例如互動式 CLI 和促進與 vscode.dev 的安全連線,而無需 SSH 連線。

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

我們的最終目標是增強您今天使用的 code CLI,以便開啟 VS Code 的桌面和 Web 例項,無論您的專案儲存在哪裡。雖然我們正在積極努力實現這一目標,但 VS Code 伺服器是一個重要的里程碑,我們渴望以私人預覽版釋出以獲取您的反饋。

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

對擴充套件的貢獻

ESLint

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

ESlint validating notebook cells

Jupyter

IPyWidgets

現在支援 IPyWidgets 用於 Python 以外的核心,例如 Common LispIHaskell

許多與資源載入(影像、指令碼等)相關的 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 中的設定配置檔案,這是社群最受歡迎的需求之一。在此里程碑中,我們很高興地宣佈此功能已透過 workbench.experimental.settingsProfiles.enabled 設定在 Insiders 版本中準備好預覽。請試用此功能並透過在我們的 VS Code 倉庫中建立 issue 或在 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

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

筆記本渲染器允許擴充套件自定義單元格和輸出在筆記本中的渲染方式。此迭代中,我們擴充套件了筆記本渲染器 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 中的高對比度淺色

Webviews 現在可以使用 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 SerialWebHIDWeb 擴充套件進行訪問提供實驗性支援。

要訪問這些 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)的那些除外。

目前,此功能僅在 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 使用大寫鎖定切換輸入源時,終端始終顯示大寫字母
  • 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 的貢獻

© . This site is unofficial and not affiliated with Microsoft.