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

使用 CodeLens 的扩展

2017 年 2 月 12 日,Wade Anderson,@waderyan_

CodeLens 是 Visual Studio Code 中一个备受欢迎的功能。该功能的精髓是“在源代码中穿插可操作的上下文信息”。这听起来有点拗口,让我来为你分解一下。

CodeLens 是代码中的链接

  • 可操作 - 你可以点击链接,然后会发生一些事情。
  • 上下文相关 - 这些链接与其所代表的代码紧密相关。
  • 穿插 - 这些链接遍布你的源代码。

animation showing CodeLens

VS Code 为 TypeScript 提供了 CodeLens。你可以在用户设置中通过 "typescript.referencesCodeLens.enabled": true 启用它。

CodeLens in TypeScript

你可以创建自己的 CodeLens 功能扩展。首先查看文档。此外,你可以在 Marketplace 中找到使用 CodeLens 的热门扩展。这篇博客文章列出了我最喜欢的一些。

提示:你可以通过安装 CodeLens Roundup 扩展包来一次性安装所有这些扩展。如何将扩展捆绑在一起?请查看扩展包

Git Lens

Marketplace - Git Lens

作者 - eamodio

这个功能丰富的扩展将满足你所有的 Git 需求。eamodio 使用 CodeLens UI 向你显示最新提交、作者数量、行内 blame 注释,并暴露出 Peek 窗口以查看完整的历史记录。请参阅扩展的 README,了解所有功能。拥有 14 个五星好评,这是一个高度评价、优秀的扩展。

animation showing gitlens

Azure Application Insights

Marketplace - Azure Application Insights

作者 - Microsoft

正如你所想,这是 VS Code 团队中一个很受欢迎的扩展。使用此扩展,直接在 VS Code 中查看生产服务信息!

app insights

CodeMetrics

Marketplace - CodeMetrics

作者 - Kiss Tamás

想象一下,你有一个喜欢编写复杂函数的同事。他们觉得这很酷,并且不太关心可维护性。使用此扩展向他们展示其函数的复杂性,并检查你正在编写的源代码的度量指标。

code metrics

额外的好处是,你可以自定义描述。这是我们团队喜欢使用的配置

"codemetrics.basics.ComplexityLevelExtremeDescription": "😱",
"codemetrics.basics.ComplexityLevelHighDescription": "😳",
"codemetrics.basics.ComplexityLevelLowDescription": "🤓",
"codemetrics.basics.ComplexityLevelNormalDescription": "🤔",
"codemetrics.basics.ComplexityTemplate": "Complexity is {0} {1}"

如你所见,我们喜欢表情符号。

Regex Previewer

Marketplace - Regex Previewer

作者 - Christof Marti

你写了很多正则表达式吗?这是一个出色的扩展,可以快速测试你的正则表达式。

regex

Version Lens

Marketplace - Version Lens

作者 - pflannery

此扩展支持许多包管理系统,包括 npm、bower、dotnet 和 jspm,非常有用。安装此扩展,查看哪些包已过时。只需快速点击鼠标,即可升级版本。

version lens demo

专业提示 - 预览你的扩展

Marketplace - Extension Manifest Editor

作者 - Microsoft DevLabs

有时我在制作扩展时,会觉得在发布之前能看到扩展在 Marketplace 中的样子会很棒。Extension Manifest Editor 允许你在 VS Code 中预览你的扩展在 Marketplace 中的展示效果。

manifest preview

Wade Anderson,VS Code 团队成员  @waderyan_

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