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

2022 年 5 月(版本 1.68)

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

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


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

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

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

工作臺

配置顯示語言改進

配置顯示語言命令已更新,包括

  • 該語言的名稱以該語言顯示。
  • 一個可用語言部分,顯示機器上未安裝的語言,選擇其中一個將自動安裝並應用該語言。

Configure Display Language dropdown with installed and available Language Packs in their language

主題:Panda Theme

這應該有助於發現可用的語言包。請告訴我們您的想法!

“問題”面板表格檢視

在此里程碑中,我們增加了一項新功能,允許使用者在“問題”面板的檢視模式(樹和表格之間)之間切換。與樹檢視相比,表格顯示了每個問題的來源(語言服務或擴充套件),這允許使用者按來源篩選問題。

Problems panel table view

主題:GitHub Dark Dimmed Theme

您可以使用“問題”面板右上角的以表格形式檢視/以樹形式檢視按鈕切換檢視 UI,或使用問題:預設檢視模式設定 (problems.defaultViewMode) 更改預設檢視模式。

Problems panel View at Table button

已棄用的擴充套件

在此里程碑中,我們增加了對 VS Code 中已棄用擴充套件的支援。一個擴充套件可以簡單地被棄用,或者被棄用以支援另一個擴充套件,或者當它的功能內建到 VS Code 中時。VS Code 將在“擴充套件”檢視中將擴充套件顯示為已棄用,如下所示。

一個不再維護的已棄用擴充套件。

Deprecated extension with no maintenance

一個被棄用以支援另一個擴充套件的擴充套件。在這種情況下,VS Code 不允許使用者安裝此擴充套件。

Deprecated extension with alternative

一個已棄用擴充套件,其功能內建到 VS Code 中,可以透過配置設定啟用。

Deprecated extension with builtin to VS Code

VS Code 不會自動遷移或解除安裝已棄用擴充套件。會有一個遷移按鈕來指導您切換到推薦的擴充套件。

Migrate deprecated extension

主題:GitHub Dark Dimmed Theme

注意:已棄用擴充套件列表由 VS Code 維護。如果您認為某個擴充套件應該被棄用,請透過在此討論中評論與我們聯絡。

贊助擴充套件

VS Code 現在允許使用者贊助他們最喜歡的擴充套件。當一個擴充套件可以被贊助時,VS Code 將在“擴充套件”檢視“詳細資訊”頁面中顯示一個贊助按鈕,如下所示

Sponsor extension button on Extensions view Details page

主題:GitHub Dark Dimmed Theme

贊助按鈕將引導您訪問擴充套件的贊助 URL,您可以在其中提供支援。請參閱擴充套件贊助以瞭解如何為您的擴充套件選擇啟用此功能。

使用 .gitignore 隱藏資源管理器中的檔案

“檔案資源管理器”現在支援解析和隱藏被 .gitignore 檔案排除的檔案。這可以透過資源管理器:排除 Git Ignore (explorer.excludeGitIgnore) 設定啟用。此設定與 files.exclude 一起使用,以從資源管理器中隱藏不需要的檔案。

注意:目前,諸如 !package.json 之類的否定 glob 無法解析。

鎖定懸停位置

由於存在其他 UI 元素(例如捲軸),某些自定義懸停很難或無法用滑鼠懸停。當懸停處於活動狀態時按住 Alt 鍵將“鎖定”它,使其具有更寬的邊框,並防止滑鼠在懸停外部移動時隱藏它。這主要是一個輔助功能,用於使懸停與螢幕放大器配合良好,但對於從懸停中複製文字也很有用。請注意,此功能僅適用於編輯器外部,因為編輯器懸停始終可以透過滑鼠懸停,除非透過 editor.hover.sticky 設定另行指定。

設定編輯器改進

設定編輯器現在顯示語言特定設定的預設值覆蓋指示器。您可以透過在設定編輯器搜尋欄中新增語言篩選器來檢視語言特定設定,方法是顯式鍵入它 (@lang:javascript),或單擊搜尋欄右側的篩選器按鈕,然後選擇語言選項。

當預設值覆蓋指示器出現時,它表示語言特定設定的預設值已被擴充套件覆蓋。指示器還指示哪個擴充套件覆蓋了預設值。

主題:Light Pink

此迭代還修復了一個行為,即當設定編輯器搜尋欄中已有搜尋查詢時,設定編輯器中的某些連結無法正確重定向。這些連結現在也具有適當的樣式,以便在滑鼠懸停在它們上面時更清晰。

<video src="/assets/updates/1_68/settings-editor-working-links.mp4" autoplay loop controls muted title="在設定編輯器中搜索單詞“font”,並在目錄中選擇終端類別後,會顯示設定 terminal.integrated.fontFamily,其描述包含指向 editor.fontFamily 設定的連結。單擊該連結現在會正確地將您帶到該設定。">

主題:Light Pink

評論小部件主要按鈕

評論小部件對第一個(最右側)操作使用主要按鈕顏色

Add Comment has the primary button color

終端

查詢匹配背景顏色

上一個版本在終端中查詢時實現了在所有匹配項周圍顯示邊框,但這只是一個臨時解決方案,直到可以動態更改單元格背景的支援成為可能。現在,對於主題,彩色背景是突出顯示匹配項的預設設定,整體體驗應類似於編輯器。

Find now uses the blue from the editor's find for the active match and the orange for highlights

如果您是採用了 terminal.findMatchBorderterminal.findMatchHighlightBorder 的主題作者,我們建議遷移到 terminal.findMatchBackgroundterminal.findMatchHighlightBackground,如果這更適合主題或有助於對比度。

對比度和最小對比度改進

查詢匹配背景工作為終端如何處理背景和前景顏色增加了更多靈活性。因此,終端中的對比度得到了改進,使終端視覺效果更接近編輯器。此外,現在還有最小對比度功能,可以動態更改文字的前景,以幫助提高可見性。

  • 如果未達到對比度,亮度現在將朝另一個方向發展。例如,如果深灰色文字在淺灰色背景上的對比度未達到純黑色 (#_000000) 的要求,則顏色也會嘗試朝白色移動,並使用最能滿足所需對比度值的值。

    Darker grey on lighter dark can now use a light foreground color if needed

  • 停用 GPU 加速時,選擇現在繪製在文字下方,並支援不透明顏色。以前,這必須是部分透明的,並且會沖淡前景顏色。由於此更改,選擇顏色現在使用與編輯器中相同的顏色。

    Foreground color are retained in selections

  • Nerd font 符號現在應應用最小對比度以與附近的文字融合,而 Powerline 符號和方框繪圖字元將應用最小對比度,因為它們通常鄰近沒有任何前景字元的反轉單元格。

    Powerlines no longer have odd colors between the colored sections

  • 主題現在可以指定一個固定的選擇前景顏色,預設用於高對比度主題。

    The dark high contrast theme now uses black as its selection foreground

  • 修復了幾個錯誤,以使生成的前景顏色更正確。

提醒一下,如果您更喜歡原始顏色,可以透過設定 "terminal.integrated.minimumContrastRatio": 1 來停用最小對比度。

任務

預設任務的 glob 模式

預設構建和測試任務現在可以設定為僅當活動檔案匹配檔名 glob 模式時才為“預設”

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo txt",
            "type": "shell",
            "command": "echo TextFile",
            "group": {
                "kind": "build",
                "isDefault": "**.txt" // This is a glob pattern which will only match when the active file has a .txt extension.
            }
        },
        {
            "label": "echo js",
            "type": "shell",
            "command": "echo JavascriptFile",
            "group": {
                "kind": "build",
                "isDefault": "**.js" // This is a glob pattern which will only match when the active file has a .js extension.
            },
        }
    ]
}

原始碼管理

Git 擴充套件有一些更新,與我們新的拉取請求流程保持一致。

Git:分支字首

為了使建立新分支的過程更順暢,有一個新設定 git.branchPrefix,它指定在建立新分支時用作字首的字串。

Git:分支名稱生成

一個新設定 git.branchRandomName.enable 將使 VS Code 在建立新分支時建議隨機分支名稱。隨機名稱是從詞典生成的,您可以透過 git.branchRandomName.dictionary 設定控制這些詞典。支援的詞典包括:adjectives(預設)、animals(預設)、colorsnumbers

Git:分支保護

使用新的 git.branchProtection 設定,您可以配置要保護的特定分支。VS Code 將避免直接在受保護的分支上提交,並將為您提供建立新分支以提交的機會。您可以使用 git.branchProtectionPrompt 設定微調此行為。

GitHub:拉取請求模板支援

GitHub 擴充套件現在理解拉取請求模板,並在從新派生的儲存庫建立 PR 時將其用作基礎。

Notebook

單元格顯示更改

我們調整了在幾種情況下如何顯示視口外的單元格。

當您單擊“大綱”檢視中的單元格時,如果該單元格在視口之外,筆記本現在將滾動以顯示該單元格在視口頂部 1/5 左右的位置。這與文字編輯器中“大綱”的行為匹配。

當游標在單元格編輯器中時,您可以將游標移過編輯器的第一行或最後一行,將其移到下一個單元格編輯器中。現在,當將游標移動到其單元格在視口之外的編輯器中時,筆記本將滾動足夠以顯示編輯器中的那一行,而不是跳轉到在視口中間顯示單元格。

查詢和替換支援從游標/選擇中播種查詢

筆記本編輯器中的“查詢”控制元件現在支援從編輯器選擇中播種搜尋字串。該行為由編輯器設定 editor.find.seedSearchStringFromSelection 控制。

除錯

執行和除錯而無需 launch.json

當您沒有設定 launch.json 配置檔案並按下 F5,或選擇“除錯”檢視中的執行和除錯按鈕時,VS Code 會根據當前活動檔案中的程式語言選擇偵錯程式。如果您沒有開啟檔案,系統將詢問您要使用哪個偵錯程式。這種體驗可能會有點令人困惑,所以我們做了一些改進。

Select debugger prompt before (alphabetical) and after (activated debugger at the top)

如果擴充套件在您嘗試開始除錯之前已經啟用,則該擴充套件的偵錯程式將排在最前面。這很有用,例如,當擴充套件是透過之前執行該擴充套件的命令、或開啟啟用該擴充套件的語言檔案、或透過您的工作區匹配的 workspaceContains 模式啟用時。如果您在此會話中使用了偵錯程式,它也會排在最前面。

Chrome/Edge 偵錯程式已重新命名為Web 應用 (Chrome)Web 應用 (Edge),以避免與其他偵錯程式(例如也在瀏覽器中執行應用的 Flutter 擴充套件)混淆。

語言

TypeScript 4.7

VS Code 現在捆綁了 TypeScript 4.7.3。這個主要的 TypeScript 版本帶來了新的語言功能,包括改進的控制流分析和對 Node.js 中 ECMAScript 模組支援的支援。它還包括新的工具功能並修復了許多重要錯誤!

轉到源定義

VS Code 最悠久、投票最多的功能請求之一是讓 VS Code 導航到外部庫中函式和符號的 JavaScript 實現。目前,轉到定義會跳轉到為目標函式或符號定義型別的型別定義檔案(.d.ts 檔案)。如果您需要檢查這些符號的型別或文件,這很有用,但會隱藏程式碼的實際實現。當前行為也讓許多 JavaScript 使用者感到困惑,他們可能不理解 .d.ts 中的 TypeScript 型別。

雖然將轉到定義更改為導航到符號的 JavaScript 實現聽起來很簡單,但這個功能請求開放了這麼長時間是有原因的。JavaScript(尤其是許多庫附帶的編譯後的 JavaScript)比 .d.ts 更難分析。嘗試分析 node_modules 下的所有 JavaScript 程式碼會很慢,並且還會顯著增加記憶體使用量。VS Code IntelliSense 引擎也無法理解許多 JavaScript 模式。

這就是新的轉到源定義命令的用武之地。當您從編輯器上下文選單或命令面板執行此命令時,TypeScript 將嘗試跟蹤符號的 JavaScript 實現並導航到它。這可能需要幾秒鐘,而且我們可能並不總是得到正確的結果,但在許多情況下它應該很有用。

我們正在積極努力改進此功能,因此請在您的程式碼庫中試用並分享您的反饋

物件方法片段

物件方法片段可幫助您快速將方法新增到實現給定介面的物件字面量中

在物件字面量內部時,您應該會看到每個可能方法的兩個建議:一個插入方法名稱,一個插入方法的完整簽名。您還可以透過設定 "typescript.suggest.classMemberSnippets.enabled": false"javascript.suggest.classMemberSnippets.enabled": false 來完全停用物件方法片段。

組感知組織匯入

JavaScript 和 TypeScript 的組織匯入命令可讓您快速清理匯入列表。執行時,它既刪除未使用的匯入,又按字母順序對匯入進行排序。

但是,有些程式碼庫希望對匯入的組織方式進行一定程度的手動控制。對外部匯入和內部匯入進行分組是最常見的示例之一

// local code
import * as bbb from './bbb';
import * as ccc from './ccc';
import * as aaa from './aaa';

// built-ins
import * as path from 'path';
import * as child_process from 'child_process';
import * as fs from 'fs';

// some code...

在舊版本的 VS Code 中,在這裡執行組織匯入會導致以下結果

// local code
import * as child_process from 'child_process';
import * as fs from 'fs';
// built-ins
import * as path from 'path';
import * as aaa from './aaa';
import * as bbb from './bbb';
import * as ccc from './ccc';

// some code...

哎呀!發生這種情況是因為所有匯入都按字母順序排序,並且 VS Code 甚至嘗試在排序時保留註釋和換行符。

但是,使用 TypeScript 4.7,組織匯入現在是組感知的。在上述程式碼上執行它看起來更像是您所期望的

// local code
import * as aaa from './aaa';
import * as bbb from './bbb';
import * as ccc from './ccc';

// built-ins
import * as child_process from 'child_process';
import * as fs from 'fs';
import * as path from 'path';

// some code...

請注意,匯入現在已排序,同時仍保留在其組中。好多了!

隱式專案中啟用嚴格的 null 檢查

預設情況下,在 JavaScript 和 TypeScript 的隱式專案中都啟用了嚴格的 null 檢查。這應該會帶來更準確的 IntelliSense 和改進的型別檢查,可以捕獲常見的程式設計錯誤。

A strict null error. getElementById may return null if no element with the ID exists

此新行為僅適用於不屬於 jsconfigtsconfig 專案的任何檔案。您可以透過設定:"js/ts.implicitProjectConfig.strictNullChecks": false 來停用它。對於屬於 jsconfigtsconfig 的檔案,您仍然需要在配置檔案中啟用嚴格的 null 檢查。

您現在可以在 Markdown 檔案中使用轉到定義處理引用連結。這將從引用跳轉到當前檔案中的連結定義。

擴充套件的 JSON Schema 支援

內建的 JSON 語言服務改進了對 JSON Schema Draft 2019-09JSON Schema Draft 2020-12 的支援。當使用此類模式時,不再顯示警告。

仍然有一些功能沒有完全支援。當模式使用它們時,會顯示警告。不支援的屬性是

  • 帶有 $id 的子模式
  • $recursiveRef/Anchor(草稿 2019-09)
  • $dynamicRef/Anchor(草稿 2020-12)

Web 版 VS Code

核心本地化支援

我們引入了 VS Code 網頁版的初始本地化支援。VS Code 在世界各地使用,對於許多使用者來說,英語不是他們的第一語言(或他們熟悉的語言!)。多年來,VS Code 使用者一直在安裝市場中的語言包,以便使用非英語語言的 VS Code。對於 VS Code 網頁版,我們決定採用一種不同的方法,一種更符合當今網路工作方式的方法。

對於將其瀏覽器設定為我們核心支援語言之一的使用者,vscode.dev 將自動應用該語言的翻譯。我們支援的語言記錄在 vscode-loc 儲存庫中。

例如,要在 Microsoft Edge 中配置顯示語言,您可以使用設定 > 語言

Microsoft Edge Settings Languages page

設定完成後,當您訪問 vscode.dev(或 insiders.vscode.dev)時,它將以德語顯示

vscode.dev in a browser displayed in German

主題:Panda Theme

在接下來的幾個月中,我們將為擴充套件啟用本地化(包括隨 VS Code 提供的擴充套件和不隨 VS Code 提供的擴充套件),以便擴充套件作者也可以支援非英語使用者。敬請期待!

遠端倉庫

使用遠端儲存庫 > 繼續處理... 命令在本地克隆 GitHub 或 Azure Repos 儲存庫並在桌面 VS Code 中開啟時,您現在可以配置 remoteHub.gitProtocol 以始終使用 httpssh URL 克隆。

開發容器規範

我們的 Microsoft 和 GitHub 開發容器團隊繼續積極開發新的 開發容器規範,本次迭代有幾個令人興奮的亮點。

參考實現

我們釋出了一個開源命令列介面 (CLI) 作為規範的參考實現。CLI 從 devcontainer.json 構建並啟動開發容器,它可以直接使用或整合到產品體驗中。

CLI 在新的 devcontainers/cli 儲存庫中可用。您可以在其 README 中瞭解如何開始使用,並在此部落格文章中閱讀更多內容。

CLI 正在積極開發中,並將繼續發展以更好地支援更多場景,例如對單個使用者的更大支援。我們很樂意在此過程中聽取您的反饋,因此我們專門針對 CLI 的反饋打開了一個問題,並歡迎在儲存庫中提出更多問題和 PR。

CI 中的開發容器

GitHub Action 和 Azure DevOps Task 可用於在持續整合 (CI) 構建中執行儲存庫的開發容器。這允許您重用用於本地開發的相同設定,以便在 CI 中構建和測試程式碼。有關詳細資訊,請參閱 devcontainers/ci README

GitHub Action 的使用示例

- name: Build and run dev container task
  uses: devcontainers/ci@v0.2
  with:
    imageName: ghcr.io/example/example-devcontainer
    runCmd: make ci-build

Azure DevOps Task 的使用示例

- task: DevcontainersCI@0
  inputs:
    imageName: 'yourregistry.azurecr.io/example-dev-container'
    runCmd: 'make ci-build'
    sourceBranchFilterForPush: refs/heads/main

規範

規範的積極開發仍在繼續,我們已在 devcontainers/spec 儲存庫中釋出了初始版本

與 CLI 一樣,請繼續關注未來的更新和進展,我們很樂意聽取您的反饋。

進一步閱讀

您可以在 https://containers.dev 上閱讀有關開發容器和規範的所有資訊。

對擴充套件的貢獻

Python

啟動時不發現直譯器

Python 擴充套件現在僅在以下情況下自動觸發發現

  • 使用Python: 選擇直譯器命令選擇不同的直譯器。
  • 特定範圍(工作區或全域性)首次開啟。
  • 未安裝 Python。

由於發現不會在啟動時自動觸發,因此這會導致即時載入,並加快語言伺服器等其他功能的啟動速度。但是,如果安裝/啟用了 Jupyter 擴充套件,Jupyter 仍會在啟動時觸發發現。

啟用本地化

Python 擴充套件現在支援 VS Code 支援的所有語言的翻譯。我們已更新了使用 vscode-nls 獲取命令、通知、標題等的翻譯的方式。這些翻譯由本地化團隊維護,以確保它們是最新的和正確的。

Jupyter

Web 擴充套件

我們在支援 Jupyter 擴充套件網頁版中的更多核心功能方面取得了進展。

本月以下功能已移植到網頁擴充套件

  • https 支援
  • 核心完成
  • ipywidgets
  • 筆記本除錯
  • 變數檢視
  • 匯出
  • 互動式視窗

如果您想體驗此功能,請在本地機器上啟動 Jupyter,命令如下:

jupyter notebook --no-browser --NotebookApp.allow_origin_pat=https://.*\.vscode-cdn\.net

然後從 vscode.dev 內部使用命令Jupyter: 指定用於連線的 Jupyter 伺服器連線到它。

有關更多資訊(和評論),請參閱此討論

遠端開發

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

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

GitHub 拉取請求和議題

GitHub 拉取請求和問題擴充套件取得了更多進展,該擴充套件允許您處理、建立和管理拉取請求和問題。此版本的亮點包括

  • 建立拉取請求檢視中自動合併複選框

檢視擴充套件 0.44.0 版本的更改日誌以檢視其他亮點。

遠端儲存庫擴充套件

GitHub RepositoriesAzure Repos 擴充套件都支援 VS Code 支援的所有語言的翻譯。

預覽功能

在使用 Markdown 時,很容易錯誤地新增無效的檔案連結或影像引用。也許您忘記了檔名使用的是 -(破折號)而不是 _(下劃線),或者您連結到的檔案被移動到了不同的目錄。通常,您只有在檢視 Markdown 預覽甚至釋出後才會發現這些錯誤。VS Code 的新實驗性 Markdown 連結驗證可以幫助捕獲這些錯誤。

透過連結驗證,VS Code 將分析 Markdown 連結到標題、影像和其他本地檔案。無效連結將報告為警告或錯誤。

A warning shown in the editor when linking to a file that does not exist

VS Code 甚至可以捕獲指向其他 Markdown 檔案中特定標題的無效連結!

預設情況下,連結驗證處於關閉狀態。您可以透過設定 "markdown.experimental.validate.enabled": true 來試用連結驗證。

您可以使用以下幾個設定來自定義連結驗證:

  • markdown.experimental.validate.fileLinks.enabled - 啟用/停用對本地檔案連結的驗證:[link](/path/to/file.md)

  • markdown.experimental.validate.headerLinks.enabled - 啟用/停用對當前檔案中標題連結的驗證:[link](#_some-header)

  • markdown.experimental.validate.referenceLinks.enabled - 啟用/停用對引用連結的驗證:[link][ref]

  • markdown.experimental.validate.ignoreLinks - 跳過驗證的連結列表。如果您連結到磁碟上不存在但一旦釋出 Markdown 就存在的檔案,這將很有用。

讓我們知道您對新功能的看法!

我們添加了對貼上以插入 Markdown 中的影像或檔案連結的實驗性支援。

這需要同時啟用 markdown.experimental.editor.pasteLinks.enabled"editor.experimental.pasteActions.enabled"。您目前可以從 VS Code 檔案資源管理器中複製檔案。貼上影像檔案會插入影像引用,而貼上普通文字檔案會插入指向這些檔案的連結。

終端 Shell 整合

Shell 整合(透過 terminal.integrated.shellIntegration.enabled 設定啟用)和命令裝飾在此迭代中得到了完善和改進。

一些更新包括

  • 146377 保持 shell 狀態,以便 bash-git-prompt 和其他程式正常工作
  • 148635 允許使用自定義的 ZDOTDIR 用於 zsh
  • 145801 修復在較慢機器上裝飾不同步的問題
  • 146873 改進對 bash 中現有除錯陷阱的處理
  • 148839 完善帶有這是如何工作的?命令的訊息傳遞以及選項卡懸停中的啟用狀態
  • 151223 清除緩衝區後,確保正確跟蹤命令

Windows 上的視窗控制元件疊加

我們採用了 Electron 提供的 API 來支援 Windows 上的 視窗控制元件疊加。此更改的主要面向使用者的優勢是訪問 Windows 11 中的 Snap Layouts 功能。由於一些持續存在的問題,預設情況下視窗控制元件疊加處於關閉狀態,但您可以透過實驗性設定 window.experimental.windowControlsOverlay.enabled 將其開啟。

Hover over the maximize/restore window control to see Windows 11 Snap layouts

命令中心

我們正在新增命令中心 - 一種觸發檔案、命令等快速選擇的更簡單方法。

Command Center in the VS Code title bar

這可以透過 window.experimental.commandCenter 設定啟用,並讓我們知道您的想法。

合併編輯器

我們已經開始著手改進合併體驗。它仍處於早期階段,我們尚未準備好接受反饋,但您可以透過 git.experimental.mergeEditor 試用。啟用此功能後,具有合併衝突的檔案將在新的合併編輯器中開啟,以使解決衝突更簡單。

我們將繼續努力。使用Insiders來關注我們的進展。我們要衷心感謝 Mingpan 和我們在 Google 的朋友,他們正在幫助我們完成這項工作。❤️

擴充套件創作

內聯完成定稿

我們已經最終確定了內聯完成 API。這允許擴充套件提供與建議小部件分離的內聯完成。內聯完成呈現為好像它已經被接受了一樣,但顏色為灰色。使用者可以迴圈瀏覽建議並使用 Tab 鍵接受它們。使用內聯完成的示例擴充套件是 GitHub Copilot。可以在 vscode.d.ts 檔案中找到更多資訊,API 的入口點是 languages.registerInlineCompletionItemProvider

InputBox 驗證訊息嚴重性定稿

我們的 InputBox API(透過 window.showInputBoxwindow.createInputBox)來在使用者輸入驗證中提供嚴重性已最終確定。

例如,如果您想根據使用者的輸入向用戶顯示一條資訊訊息,您的驗證訊息可以返回

{
  message: 'this is an info message';
  severity: InputBoxValidationSeverity.Info;
}

它看起來像這樣

Input box with 'this is an info message' severity message

筆記本編輯器 API

新的筆記本編輯器 API 引入了一個新的 NotebookEditor 型別,它類似於 TextEditor,但用於筆記本而不是普通文字編輯器。

const editor = vscode.window.activeNotebookEditor;
if (editor) {
  // Access the underlying notebook document associated with the editor
  console.log(editor.notebook.uri);

  // Change the selection in the current notebook
  editor.selection = new vscode.NotebookRange(1, 3);
}

您可以使用 window.activeNotebookEditor 獲取當前筆記本編輯器,並使用 window.onDidChangeActiveNotebookEditor 等事件來觀察使用者何時切換到新的筆記本編輯器。

基於“時間線”檢視的擴充套件啟用

當“時間線”檢視可見時,已新增新的啟用事件。此事件 onView:timeline 可用於任何擴充套件,但對實現擬議的 Timeline API 的擴充套件最有用。

使用者體驗指南

UX 指南已更新和擴充套件,涵蓋更多 VS Code 使用者介面元素。

UX Guideline example image pointing to View Actions elements

修訂後的概述頁面逐步介紹了 VS Code UI,提供了介面和常見 UI 元素的視覺導覽。

指向相關指南、API 參考和擴充套件示例的連結已新增到每個區域的專用頁面。此外,指南中的所有示例影像都已更新,以展示 UI 的最新版本。

您現在可以閱讀有關新增或貢獻這些 UI 元素的擴充套件的推薦“應做”和“不應做”事項

擴充套件贊助

在此里程碑中,我們在擴充套件的 package.json 中引入了一個 sponsor 欄位,允許擴充套件選擇啟用贊助。sponsor 物件有一個 url 欄位,用於擴充套件作者的贊助連結。例如

"sponsor": {
    "url": "https://github.com/sponsors/nvaccess"
}

如果擴充套件選擇啟用此功能,VS Code 將在“擴充套件”檢視“詳細資訊”頁面中顯示一個贊助按鈕,如上面的贊助擴充套件部分所示。

注意:確保使用最新的 vsce 命令列工具 (>=2.9.1) 釋出啟用贊助的擴充套件。

提議的 API

每個里程碑都會帶來新的提議 API,擴充套件作者可以嘗試這些 API。一如既往,我們希望得到您的反饋。以下是嘗試提議 API 的步驟

  1. 查詢您要嘗試的提議並將其名稱新增到 package.json#enabledApiProposals
  2. 使用最新的vscode-dts並執行vscode-dts dev。它會將相應的d.ts檔案下載到您的工作區中。
  3. 您現在可以根據該提議進行程式設計。

您不能釋出使用提議 API 的擴充套件。下個版本中可能會有破壞性更改,我們絕不希望破壞現有擴充套件。

從 DataTransfer 讀取檔案

新的 dataTransferFiles API 提案允許擴充套件從 vscode.DataTransfer 物件讀取檔案。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');
     }

    ...
  }
}

檔案資料傳輸專案前僅在它們來自 VS Code 外部時新增到 DataTransfer 中(例如,當您從桌面拖放到樹檢視或編輯器中時)。

複製貼上 API

新的 documentPaste 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,
    _range: vscode.Range,
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): void | Thenable<void> {
    dataTransfer.set(this.countMimeTypes, new vscode.DataTransferItem(this.count++));
  }

  async provideDocumentPasteEdits(
    _document: vscode.TextDocument,
    range: vscode.Range,
    dataTransfer: vscode.DataTransfer,
    token: vscode.CancellationToken
  ) {
    const countDataTransferItem = dataTransfer.get(this.countMimeTypes);
    if (!countDataTransferItem) {
      return undefined;
    }

    const textDataTransferItem = dataTransfer.get('text/plain') ?? dataTransfer.get('text');
    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 new vscode.SnippetTextEdit(range, snippet);
  }
}

vscode.languages.registerDocumentPasteEditProvider(
  { language: 'markdown' },
  new CopyCountPasteEditProvider()
);

新的筆記本工作區編輯提案

新的 notebookWorkspaceEdit API 提案允許擴充套件編輯筆記本的內容。它取代了以前的 notebookEditorEdit 提案。

使用此提案,您可以建立工作區編輯,以在筆記本中插入、替換或修改單元格

const currentNotebook = vscode.window.activeNotebookEditor?.notebook;
if (currentNotebook) {
  const edit = new vscode.WorkspaceEdit();

  edit.set(
    currentNotebook.uri,
    vscode.NotebookEdit.insertCells(/* index*/ 1, [
      // ... new notebook cell data
    ])
  );

  await vscode.workspace.applyEdit(edit);
}

工程

使用拉取請求

我們已不再直接將更改推送到 vscode 儲存庫 main 分支,現在僅使用拉取請求 (PR) 將所有更改推送到 VS Code。我們要求每個 PR 至少獲得另一位團隊成員的一次批准。利用這一點,我們現在還要求在合併 PR 之前透過一些基本檢查。這些任務包括 TypeScript 編譯、格式化規則、單元測試和整合測試,通常不超過 10 分鐘。切換到此流程減少了由於程式設計錯誤導致 Insiders 構建中斷的次數。

VS Code OSS 構建

我們有一個新的公共 Code OSS 構建,它重用了與我們的生產構建相同的構建定義。此構建現在在每個 PR 上執行不到 30 分鐘,我們計劃繼續投入以加快速度。

文件

更新的版本控制影片

使用 Visual Studio 的 Git 介紹影片已重新制作,可幫助您開始使用 VS Code 中內建的 Git 整合。

您還可以在 VS Code YouTube 頻道上找到其他精彩影片。

code.visualstudio.com 上的 vscode.dev

想使用 VS Code 網頁版但忘記了 URL?vscode.dev 現在在 VS Code 下載頁面上突出顯示,因此您可以快速啟動在瀏覽器中執行的 VS Code。

vscode.dev on the code.visualstudio.com download page

值得注意的修復

  • 141157 在非除錯模式下單擊 F11 會開啟除錯而不是全屏
  • 148864 TypeScript 檔案的未繫結斷點
  • 149638 惰性變數求值按鈕導致節點之間出現有問題的間隙和未對齊

感謝

最後但同樣重要的是,向 VS Code 的貢獻者們致以衷心的感謝

Web 擴充套件

擴充套件作者(2022 年 5 月 2 日至 6 月 6 日期間)啟用了作為網頁擴充套件執行的程式碼的擴充套件

問題跟蹤

對我們問題跟蹤的貢獻

拉取請求

vscode 的貢獻

vscode-extension-samples 的貢獻

vscode-generator-code 的貢獻

vscode-html-languageservice 的貢獻

vscode-js-debug 的貢獻

vscode-languageserver-node 的貢獻

vscode-pull-request-github 的貢獻

  • @jpspringall: Issue #3371 | Updated getAuthSessionOptions in case of GitHub Enterprise AuthProvider PR #3565

debug-adapter-protocol 的貢獻

language-server-protocol 的貢獻

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