参加你附近的 ,了解 VS Code 中的 AI 辅助开发。

2022 年 9 月 (版本 1.72)

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

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

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


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

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

内测版:想尽快尝试新功能?您可以下载每晚的内测版构建,并尽快尝试最新的更新。

工作台

隐藏工具栏操作

您现在可以从工具栏中隐藏操作。右键单击工具栏中的任何操作,然后选择其隐藏命令或任何切换命令。隐藏的操作会移至 ... 更多操作菜单,可以从那里调用。要恢复菜单,右键单击工具栏按钮区域并选择重置菜单命令。要恢复所有菜单,请从命令面板 (⇧⌘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

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

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

新的代码操作组

代码操作控件中有两个新组可用:InlineMove

这些组对应于 refactor.inlinerefactor.move 代码操作类型。

新代码操作颜色

您可能会注意到,代码操作控件在此次迭代中也略有不同。样式已更新为使用更合适的主题颜色。最大的变化是控件主体现在使用 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 命令现在将显示一个包含所有远程列表的快速选择器。用户可以选择要 fetch 的特定远程或从所有远程 fetch。

中止合并命令

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

终端

终端快速修复

我们正在推出一个由 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 和 emoji 字符的高级支持。

希望您能轻松找到所需的文档。

任务

固定运行任务条目

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

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 - 启用/禁用对本地文件链接的验证:[链接](/path/to/file.md)
  • markdown.validate.fragmentLinks.enabled - 启用/禁用对当前文件中标题链接的验证:[链接](#_some-header)
  • markdown.validate.fileLinks.markdownFragmentLinks - 启用/禁用对其他 Markdown 文件中标题链接的验证:[链接](other-file.md#some-header)
  • markdown.validate.referenceLinks.enabled - 启用/禁用对引用链接的验证:[链接][ref]
  • markdown.validate.ignoredLinks - 忽略验证的链接 glob 列表。如果您链接到磁盘上不存在但发布 Markdown 后存在的文件,这将很有用。

尝试一下,让我们知道您对新功能的看法!

引用链接可以轻松地在 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 文件的新整理链接定义代码操作 (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

笔记本 JavaScript 输出现在作为模块进行评估

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

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

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

console.log(myFunction());

笔记本大纲中支持 HTML 标题

Markdown 单元格中的 HTML 标题现在可以在笔记本大纲视图中检测并呈现。

HTML headers in notebook Markdown cells

Web 版 VS Code

浏览器多功能框中的“code”

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

开始使用

  1. 从 Chrome 网上应用店安装扩展程序。
  2. 在浏览器搜索栏中输入 code 以激活多功能框。
  3. 按名称搜索 GitHub 仓库,然后按 Enter。建议由您的浏览器搜索历史记录填充,因此如果您想要的仓库没有出现,您也可以输入完全限定的 <所有者>/<仓库> 名称来打开它,例如 microsoft/vscode

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

此扩展的灵感来自 Pine Wu(前 VS Code 团队成员)创建的 Goto GitHub Repo Chrome 扩展,在此深表感谢。

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

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

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

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

在此版本中,当您首次使用带有未提交更改的继续处理时,您将可以选择使用编辑会话将您的编辑带到您选择的开发环境,该功能使用 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 字符数有硬性限制的某些浏览器(已终止支持)。
  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 问题笔记本

工作区编辑

GitHub Issue Notebooks 扩展展示了笔记本 API,并且也相当方便。本着这种精神,我们采用了工作区编辑 API 的最新改进。有一些新的代码操作

  • 将单元格移动/复制到新笔记本中。
  • 允许您使用 OR 语句拆分单元格。
  • 使用片段编辑将限定值(如 label:bug)提取到变量中。
  • 用于值集错误的基于片段的快速修复。

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

本地化

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

Jupyter

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

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

这使我们可以为 papermill 参数化笔记本,或为 nbconvert 自定义笔记本。

Edit Jupyter notebook cell tags

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

Edit Jupyter notebook slideshow

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

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

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

Interactive Window navigation using keyboard shortcuts

交互式窗口单元格的笔记本删除单元格命令已启用,现在可以撤消。

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 Pull Requests and Issues 扩展,将 github-enterprise.uri 设置为您的 GitHub Enterprise Server URI,然后尝试该扩展。这是一个演示新体验的视频

主题:熊猫主题(在 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 工具(例如 linter、格式化程序或代码分析实用程序)构建 Visual Studio Code 扩展。模板为您提供了构建将工具集成到 VS Code 中的扩展所需的基本构建块。

预览功能

设置配置文件

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

设置配置文件指示器

VS Code 在活动栏底部显示一个设置配置文件指示器。默认情况下,指示器中显示配置文件名称的前两个字符。您还可以将简称自定义为任意两个字符、表情符号或图标字体。图标字体可以使用 $(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。
  • 不支持套接字。
  • 不支持线程。因此,不支持异步。

但是,支持创建您自己的 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 编辑笔记本

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

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 键切换,插入变量,从选择元素中进行选择等。在此指南中了解有关片段的更多信息

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

我们相信,结合片段编辑和工作区编辑可以实现新的、更无缝的代码操作和重构,例如来自以下GitHub Issue 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 属性。

异步笔记本渲染器

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

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

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

Refactor.move 代码操作类型

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

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

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

贡献到 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。一如既往,我们希望得到您的反馈。以下是尝试提议 API 的步骤

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

您不能发布使用提议 API 的扩展。下个版本中可能会有破坏性更改,我们绝不希望破坏现有扩展。

可扩展的 JavaScript 笔记本渲染器

我们内置的 笔记本渲染器 现在公开了一个实验性 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"
      }
    }
  ]
}

您的渲染器 then 可以注册一个渲染钩子到 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 文件,然后将其提供给微软的翻译人员。翻译人员随后将翻译后的 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.l10nAPI 提案
  • vscode-l10n 仓库(@vscode/l10n-dev@vscode/l10n 模块的所在地)

日志输出通道

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 都将从中受益。

跨源隔离目前处于功能标志后面,启用它可能会对从 Internet 加载资源的扩展和 webview 产生不必要的影响。您可以在 为什么需要“跨源隔离”才能获得强大功能 中阅读更多内容。我们希望尽早听取您的反馈。

要尝试此功能

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

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

Cross Origin Isolation enabled for web

改进了启动性能

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

这是一项团队合作,每个人都在整个源代码中贡献了各种更改。这里提到了几个亮点。

不再有同步文件系统调用

我们通常会避免 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 的贡献