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

2021 年 6 月 (版本 1.58)

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

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

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

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

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

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

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

工作臺

工作區信任

工作區信任功能是 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 檔案中新增 transient 屬性並將其設定為 true 來指定瞬態工作區

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

設定同步

現在有一個用於設定同步的故障排除檢視，其中包含所有日誌和上次同步狀態。你可以透過執行命令設定同步：顯示同步資料並開啟檢視子選單並選中故障排除來訪問此檢視

Settings Sync Troubleshoot command in the Settings Sync view menu

主題：GitHub Light Theme

搜尋最大結果設定

有一個新設定 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.rendererType 設定替換為更簡單的 terminal.integrated.gpuAcceleration。不幸的是，有些機器在使用 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 採用了它。如果該功能啟用，Jupyter 擴充套件將在從 Python 檔案執行程式碼或直接從命令面板啟動時開啟內建編輯器而不是 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 拉取請求和議題

此迭代中 GitHub Pull Requests and Issues 擴充套件的重點是修復錯誤。檢視更新日誌以檢視亮點。

遠端開發

遠端開發擴充套件的工作仍在繼續，它允許您使用容器、遠端機器或 適用於 Linux 的 Windows 子系統 (WSL) 作為功能齊全的開發環境。

1.58 中的功能亮點包括

  • 僅為轉發埠開啟一次瀏覽器的選項。
  • devcontainer.json 對快取映像的支援。
  • 開發容器現在檢查“hostRequirements”。

你可以在遠端開發發行說明中瞭解新的擴充套件功能和錯誤修復。

即時預覽

我們開發了一個 Live Preview 擴充套件，它託管一個本地伺服器用於 Web 開發預覽！🎉

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

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.com.tw 目錄中擁有自己的部分。你可以找到關於使用 Jupyter 筆記本、Python 互動式視窗，甚至一個分析泰坦尼克號乘客資料的資料科學教程。

Data Science table of contents on code.visualstudio.com

值得注意的修復

  • 120956：iPad：無法在編輯器外部觸發上下文選單
  • 122448：如果擴充套件的依賴項被停用，則自動停用擴充套件
  • 124169：嘗試不縮排活動除錯行
  • 125144：當執行緒不再停止時，焦點不會自動傳遞給另一個執行緒
  • 125528：當不再停止斷點時，在斷點檢視中取消選擇斷點
  • 126211：退出 VS Code 時，透過偵錯程式啟動的 Node 程序不會被終止
  • 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 的貢獻