🚀 在 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),您可以啟用自動儲存 (檔案 > 自動儲存)。

從 Peek 編輯器儲存

如果您開啟 Peek 檢視並在其中輸入內容,現在可以在焦點位於嵌入式編輯器內時,透過 ⌘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 或連線到不在同一區域的遠端主機),現在從文字編輯器讀取和寫入檔案應該更快。我們切換到基於串流的讀取和寫入實作,這大大減少了通訊額外負荷。

在您輸入時更新搜尋結果

在全文搜尋中,結果現在會在您輸入時更新。這在建構複雜的規則運算式查詢等情境中特別有用,在這種情境下,關於查詢的快速回饋可以協助您撰寫規則運算式。

在這裡,即時回饋有助於建構規則運算式尋找和取代查詢,以採用 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 設定自訂。例如,您可以讓前往定義的替代命令為前往宣告,反之亦然。如果您偏好舊行為,可以將設定保留為空白。

Peek、前往和尋找所有命令

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

以下影片顯示使用 Peek 實作 在 Peek 檢視中查看 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 的轉譯器,與舊的基於 Canvas 的方法相比,效能提升高達 900%*。

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

"terminal.integrated.rendererType": "experimentalWebgl"

速度改進歸因於許多因素,但以下是重點

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

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

WebGL frames are much faster

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

由於轉譯花費的時間少得多,因此 CPU 可以釋放出來專注於剖析傳入的資料,這會導致轉譯更多畫面和命令執行速度更快。以下效能資料是從在 vscode 存放庫中執行 ls -lR 產生的

Commands run faster on the WebGL renderer

新的轉譯器也修正了 Canvas 轉譯器的一個嚴重錯誤,即當字元大於儲存格大小時,字元的側面會被剪裁。此問題最常見於 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 語言改進 - 包括可選鏈結Nullish Coalescing判斷提示函式 - 以及一些適用於 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 控制在偵錯時是否在編輯器中顯示內嵌中斷點候選裝飾。預設情況下,它們是可見的。

預覽功能

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

搜尋編輯器

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

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

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

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

Search Editor

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

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

呼叫階層檢視

呼叫階層 API 在穩定版本中可用,並且語言擴充功能作者正忙於實作它,因此我們新增了呼叫階層檢視。這補充了 Peek 呼叫階層 檢視,並與 尋找所有參考尋找所有實作 共用相同的側邊欄檢視。一旦語言擴充功能支援呼叫階層 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

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

擴充功能貢獻

遠端開發

我們持續開發遠端開發擴充功能,讓您可以使用容器、遠端電腦或 Windows Subsystem for Linux (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 變數、mixin 和函式提供跨檔案語言支援。在這個里程碑中,我們協助其開發新版本 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,而偵錯配接器協定則是以來源描述元為基礎。在這個里程碑中,我們新增了一個 API 來連接這兩個世界。函式 debug.asDebugSourceUri 會從 DAP 來源物件建立 URI。這使得將 DAP 來源開啟到 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。一如既往,我們非常重視您的意見反應。以下是您試用建議 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 存放庫主要分支組建 Monaco Editor 核心,並執行健全性測試,以儘早捕獲潛在的錯誤或意外的重大變更。

值得注意的修正

  • 51039:在另一個索引標籤中關閉左側編輯器時,Diff 編輯器會關閉
  • 83746:Web:無法拖放組合和檢視畫面 (活動列、面板)
  • 80026:launch.json 中的灰色屬性令人困惑,請移除它們
  • 83449:協助工具:協助工具模式中的 Ctrl+向右鍵 (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 Localization 社群成員使用 Microsoft Localization Community Platform (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。