🚀 VS Code で を入手しましょう!

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 機能を備えた独自の拡張機能を作成できます。まず、ドキュメントを確認して始めてください。さらに、CodeLens を使用する人気の拡張機能を Marketplace で見つけることができます。このブログ記事では、私のお気に入りのいくつかを紹介します。

ヒント: これらの拡張機能をすべて一度にインストールするには、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_