使用 CodeLens 的擴充套件

Name: Visual Studio Code
Author: Microsoft

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

如你所見，我們喜歡錶情符號。