Visual Studio Code1.68版的详细介绍

吴欣
653 阅读15分钟

2022年5月(1.68版)

欢迎来到Visual Studio Code的2022年5月版本。这个版本有许多更新，我们希望你会喜欢，其中一些关键的亮点包括：

如果你想在线阅读这些发布说明，请到code.visualstudio.com上的更新。

内部人员：想尽快试用新功能吗？你可以下载每晚的Insidersbuild，一旦有了最新的更新就可以尝试。

工作台

配置显示语言的改进

配置显示语言命令已被刷新，包括：

  • 该语言中的语言名称。
  • 可用的语言部分，显示哪些语言没有安装在你的机器上，选择一个将自动安装并应用该语言。

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

主题。熊猫主题

这应该有助于发现可用的语言包。请让我们知道你的想法!

问题面板表视图

在这个里程碑中，我们增加了一个新的功能，让用户可以在树形和表格之间切换问题面板的视图模式。与树状视图相比，表格显示了每个问题的来源（语言服务或扩展），这使得用户可以根据其来源过滤问题。

Problems panel table view

你可以通过Problems面板右上方的View as Table/View as Tree按钮来切换视图UI，或者通过Problems.Default来改变默认视图模式。默认视图模式设置 (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

注意：废弃的扩展列表由VS Code维护。如果你有一个你认为应该被废弃的扩展，请在此讨论中发表评论，与我们联系。

赞助扩展

VS Code现在允许用户赞助他们喜欢的扩展。当一个扩展可以被赞助时，VS代码将在扩展视图的详细信息页面中呈现一个赞助按钮，如下所示：

Sponsor extension button on Extensions view Details page

主题。GitHub暗色调主题

赞助按钮将引导你到扩展的赞助URL，在那里你可以提供你的支持。请参考扩展赞助，了解如何为你的扩展选择这一功能。

基于.gitignore在资源管理器中隐藏文件

文件资源管理器现在支持解析和隐藏被你的.gitignore 文件排除的文件。这可以通过资源管理器启用**。Exclude Git Ignore**(explorer.excludeGitIgnore) 设置启用。这个设置与files.exclude 一起工作，从资源管理器中隐藏不需要的文件。

注意：目前，否定的globs，如!package.json ，是不能解析的。

锁定悬停位置

由于其他UI元素的存在（例如，滚动条），一些自定义的悬停很难或不可能将鼠标移到上面。当悬停处于活动状态时，按住Alt ，现在将 "锁定 "它，给它一个更宽的边界，并防止鼠标在悬停之外的移动来隐藏它。这主要是一个无障碍功能，使悬停与屏幕放大镜配合得很好，但它对从悬停中复制文本也很有用。请注意，这个功能只适用于编辑器以外的地方，因为编辑器的悬停器总是可以被鼠标移到上面，除非通过editor.hover.sticky 设置另行指定。

Holding the Alt key while hovering an item in the Extensions view will add a 2 pixel border around it and allow mousing over it and selecting text

设置编辑器的改进

设置编辑器现在为特定语言的设置显示了一个默认值覆盖指标。你可以通过在 "设置 "编辑器的搜索栏中添加一个语言过滤器来查看特定语言的设置，可以明确地输入它(@lang:javascript)，或者点击搜索栏右侧的过滤器按钮，然后选择语言选项。

当默认值覆盖指标显示时，它表明特定语言设置的默认值已被一个扩展覆盖。该指示器还表明是哪个扩展覆盖了默认值。

Settings editor default override indicator showing up for the editor wordwrap setting when there is a Markdown language filter in place. The default override indicator indicates that the default value of the language-specific setting was overridden by the Markdown Language Features extension

主题。浅粉色

这次迭代还修复了一个行为，即当设置编辑器的搜索栏中已经有一个搜索查询时，设置编辑器中的一些链接不能正确重定向。这些链接现在也有了适当的样式，这样当人们将鼠标悬停在它们上面时就会更清楚。

After searching for the word "font" in the Settings editor, and selecting the terminal category in the table of contents, the setting terminal.integrated.fontFamily shows up, and its description contains a link to the editor.fontFamily setting. Clicking on the link now brings you correctly to the setting.

评论小组件的主要按钮

评论小组件的第一个（最右边）动作使用主要按钮的颜色。

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.findMatchBorder 或terminal.findMatchHighlightBorder 的主题作者，我们建议迁移到terminal.findMatchBackground 和terminal.findMatchHighlightBackground ，如果这更适合主题或有助于对比度。

对比度和最小对比度的改进

查找匹配背景的工作在终端如何处理背景和前景颜色方面增加了很多灵活性。正因为如此，围绕终端的对比度进行了改进，使终端的视觉效果更接近于编辑器。此外，现在有了最小对比度功能，动态地改变文本的前景，以帮助提高可见度：

  • 如果对比度没有得到满足，亮度现在会向另一个方向发展。例如，如果在较浅的灰色背景上的深灰色文字与纯黑色（#_000000）的对比度没有得到满足，颜色也会尝试向白色移动，并使用最能满足所需对比度的值。

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

  • 当GPU加速被禁用时，现在会在文本下方绘制选区，并支持不透明的颜色。以前，这必须是部分透明的，而且会冲掉前景色。由于这一变化，现在选择的颜色与编辑器中使用的颜色相同。

    Foreground color are retained in selections

  • 书呆子字体符号现在应该应用最小的对比度来与附近的文字融合在一起，而电力线符号和框画字符不会应用最小的对比度，因为它们经常与没有任何前景字符的倒置单元相邻。

    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 ，禁用最小对比度。

源码控制

对Git扩展进行了一些更新，以配合我们新的拉动请求流程。

Git分支前缀

为了使创建新分支的过程更加顺畅，有一个新的设置，git.branchPrefix ，它可以在创建新分支时指定一个字符串作为前缀。

Git:分支名称的生成

generate branch with random name

一个新的设置git.branchRandomName.enable 将使 VS Code 在创建新分支时建议使用随机的分支名。随机名称是从字典中生成的，你可以通过git.branchRandomName.dictionary 设置来控制它。支持的字典有。 adjectives (默认），animals （默认），colors ，和numbers 。

Git。分支保护

通过新的git.branchProtection 设置，你可以配置特定的分支来进行保护。VS Code 将避免在受保护的分支上直接提交，而是提供机会让你创建一个新的分支来代替提交。你可以通过git.branchProtectionPrompt 设置来微调这一行为。

GitHub。支持拉动请求模板

GitHub 扩展现在可以理解拉动请求模板，并且在从新分叉的仓库创建 PR 时将使用它们作为基础。

笔记本

单元显示的变化

我们调整了视口外的单元格在几种情况下的显示方式。

当你在大纲视图中点击一个单元格时，如果该单元格在视口之外，笔记本现在会滚动显示该单元格在视口的顶部1/5处。这与大纲在文本编辑器中的行为一致。

当光标在一个单元格编辑器中时，你可以将光标移过该编辑器的第一行或最后一行，将其移到下一个单元格编辑器。现在，当光标移动到一个单元格在视窗外的编辑器中时，笔记本将滚动到足以显示编辑器中的那一行，而不是跳起来显示视窗中间的单元格。

查找和替换支持从光标/选择中播种查询

笔记本编辑器中的查找控件现在支持从编辑器的选择中播种搜索字符串。该行为由编辑器设置editor.find.seedSearchStringFromSelection 控制。

Seed search string from editor selection in notebook

调试

在没有 launch.json 的情况下运行和调试

当你没有设置launch.json 配置文件并按下F5 ，或者在调试视图中选择运行和调试按钮，VS Code会根据当前活动文件中的编程语言来选择调试器。如果你没有打开文件，你会被问到你想使用哪个调试器。这种体验可能有点令人困惑，所以我们做了一些改进。

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

如果在你试图开始调试之前，一个扩展已经被激活，那么这个扩展的调试器将被排序到最上面。这可能很有用，例如，当该扩展被激活是通过先前运行该扩展的命令，或打开激活该扩展的语言的文件，或通过你的工作空间匹配的workspaceContains 模式。如果你在这个会话中使用过调试器，它也会被排序到顶部。

Chrome/Edge调试器已被重新命名为Web App (Chrome)和Web App (Edge)，以尽量避免与其他调试器（如同样在浏览器中运行应用程序的Flutter扩展）发生混淆。

语言

TypeScript 4.7

VS Code现在捆绑了TypeScript 4.7.3。这个主要的TypeScript带来了新的语言功能，包括改进的控制流分析和对Node.js中ECMAScript模块支持的支持。它还包括新的工具功能，并修复了一些重要的bug!

转到源代码的定义

VS Code中存在时间最长且被投票最多的功能请求之一是让VS Code导航到外部库中的函数和符号的JavaScript实现。目前，"转到定义"会跳到定义目标函数或符号类型的类型定义文件（.d.ts 文件）。如果你需要检查这些符号的类型或文档，这很有用，但却隐藏了代码的实际实现。目前的行为也让许多JavaScript用户感到困惑，他们可能不理解TypeScript的类型，从.d.ts 。

虽然将Go改为Definition来导航到符号的JavaScript实现听起来很简单，但这个功能请求开放了这么久是有原因的。JavaScript（尤其是许多库所提供的编译后的JavaScript）要比.d.ts 。试图分析node_modules 下的所有JavaScript代码，既会很慢，也会大大增加内存占用。还有很多JavaScript模式是VS Code IntelliSense引擎所不能理解的。

这就是新的 "**转到源代码定义 "**命令的作用。当你从编辑器的上下文菜单或命令调色板中运行这个命令时，TypeScript将尝试追踪符号的JavaScript实现并导航到它。这可能需要几秒钟，我们不一定能得到正确的结果，但在很多情况下应该是有用的。

Jumping to the implementation of the 'render' method from the react-dom library.

我们正在积极改进这个功能，所以在你的代码库中尝试一下，并分享你的反馈。

对象方法片段

对象方法片段可以帮助你快速添加方法到实现给定接口的对象字面。

Completing a method signature inside an object literal

当在一个对象字面中，你应该为每个可能的方法看到两个建议：一个是只插入方法名称，一个是插入方法的完整签名。你也可以通过设置"typescript.suggest.classMemberSnippets.enabled": false 或"javascript.suggest.classMemberSnippets.enabled": false ，完全禁用对象方法片段。

群意识的组织进口

用于JavaScript和TypeScript的Organize Imports命令让你快速清理你的导入列表。当运行时，它既会删除未使用的导入，也会按字母顺序对导入进行排序。

然而，一些代码库喜欢在某种程度上手动控制他们的导入如何组织。对外部导入和内部导入进行分组是其中最常见的例子之一：

// 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中，在这里运行Organize Imports会导致以下结果：

// 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中，Organize Imports现在是一个群组感知的。在上面的代码中运行它，看起来有点像你期望的那样：

// 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...

请注意，现在进口已经被排序，同时仍然保持在它们的组内。好多了!

在隐式项目中启用严格的空值检查

在隐式项目中，JavaScript和TypeScript都默认启用了严格的空值检查。这应该会导致更准确的IntelliSense和改进的类型检查，可以抓住常见的编程错误。

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

这个新行为只适用于不属于jsconfig 或tsconfig 项目的任何文件。你可以通过设置禁用它："js/ts.implicitProjectConfig.strictNullChecks": false 。对于属于jsconfig 或tsconfig 的文件，你仍然需要在配置文件中启用严格的空检查。

转到定义，用于Markdown参考链接

你现在可以在Markdown文件的参考链接上使用转到定义。这将从参考链接跳到当前文件中的链接定义。

扩展的JSON模式支持

内置的JSON语言服务已经改进了对JSON Schema Draft 2019-09和JSON Schema Draft 2020-12的支持。当使用这样的模式时，不再有警告显示。

仍然有一些功能没有被完全支持。当它们被模式使用时，会显示一个警告。不支持的属性有：

  • 带有$id的子模式
  • $recursiveRef/Anchor（2019-09草案）
  • $dynamicRef/Anchor (Draft 2020-12)

用于网络的VS代码

核心本地化支持

我们已经引入了VS Code for the Web的初始本地化支持。VS Code在世界各地被使用，对于许多用户来说，英语不是他们的第一语言（或者他们根本不熟悉的语言！）。多年来，VS Code的用户一直在市场上安装语言包，以便用英语以外的语言来使用VS Code。对于VS Code for the Web，我们决定采取一种不同的方法，一种更符合当今网络工作方式的方法。

对于那些将浏览器设置为我们的核心支持语言之一的用户，vscode.dev将自动应用该语言的翻译。我们支持的语言在vscode-loc库中有记录。

例如，要配置Microsoft Edge的显示语言，你可以使用设置>语言。

Microsoft Edge Settings Languages page

一旦设置完毕，当你进入vscode.dev（或insiders.vscode.dev）时，它将以德语显示。

vscode.dev in a browser displayed in German

主题。熊猫主题

在接下来的几个月里，我们将启用扩展程序的本地化功能（包括与VS代码一起发货的和没有的），这样扩展程序作者也可以支持非英语用户。敬请期待!

远程存储库

当使用远程仓库 > 继续工作...命令在本地克隆GitHub或Azure Repos仓库并在桌面VS Code中打开它时，现在可以配置remoteHub.gitProtocol ，以始终使用http 或ssh URL进行克隆。

开发容器规范

我们在微软和GitHub的开发容器团队继续积极开发新的开发容器规范，这次迭代有几个令人兴奋的亮点。

参考实现

我们发布了一个开源的命令行界面（CLI），作为该规范的参考实现。该CLI从devcontainer.json ，构建和启动一个开发容器，它可以直接使用或集成到产品体验中。

CLI在一个新的devcontainers/cli仓库中可用。你可以在它的README中了解如何开始，并在这篇博文中阅读更多内容。

CLI正在积极开发中，并将继续发展以更好地支持更多的场景，例如对个人用户的更大支持。我们希望听到你的反馈，所以我们已经开了一个问题，专门征求对CLI的反馈，并欢迎在Repo中提出其他问题和PR。

CI中的开发容器

一个GitHub动作和一个Azure DevOps任务可用于在持续集成（CI）构建中运行一个存储库的开发容器。这允许你重新使用用于本地开发的相同设置，也可以在CI中构建和测试你的代码。更多细节见devcontainers/ci的README。

GitHub动作的使用示例：

- 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: DevcontainersCI@0
  inputs:
    imageName: 'yourregistry.azurecr.io/example-dev-container'
    runCmd: 'make ci-build'
    sourceBranchFilterForPush: refs/heads/main

规范

规范的积极开发仍在继续，我们已经在devcontainers/spec仓库中发布了一个初始版本。

与CLI一样，请继续关注进一步的更新和进展，我们很乐意听到你的反馈。

进一步阅读

你可以在containers.dev 阅读关于开发容器和规范的所有内容。

对扩展的贡献

Python

启动时不发现解释器

Python扩展现在只在以下情况下自动触发发现：

  • 使用Python。选择解释器命令来选择一个不同的解释器。
  • 第一次打开一个特定的范围（工作区或全局）。
  • 没有安装Python。

由于启动时没有自动触发发现，这导致了瞬间的加载，以及其他功能的快速启动，比如语言服务器。然而，如果安装/启用了Jupyter扩展，Jupyter在启动时仍然会触发发现。

启用本地化功能

Python扩展现在支持VS Code支持的所有语言的翻译。我们更新了使用vscode-nls获取命令、通知、标题等翻译的方式。这些翻译由本地化团队维护，以确保它们是最新的和正确的，并且现在存储在一个外部仓库中，它将包含所有VS Code扩展的翻译。

Jupyter

网络扩展

我们在支持Jupyter扩展的网络版中的更多核心功能方面取得了进展。

这个月，以下功能被移植到了网络扩展中：

  • https支持
  • 内核完成度
  • ipywidgets
  • 笔记本调试
  • 变量查看
  • 输出
  • 交互式窗口

如果你想实验一下这些功能，可以从你的本地机器上用启动Jupyter：

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

然后用Jupyter命令连接到它。指定Jupyter服务器，以便从vscode.dev内进行连接。

更多信息（和评论），请看这个讨论项目。

远程开发

远程开发扩展的工作仍在继续，它允许你使用容器、远程机器或Windows Subsystem for Linux（WSL）作为一个全功能的开发环境。

你可以在远程开发发布说明中了解新的扩展功能和错误修复。

GitHub拉动请求和问题

GitHub拉取请求和问题扩展有了更多进展，它允许你处理、创建和管理拉取请求和问题。这个版本的亮点包括。

  • 创建拉动请求视图中的自动合并复选框

查看该扩展的0.44.0版本的更新日志，看看其他亮点。

远程存储库扩展

GitHub Repositories和Azure Repos扩展都支持 VS Code 支持的所有语言的翻译。

预览功能

Markdown链接验证

在使用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中粘贴插入图片或文件链接。

Pasting to insert an image into a Markdown file

这需要同时启用markdown.experimental.editor.pasteLinks.enabled 和"editor.experimental.pasteActions.enabled" 。目前你可以从VS Code文件资源管理器中复制文件。粘贴图片文件可以插入图片参考，而粘贴普通文本文件可以插入这些文件的链接。

终端外壳集成

外壳集成（通过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和我们在谷歌的朋友，他们在这方面帮助我们。❤️

扩展编写

内联补全最终确定

我们已经完成了Inline Completions API。这允许扩展提供与建议小部件解耦的内联补语。内联补全被渲染成已经被接受的样子，但有一个灰色的颜色。用户可以循环浏览建议，并用Tab 键接受它们。GitHub Copilot是一个使用内联补全的扩展实例。更多信息可以在vscode.d.ts 文件中找到，进入API的入口是 languages.registerInlineCompletionItemProvider.

InputBox验证消息的严重性最终确定

我们的InputBox APIs（通过window.showInputBox 和window.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的扩展最有用。

用户体验指南

扩展作者的用户体验指南已被更新和扩展，以涵盖更多的VS Code用户界面元素。

UX Guideline example image pointing to View Actions elements

修订后的"概述 "页面通过VS Code的用户界面，对界面和常见的用户界面元素进行了可视化的浏览。

在每个领域的专用页面上都增加了相关指南、API参考和扩展样本的链接。此外，所有的示例图片都已在指南中更新，以展示最新版本的用户界面。

你现在可以阅读关于添加或贡献这些用户界面元素的扩展的建议的 "做 "和 "不做"。

扩展的赞助

在这个里程碑中，我们在扩展的package.json ，引入了一个sponsor 字段，允许扩展选择加入赞助行列。sponsor 对象有一个url 字段，用于扩展作者的赞助链接。比如说：

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

如果一个扩展选择加入，VS代码将在扩展视图详情页中呈现一个赞助商按钮，如上面的赞助扩展部分所示。

注意：请确保使用最新的vsce命令行工具(>=2.9.1)来发布启用了赞助的扩展。

建议的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构建

我们有一个新的公共代码OSS构建，它重复使用与我们生产构建相同的构建定义。现在这个构建在每个PR上的运行时间不到30分钟，我们计划继续投资以提高其速度。

文档

更新的版本控制视频

我们重新制作了Visual Studio使用Git的介绍性视频，以帮助你开始使用VS Code中的Git集成。

你还可以在VS Code的YouTube频道上找到其他精彩视频。

vscode.dev on code.visualstudio.com

想在网络上使用VS Code，但忘记了网址？vscode.dev现在显示在VS Code下载页面的醒目位置，这样你就可以快速在浏览器中运行VS Code。

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

值得注意的修正

  • 141157在非调试模式下点击 F11 会打开调试，而不是全屏。
  • 148864TypeScript文件的非绑定断点
  • 149638懒惰的变量评估按钮导致节点之间有问题的空隙和错位

谢谢你

最后但肯定不是最不重要的，我们要向VS Code的贡献者 谢谢你向VS Code的贡献者们致敬。

avatar
文章
阅读
粉丝