试试 VS Code 中的

2022 年 9 月 (版本 1.72)

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

更新 1.72.1:此更新解决了这些安全问题

更新 1.72.2:此更新解决了这些问题


欢迎使用 2022 年 9 月发布的 Visual Studio Code。此版本中包含许多我们希望您会喜欢的更新,其中一些主要亮点包括:

如果您想在线阅读这些发行说明,请访问 code.visualstudio.com 上的更新

Insiders:想尽快试用新功能?您可以下载每晚的 Insiders 构建版本,并在最新更新可用后立即尝试。

工作台

从工具栏隐藏操作

您现在可以从工具栏隐藏操作。右键单击工具栏中的任何操作,然后选择其隐藏命令或任何切换命令。隐藏的操作会移动到 ... 更多操作菜单中,并可以从那里调用。要恢复菜单,请右键单击工具栏按钮区域并选择重置菜单命令。要恢复所有菜单,请从命令面板运行重置所有菜单⇧⌘P (Windows, Linux Ctrl+Shift+P))。

在下面的视频中,GitLens 扩展的文件注释菜单从编辑器工具栏中隐藏,然后通过重置菜单恢复。

合并编辑器

选择使用三向合并编辑器

在审查了我们收到的所有合并编辑器反馈并整体思考了体验之后,我们决定在检测到冲突时默认不显示三向合并编辑器(现在 git.mergeEditor 设置为 false)。做出此决定的原因可在问题 #160806 中找到。

对于有冲突的文件,用户现在可以选择在合并编辑器中解决来打开三向合并编辑器

A screenshot of a file with conflicts, showing the "Resolve in Merge Editor" button

CodeLens UI

用户反馈表明复选框存在一些 UX 问题。复选框不太容易被发现,并且由于无法正确表示所有可能的状态而导致混淆。在此次迭代中,我们切换到使用文本标签(接受传入接受当前接受两者)的 CodeLens UI。

Merge editor before with checkboxes and after with CodeLens

我们将继续迭代此设计并密切监控我们收到的所有反馈。

结果文件从头开始重新计算

在上次迭代中,我们尝试将合并编辑器设计为冲突文件的替代视图。它不显示冲突标记,而是通过单独的编辑器窗格显示冲突的详细信息。此设计有一个优点,即打开合并编辑器不会修改磁盘上的文件,并且在打开合并编辑器之前所做的用户更改可以保留。不幸的是,这不仅令人困惑,而且并非在所有情况下都有效,因为我们的合并算法和 Git 合并算法无法完美对齐。

在此版本中,如果合并编辑器中打开了带有冲突标记的文件,作为第一步,我们将使用我们的合并算法重新计算结果文件,而不会插入任何冲突标记。单边冲突会自动解决,而真正的冲突会重置为两个版本的共同祖先,并标记为未处理

基础视图

合并编辑器现在有一个单独的基础视图,可用于将任何一侧与共同祖先进行比较。

树状视图查找控件改进

您现在可以垂直移动树状视图查找控件,以便访问其后面的 UI 元素。在树状视图内按 ⌥⌘F (Windows, Linux Ctrl+Alt+F) 以显示查找控件。

Tree view Find control supports vertical movement

此外,树状视图查找控件将在重新打开时记住上次的搜索词。

Tree view Find control remembers last search text

某些音频和视频文件的内置预览

VS Code 现在支持预览某些音频和视频文件格式

Previewing an MP4 video in VS Code

目前支持以下音频格式:

  • WAV
  • MP3
  • Ogg
  • FLAC

并且可以预览以下视频格式:

  • H.264
  • VP8

对于视频文件,请记住视频和音频轨道的媒体格式都必须受支持。例如,许多 .mp4 文件使用 H.264 作为视频,AAC 作为音频。VS Code 将能够播放 .mp4 的视频部分,但由于不支持 AAC 音频,因此不会有声音。您需要为音频轨道使用 MP3。

禁用增量命名

您现在可以使用 explorer.incrementalNaming 设置的新值 disabled 在文件资源管理器中禁用增量文件命名。此值会禁用文件资源管理器中粘贴时更改文件名的逻辑。如果文件名已存在,系统将提示您覆盖现有文件,类似于大多数原生资源管理器。

在 VS Code 应用程序文件夹内编辑时的警告

在 VS Code 应用程序文件夹内编辑文件时,编辑器中现在会显示警告。意外修改应用程序文件夹中的文件是一个常见的错误,通常不是用户有意为之。

VS Code warns when editing its application folder files

编辑器

改进的自动滚动行为

以前,选择并拖动时,编辑器的滚动方式取决于显示器的帧率 (FPS),有时鼠标一到编辑器边缘,编辑器就会快速滚动。现在,当鼠标靠近边缘时,编辑器以约每秒一个视口的可管理速度自动滚动,当鼠标远离编辑器时,速度会更快,且与 FPS 无关。

在下面的视频中,当鼠标光标向下远离编辑器时,滚动速度会增加。

改进的悬停

编辑器悬停以前在隐藏自身方面非常激进,尤其是在鼠标经过编辑器的空白区域时。这使得很难触及悬停中显示的一些操作。现在,只要鼠标向其移动,悬停就会保持可见。设置 "editor.hover.sticky": false 将恢复到以前的行为。

在右侧的“之后”视频中,从悬停中选择快速修复要容易得多

新的 Code Action 组

Code Action 控件中新增了两个组:InlineMove

这些组对应于 refactor.inlinerefactor.move Code Action 类型。

新的 Code Action 颜色

您可能注意到,此次迭代中,Code Action 控件的外观也有点不同。样式已更新为使用更合适的主题颜色。最大的变化是控件主体现在使用 editorWidget.* 颜色而不是 menu.*

我们仍在优化这些颜色,因此如果它们与给定主题不兼容或缺少任何颜色自定义选项,请告诉我们。

扩展

最近更新的扩展

VS Code 现在在“扩展”视图的更新部分中的最近更新部分显示过去 7 天内更新的扩展。

Recently Updated section in the Extensions view

需要关注的扩展

VS Code 现在将需要关注的扩展排序到“扩展”视图的默认已安装部分顶部。这包括有待更新或已更新或已禁用且需要重新加载 VS Code 的扩展。

Extensions requiring attention are displayed at the top of the Extensions view

活动栏中扩展图标上的徽章现在显示需要关注的扩展数量。

Extensions badge showing that four extensions require attention

忽略扩展更新

您现在可以通过单击更新下拉菜单中的忽略更新按钮来忽略扩展更新。这将从需要关注的扩展列表中删除该扩展。

Ignore Updates option in Extensions view context menu

您可以通过取消选中相同的忽略更新按钮来撤消此操作。

Checked Ignore Updates option in Extensions view context menu

请注意,安装特定版本的扩展(通过安装其他版本)也将忽略该扩展的更新。

已安装扩展的排序

您现在可以按安装次数评分名称发布日期更新日期对已安装扩展列表进行排序。

Extensions view Sort By menu options

结果显示为树状视图

您现在可以在树状视图中查看搜索结果!只需单击搜索视图右上角的列表/树图标,即可在列表和树状视图之间切换。

Search results shown as a tree view

主题:Night Owl Light(在vscode.dev 上预览)

文件装饰设置

在搜索结果中,反映文件状态的文件名徽章和颜色现在可以打开和关闭。设置是搜索 > 装饰:徽章 (search.decorations.badges) 和搜索 > 装饰:颜色 (search.decorations.colors)。

Search results file decoration settings

主题:Night Owl Light(在vscode.dev 上预览)

源代码管理

发现嵌套的 Git 仓库

为了解决一个长期存在的特性请求,在此里程碑中,我们对仓库发现进行了更改,以添加对嵌套 Git 仓库的支持。根据嵌套仓库的位置,您可能需要修改 git.repositoryScanMaxDepth 设置(默认值为 1 级)。

添加对带密码的 SSH 密钥的支持

当使用带密码的 SSH 密钥进行 Git 操作时,VS Code 现在将显示快速输入控件,以便您可以输入 SSH 密钥的密码。密码不会被缓存,并且每次执行 Git 操作时都必须输入。

签出前拉取

在此里程碑中,我们添加了一个新设置 git.pullBeforeCheckout,以简化切换分支的过程。当此设置启用时,如果不存在传出提交,我们将在签出分支之前从远程拉取并快进该分支。

仓库拉取改进

对于具有多个远程的 Git 仓库,调用 fetch 命令现在将显示一个包含所有远程列表的快速选择器。用户可以选择要拉取的特定远程或从所有远程拉取。

中止合并命令

新增了一个命令:Git: 中止合并,用于中止当前正在进行的合并操作。

终端

终端快速修复

我们正在推出一项由 shell 集成提供支持的新功能,称为快速修复。此功能支持音频提示。通过 audioCues.terminalQuickFix 启用它,以便在有可用修复时发出声音指示。

当一个命令映射到用户可能采取的一组操作时,快速修复可用,并且可以通过编辑器中使用的相同快捷键 Ctrl+.Cmd+. 激活。

以下是最初支持的快速修复:

Git 相似命令

当 Git 命令输入错误时,快速修复会建议相似的命令。

Run: git status is suggested after git sttatus is mistyped

Git 设置上游

当执行 git push 且没有上游远程时,快速修复会建议使用上游远程参数进行推送。

Run: git push set upstream is suggested

Git 创建 PR

当分支首次推送到远程时,快速修复会建议打开链接以创建 PR。

An open GitHub PR link action is offered

释放端口

当使用已在使用的端口启动服务器时,快速修复会提供一个操作来终止进程并释放端口。

A server launch fails with a port 3000 in use error. An action to free port 3000 is offered.

Shell 集成改进

对 shell 集成进行了以下改进:

  • 运行最近命令转到最近目录现在将清除有内容的行(或无法可靠确定的行)。
  • 移除了 bash 脚本对 $PREFIX 环境变量的使用,这可能与某些构建工具冲突。
  • 优化了 zsh 脚本,修复了围绕 $ZDOTDIR 的一些边缘情况。
  • 更好地处理多用户共享机器上的 zsh shell 集成。

现在支持终端中运行的应用程序发送的超链接。这些链接允许呈现一个指向 URL 的标签,并显示虚线下划线。

Hyperlinks appear in the terminal with dashed underlines, hovering the hyperlink reveals the URL

这是一个示例,说明如何编写一个标签为“VS Code”并指向 https://vscode.js.cn 的链接:

printf '\e]8;;https://vscode.js.cn\e\\VS Code\e]8;;\e\\'

或者更普遍地:

\x1b]8;; <URL> \x1b\ <Label> \x1b]8;;\x1b\'

VT 功能支持

此版本支持以下 VT 转义序列:

  • DECRQM:ANSI 和 DEC 私有模式报告 (CSI Ps $ p) - 此序列允许程序查询终端所处的各种模式,例如自动换行或括号粘贴模式。
  • DECSCA:保护属性 (CSI Ps " q) - 此属性确定 DECSEDDECSEL 是否可以擦除内容。

音频提示音

音频提示音现在在终端中起作用,可以通过 terminal.integrated.enableBell 启用。

终端文档

终端文档已重构并移至 VS Code 网站上自己的目录。

现在有以下特定主题:

  • 终端基础 - 快速了解 VS Code 集成终端。
  • 终端配置文件 - 了解如何通过配置文件自定义终端。
  • Shell 集成 - VS Code 可以提供命令状态、历史记录和快速导航等功能。
  • 外观 - 修改终端文本、光标样式和颜色。
  • 高级 - 对自定义快捷键和 Unicode、表情符号字符的高级支持。

希望您能够在需要时轻松找到正确的文档。

任务

固定运行任务条目

任务可以固定在任务:运行任务列表中,以便更快、更方便地访问。

Pinned items are the top category in the Run Task list

任务完成声音

任务完成后会播放声音,以实现多任务处理并提高可访问性。通过 audioCues.taskCompleted 设置配置音频提示。

语言

在使用 Markdown 时,很容易不小心添加无效的文件链接或图像引用。也许您忘记了文件名使用了 -(破折号)而不是 _(下划线),或者您链接的文件已移动到其他目录。通常,您只有在查看 Markdown 预览或发布后才能发现这些错误。VS Code 的新 Markdown 链接验证可以帮助捕获这些错误。

首先,设置 "markdown.validate.enabled": true。VS Code 现在将分析 Markdown 链接到标题、图像和其他本地文件。无效链接将报告为警告或错误。

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

VS Code 甚至可以捕获到其他 Markdown 文件中特定标题的无效链接!

您可以使用一些设置来自定义链接验证:

  • markdown.validate.fileLinks.enabled - 启用/禁用对本地文件链接的验证:[link](/path/to/file.md)
  • markdown.validate.fragmentLinks.enabled - 启用/禁用对当前文件中标题链接的验证:[link](#_some-header)
  • markdown.validate.fileLinks.markdownFragmentLinks - 启用/禁用对其他 Markdown 文件中标题链接的验证:[link](other-file.md#some-header)
  • markdown.validate.referenceLinks.enabled - 启用/禁用对引用链接的验证:[link][ref]
  • markdown.validate.ignoredLinks - 跳过验证的链接全局匹配列表。如果链接到的文件在磁盘上不存在但发布后存在,则此功能很有用。

试一试这个新功能,并告诉我们您的想法!

引用链接使您可以在 Markdown 源中多次使用相同的链接:

This [link][example-link] and [this link][example-link] both point to the same place!

[example-link]: http://example.com

这很方便,因为您只需更改文件中的一个位置即可更新所有链接。

新的提取为链接定义重构可帮助您将现有 Markdown 链接转换为链接定义和引用链接。此重构将转换当前文档中链接的所有出现。例如,对于 Markdown 文档:

[Markdown](https://daringfireball.net/projects/markdown/) and you: Adventures in [Markdown linking](https://daringfireball.net/projects/markdown/)!

对任何 https://daringfireball.net/projects/markdown/ 链接运行提取为链接定义将生成:

[Markdown][md] and you: Adventures in [Markdown linking][md]!

[md]: https://daringfireball.net/projects/markdown/

运行重构后,VS Code 将提示您输入链接定义的名称。在上面的示例中,我们输入了 md

Markdown 文件的新整理链接定义Code Action (source.organizeLinkDefinitions) 会将所有链接定义分组到文件底部,按字母顺序排序,并删除任何未使用的链接定义。这可以通过源操作命令运行。

例如,在 Markdown 源中:

Some [link][example] and an image:

![An image of a cat][cat-gif]

[example]: http://example.com
[cat-gif]: /keyboard-cat.gif
[some unused link]: http://example.com/file2

运行整理链接定义将:

Some [link][example] and an image:

![An image of a cat][cat-gif]

[cat-gif]: /keyboard-cat.gif
[example]: http://example.com

请注意,未使用的 some unused link 定义已被删除,其余定义已按字母顺序排序。

CSS / LESS / SCSS

CSS 语言支持现在理解 @property@layer at-rules。

Notebook

Notebook JavaScript 输出现在被评估为模块

Notebook 中的 JavaScript 输出现在被视为模块。这意味着在输出中声明的变量将不再泄漏到其他输出中(并且在 const 变量的情况下,甚至可能阻止其他具有冲突变量名称的输出运行)。

这也意味着您现在可以在 JavaScript 输出中使用 import

%%javascript
import { myFunction } from './myModules.js';

console.log(myFunction());

Notebook 大纲中支持 HTML 标题

Markdown 单元格中的 HTML 标题现在可以在 Notebook 大纲视图中检测并渲染。

HTML headers in notebook Markdown cells

Web 版 VS Code

浏览器地址栏中的“code”

现在有一个 Chrome/Edge 浏览器扩展,可以更轻松地在 vscode.dev 中打开您的 GitHub 仓库。

入门:

  1. 从 Chrome Web Store 安装扩展。
  2. 在浏览器搜索栏中键入 code 以激活地址栏。
  3. 按名称搜索 GitHub 仓库并按 Enter 键。建议由您的浏览器搜索历史记录填充,因此如果您想要的仓库没有出现,您也可以输入完全限定的 <owner>/<repo> 名称来打开它,例如 microsoft/vscode

在下面的视频中,用户通过键入 code vscodevscode.dev 中打开 microsoft/vscode 仓库。

此扩展的灵感来自 Goto GitHub Repo Chrome 扩展,并对此表示衷心感谢,该扩展由前 VS Code 团队成员 Pine Wu 创建。

在切换开发环境时带上您的更改

当您浏览 GitHub 或 Azure Repos 仓库(例如 https://vscode.dev/github/microsoft/vscode)时,您可以使用继续在此处工作命令选择与您的仓库一起使用的不同开发环境。

以前,如果您在虚拟工作区中有未提交的更改,则需要将它们推送到 GitHub 或 Azure Repos 才能在其他地方查看它们。在此里程碑中,我们将编辑会话集成到继续在此处工作功能中,以便您的未提交更改自动随您一起转移到目标开发环境,例如 GitHub codespace。

在下面的视频中,用户在使用 Web 版 VS Code 时对 JavaScript 文件所做的更改,在他们创建并切换到新的 GitHub codespace 中工作时应用。

在此版本中,当您首次使用带有未提交更改的继续在此处工作时,您将可以选择使用编辑会话将您的编辑带到所选的开发环境,该功能使用 VS Code 服务来存储您的待处理更改。一旦这些更改应用于您的目标开发环境,它们将从我们的服务中删除。如果您选择在不带未提交更改的情况下继续,您以后可以通过配置 "workbench.editSessions.continueOn": "prompt" 设置随时更改此首选项。

Prompt to bring working changes with you when using Continue Working On

当您使用 Web 版 VS Code 时,您的未提交更改将在您使用继续在此处工作时随您一起转移到:

  • GitHub Codespaces 中的新云托管环境
  • 您的 GitHub 仓库的新本地克隆
  • 具有相同虚拟 GitHub 仓库的本地 VS Code 实例

当您使用桌面版 VS Code 和远程仓库扩展时,您的未提交更改将在您使用继续在此处工作时随您一起转移到:

  • GitHub Codespaces 中的云托管环境(可通过GitHub Codespaces 扩展获得)
  • 您的 GitHub 仓库的新本地克隆
  • 容器卷中您的 GitHub 仓库的新克隆(可通过开发容器扩展获得)
  • https://vscode.dev
  • 包含您的仓库克隆的现有本地文件夹

问题报告

问题字符阈值增加到 7500

当使用内置问题报告器报告 VS Code 或扩展问题时,用于在 github.com 上打开问题的 URL 中的字符数量是有限制的。如果您达到此限制,您将在问题正文中看到一条消息:“我们已将所需数据写入剪贴板,因为它太大而无法发送。请粘贴。”。不幸的是,有些用户没有注意到此消息并忘记将数据粘贴到问题正文中。

在此里程碑中,我们将阈值增加到 7500 个字符。这是因为:

  1. 某些对 URL 字符数有硬性限制的浏览器不再受支持(EOL)。
  2. GitHub 对 URL 中的字符数有自己的限制。

这使得 URL 中包含的字符数几乎增加了两倍,这对于大多数用户来说应该足够了,并且剪贴板消息的显示频率会降低。

与运行扩展编辑器一起使用的问题报告器

如果您使用命令开发者:显示运行中的扩展打开运行扩展编辑器并选择报告问题按钮,它将显示内置问题报告器。以前,这会将您带到 GitHub 问题并要求您粘贴,这在扩展仓库中创建了许多不必要和低质量的问题。现在,扩展的报告问题按钮通过内置问题报告器,将允许用户提交高质量的扩展问题。

对扩展的贡献

远程开发

远程开发扩展允许您将开发容器、远程机器或适用于 Linux 的 Windows 子系统 (WSL) 用作功能齐全的开发环境。

我们听取了您关于远程 - WSL远程 - 容器扩展命名的反馈。我们希望名称中的“远程”表示您在“远程”或“独立”的 WSL 发行版或开发容器中进行开发,而不是传统的本地开发。然而,这与许多人使用的“远程”用途不同,这可能导致混淆(例如,开发容器是否在我的机器上?)。

因此,我们更新了这些扩展中的命名和产品内命令,使其更清晰,将它们重命名为 WSL开发容器。Marketplace 中的扩展标识符和文档等链接保持不变,因此您在使用这两个扩展时应该不会遇到任何问题。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

除了重命名之外,这些扩展的功能和修复工作也在继续。您可以在远程开发发行说明中了解更多信息。

开发容器功能

开发容器功能让您可以轻松地为开发容器添加预打包的功能。无论是 Git 或 Docker 等工具,还是 Go 或 Java 等编程语言的支持,您都可以查看可用功能列表并将其添加到 devcontainer.json。您还可以使用功能模板创建自己的功能并与他人共享。

GitHub 拉取请求和问题

GitHub 拉取请求和问题扩展取得了更多进展,它允许您处理、创建和管理拉取请求和问题。此版本的主要亮点包括:

  • 改进了对 GitHub Enterprise Server 的支持。这包括:
    • 得益于 VS Code 内置的 GitHub Enterprise Server 认证提供程序,实现了免 PAT 认证。
    • 当您打开包含企业版仓库的文件夹时自动检测并提供设置流程。
    • 修复了 GitHub Enterprise Server 的错误。
  • 用于将文件标记为已查看的复选框。

查看扩展 0.52.0 版本的变更日志以查看其他亮点。

GitHub 问题 Notebook

工作区编辑

GitHub 问题 Notebook 扩展展示了 Notebook API,并且也证明非常方便。本着这种精神,我们采用了工作区编辑 API 的最新改进。有一些新的 Code Actions:

  • 将单元格移动/复制到新 Notebook。
  • 允许您使用 OR 语句拆分单元格。
  • 使用代码片段编辑将 label:bug 等限定值提取到变量中。
  • 基于代码片段的快速修复,用于值设置错误。

Move cell into new notebook and Quick Fix for value set violation

本地化

该扩展现已完全本地化为 VS Code 支持的 13 种语言。它也是第一个使用新的本地化 API 进行本地化的扩展,这意味着本地化在桌面和 Web 上均可工作。

Jupyter

单元格标签和幻灯片编辑支持

我们现在可以直接在 Notebook 编辑器中编辑单元格标签和幻灯片类型,而无需打开文档的 JSON 格式。

这使我们能够为 papermill 参数化 Notebook 或为 nbconvert 自定义 Notebook。

Edit Jupyter notebook cell tags

我们现在还可以通过命令直接更新 Notebook 单元格的幻灯片类型,将 Notebook 转换为演示幻灯片。

Edit Jupyter notebook slideshow

以上两个示例都使用了Notebook 工作区编辑 API 来编辑单元格元数据。如果您对如何支持编辑其他自定义单元格元数据感兴趣,可以从 GitHub 仓库(cell-tagsslideshow)了解更多信息。

交互式窗口的命令交互改进

interactive.input.focus 命令现在会将焦点置于最近使用的交互式窗口的输入框。在下面的短视频中,命令与自定义键盘快捷键一起使用。

Interactive Window navigation using keyboard shortcuts

Notebook 删除单元格命令已为交互式窗口单元格启用,并且现在可以撤消。

Python 文件单元格折叠

Python 文件中用 # %% 标记表示的“单元格”现在可以在编辑器中折叠。

GitHub Enterprise Server 认证支持

在此之前,GitHub Enterprise Server 用户必须手动创建个人访问令牌 (PAT) 才能在 VS Code 中登录 GitHub Enterprise Server(例如,与 GitHub 拉取请求和问题扩展一起使用)。这是一个繁琐的过程,需要用户离开 VS Code 创建 PAT,确保他们使用正确的权限创建,复制它,然后将其粘贴回 VS Code。

现在不再需要了。GitHub Enterprise Server 登录流程现在与 github.com 登录流程相同,用户无需创建 PAT 即可登录 GitHub Enterprise Server。要体验此功能,您可以从 Marketplace 获取GitHub 拉取请求和问题扩展,将 github-enterprise.uri 设置为您的 GitHub Enterprise Server URI,然后尝试该扩展。以下是演示新体验的视频:

主题:Panda Theme(在vscode.dev 上预览)

Python

创建环境命令

已添加新的创建环境命令,它将自动为 VS Code 中的 Python 用户创建虚拟环境或 conda 环境。用户将能够通过命令面板触发该命令,选择他们是想使用 venv 创建新的虚拟环境还是 conda 环境,最后选择他们项目所需的解释器。该命令还将安装项目文件夹中 requirements.txt 文件中列出的必要包。我们希望此新功能能够简化环境创建过程,并鼓励用户利用环境进行最佳编码实践。

Create new virtual environment with Create Environment command

针对扩展作者的新环境 API

Python API 现在提供了一种方式,允许扩展与 Python 扩展在用户机器上发现的 Python 环境一起工作。扩展还可以使用它来访问 Python 扩展用于运行脚本的选定环境路径,或将其更新为首选路径。

请随意在问题 #18888 中提供您的反馈。请注意,API 尚未最终确定,因此可能会根据反馈在不提供向后兼容性的情况下进行更改。

Python 扩展模板

Python 扩展模板可帮助您为喜爱的 Python 工具(例如代码检查器、格式化程序或代码分析实用程序)构建 Visual Studio Code 扩展。该模板为您提供了将工具集成到 VS Code 中所需的基本构建块。

预览功能

设置配置文件

我们过去几个月一直在努力支持 VS Code 中的设置配置文件,这是社区最受欢迎的需求之一。此功能可通过 workbench.experimental.settingsProfiles.enabled 设置进行预览。试用它并通过在vscode 仓库中创建问题或在问题 #116740 中评论来向我们提供您的反馈。

设置配置文件指示器

VS Code 在活动栏底部显示一个设置配置文件指示器。默认情况下,配置文件的前两个字符显示在指示器中。您还可以将短名称自定义为任意两个字符、表情符号或 codicon。Codicon 可以通过使用 $(codicon-id) 语法引用。

Settings Profiles indicator

当您单击此指示器时会显示一个菜单,其中包含更改短名称选项。

Settings Profiles menu

同步设置配置文件

VS Code 现在支持在您的 VS Code 实例之间同步设置配置文件。

注意:此功能目前仅在 VS Code 的 Insiders 版本中可用。

WebAssembly 和 Web 上的 Python 执行

在过去几个月,我们致力于将 WebAssembly (WASM) 引入 VS Code。为了实现支持,我们做了两件事:

下面的截图显示了运行一个 Hello World 程序:

Execute Python file in VS Code for the Web

您还可以使用命令Python WASM:启动 REPL启动 Python REPL。

Python REPL running in VS Code for the Web

请注意,这些库和扩展都在开发中,并作为预览版提供。WebAssembly Python 解释器以及 VS Code 本身都存在限制。解释器的主要限制包括:

  • 不支持 pip。
  • 不支持 socket。
  • 不支持线程。因此,不支持异步。

但是,它支持创建自己的 Python 环境,包括源 wheel Python 包。有关详细信息,请查看扩展的README

VS Code 中的限制包括:

  • 不支持调试。您只能运行 Python 文件。
  • 不支持原生 Python 模块。

但请继续关注。我们正在计划解除其中的一些限制。

扩展创作

在干净环境中调试扩展

调试扩展时,一直存在一个问题:扩展在作者的开发环境(用户设置和已安装的扩展)中运行,而不是在更适合目标用户的环境中运行。

借助最近引入的“配置文件”功能,现在可以通过在扩展的调试配置中指定配置文件,在不同的环境中运行正在开发的扩展。启用 workbench.experimental.settingsProfiles.enabled 设置以启用配置文件功能。

支持两种场景:

  • 在干净环境中调试:使用未命名的“空”配置文件,该配置文件在扩展调试停止时自动删除。
  • 在受控环境中调试:使用专门为正在开发的扩展创建的命名配置文件,其中包含特定的用户设置和扩展。

此调试配置显示如何使用 --profile-temp 开关在干净环境中调试:

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile-temp", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

这是用于在受控环境中调试的调试配置,它使用先前创建的名为“extensionContext”的配置文件:

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile=extensionContext", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

请注意,当在远程位置(通过远程开发扩展,即开发容器、SSH 或 WSL)调试扩展时,使用 --profile-temp 标志将导致此状态消息:

Disconnected Status bar message

这是预期行为,因为临时配置文件不包含任何扩展,这意味着远程开发扩展也缺失。对于远程场景,建议您创建一个空的命名配置文件,将远程开发扩展添加到其中,然后使用 --profile=.... 命令行选项。

改进的工作区编辑 API

使用 WorkspaceEdit 编辑 Notebook

WorkspaceEdit 现在可以使用 vscode.NotebookEdit 修改 Notebook。vscode.NotebookEdit 类包含用于创建在 Notebook 中插入、替换和删除单元格的编辑的静态工厂函数:

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

  // Use .set to add one or more edits to the notebook
  edit.set(currentNotebook.uri, [
    // Create an edit that inserts one or more cells after the first cell in the notebook
    vscode.NotebookEdit.insertCells(/* index */ 1, [
      // ... new notebook cell data
    ])

    // Additional notebook edits...
  ]);

  await vscode.workspace.applyEdit(edit);
}

使用 WorkspaceEdit 执行代码片段编辑

新的 SnippetTextEdit 类型允许扩展使用 WorkspaceEdit 执行代码片段编辑。代码片段编辑类似于常规文本编辑,但它们允许用户通过 Tab 键遍历占位符、插入变量、从选择元素中选择等。在本指南中了解有关代码片段的更多信息。

请注意,代码片段编辑需要代码或 Notebook 编辑器,并且只能支持单个编辑器的代码片段编辑,否则它们将表现为常规文本编辑。

我们相信,结合代码片段编辑和工作区编辑可以实现新的、更无缝的 Code Actions 和重构,如下面来自GitHub 问题 Notebooks 扩展的示例所示。

使用 WorkspaceEdit 创建带内容的文件

您现在可以在使用 WorkspaceEdit 创建文件时指定内容。为此,请使用其选项包传递内容:

const edit = new vscode.WorkspaceEdit();
edit.createFile(newFileUri, { contents: new Unit8Array([1, 2, 3]) });

await vscode.workspace.applyEdit(edit);

贡献的 WebView 上下文菜单

新的 WebView 上下文菜单 API 使高级WebView 能够轻松自定义用户在 WebView 中右键单击时显示的上下文菜单。这个新的贡献点使用 VS Code 的常规上下文菜单,因此自定义菜单与编辑器的其余部分完美契合。WebView 还可以为 WebView 的不同部分显示自定义上下文菜单。

要向您的 WebView 添加新的上下文菜单项,首先在 menus 下的新 webview/context 部分添加一个新条目。每个贡献都带有一个 command(也是项目标题的来源)和一个 when 子句。when 子句应包含 webviewId == 'YOUR_WEBVIEW_VIEW_TYPE',以确保上下文菜单仅适用于您的扩展的 WebView。

"contributes": {
  "menus": {
    "webview/context": [
      {
        "command": "catCoding.yarn",
        "when": "webviewId == 'catCoding'"
      },
      {
        "command": "catCoding.insertLion",
        "when": "webviewId == 'catCoding' && webviewSection == 'editor'"
      }
    ]
  },
  "commands": [
    {
      "command": "catCoding.yarn",
      "title": "Yarn 🧶",
      "category": "Cat Coding"
    },
    {
      "command": "catCoding.insertLion",
      "title": "Insert 🦁",
      "category": "Cat Coding"
    },
    ...
  ]
}

在 WebView 内部,您还可以使用 data-vscode-context 数据属性(或在 JavaScript 中使用 dataset.vscodeContext)设置 HTML 特定区域的上下文。data-vscode-context 值是一个 JSON 对象,用于指定当用户右键单击元素时要设置的上下文。最终上下文通过从文档根到单击的元素来确定。

例如,考虑以下 HTML:

<div class="main" data-vscode-context='{"webviewSection": "main", "mouseCount": 4}'>
  <h1>Cat Coding</h1>

  <textarea data-vscode-context='{"webviewSection": "editor", "preventDefaultContextMenuItems": true}'></textarea>
</div>

如果用户右键单击 textarea,将设置以下上下文:

  • webviewSection == 'editor' - 这会覆盖父元素的 webviewSection
  • mouseCount == 4 - 这是从父元素继承的。
  • preventDefaultContextMenuItems == true - 这是一个特殊上下文,用于隐藏 VS Code 通常添加到 WebView 上下文菜单的复制和粘贴条目。

如果用户在 <textarea> 内部右键单击,他们将看到:

Custom context menus showing in a webview

WebView 中活动主题的新主题变量

WebView 中的新 data-vscode-theme-id 数据属性存储当前活动主题的 ID。这取代了现在已弃用的 data-vscode-theme-name 属性,后者跟踪主题的完整名称(也可能已本地化)。

body[data-vscode-theme-id="One Dark Pro"] {
    background: hotpink;
}

如果您在 WebView 中使用 data-vscode-theme-name,请迁移到新的 data-vscode-theme-id 属性。

异步 Notebook 渲染器

Notebook 渲染器 API 现在更好地支持异步 Notebook 渲染器。虽然这以前隐式支持,但现在 renderOutputItem 可以返回一个 Promise 来指示正在渲染输出项。renderOutputItem 函数现在还会传递一个 AbortSignal,如果渲染被取消,该信号将中止。

renderOutputItem(outputItem: OutputItem, element: HTMLElement, signal: AbortSignal): void | Promise<void>;

如果您的渲染器执行任何异步工作,请采用这些 API 更新,以便 VS Code 更好地支持您的渲染器。

Refactor.move Code Action 类型

新的 refactor.move Code Action 类型可用于移动代码的重构(例如将符号移动到新文件或在文件中重新排序代码)。

虽然扩展以前可以创建 refactor.move 类型的 Code Actions,但此类型现在已正式记录并受新 Code Action 控件支持。

选定的树项传递给视图/标题操作

贡献到 view/title 菜单的命令将接收两个参数:第一个是焦点树节点,第二个是树中所有选定的项。

树状视图 initialSize 贡献已最终确定

package.json 中贡献视图的扩展可以使用 initialSize 属性来设置其视图的初始大小。initialSize 的工作方式类似于 CSS 的 flex-grow

initialSize 的应用有一些限制:

  • 它只是一个初始大小。一旦视图渲染,initialSize 将不会再次应用。
  • 它仅在扩展同时拥有视图和视图容器时应用。

树状视图徽章已最终确定

TreeView 有一个可选的 viewBadge 属性,可用于在视图的视图容器上设置一个数字徽章。

View badge on a view in the Activity bar

未绑定断点警告图标

调试扩展现在可以在活动调试会话中有未绑定断点时定义提示消息。它将显示在断点视图的标题中,以及将鼠标悬停在编辑器中的灰色断点图标上时。以下是 js-debug 扩展中如何使用它的示例:

Hovering the breakpoint warning icon

此消息可以在调试器贡献中新的 strings 属性中声明,如下所示:

"strings": {
  "unverifiedBreakpoints": "Message text goes here"
}

VS Code 社区讨论

现在有一个VS Code 社区讨论站点,作为扩展作者提问、与其他开发者联系和展示优秀作品的聚集地。在那里您可以找到与 VS Code API 相关的公告、发布问题或搜索现有答案,以及查看扩展展示与分享

建议的 API

每个里程碑都会带来新的建议 API,扩展作者可以尝试它们。一如既往,我们希望得到您的反馈。以下是尝试建议 API 的步骤:

  1. 找到您想要尝试的建议,并将其名称添加到 package.json#enabledApiProposals
  2. 使用最新的 vscode-dts 并运行 vscode-dts dev。它会将相应的 d.ts 文件下载到您的工作区。
  3. 您现在可以根据建议进行编程。

您不能发布使用建议 API 的扩展。在下一个版本中可能会有重大更改,我们绝不想破坏现有扩展。

可扩展的 JavaScript Notebook 渲染器

我们内置的Notebook 渲染器现在公开了一个实验性 API,允许扩展自定义 JavaScript 内容的渲染。此 API 目前公开了一个钩子 preEvaluate,它在 JavaScript 内容评估之前调用。

要尝试使用此实验性 API,您的扩展需要扩展 vscode.builtin-renderer API

"contributes": {
  "notebookRenderer": [
    {
      "id": "vscode-samples.my-custom-js-extension",
      "displayName": "My custom javascript renderer extension",
      "entrypoint": {
        "extends": "vscode.builtin-renderer",
        "path": "./out/main.js"
      }
    }
  ]
}

然后,您的渲染器可以在 vscode-builtin-renderer 上注册一个渲染钩子:

import type { RendererContext } from 'vscode-notebook-renderer';

export async function activate(ctx: RendererContext<void>) {
  const builtinRenderer = await ctx.getRenderer('vscode.builtin-renderer');
  if (!builtinRenderer) {
      throw new Error(`Could not load 'vscode.builtin-renderer'`);
  }

  builtinRenderer.experimental_registerJavaScriptRenderingHook({
    // Invoked before th js has been evaluated
    preEvaluate(outputItem: OutputItem, element: HTMLElement, script: string, signal, signal: AbortSignal): string | undefined | Promise<string | undefined> {
      // You can either modify `element` or return a new script source here
    }
  });
}

测试这个新的 API,并告诉我们您的想法!

env.shell 更改事件

已添加新事件 env.onDidChangeShell,以补充 env.shell,即扩展主机检测到的默认 shell:

env.onDidChangeShell(newShell => {
  console.log(newShell); // Same value as env.shell
});

树项复选框

建议的 checkboxState 允许您向树项添加复选框。

Tree items with checkboxes

this.checkboxState = {
  state: vscode.TreeItemCheckboxState.Unchecked,
  tooltip: 'mark file as viewed'
};

API 的一部分 - 本地化

本次迭代中,我们引入了一个新的 API 来帮助扩展本地化字符串。这取代了过去用于本地化的 vscode-nlsvscode-nls-dev 模块。这些模块将继续工作,但不再接收任何新功能。新的 API 和工具旨在熟悉但更容易使用和更灵活。此外,将其作为 VS Code API 的一部分,使我们能够支持桌面版 VS Code 和 Web 版 VS Code 的扩展本地化。

VS Code 扩展的本地化有四个重要部分:

新的 vscode.l10n API

declare module 'vscode' {
  export namespace l10n {
    /**
     * A string that can be pulled out of a localization bundle if it exists.
     */
    export function t(message: string, ...args: any[]): string;
    /**
     * A string that can be pulled out of a localization bundle if it exists.
     */
    export function t(options: {
      message: string;
      args?: any[];
      comment: string[];
    }): string;
    /**
     * The bundle of localized strings that have been loaded for the extension.
     */
    export const bundle: { [key: string]: string };
    /**
     * The URI of the localization bundle that has been loaded for the extension.
     */
    export const uri: Uri | undefined;
  }
}

vscode.l10n 建议 API 是一个新的命名空间,提供了一个单一函数 t,可用于声明字符串应进行本地化。该函数可以带字符串或带有 message 属性的对象调用。如果存在本地化包,该函数将返回本地化字符串,否则将返回原始字符串。该函数还支持用于格式化字符串的参数和用于为翻译人员提供上下文的注释。

使用新 API 的一个简单示例:

import { l10n } from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const message = l10n.t('Hello in {0}!', vscode.env.language);
  vscode.window.showInformationMessage(message);
}

在此示例中,如果当前语言存在本地化包,则字符串 Hello in {0}! 将被本地化。{0} 将被替换为当前语言(默认为 en,法语为 fr,巴西葡萄牙语为 pt-br 等)。如果不存在本地化包,则字符串将按原样返回并使用参数进行格式化。您可能想知道这些本地化包从何而来。我将在下一节中介绍。

vscode.l10n API 还提供对本地化字符串包或字符串包 URI 的访问。这旨在用于子进程场景,我将在后面介绍。

重要提示:当您使用此 API 时,您还需要明确声明本地化包的位置。这通过在 package.json 中添加 l10n 属性来完成:

{
  "main": "./out/extension.js",
  "l10n": "./l10n"
}

l10n 属性应是包含本地化包的文件夹的相对路径。

@vscode/l10n-dev 模块

@vscode/l10n-dev 模块是一个新模块,用于生成本地化包。您可以将其用作命令行工具或库。两者都通过扫描提供的源代码中的 vscode.l10n.t(..) 调用来生成本地化包。

以下是使用命令行工具的简单示例:

npx @vscode/l10n-dev ./src --out ./l10n

这将在 ./l10n 文件夹中放置一个 bundle.l10n.json 文件。从那里,您可以为要支持的每个语言环境创建一个 bundle.l10n.LOCALE.json 文件。例如,假设上面的命令生成了以下 bundle.l10n.json 文件:

{
  "Hello": "Hello",
  "Hello {0}": "Hello {0}",
  "Hello {0}/This is a comment": {
    "message": "Hello {0}",
    "comment": ["This is a comment"]
  }
}

如果您想支持法语,您将在 bundle.l10n.fr.json 文件中创建以下内容:

{
  "Hello": "Bonjour",
  "Hello {0}": "Bonjour {0}",
  "Hello {0}/This is a comment": "Bonjour {0}"
}

注意:您不需要本地化包中的注释,因为注释仅对翻译原始包的翻译人员有用。

@vscode/l10n-dev 模块也可用于生成 XLF 文件。VS Code 团队会生成 XLF 文件,然后将其提供给 Microsoft 的翻译人员。翻译人员随后将翻译好的 XLF 文件交还给我们。然后,我们使用 @vscode/l10n-dev 模块根据翻译好的 XLF 文件生成本地化包。我们计划撰写一篇博客文章,更详细地介绍我们的整体本地化流程。

@vscode/l10n 模块

由于 vscode.l10n API 仅在扩展主机中可用,因此无法在子进程中使用。为此,我们创建了一个新模块,可在子进程中用于加载本地化包。该模块名为 @vscode/l10n,可以这样使用:

import { l10n } from '@vscode/l10n';

// Load the translations for the current locale
l10n.config({
  uri: process.env.BUNDLE_URI_FROM_EXTENSION
});

// returns the translated string or the original string if no translation is available
l10n.t('Hello World');

其思想是,您的扩展端代码(负责启动子进程)将使用 vscode.l10n.contentsvscode.l10n.uri API 将包或包的 URI 传递给子进程。然后,子进程可以使用 @vscode/l10n 模块加载包并使用 t 函数翻译字符串。@vscode/l10n 模块使用的 t 函数也将被 @vscode/l10n-dev 模块识别,以便可以使用一个进程提取和本地化字符串。

package.nls.json 文件

package.nls.json 文件没有任何变化。它仍然用于声明应本地化的默认字符串,并且应与 package.json 放在一起。您仍然可以拥有 package.nls.LOCALE.json(其中 LOCALE 类似于 dezh-cn),如果用户已将 VS Code 设置为该语言环境,则该文件中声明的字符串将首先被选中。一个小的例子:

您的 package.json

{
  "name": "my-extension",
  "version": "0.0.1",
  "main": "./out/extension.js",
  "l10n": "./l10n",
  //...
  "contributes": {
    "commands": [
      {
        "command": "my-extension.helloWorld",
        // The key is surrounded by % characters
        "title": "%my-extension.helloWorld.title%"
      }
    ]
  }
}

您的 package.nls.json

{
  // That same key from the package.json
  "my-extension.helloWorld.title": "Hello World"
}

您的 package.nls.de.json

{
  // That same key from the package.json
  "my-extension.helloWorld.title": "Hallo Welt"
}

总结

这里内容很多,需要消化,但希望这能让您了解我们 VS Code 扩展本地化的方向。

如果您对完整的示例感兴趣,可以查看 l10n-sample

如果您有任何问题或反馈,可以通过以下方式告诉我们:

日志输出通道

vscode.window.createOutputChannel API 现在新增了一个 log 布尔选项,可用于创建仅用于日志记录的输出通道。

/**
 * Creates a new {@link LogOutputChannel log output channel} with the given name.
 *
 * @param name Human-readable string which will be used to represent the channel in the UI.
 * @param options Options for the log output channel.
 */
export function createOutputChannel(
  name: string,
  options: { readonly log: true }
): LogOutputChannel;

LogOutputChannel 支持以下方法来记录消息:

trace(message: string, ...args: any[]): void;
debug(message: string, ...args: any[]): void;
info(message: string, ...args: any[]): void;
warn(message: string, ...args: any[]): void;
error(error: string | Error, ...args: any[]): void;

扩展创建的日志输出通道在“输出”下拉视图中显示为单独的条目。写入此日志输出通道的消息以与 VS Code 日志消息相同的格式表示。

Log Output channel

工程

迈向“跨源隔离”

我们已进行更改,以启用 VS Code 桌面版和 vscode.dev 的跨源隔离。这将启用共享数组缓冲区等强大的新功能。VS Code 本身以及扩展和 WebView 都将从中受益。

跨源隔离目前位于功能标志之后,启用它可能会对从互联网加载资源的扩展和 WebView 产生不良影响。您可以在为什么强大的功能需要“跨源隔离”中阅读更多相关信息。我们希望尽早听到您的反馈。

尝试此功能:

  • 使用 --enable-coi 标志运行 VS Code 桌面版,例如 code --enable-coi
  • 运行 vscode.dev 并附加 vscode-coi 查询参数。

要检查是否已启用跨源隔离,请使用开发工具的“应用程序”选项卡或检查 crossOriginIsolated 全局变量的值。

Cross Origin Isolation enabled for web

改进的启动性能

在此里程碑中,我们投入了工程时间来缩短从启动 VS Code 到在文本编辑器中看到闪烁光标所需的启动时间。我们始终跟踪我们的性能数据,并注意到上一个里程碑结束时略有下降,我们希望解决这个问题。

这是团队的共同努力,每个人都在整个源代码中贡献了各种更改。这里提到了几个亮点。

不再有同步 fs 调用

我们通常避免使用 Node.js fs API 的同步变体,因为这些方法会停止脚本执行,直到文件系统请求得到解决。但在少数情况下,我们仍然依赖同步 fs 执行,尤其是在启动时打开或恢复窗口时。我们能够将所有这些调用更改为异步变体,允许其他脚本在等待文件系统请求返回时继续运行。

更多地捆绑主入口点

构成 VS Code 应用程序的主捆绑包大小为数兆字节,使用 vscode-loader 捆绑为单个文件,并使用 esbuild 进行了精简。然而,在某些情况下,我们没有投入捆绑,特别是对于:

  • Electron 主进程中始终首先调用的 Node.js 入口点。
  • Electron 渲染器进程中用于打开窗口的引导 JavaScript 文件。

在这两个区域进行捆绑使我们能够将启动时查找 JavaScript 文件的成本降低到 Electron 主进程只需一次调用,窗口本身只需一次调用。

将代码推迟到后期

最好的性能修复是删除代码并永不运行它,但这显然不是一个可扩展的解决方案。另一种方法是将代码的执行延迟到后期,例如在文本编辑器打开之后。在此里程碑中,我们再次审查了我们的各种组件,并将其中一些推迟到后期,以避免阻塞关键的启动路径。

记录内部工具

为了分析性能,我们大量使用了浏览器的开发工具和操作系统检查工具。但是,我们也有一些内置在 VS Code 中的工具。我们在VS Code 开发性能工具中记录了这些自定义工具,以便更多人可以从中受益。

更快的 PR 检查

对于拉取请求,我们运行自动单元测试、集成测试和冒烟测试。所有这些都并行进行,但每个步骤都需要将我们的 TypeScript 源代码转译为 JavaScript 代码。最初,我们使用 TypeScript 编译器来完成此操作。它会发出 JavaScript,但也会进行类型检查。后者非常耗时,并且对于测试来说并非真正需要。测试延迟的总时间成本约为 5 分钟。然后我们切换到使用 TypeScript 编译器 API 的自定义纯转译解决方案。这要快得多,但仍然需要大约 2 分钟。

在此里程碑中,我们切换到了 SWC (Speedy Web Compiler),它甚至更快。现在转译所有 TypeScript 源代码大约需要 12 秒。这是一个巨大的改进,使我们能够更快地获得拉取请求的反馈。

值得注意的修复

  • 27799 macOS:操作系统服务无法从编辑器中获取选定的文本
  • 60821 改进了“最近打开”和“入门”页面的“最近列表”之间的同步。
  • 156777 保持进程资源管理器打开时,每分钟 5MB 的内存泄漏
  • 159862 在 macOS Catalina 上,全屏模式下,交通灯按钮显示未对齐
  • 161305 查看其他“窗口”设置时,“窗口:标题栏样式”链接不起作用

感谢

最后但同样重要的是,对 VS Code 的贡献者们说声衷心的**感谢**。

问题跟踪

对我们问题跟踪的贡献:

拉取请求

vscode 的贡献:

vscode-css-languageservice 的贡献

vscode-pull-request-github 的贡献

debug-adapter-protocol 的贡献