🚀 在 VS Code 中

2019 年 11 月 (版本 1.41)

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

下載:Windows:x64 | Mac:Intel | Linux:deb rpm tarball snap


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

如果您想在線上閱讀這些版本資訊,請前往 更新,網址為 code.visualstudio.com

Insiders: 想要盡快看到新功能嗎?您可以下載每夜建置的 Insiders 版本,並在最新更新可用時立即試用。如需 Visual Studio Code 的最新新聞、更新和內容,請在 Twitter 上追蹤我們 @code

工作台

檔案總管中的精簡資料夾

在檔案總管中,我們現在以精簡形式呈現單一子資料夾。在這種形式下,單一子資料夾將壓縮在一個組合樹狀元素中。例如,對於 Java 套件結構很有用。

設定 explorer.compactFolders 控制此行為。預設情況下,此設定為開啟。

File Explorer compact folders

在差異檢視中編輯左側

如果您比較兩個可編輯的編輯器(例如,從檔案總管比較兩個檔案或執行全域搜尋和取代),則左側現在也可編輯並可儲存 (⌘S (Windows、Linux Ctrl+S))。

Diff view left hand side edit

注意: 如果您厭倦了按 ⌘S (Windows、Linux Ctrl+S),您可以啟用自動儲存 (檔案 > 自動儲存)。

從預覽編輯器儲存

如果您開啟預覽檢視並在其中輸入內容,現在可以透過 ⌘S (Windows、Linux Ctrl+S) 儲存變更,前提是焦點在該內嵌編輯器內。

Saving in a Peek view

問題面板

更多篩選器

更多預先定義的篩選器已新增至問題面板。您現在可以依類型(錯誤、警告和資訊)篩選問題,也可以查看範圍限定於目前作用中檔案的問題。

Problems panel filters

佈景主題:GitHub Sharp Dark,字型:FiraCode

在狀態列中顯示目前問題

您現在可以設定 VS Code 在狀態列中顯示目前的問題訊息。這可讓您在作用中檔案中查看所選問題的摘要,而無需任何額外的鍵盤或滑鼠手勢。

注意: 啟用此功能需要啟用設定 problems.showCurrentInStatus

Current problem displayed in the Status bar

佈景主題:GitHub Sharp Dark,字型:FiraCode

彈性篩選方塊版面配置

問題面板中的篩選方塊現在會根據面板的位置和大小調整其位置。

Problems panel filter box adjustable layout

佈景主題:GitHub Sharp Dark,字型:FiraCode

改進的字型轉譯 (Windows、Linux)

當我們上次里程碑更新到 Electron 6 時,許多使用者回報字型轉譯對他們來說退步了。具體來說,字型不像以前那樣平滑地轉譯。我們立即解決了此問題在編輯器中,並且修復程式已在 1.40 修復版本中提供。但是,工作台中其他區域的字型轉譯仍然不盡理想。

在此版本中,我們改進了工作台中更多部分的字型轉譯(適用於 Windows 和 Linux)。下面的螢幕擷取畫面顯示了前後比較(放大以顯示差異)。特別是,工作台的許多樹狀和清單元素都使用灰階反鋸齒轉譯,現在它們使用子像素反鋸齒轉譯。

之前 (左) 和之後 (右)

Improved font rendering before and after

我們計劃進一步改進工作台中更多部分的字型轉譯。您可以查看此文字轉譯問題查詢以檢視進度。

更快地讀取/寫入遠端案例的檔案效能

對於檔案系統是遠端且延遲時間較高的情況(例如,在連線速度緩慢的瀏覽器中使用 VS Code 或連線到不在同一區域的遠端主機),從文字編輯器讀取和寫入檔案現在應該更快。我們切換到基於串流的實作,大幅減少了通訊額外負荷。

在您輸入時更新搜尋結果

在全文搜尋中,結果現在會在您輸入時更新。這在建構複雜的正規表示式查詢等情況下特別有幫助,在這種情況下,關於查詢的快速回饋可協助您撰寫 RegEx。

在這裡,即時回饋有助於建構 RegEx 尋找和取代查詢,以採用 TypeScript 的可選鏈結語法

Search result updates on type

佈景主題:Noctis Hibernus,字型:Hasklig

注意: 可以透過將 search.searchOnType 設定為 false 來停用此功能,並且可以使用 search.searchOnTypeDebouncePeriod 調整輸入和搜尋之間的延遲時間,預設值為 300 毫秒。

將游標新增至搜尋結果

我們新增了一個命令,可將游標新增至文字搜尋的所有相符項目。將焦點放在搜尋檢視中的檔案搜尋結果上,您可以按 ⇧⌘L (Windows、Linux Ctrl+Shift+L) 同時編輯該檔案中的所有相符項目。這與在單一編輯器中使用尋找小工具進行搜尋時使用的鍵盤快速鍵相同。

Add cursors to search results

預設展開所有搜尋結果

先前,如果全文搜尋在單一檔案中傳回超過 10 個結果,則它會顯示在結果樹狀結構中摺疊。但是,這有時會使尋找特定結果變得困難,因此在此版本中,所有結果都將展開顯示。

您可以將 search.collapseResults 設定為 auto 以還原為舊的行為。

編輯器

迷你地圖裝飾以表示錯誤、警告和內容變更

錯誤和警告現在會在迷你地圖(程式碼概觀)中內嵌醒目提示。您可以使用新的 minimap.errorHighlightminimap.warningHighlight 佈景主題色彩變更這些裝飾的色彩。

在下方您可以看到迷你地圖醒目提示一個細微的遺失逗號錯字

Minimap error and warning decorations

內容變更裝飾也會顯示在迷你地圖的邊界中

Minimap content change decorations

您可以使用以下項目修改內容變更色彩

  • minimapGutter.addedBackground
  • minimapGutter.modifiedBackground
  • minimapGutter.deletedBackground

您可以使用 scm.diffDecorations 設定變更原始檔控制裝飾的可見性,該設定具有以下值

  • all - 在所有位置顯示原始檔控制差異裝飾。
  • gutter - 僅在左側編輯器邊界中顯示。
  • minimap - 僅在迷你地圖邊界中顯示。
  • overview - 僅在概觀尺規中顯示。
  • none - 不顯示差異裝飾。

程式碼導覽替代命令

當已在定義處時,VS Code 過去在選取跳到定義時不會執行任何動作。在此版本中,可以改為執行替代命令。例如,跳到定義可以對應到執行跳到參考

這是透過 editor.gotoLocation.alternativeDefinitionCommand 設定自訂的。例如,您可以將跳到定義的替代命令設為跳到宣告,反之亦然。如果您偏好舊的行為,可以將設定留空。

預覽、跳到和尋找所有命令

每個 預覽 命令現在都有一個 跳到 對應命令。例如,現在同時有 預覽實作跳到實作。預覽檢視不會變更目前的編輯器,並允許快速就地查看原始程式碼。

以下影片顯示使用 預覽實作 在預覽檢視中查看 ICommandService 介面的所有實作

Peek Implementations command

佈景主題:GitHub Sharp,字型:FiraCode

相反地,跳到實作 適用於導覽,並可讓您快速跳到實作。

以下影片(使用 "editor.gotoLocation.multipleImplementations": "goto" 設定)透過重複按下 F12 導覽至 ICommandService 介面的所有實作

Go to Implementations command with F12

佈景主題:GitHub Sharp,字型:FiraCode

最後但並非最不重要的一點是,與 尋找所有參考 命令類似,現在有 尋找所有實作。它將實作呈現為編輯器側邊的穩定清單。這可以用作 TODO 清單,例如在執行影響介面所有實作的重構時。

Find All Implementations in the Side bar

佈景主題:GitHub Sharp,字型:FiraCode

麵包屑和 [大綱] 檢視的語言特定篩選

上一個里程碑,我們新增了從 [大綱] 檢視和麵包屑導覽篩選特定類型(例如變數)的功能。此版本改進了此功能,並允許語言特定篩選,例如不要顯示 TypeScript 變數,但顯示 JavaScript 變數。

在下方您可以看到 value 常數如何在 JavaScript 檔案的 [大綱] 檢視中顯示,但在 TypeScript 版本中則不顯示。

Language-specific filter for Outline view

佈景主題:GitHub Sharp,字型:Fira Code

macOS 上的 IntelliSense 鍵盤快速鍵

IntelliSense 通常透過 Ctrl+Space 觸發。但是,在 macOS 上,當設定多個輸入來源時,此鍵盤快速鍵由作業系統取得。這通常會導致混淆,並讓使用者認為 IntelliSense 已損壞。

現在有兩種方法可以處理此問題

  • 使用我們為 macOS 新增的 Alt+Escape 鍵盤快速鍵。
  • 透過 偏好設定 > 鍵盤 > 快速鍵 > 輸入來源,在 macOS 偏好設定中停用透過 Ctrl+Space 的輸入來源切換。

macOS Keyboard Shortcuts Input Sources option

螢幕閱讀器輸出

有一個新的設定 editor.accessibilityPageSize,可控制螢幕閱讀器一次可以讀出的編輯器行數。請注意,對於大於預設值 10 的數字,這會產生效能影響。

如果您使用螢幕閱讀器 朗讀全部 命令,我們建議將 editor.accessibilityPageSize 設定為 100 或 1000。在下一個里程碑中,我們將研究變更此設定的預設值。

新的括號相符選項

現在可以設定 "editor.matchBrackets": "near" 以取得舊的行為,即僅當游標位於括號的任一側時才醒目提示相符的括號。預設值為 always,它會醒目提示括住目前游標位置的相符括號。

新的自動縮排選項

設定 editor.autoIndent 現在可以採用不同的值。此設定會影響多個功能,例如按下 Enter、按下 Tab,或在縮排和取消縮排行時。您可以將此設定視為變得越來越主觀的「滑桿」

  • "none":按下 Enter 將插入 \n,僅此而已。
  • "keep":按下 Enter 將保留目前行的縮排。
  • "brackets":以上所有內容以及語言特定括號周圍的特殊邏輯。
  • "advanced":以上所有內容,並尊重透過 onEnterRules 定義的語言特定規則。
  • "full" (預設值):以上所有內容,並尊重透過 indentationRules 定義的語言特定規則。

程式碼動作選單鍵盤快速鍵

程式碼動作和重構選單現在會顯示自訂鍵盤快速鍵(如果存在)。

A keybinding for extract constant

整合式終端機

最小對比度

在終端機中使用色彩的應用程式可能很棘手,它們可以使用以下色彩作為文字

  • 預設前景色彩
  • 終端機佈景主題定義的 16 種色彩調色盤
  • 一組 240 種固定色彩
  • 任何 RGB 色彩 (1600 萬種)

問題是應用程式不知道預設背景色彩或前景色彩是什麼,以及它是否會與應用程式使用的色彩形成良好的對比。為了解決此問題,終端機現在可以動態變更文字的前景色彩,以符合指定的對比度。

將前景色彩設定為所需的對比度,範圍從 1 到 21

// 4.5 is recommended for baseline website accessibility
"terminal.integrated.minimumContrastRatio": 4.5

終端機色彩將增加或減少亮度,直到達到對比度或前景變成 #000000#ffffff

Terminal minimum contrast ratio setting

佈景主題:Sapphire,字型:Hack

新的實驗性 WebGL 轉譯器

終端機提供新的基於 WebGL 的轉譯器,與舊的基於畫布的方法相比,其效能提升高達 900%*。

您可以選擇使用此設定的新轉譯器

"terminal.integrated.rendererType": "experimentalWebgl"

速度提升歸因於許多因素,但以下是重點

  • WebGL 允許我們更直接地與 GPU 通訊,而不是透過網路平台的 CanvasRenderingContext2D API。
  • 轉譯器幾乎完全處理數字和類型陣列,這非常快速。物件和陣列建立也保持在最低限度,以避免不必要的垃圾收集。
  • 所有字元現在都快取在紋理圖集中,而不僅僅是具有有限樣式集的 ASCII 字元。這表示重複繪製相同的字元會快得多。

我們觀察到使用畫布轉譯器時,根據使用者的硬體/環境,影格的轉譯差異很大。每個影格通常需要 1 毫秒到 40 毫秒,但在極端情況下可能會達到 200 毫秒以上,其中硬體問題是一個因素。到目前為止,WebGL 看起來更一致,通常介於 0.2 毫秒到 2 毫秒之間

WebGL frames are much faster

可靠性是我們期望在整合後改進的事情之一。使用畫布轉譯器,如果 GPU/畫布出現問題,瀏覽器會嘗試變得聰明並回復為在 CPU 上轉譯,但我們絕不希望這種情況發生,因為我們有基於 DOM 的轉譯器,它更適合用於此目的。使用 WebGL,它應該可以按預期工作或嚴重失敗(無法取得 WebGL 內容),在這種情況下,我們可以回復為 DOM 轉譯器。

由於轉譯花費的時間少得多,因此 CPU 可以空出來專注於剖析傳入的資料,從而產生更多轉譯的影格和更快執行的命令。以下效能資料是從在 vscode 儲存庫內執行 ls -lR 產生的

Commands run faster on the WebGL renderer

新的轉譯器還修正了畫布轉譯器的一個討厭的錯誤,即當字元大於儲存格大小時,字元的側面會被裁剪。此問題在 Linux 上使用某些字型以及底線時最常見。

* 有關基準測試的更多資訊,請參閱 xtermjs/xterm.js#1790

原始檔控制

Git:git.ignoredRepositories 中的相對路徑

git.ignoredRepositories 設定現在支援相對路徑,當您設定工作區設定並且想要忽略 VS Code 中的某些儲存庫時,這非常有用。

Git:採用 FileSystemProvider

Git 擴充功能現在使用 FileSystemProvider API,除了修正某些編碼問題外,它還提供了一種效能更高且更可靠的方式來公開 Git 儲存庫中檔案的舊版本。

語言

HTML 鏡像游標

當您編輯 HTML 標籤時,VS Code 現在會新增「鏡像游標」。此行為由設定 html.mirrorCursorOnMatchingTag 控制,預設為開啟。

此功能的工作原理是在游標移入 HTML 標籤名稱範圍時,將多重游標新增至相符的標籤。就像在多重游標模式下一樣,您可以使用逐字刪除或逐字選取。當您將游標移出標籤名稱範圍時,鏡像游標會移除。

一種特殊情況是在游標位於開始標籤的末尾時輸入 Space,例如在 div 的末尾,如 <div|></div|>。在這種情況下,VS Code 會移除結束標籤名稱後插入的空格並退出鏡像游標模式,因此您可以繼續編輯 HTML 屬性。

HTML mirror cursor

佈景主題:Nord,字型:Input Mono

HTML 重新命名標籤

您現在可以使用 F2 重新命名 HTML 中的開始/結束標籤組。

HTML rename tag

自動完成 CSS 屬性的排名

CSS 自動完成現在依屬性的受歡迎程度對屬性進行排名

CSS suggestions ranked by popularity

使用狀況資料來源自 ChromeStatus.org

Sass 模組支援

Sass 最近引入了新的模組系統

我們已在 SCSS 檔案中新增 Sass 模組的語法醒目提示支援以及語言功能支援。語言功能包括

  • 自動完成 @use@forward
  • @use@forward 路徑的路徑完成。
  • 自動完成 Sass 內建模組,例如 sass:mathsass:color
  • @use@forward 匯入路徑的文件連結。

Sass module support

JSON

為了避免大型 JSON 檔案的效能問題,JSON 語言支援現在對其計算的摺疊區域和文件符號數量(適用於 [大綱] 檢視和麵包屑)設定了上限。預設情況下,限制為 5000 個項目,但您可以使用設定 json.maxItemsComputed 變更限制。

JSON large file warning

TypeScript 3.7

VS Code 現在隨附 TypeScript 3.7.3。此主要更新帶來了一些 TypeScript 語言改進 - 包括可選鏈結空值合併判斷函式 - 以及 JavaScript 和 TypeScript 的一些新工具功能。與往常一樣,此版本也包含許多重要的錯誤修正。

您可以在 TS 3.7 部落格文章中閱讀有關 TypeScript 3.7 功能的更多資訊。

JavaScript 和 TypeScript 的可選鏈結支援

由於 TypeScript 3.7,VS Code 現在支援 JavaScript 和 TypeScript 的開箱即用可選鏈結。這包括語法醒目提示和 IntelliSense

Optional chaining and nullish coalescing

此外,當您接受可選屬性的完成時,VS Code 可以自動插入 ?.

Selecting a completion on a potentially undefined value automatically inserts an optional chain

自動插入 ?. 取決於是否啟用嚴格 null 檢查。可以使用 "typescript.suggest.includeAutomaticOptionalChainCompletions""javascript.suggest.includeAutomaticOptionalChainCompletions" 設定停用自動 ?. 插入。

TypeScript 的提取介面重構

新的 提取到介面 重構可讓您快速將內嵌類型提取到介面,以便可以重複使用。

Selecting the new 'extract interface' refactoring

在下方您可以看到 'Neural' 介面已從 'keyes' 中提取出來

After extracting the 'Neural' interface out of 'keyes'

JavaScript 和 TypeScript 的分號格式器選項

新的 javascript.format.semicolonstypescript.format.semicolons 格式設定可讓您控制格式器如何處理 JavaScript 和 TypeScript 檔案中的分號。

有效的分號格式設定值為

  • ignore - 不新增或移除分號(預設值)。
  • insert - 在陳述式結尾插入分號。
  • remove - 移除不必要的分號。

未呼叫的函式檢查

如果您忘記在條件式中呼叫函式,VS Code 現在會提醒您。

請考慮以下 TypeScript 程式碼片段

import * as fs from 'fs';

fs.stat('/path/to/file', function(err, stats) {
  if (stats.isDirectory) {
    handleDirectory(stats);
  }
});

上面的範例使用 Node.js fs.stat API 取得有關檔案的資訊。但是有一個錯誤!.isDirectory 實際上是一個函式,而不是屬性!這表示 handleDirectory 將在每個檔案上呼叫,而不僅僅是預期的目錄,因為函式 isDirectory 已定義且評估為 true

VS Code can alert when you forget to call a function

請注意,只有在啟用嚴格 null 檢查時,您才會看到此診斷。

偵錯

偵錯 START 檢視

我們引入了新的偵錯 START 檢視,讓使用者更容易在新工作區中開始和設定偵錯。根據作用中的檔案,我們將選擇適當的偵錯擴充功能,並使其可以偵錯或執行您的應用程式。對於更精細的偵錯和執行組態,最好還是設定 launch.json 檔案。

在下方您可以看到快速開始偵錯 Express JavaScript 應用程式,然後在需要更多控制時建立 launch.json 檔案。

Debug Start view

在呼叫堆疊檢視中以內嵌動作重新啟動框架

為了改進 重新啟動框架 動作的可探索性,現在在呼叫堆疊檢視中提供一個內嵌動作,在滑鼠停留在上方時可見。在命中断點後,重新啟動框架是重新執行先前原始程式碼的一種便捷方法。如果偵錯擴充功能不支援重新啟動框架,則不會顯示此動作。

Restart frame button

偵錯主控台顯示輸入和輸出

為了更好地區分偵錯主控台中的輸入和輸出,我們在左側新增了輸入 > 和輸出 < 裝飾。

Debug console input and output decorations

內嵌斷點顯示

新的設定 debug.showInlineBreakpointCandidates 控制在偵錯時是否在編輯器中顯示內嵌斷點候選項裝飾。預設情況下,它們是可見的。

預覽功能

預覽功能尚未準備好發行,但功能已足夠使用。我們歡迎您在開發期間提供早期意見反應。

搜尋編輯器

在此里程碑中,我們已開始在專用編輯器中顯示搜尋結果的工作。這提供了更多空間來檢視搜尋結果,並允許您同時維護多個搜尋結果集合。

在此版本中,在搜尋編輯器中,您可以

  • 使用 跳到定義 系列命令導覽至結果,包括 預覽定義在側邊開啟定義
  • 重新執行搜尋以更新結果清單。
  • 檢視結果周圍的原始程式碼行。
  • 將結果持續保存到磁碟,以供日後參考,甚至在原始檔控制中追蹤。

我們將在即將發行的版本中繼續新增功能並提高可用性。

Search Editor

佈景主題:A Touch of Lilac,字型:Hasklig

注意: 您可以透過將 search.enableSearchEditorPreview 設定為 true 來預覽此功能。

呼叫階層檢視

呼叫階層 API 在穩定版中可用,並且語言擴充功能作者正忙於實作它,因此我們新增了呼叫階層檢視。這補充了 預覽呼叫階層 檢視,並與 尋找所有參考尋找所有實作 共用相同的側邊欄檢視。一旦語言擴充功能支援呼叫階層 API,您將可以從內容選單或命令面板選取 顯示呼叫階層 以查看檢視

Call Hierarchy view

佈景主題:GitHub Sharp,字型:FiraCode

呼叫階層檢視可讓您鑽研符號的呼叫者和呼叫。它會醒目提示作用中編輯器中的呼叫,允許從任何子項重新設定檢視的父項,並保留先前執行的歷程記錄。

JavaScript 偵錯工具

我們正在開發適用於 Node.js 和 Chrome 的新偵錯工具。您可以安裝每夜擴充功能 js-debug-nightly,並透過更新設定以新增以下內容,將其用作直接取代

{
  "debug.chrome.useV3": true,
  "debug.node.useV3": true
}

您應該不需要變更現有的啟動組態即可使用新的偵錯工具。

偵錯工具帶來了各種新功能,例如偵錯和逐步執行 Web Worker 的能力

An animation showing stepping through postMessage calls to and from a webworker

佈景主題:Earthsong,字型:Fira Code

...無需額外組態或旗標即可偵錯 npm 指令碼...

An animation dispatching the "run npm script" command, selecting "npm start", and then hitting a breakpoint in an executed script

...以及更多!如果您遇到問題,請提交問題

擴充功能貢獻

遠端開發

遠端開發擴充功能的工作仍在繼續,這些擴充功能可讓您使用容器、遠端電腦或 適用於 Linux 的 Windows 子系統 (WSL) 作為功能齊全的開發環境。

1.41 中的功能重點包括

  • 開發容器:更輕鬆地在容器中試用範例儲存庫(例如 vscode-remote-try-python)。
  • 開發容器:建立容器時效能已改進,以及 devcontainer.json 的新選項。
  • WSL:支援基於 Windows 10 ARM 的電腦,例如 Surface Pro X。
  • 遠端總管現在可以將可用的檢視範圍限定為特定的遠端類型。

您可以在遠端開發版本資訊中瞭解新的擴充功能功能和錯誤修正。

您也可以閱讀最近一篇關於 使用 VS Code 檢查容器 的部落格文章,並嘗試更新的 在 VS Code 中使用 C++ 和 WSL 教學課程。

ESLint

ESLint 擴充功能的改進

  • 更好地支援 ESLint 6.x - 在大多數情況下,使用 ESLint 6.x 時不應需要設定工作目錄。
  • 改進的 TypeScript 偵測 - 一旦在 ESLint 內正確設定 TypeScript,您就不再需要透過 VS Code 的 eslint.validate 設定進行額外設定。HTML 和 Vue.js 檔案也是如此。
  • Glob 工作目錄支援 - 具有複雜資料夾結構且需要透過 eslint.workingDirectories 自訂工作目錄的專案現在可以使用 glob 模式,而不是列出每個專案資料夾。例如,code-* 將比對所有以 code- 開頭的專案資料夾。此外,擴充功能現在預設會變更工作目錄。您可以使用新的 !cwd 屬性停用此功能。
  • 改進的儲存時自動修正 - 儲存時自動修正是 VS Code 的儲存時程式碼動作基礎結構的一部分,並在一輪中計算所有可能的修正。它是透過 editor.codeActionsOnSave 設定自訂的。此設定支援 ESLint 特定屬性 source.fixAll.eslint。擴充功能也尊重泛型屬性 source.fixAll

以下設定開啟所有提供者的自動修正,包括 ESLint

    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }

相反地,此組態僅針對 ESLint 開啟自動修正

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

您也可以透過以下方式選擇性地停用 ESLint

    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": false
    }

vscode-scss

vscode-scss 擴充功能為 SCSS 變數、混合和函式提供跨檔案語言支援。在此里程碑中,我們協助其開發新版本 0.8.0

新版本改進了

  • 更好的匯入路徑解析
  • 自動完成色彩變數的色彩預覽
  • 更好的效能

擴充功能撰寫

Figma 設計工具組

我們建立了一個 Figma 設計工具組,以更好地協助擴充功能作者設計其擴充功能的使用體驗。查看 GitHub 上的工具組儲存庫,其中包含有關如何存取和使用工具組的指示。

以下是一些包含的元件範例

Figma design toolkit components

所有元件都應該可調整大小和可編輯。

Editing Figma components

如果您遇到任何問題或對某些元件有任何要求,請在工具組儲存庫中建立問題,以便我們可以分類和追蹤要求。

偵錯圖示色彩符號

我們為偵錯檢視新增了一組新的色彩符號。

偵錯工具列

  • debugIcon.startForeground
  • debugIcon.continueForeground
  • debugIcon.disconnectForeground
  • debugIcon.pauseForeground
  • debugIcon.restartForeground
  • debugIcon.stepBackForeground
  • debugIcon.stepIntoForeground
  • debugIcon.stepOutForeground
  • debugIcon.stepOverForeground
  • debugIcon.stopForeground

Debug toolbar colors

佈景主題:Min Dark,字型:Input Mono

偵錯斷點

  • debugIcon.breakpointForeground
  • debugIcon.breakpointDisabledForeground
  • debugIcon.breakpointUnverifiedForeground
  • debugIcon.breakpointStackframeForeground
  • debugIcon.breakpointCurrentStackframeForeground

Debug breakpoint colors

佈景主題:Min Dark,字型:Input Mono

工作區檔案事件

檔案和資料夾變更時有新的事件

  • vscode.workspace.on[Will|Did]CreateFile
  • vscode.workspace.on[Will|Did]RenameFile
  • vscode.workspace.on[Will|Did]DeleteFile

當從檔案總管或從擴充功能透過 vscode.workspace.applyEdit(WorkspaceEdit) API 建立、重新命名或刪除檔案時,會觸發事件,但當檔案在磁碟上變更或透過 vscode.workspace.fs API 修改檔案時,則不會觸發事件。

這些事件的可能用例是語言伺服器,它可能會在重新命名檔案之前更新檔案的內容,或在刪除/建立檔案後更新專案檔案。

SnippetString

SnippetString 類型現在具有選擇元素的建置器方法。

嚴格的 getWordRangeAtPosition

TextDocument.getWordRangeAtPosition API 現在更加嚴格,並且不會忽略導致空字串比對的無效正規表示式,而是會擲回錯誤。

已淘汰 extensionKind 的字串類型

擴充功能作者可以使用 package.json 中的 extensionKind 屬性來指示擴充功能應在遠端案例中執行的位置。在發行版本 (1.40) 中,此值可以是字串或陣列。從此版本開始,此屬性僅支援陣列值,且使用字串已被棄用。請參閱遠端開發文件以取得更多資訊。

將 DAP 來源轉換為 URI

VS Code 擴充功能 API 在參照可以在編輯器中開啟的資源時,會使用文件 URI,而偵錯配接器協定則是基於Source 描述符。在這個里程碑中,我們新增了一個 API 來連接這兩個世界。函式 debug.asDebugSourceUri 會從 DAP Source 物件建立 URI。這使得將 DAP Source 開啟到 VS Code 編輯器變得簡單

export async function openDAPSource(
  session: vscode.DebugSession,
  source: DebugProtocol.Source
) {
  const uri = vscode.debug.asDebugSourceUri(source, session);
  vscode.window.showTextDocument(vscode.workspace.openTextDocument(uri));
}

建議的擴充功能 API

每個里程碑都帶有新的建議 API,擴充功能作者可以試用它們。一如既往,我們渴望您的回饋。以下是您試用建議 API 必須執行的操作

  • 您必須使用 Insiders 版本,因為建議 API 經常變更。
  • 您的擴充功能的 package.json 檔案中必須有這一行:"enableProposedApi": true
  • 將最新版本的 vscode.proposed.d.ts 檔案複製到專案的原始碼位置。

請注意,您不能發佈使用建議 API 的擴充功能。下一個版本中可能會出現重大變更,而我們絕不希望破壞現有的擴充功能。

CodeAction.disabled

VS Code 鼓勵擴充功能使用程式碼動作來實作重構功能。然而,使用者可能難以發現擴充功能支援哪些重構,以及理解為什麼特定選取範圍無法使用給定的重構。CodeAction.disabled API 提案旨在協助擴充功能使其重構更容易被發現。

建議的 .disabled 屬性在 CodeAction 上是一個人類可讀的字串,描述了為什麼給定的程式碼動作無法執行。以下是在我們的 CodeAction 範例擴充功能中使用 .disabled 的範例。

import * as vscode from 'vscode';

export class Emojizer implements vscode.CodeActionProvider {

    public provideCodeActions(document: vscode.TextDocument, range: vscode.Range): vscode.CodeAction[] | undefined {
        const action = new vscode.CodeAction(`Convert to ${emoji}`, vscode.CodeActionKind.Refactor.append('emojize'));

        if (!this.isAtStartOfSmiley(document, range)) {
            // Tell the user why our action is not available
            action.disabled = 'Selection is not currently on a :)';
            return [action];
        }

        action.edit = new vscode.WorkspaceEdit();
        action.edit.replace(document.uri, new vscode.Range(range.start, range.start.translate(0, 2)), '😀');
        return action;
    }

    ...
}

如果使用者嘗試透過按鍵繫結套用已停用的程式碼動作,VS Code 將會向使用者顯示 .disabled 錯誤訊息

Showing the '.disabled' error in the editor

此外,為了協助發現,已停用的程式碼動作會在重構來源動作上下文選單中顯示為淡化

A '.disabled' Code Action in the Refactor menu

請注意,已停用的動作不會顯示在頂層的燈泡選單中。

如果您的擴充功能使用程式碼動作,請告訴我們 CodeAction.disabled 是否對您有用且能夠實作。

自訂編輯器編輯功能

在這個迭代中,我們繼續致力於自訂編輯器提案。提醒一下,自訂編輯器是基於 webview 的檢視,可以用來取代 VS Code 的一般文字編輯器來處理特定的檔案類型。從 VS Code 1.41 開始,自訂編輯器現在可以與 VS Code 的復原/重做和儲存功能整合,這使得許多有趣的用例成為可能,包括將它們用作視覺化和 WYSIWYG 編輯器。

您可以在 vscode.proposed.d.ts 中找到目前的 API 提案,我們也整理了一些非常簡單的擴充功能範例,示範如何將自訂編輯器用於文字和二進位檔案。

如果您對自訂編輯器感興趣,請分享您對目前提案的回饋,並告訴我們您是否能夠實作它。

語意符號提供器

我們為語意符號提供器新增了新的建議 API。新的 API 允許擴充功能提供額外的符號資訊,供編輯器用來豐富基於 TextMate 的語法醒目提示。

每個語意符號都會使用符號類型和任意數量的符號修飾詞來註解一個範圍。例如,類型 variable 和修飾詞 membermodification 將描述對成員變數的寫入存取。然後,符號類型和修飾詞會用於在編輯器中新增樣式。

樣式可以在色彩主題和使用者設定中設定

    "editor.tokenColorCustomizationsExperimental": {
        "variable.member": {
            "foreground": "#35166d"
        },
        "*.modification": {
            "fontStyle": "underline"
        }
    }

如果您對此功能感興趣,我們希望獲得您對目前提案的回饋,並且我們很樂意鼓勵實驗和一些早期實作。

完整的範例可在 vscode-extensions-samples 儲存庫中找到。

語言伺服器協定

現在有建議支援透過 LSP 的 呼叫階層檢視。

瀏覽器支援

改善對 Firefox 和 Safari (macOS 和 iPadOS) 的支援

在這個里程碑中,我們專注於改善在 Firefox 或 Safari 中執行瀏覽器版 VS Code 的體驗。我們修正了許多問題以支援這兩種瀏覽器 (FirefoxSafari)。在 Firefox 上,由於上游的阻礙,我們尚未完全支援鍵盤快速鍵,您可以在 追蹤問題 #85252 中閱讀更多詳細資訊。

我們也修正了許多 問題,以在 iPadOS 上的 Safari 中啟用基本的 VS Code 功能。核心 UI 元素現在可透過觸控和指標裝置存取。但是,在預定義的按鍵繫結 (EscapeFunction 鍵)、hover 和觸控友善的 UI/UX 方面仍然存在主要阻礙。請參閱 問題 #85254 以取得更多資訊。

更多功能可在瀏覽器中執行

在上一個里程碑中,我們引入了支援從我們的儲存庫執行 yarn web 以設定在瀏覽器中執行的 VS Code。此設定仍然旨在用於測試瀏覽器中的問題,而不是用於開發。

在這個里程碑中,我們新增了更多可以測試的功能

  • 偵錯
  • 搜尋
  • 工作
  • 問題

這是一個展示新功能的影片

VS Code running in a browser

注意:請勿將此設定用於任何嚴重的開發。目的是讓社群能夠將變更貢獻回 VS Code,以改善瀏覽器中的整體體驗。

工程

Insiders 版本可在 yum 儲存庫中使用

Insiders 組建現在可在 yum 儲存庫中使用,並且與 apt 儲存庫一樣自動發佈。請按照網站上的指示設定儲存庫,並使用 sudo dnf install code-insiders 安裝。

Monaco Editor 的持續組建

在這個迭代中,我們為 Monaco Editor 新增了持續組建和測試管道。我們從 VS Code 儲存庫 main 分支組建 Monaco Editor 核心,並執行健全性測試,以儘早發現潛在的錯誤或意外的重大變更。

值得注意的修正

  • 51039:當關閉另一個索引標籤中的左側編輯器時,Diff 編輯器會關閉
  • 83746:Web:無法拖放組合和檢視 (活動列、面板)
  • 80026:launch.json 中的灰色屬性令人困惑,請移除它們
  • 83449:協助工具:協助工具模式下的 Ctrl+Right (CursorWordAccessibilityRight) 應該跳到下一個字的開頭,而不是結尾
  • 83753:停用 console.debug.wordWrap 會移除換行符號和空格
  • 85086:當 search.usePCRE2 停用時,全域搜尋中不支援反向參考
  • 36219:Git:「暫存選取的範圍」命令將編碼變更為 UTF-8

感謝您

最後但同樣重要的是,衷心感謝!以下人士協助使 VS Code 變得更好

對我們的問題追蹤的貢獻

vscode 的貢獻

language-server-protocol 的貢獻

vscode-css-languageservice 的貢獻

debug-adapter-protocol 的貢獻

vscode-chrome-debug-core 的貢獻

vscode-vsce 的貢獻

localization 的貢獻

有超過 800 位 Cloud + AI 本地化 社群成員使用 Microsoft 本地化社群平台 (MLCP),其中約有 100 位活躍貢獻者參與 Visual Studio Code。我們感謝您的貢獻,無論是提供新的翻譯、對翻譯進行投票,還是建議流程改進。

這是貢獻者的快照。如需專案的詳細資訊,包括貢獻者名稱列表,請造訪專案網站 https://aka.ms/vscodeloc

  • 波士尼亞文 (拉丁文,波士尼亞和赫塞哥維納): Sead Mulahasanović、Ismar Bašanović、Adnan Rizvan。
  • 丹麥文: Lasse Stilvang。
  • 荷蘭文: Lemuel Gomez、Gideon van de Laar。
  • 英文 (英國): Martin Littlecott、Alonso Calderon、Daniel Imms、Kamalsinh Solanki。
  • 芬蘭文: Tuula P。
  • 法文: Antoine Griffard、Thierry DEMAN-BARCELÒ、Edouard Choinière、Joel Monniot、Rodolphe NOEL、Alain BUFERNE、Xavier Laffargue、DJ Dakta。
  • 德文: Pascal Wiesendanger、Jakob von der Haar、jan-nitsche、Michael Richter。
  • 希臘文: Valantis Kamayiannis、Θοδωρής Τσιρπάνης。
  • 希伯來文: Ariel Bachar。
  • 印地文: Kiren Paul、Niraj Kumar、Preeti Madhwal、Jaadu Jinn、Mahtab Alam。
  • 匈牙利文: József Cserkó、Kiss Attila Csaba、Krisztián Papp。
  • 簡體中文: Yizhi Gu、Tingting Yi、Justin Liu、Charles Dong、Peng Zeng、Tony Xia、斌 項、Yixing Zheng、paul cheung、普鲁文、Sheng Jiang、钟越、Joel Yang、一斤瓜子、Zhiqiang Li、Yiting hu、Alexander ZHANG、张锐、Libing Yang、ZHENGCHENG CHEN、光宇 朴、石岩 詹、舜杰 杨、WJ Wang、Siam Chen。
  • 繁體中文: Winnie Lin、船長、Alan Tsai、TingWen Su。
  • 印尼文: Eriawan Kusumawardhono、Arif Fahmi、Laurensius Dede Suhardiman、Christian Elbrianno。
  • 義大利文: Alessandro Alpi、Luigi Bruno。
  • 日文: Takayuki Fuwa、貴康 内田、Kyohei Uchida、Koichi Makino、TENMYO Masakazu、Aya Tokura。
  • 韓文: Hongju。
  • 拉脫維亞文: Andris Vilde。
  • 挪威文: Frode Aarebrot、Anders Stensaas、Thomas Ødegård、Thomas Isaksen。
  • 波蘭文: Makabeus Orban、Wojciech Maj、Kacper Łakomski、Oskar Janczak、Szymon Seliga、Mateusz Redynk、Franx Bar。
  • 葡萄牙文 (巴西): Marcelo Fernandes、Albert Tanure、Arthur Lima、Nylsinho Santos、Pudda、Matheus Vitti Santos、Rodrigo Crespi、Roberto Fonseca、Felipe Nascimento。
  • 葡萄牙文 (葡萄牙): Francisco Osorio、Luís Chaves、Ricardo Sousa Vieira、João Fernandes。
  • 羅馬尼亞文: LaServici、Dan Ichim。
  • 俄文: Vadim Svitkin。
  • 塞爾維亞文 (斯拉夫字母): Dusan Milojkovic。
  • 西班牙文: José María Aguilar、Gustavo Gabriel Gonzalez。
  • 坦米爾文: MUTHU VIJAY、Sankar Raj、Kadhireshan S、Pandidurai R、Madhu Chakravarthy、Madhu Maha。
  • 土耳其文: Mehmet Yönügül、mehmetcan Gün、Misir Jafarov、Fırat Eşki、Gökberk Nur、Safa Selim。
  • 烏克蘭文: Arthur Murauskas、Oleksandr Krasnokutskyi。
  • 越南文: Dat Nguyen、王、Dao Ngo、Van-Tien Hoang、ng-hai。