在 VS Code 中试试

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 上的更新页面。

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

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

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

检出前拉取

本次里程碑中,我们新增了一个设置 git.pullBeforeCheckout,用于简化切换分支的过程。启用此设置后,如果没有传出提交,我们将在检出分支之前从远程拉取并快进该分支。

仓库抓取改进

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

中止合并命令

新增命令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 和 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 - 启用/禁用本地文件链接的验证:[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 - 一个链接 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 规则。

Notebooks

Notebook JavaScript 输出现在作为模块进行评估

Notebooks 中的 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 网上应用商店安装扩展。
  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 中的字符数有硬性限制的某些浏览器不再受支持(已终止生命周期)。
  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 认证。
    • 打开包含 Enterprise 仓库的文件夹时自动检测并提供设置引导。
    • 修复了 GitHub Enterprise Server 的 bug。
  • 用于将文件标记为已查看的复选框。

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

GitHub 问题 Notebooks

工作空间编辑

GitHub 问题 Notebooks扩展展示了 notebook API,并且使用起来也相当方便。本着这种精神,我们采用了工作空间编辑 API 的最新改进。新增的代码操作包括

  • 将单元格移动/复制到新的 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 Delete 单元格命令已在交互式窗口单元格中启用,并且现在可以撤销。

Python 文件单元格折叠

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

GitHub Enterprise Server 身份验证支持

在此之前,GitHub Enterprise Server 用户必须手动创建个人访问令牌 (PAT) 才能登录 VS Code 中的 GitHub Enterprise Server(例如,与 GitHub Pull Requests and Issues 扩展一起使用)。这是一个繁琐的过程,需要用户离开 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,然后试用该扩展。以下是演示新体验的视频

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

Python

创建环境命令

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

Create new virtual environment with Create Environment command

面向扩展作者的新环境 API

Python API 现在为扩展提供了一种方式,可以处理 Python 扩展在用户机器上找到的可用 Python 环境。扩展也可以使用它来访问 Python 扩展用于运行脚本的选定环境路径,或将其更新为其偏好的路径。

欢迎在issue #18888 中提供你的反馈。请注意,该 API 尚未最终确定,因此根据反馈,仍可能发生更改,且不提供向后兼容性。

Python 扩展模板

Python 扩展模板帮助你为你最喜欢的 Python 工具(例如 linters、formatters 或代码分析实用程序)构建 Visual Studio Code 扩展。该模板为你提供了构建将你的工具集成到 VS Code 中的扩展所需的基本构建块。

预览功能

设置配置文件

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

设置配置文件指示器

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

Settings Profiles indicator

单击此指示器时,将显示一个菜单,其中包含 Change Short Name 选项。

Settings Profiles menu

同步设置配置文件

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

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

WebAssembly 和 Python 在 Web 中的执行

在过去的几个月里,我们一直致力于将 WebAssembly (WASM) 引入 VS Code。为了启用支持,我们做了两件事

下面的屏幕截图显示正在运行 Hello World 程序

Execute Python file in VS Code for the Web

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

Python REPL running in VS Code for the Web

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

  • 不支持 pip。
  • 不支持 socket。
  • 不支持 thread。因此,不支持 async。

但是支持创建你自己的 Python 环境,包括 source 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"
}

请注意,当在远程位置(通过 Remote Development 扩展 Dev Containers、SSH 或 WSL)调试扩展时,使用 --profile-temp 标志将导致以下状态消息

Disconnected Status bar message

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

改进的工作区编辑 API

使用 WorkspaceEdit 编辑 Notebook

工作区编辑现在可以使用 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 编辑器,并且只能支持单个编辑器的片段编辑,否则它们将像常规文本编辑一样运行。

我们相信结合片段编辑和工作区编辑可以实现新的、更流畅的代码操作和重构,例如以下来自 GitHub Issue Notebooks 扩展的示例。

使用 WorkspaceEdit 创建带内容的文件

现在,你可以使用 WorkspaceEdit 在创建文件时指定内容。为此,请将内容及其 options-bag 一起传递

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

await vscode.workspace.applyEdit(edit);

贡献的 Webview 上下文菜单

新的 webview 上下文菜单 API 使高级webviews 能够轻松自定义用户在 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 代码操作种类

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

虽然扩展之前可以创建种类为 refactor.move 的代码操作,但此种类现已正式文档化,并得到新代码操作控件的支持

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

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

树视图 initialSize 贡献最终确定

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

何时应用 initialSize 存在一些限制

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

树视图 Badge 最终确定

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 检查

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

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

显著修复

  • 27799 macOS: OS 服务无法从编辑器中获取选中文本
  • 60821 改进了“打开最近”列表与“入门”页面最近列表的同步
  • 156777 打开进程浏览器时每分钟 5MB 的内存泄漏
  • 159862 在 macOS Catalina 上,全屏模式下红绿灯按钮显示错位
  • 161305 查看其他窗口设置时,“窗口: 标题栏样式”链接不起作用

感谢

最后但同样重要的是,向 VS Code 的贡献者们致以诚挚的 谢意

问题跟踪

对问题跟踪的贡献

拉取请求

vscode 的贡献

vscode-css-languageservice 的贡献

vscode-pull-request-github 的贡献

debug-adapter-protocol 的贡献