使用 CodeLens 的扩展

Name: Visual Studio Code
Author: Microsoft

2017年2月12日 Wade Anderson, @waderyan_

CodeLens 是 Visual Studio Code 中的一项热门功能。该功能的精髓在于将“可操作的上下文信息穿插”在你的源代码中。这句话听起来有点拗口，让我为你拆解一下。

CodeLens 是代码中的链接

可操作 (Actionable) - 你可以点击链接并触发某些操作。
上下文相关 (Contextual) - 链接紧贴着它们所代表的代码。
穿插式 (Interspersed) - 链接散布在你的整个源代码中。

animation showing CodeLens

VS Code 自带了针对 TypeScript 的 CodeLens。你可以在用户设置中通过 "typescript.referencesCodeLens.enabled": true 来启用它。

CodeLens in TypeScript

你可以利用 CodeLens 功能创建自己的扩展。查看文档即可开始。此外，你可以在市场中找到使用 CodeLens 的热门扩展。这篇博客文章列出了一些我最喜欢的扩展。

提示：你可以通过安装 CodeLens Roundup 扩展包一次性安装所有这些扩展。如何将多个扩展打包在一起？查看扩展包 (Extension Packs)。

Git Lens

市场 - Git Lens

作者 - eamodio

这个功能丰富的扩展将满足你所有的 Git 需求。eamodio 使用 CodeLens UI 向你展示最近一次提交、作者人数、行内追溯 (blame) 注释，并提供 Peek 窗口以查看完整历史记录。查看该扩展的 README 获取完整功能列表。凭借 14 个五星评价，这是一个评分很高、非常出色的扩展。

animation showing gitlens

Azure Application Insights

市场 - Azure Application Insights

作者 - Microsoft

你可以想象，这是 VS Code 团队中非常受欢迎的一款扩展。使用此扩展可以直接在 VS Code 中查看你生产环境服务的信息！

app insights

CodeMetrics

市场 - 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}"

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