に参加して、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 を使用して、最新のコミット、著者の数、インラインの責任表示注釈を表示し、完全な履歴表示のために Peek ウィンドウを公開します。機能の完全なリストについては、拡張機能のREADMEを参照してください。14件の5つ星評価を持つ、高評価で優れた拡張機能です。

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.