🚀 在 VS Code 中！

2021 年 6 月 (版本 1.58)

更新 1.58.1：此更新解決了這些安全性問題。

更新 1.58.2：此更新解決了這些問題。

下載：Windows: x64 Arm64 | Mac: 通用 Intel silicon | Linux: deb rpm tarball Arm snap

歡迎使用 Visual Studio Code 2021 年 6 月發行版本。此版本中有許多更新，我們希望您會喜歡，其中一些重點包括

如果您想在線上閱讀這些版本資訊，請前往 code.visualstudio.com 上的更新。

加入我們的直播，在 7 月 13 日星期二太平洋時間上午 8 點（倫敦下午 4 點）觀看 VS Code 團隊的直播，以觀看此版本新功能的示範，並現場向我們提問。

Insiders： 想盡快試用新功能嗎？您可以下載每晚的 Insiders 組建，並在最新更新可用時立即試用。

工作台

工作區信任

工作區信任功能是 1.57 版本中的重大變更，我們認為開發人員可以安全地瀏覽程式碼，即使他們不熟悉來源，這一點非常重要。在這個里程碑中，我們一直在吸收客戶回饋，並專注於修正問題和追蹤建議。

為了幫助人們發現可以自訂工作區信任的使用者設定，工作區信任編輯器的標頭中新增了一個設定您的設定動作。此動作將帶出設定編輯器，並依 @tag:workspaceTrust 篩選。

Configure your settings action in the Workspace Trust editor

說到設定，有一個新的設定可以設定何時顯示橫幅，指出目前視窗處於受限模式。與 security.workspace.trust.startupPrompt 設定類似，新的 security.workspace.trust.banner 允許您在熟悉工作區信任功能後停用橫幅，並且不需要提醒您正在受限模式下工作。依預設，此橫幅每個工作區顯示一次，並持續顯示直到被關閉 ("untilDismissed")。顯示受限模式橫幅的其他選項為 "always" 和 "never"。

您可以在最近的 工作區信任部落格文章中了解有關工作區信任的基本原理和開發的更多資訊。文章說明了受限模式如何幫助您免受意外和潛在惡意程式碼執行的影響，並提供設定開發機器的秘訣，讓您可以快速且安全地工作。

設定編輯器

此迭代為設定編輯器新增了對具有固定數量布林屬性的設定物件的支援，方法是將屬性呈現為核取方塊清單。

Settings editor Boolean object renderer demo

此迭代還新增了對列舉陣列的額外支援，方法是在編輯模式中使用下拉式選單而不是純文字方塊。

Settings editor enum array renderer demo

暫時性工作區

現在有一種新的工作區類型，稱為「暫時性」工作區，其行為與一般工作區不同，特別是

  • 重新啟動或重新載入 VS Code 不會嘗試再次開啟工作區。
  • 設定為暫時性的工作區不會顯示在最近開啟的工作區清單中。

透過在工作區 .code-workspace 檔案中新增設定為 true 的 transient 屬性來指定暫時性工作區

{
  "folders": [],
  "transient": true
}

設定同步

現在有一個疑難排解視圖用於設定同步，其中包含所有記錄和上次同步狀態。您可以執行命令設定同步：顯示已同步資料並透過開啟檢視子選單並勾選疑難排解來啟用此視圖

Settings Sync Troubleshoot command in the Settings Sync view menu

主題：GitHub 淺色主題

搜尋最大結果數設定

有一個新的設定 search.maxResults，可讓您設定文字搜尋結果的最大數量。預設值為 20,000，先前為 10,000。載入大量搜尋結果時，您可能會看到一些速度變慢的情況。

整合式終端機

編輯器區域中的終端機

現在可以在編輯器區域中建立終端機或將終端機移動到編輯器區域，從而實現持久且保持可見的多維網格佈局，而與面板狀態無關。

若要在編輯器區域中使用終端機，有幾個選項

  • 透過在編輯器區域中建立終端機命令建立。
  • 將終端機從索引標籤清單拖放到編輯器。
  • 在終端機聚焦時執行將終端機移至編輯器區域。
  • 在終端機索引標籤內容選單中選取移至編輯器區域。

4 terminals in the editor area are laid out in a 2 by 2 grid

新的 terminal.integrated.defaultLocation 設定可以設定為 editor，以將新建立的終端機預設導向編輯器區域。

明確設定畫布渲染器

在先前的迭代中，我們預設啟用了 WebGL 終端機渲染器，並以更簡單的 terminal.integrated.gpuAcceleration 設定取代了 terminal.integrated.rendererType 設定。不幸的是，某些機器在使用 WebGL 時體驗會降低，唯一的可用選項是完全停用 GPU 加速，並移至速度慢得多的 DOM 型渲染器。現在可以將 terminal.integrated.gpuAcceleration 明確設定為 canvas，這對於這些環境來說可能是更佳的選擇。

隱藏連結懸停

新的 terminal.integrated.showLinkHover 設定可讓您停用終端機中的連結懸停。如果您發現終端機連結上的懸停會分散注意力，這會很有用。

編輯器

編輯器捲軸自訂

有新的設定可以自訂編輯器的捲軸

  • 使用 editor.scrollbar.horizontal 和 editor.scrollbar.vertical 控制捲軸可見性。
  • 使用 editor.scrollbar.horizontalScrollbarSize 和 editor.scrollbar.verticalScrollbarSize 變更其粗細。
  • 使用 editor.scrollbar.scrollByPage 判斷按一下是按頁面捲動還是跳到按一下位置 (預設行為)。

在下方，編輯器的垂直捲軸寬度設定為 30 像素。

Vertical editor scroll bar width set to 30 pixels

語言

Markdown 預覽中的數學公式呈現

VS Code 的內建 Markdown 預覽現在可以使用 KaTeX 呈現數學方程式。

Math rendering in the built-in Markdown preview

行內數學方程式會以單個美元符號括起來

Inline math: $x^2$

您可以使用雙美元符號建立數學方程式區塊

Math block:

$$
\displaystyle
\left( \sum_{k=1}^n a_k b_k \right)^2
\leq
\left( \sum_{k=1}^n a_k^2 \right)
\left( \sum_{k=1}^n b_k^2 \right)
$$

您可以設定 "markdown.math.enabled": false 來停用此功能。

Markdown 數學公式語法醒目提示

VS Code 現在也支援醒目提示 Markdown 來源中的數學方程式

Syntax highlighting of a math equation in a Markdown file

這適用於一般 Markdown 檔案和筆記本內的 Markdown 儲存格。

TypeScript 4.3.5

我們現在捆綁了 TS 4.3.5。此小更新修正了一些重要的錯誤，包括 JSX 中自動匯入無法運作。

偵錯

記住每個檔案選擇的環境

當在沒有 launch.json 檔案的情況下啟動偵錯時，VS Code 會查看活動編輯器，並根據編輯器的語言模式決定要使用的偵錯擴充功能。但是，對於某些語言，可能會有多個偵錯擴充功能，在這種情況下，VS Code 會提示您選擇其中一個。為了使偵錯更順暢，VS Code 現在會記住每個檔案選擇的偵錯工具，以便下次您啟動偵錯時，工作階段會啟動而不會出現任何提示。

在下面的簡短影片中，使用者選擇 Node.js 偵錯環境來偵錯單個 JavaScript 檔案，並且當該檔案的新偵錯工作階段啟動時，會記住該選擇。

Debug is started first time and the environment prompt is presented. The next time there is no prompt when the debug session starts

偵錯主控台建議不再在 Enter 鍵上接受

偵錯主控台建議不再在 Enter 鍵上接受，而僅在 Shift+Enter 和 Tab 鍵上接受。先前，當您只想評估已在偵錯主控台輸入中輸入的內容時，很容易意外接受建議。

為了使 Tab 鍵更容易被發現為接受建議的方式，VS Code 現在在偵錯主控台輸入中具有提示狀態列（「插入 (Tab)」）。

Debug console input box showing a Status bar rendered in the bottom that says "Insert (Tab)"

擴充功能的貢獻

Jupyter 互動式視窗

我們已開始致力於在筆記本生態系統之上提供內建的互動式視窗體驗，並且 Jupyter 擴充功能已在設定 jupyter.enableNativeInteractiveWindow 後採用它。如果啟用此功能，則當從 Python 檔案執行程式碼或直接從命令面板啟動時，Jupyter 擴充功能將開啟內建編輯器而不是 webview 實作。內建編輯器適用於您的自訂按鍵繫結/按鍵對應或語言擴充功能，因為它與工作台深度整合。

Jupyter built-in interactive window demo

Jupyter 筆記本偵錯

我們一直在努力支援 Jupyter 筆記本中的偵錯，以便您可以在筆記本儲存格中設定中斷點、逐步執行儲存格，並使用所有其他 VS Code 偵錯工具功能。這是實驗性的，但您可以透過設定 "jupyter.experimental.debugging": true、在您選取的核心中安裝 ipykernel 版本 6，然後按一下筆記本工具列中的偵錯按鈕來試用它。

Jupyter debugging

遠端儲存庫

在此迭代中，我們主要專注於修正錯誤以及 遠端儲存庫 擴充功能的一些效能改進，以及與 GitHub Pull Requests and Issues 擴充功能更好的整合。此外，您現在可以從遠端瀏覽器中的遠端儲存庫視圖中移除遠端儲存庫，並且更好地支援使用行範圍開啟 \blob URL。

GitHub Pull Requests and Issues

GitHub Pull Requests and Issues 擴充功能在此迭代中的重點是修正錯誤。查看變更記錄以查看重點。

遠端開發

持續開發 遠端開發擴充功能，它可讓您使用容器、遠端機器或 適用於 Linux 的 Windows 子系統 (WSL) 作為全功能開發環境。

1.58 中的功能重點包括

  • 選擇僅針對轉發的連接埠開啟瀏覽器一次。
  • devcontainer.json 支援快取映像。
  • 開發容器現在檢查 "hostRequirements"。

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

即時預覽

我們開發了一個 即時預覽 擴充功能，該擴充功能託管用於網頁開發預覽的本機伺服器！🎉

它具有編輯器內瀏覽器預覽、即時預覽重新整理（在檔案變更或儲存時）、多根目錄支援等等！

Live Preview Quick Walkthrough

此擴充功能還具有 Live Preview 工作，該工作執行持續伺服器，並允許您檢視伺服器流量及其關聯的檔案。

Live Preview Tasks

若要了解更多關於它可以執行的操作，您可以在 Marketplace 中找到詳細資訊，或查看其儲存庫。

預覽功能

TypeScript 4.4 支援

此版本包含對即將發行的 TypeScript 4.4 版本的初始支援。您可以在 TypeScript 部落格上閱讀有關 TypeScript 4.4 中的新語言功能和改進的更多資訊。

若要開始使用 TypeScript 4.4 每晚組建，請安裝 TypeScript Nightly 擴充功能。

請分享您的意見反應，並告知我們您是否遇到任何 TypeScript 4.4 的錯誤。

在視窗之間移動終端機

現在可以透過在一個視窗中使用終端機：卸離工作階段卸離終端機，並在另一個視窗中使用終端機：附加到工作階段附加終端機，在視窗之間移動終端機。在未來，這應該有助於啟用跨視窗拖放！

擴充功能撰寫

詳細的完成項目標籤

我們新增了新的 API，用於更詳細和結構化的完成項目標籤。您現在可以使用 vscode.CompletionItemLabel 類型作為項目的標籤，它允許您指定標籤、詳細資訊和描述。

這些新屬性允許語言擴充功能顯示簽名或限定詞，但其他完成提供者也可以使用它。例如，GitHub Pull Request and Issues 擴充功能現在會顯示別名旁邊的完整名稱。

Completion for Github aliases with full names

模態訊息的詳細資訊

用於顯示模態資訊、警告和錯誤訊息的 API 現在支援提供詳細資訊。詳細資訊文字呈現在實際訊息下方，且不那麼醒目。

A modal dialog with details

上面的對話方塊是使用以下程式碼片段產生的。請注意，詳細資訊文字僅支援模態訊息 (modal: true)。

vscode.window.showInformationMessage('This is the message', {
  modal: true,
  detail:
    'This is the detail. Rendered less prominent, but with more space for, well, details.'
});

貢獻終端機設定檔

現在可以由擴充功能貢獻終端機設定檔，它們將顯示在設定檔選擇器中

A contributed profile will show up along side detected and configured terminal profiles

若要貢獻終端機設定檔，您需要執行三件事

首先，將貢獻新增至您的 package.json

"contributes": {
  "terminal": {
    "profiles": [
      {
        "title": "Custom Profile",
        "id": "custom_profile"
      }
    ]
  },
}

接下來，新增啟用事件，以便在使用者請求設定檔時啟用擴充功能

"activationEvents": [
  "onTerminalProfile:custom_profile"
]

最後，註冊終端機設定檔提供者，該提供者將傳回用於建立終端機的選項集。選項可以是標準的基於程序的 TerminalOptions 或自訂的 ExtensionTerminalOptions

vscode.window.registerTerminalProfileProvider('custom_profile', {
  provideTerminalProfile() {
    return {
      options: {
        name: 'Profile from extension',
        shellPath: 'cmd.exe'
      }
    };
  }
});

變更基於 ExtensionTerminalOptions 的終端機名稱

新的 Pseudoterminal.onDidChangeName 事件允許變更使用 ExtensionTerminalOptions 建立的終端機的名稱。

const writeEmitter = new vscode.EventEmitter<string>();
const nameEmitter = new vscode.EventEmitter<string>();
const pty = {
  onDidWrite: writeEmitter.event,
  onDidChangeName: nameEmitter.event,
  open: () => writeEmitter.fire('Press and key to set the terminal title'),
  close: () => {
    /* noop*/
  },
  handleInput: (data: string) => {
    writeEmitter.fire(`Set title to "${data}"`);
    nameEmitter.fire(data);
  }
};
const terminal = (<any>vscode.window).createTerminal({ name: `My Extension REPL`, pty });
terminal.show();

設定透過擴充功能 API 建立的終端機的圖示

window.createTerminal 現在接受 iconPath，將圖示與其索引標籤中的終端機關聯。

const term = vscode.window.createTerminal({
  name: `Serve`,
  iconPath: new vscode.ThemeIcon('server-process')
});
term.show();

The iconPath will show up next to the terminal's name

列舉已儲存的 Memento 金鑰

有一個新的 Memento.keys() API 來列舉已儲存的 Memento 金鑰集。此 API 可以更輕鬆地處理先前儲存的資料，如果您需要移轉儲存的資料，則很有幫助。

語言伺服器協定

新版本的語言伺服器協定以及對應的 npm 模組已發布。該版本包含 診斷提取模型規格的最終提案。

偵錯配接器協定

「記憶體寫入」請求和「記憶體已變更」事件的進度

我們計劃在未來版本的 VS Code 偵錯體驗中整合記憶體檢視器。為了獲得此支援，偵錯配接器協定中已存在 ReadMemory 請求一段時間。我們現在正在開發對應的 WriteMemory 請求和 Memory 事件。WriteMemory 請求有一個 最終提案，將在下一個里程碑中新增至 DAP。Memory 事件提案仍在 討論中。如果您是偵錯擴充功能作者，並且對這些 DAP 協定新增功能感興趣，我們將感謝您的意見反應。

建議的擴充功能 API

每個里程碑都帶有新的建議 API，擴充功能作者可以試用它們。與往常一樣，我們希望收到您的意見反應。這是您試用建議 API 必須執行的操作

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

您無法發布使用建議 API 的擴充功能。下一個版本中可能會出現重大變更，我們絕不希望破壞現有的擴充功能。

豐富的狀態列懸停

有一個新的建議 API，用於支援狀態列項目上的豐富懸停。若要試用它，請在 StatusBarItem.tooltip2 中提供 MarkdownString。

Rich Status bar hover

  • 如果 MarkdownString.supportThemeIcons 為 true，您可以使用帶有 $(iconName) 語法的圖示。
  • 如果 MarkdownString 是受信任的，您也可以新增命令連結。語法：([test](command:vscode.newWindow))

測試

最終確定測試 API 的進程仍在繼續。在此迭代中，我們重構了一些測試 API，以更好地符合擴充功能主機中其他 API 的樣式。若要追蹤最終確定過程並了解 API 的變更，請追蹤 問題 #122208。

我們預見的主要變更是「執行組態」的提供方式。若要追蹤或權衡這些執行器 API 的進度，請追蹤 問題 #127096。

最後，我們開始調查和初始實作 測試涵蓋率，這將在未來幾週內在 UI 中接收表面區域。

行內建議

行內建議 API 允許擴充功能提供與建議小工具分離的行內建議。行內建議的呈現方式如同已接受，但為灰色。使用者可以循環瀏覽建議並使用 Tab 鍵接受它們。

vscode.languages.registerInlineCompletionItemProvider(
  { pattern: '**' },
  {
    provideInlineCompletionItems: async (document, position) => {
      return [{ text: '< 2) {\n\treturn 1;\n\t}' }];
    }
  }
);

Inline suggestions in the editor

工程

ES2020

我們已更新我們的 TypeScript 專案，以允許使用最新的 JavaScript API，例如 Promise.allSettled 或 String.replaceAll。我們也輸出了更現代的 JavaScript ES2020，這稍微縮小了我們主要捆綁包的整體大小。

Electron 沙箱支援進度

在此里程碑中，我們繼續使 VS Code 視窗準備好啟用 Electron 的 沙箱 和 內容隔離 功能。

具體而言

  • 我們移除了 Node.js 依賴性，以便載入一般開啟 VS Code 視窗所需的資源。
  • 我們在 iframe 元素中新增了搜尋功能，以使行為更接近已棄用的 webview 元件，從而允許我們在未來捨棄 webview。可以透過在 settings.json 檔案中設定 "webview.experimental.useIframes": true 來啟用此功能。

文件

資料科學教學課程和主題

資料科學教學課程和主題現在位於 https://vscode.dev.org.tw 目錄中的自己區段下。您可以找到有關使用 Jupyter Notebooks、Python 互動式視窗的教學課程，甚至還有分析鐵達尼號乘客資料的 資料科學教學課程。

Data Science table of contents on code.visualstudio.com

值得注意的修正

  • 120956：iPad：無法在編輯器外部觸發內容選單
  • 122448：如果擴充功能的依賴項已停用，則自動停用擴充功能
  • 124169：嘗試不要縮排活動偵錯行
  • 125144：當執行緒不再停止時，焦點不會自動傳遞到另一個執行緒
  • 125528：在不再停止在中斷點檢視中取消選取中斷點
  • 126211：透過偵錯工具啟動的節點進程在退出 VS Code 時未被終止
  • 126702：macOS：命令列 code . 無法運作
  • 127716：偵錯懸停：允許鍵盤搜尋屬性

感謝您

最後但同樣重要的是，非常感謝以下在本月為 VS Code 做出貢獻的人們

對我們的問題追蹤的貢獻

對 vscode 的貢獻

對 vscode-extension-samples 的貢獻

對 vscode-html-languageservice 的貢獻

對 vscode-js-debug 的貢獻

對 vscode-languageserver-node 的貢獻

對 language-server-protocol 的貢獻

對 monaco-editor 的貢獻

對 monaco-languages 的貢獻

對 monaco-typescript 的貢獻