使用 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 功能建立自己的擴充套件。首先檢視文件。此外，你還可以在市場中找到使用 CodeLens 的熱門擴充套件。這篇博文列出了一些我最喜歡的。

提示： 你可以透過安裝 CodeLens Roundup 擴充套件包一次性安裝所有這些擴充套件。你如何將擴充套件捆綁在一起？檢視擴充套件包。

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

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