最新のVS Code拡張機能開発：基本

2022年のWakaTimeプログラミング統計によると、現在、Microsoft Visual Studio（VS）Codeは最も人気のあるソースコードエディターです。ソースコードエディターとして分類されることが多い一方で、本格的な統合開発環境（IDE）としても利用できます。必要なのは、Visual Studio Code Marketplaceから適切な拡張機能を追加することだけです。

VS Codeの魅力は、拡張性だけにとどまりません。現在、数多くのプラグインが提供されていますが、自分で拡張機能を開発する必要がある場合もあります。このシリーズは、まさにそのためのものです。

「最新のVS Code拡張機能開発」シリーズの本記事では、さまざまな拡張機能の種類や、VS Code拡張機能の一般的なアーキテクチャ、開発時のベストプラクティスについて解説します。次の記事で詳しく掘り下げる前に、しっかりとした基礎を築くための入門記事です。

VS Code拡張機能の種類

Visual Studio Code Marketplaceでは、機能や特徴に応じて、拡張機能やプラグインが「拡張機能の種類」または「カテゴリ」と呼ばれるグループに分類されています。これらのカテゴリにアクセスする最も簡単な方法は、マーケットプレイスのWeb版を利用することです。また、検索バーで@category:タグを使えば、Visual Studio Codeの拡張機能ビューUIからもアクセスできます。

一覧を見ていると、それぞれのグループが何を意味するのか気になるかもしれません。ある拡張機能がフォーマッターに分類され、別のものがテーマに分類されるのはなぜでしょうか。

ここでは、Visual Studio Code MarketplaceとOpen VSX Registryでよく見られる拡張機能の種類をいくつか紹介します。Open VSX Registryは、Visual Studio Code（VS Code）拡張機能のための、オープンソースでコミュニティ主導のレジストリです。

テーマ

10,000件を超えるテーマが登録されており、Visual Studio Code Marketplaceで最も一般的な拡張機能の種類の一つです。テーマを使うと、パネルやメニュー、テキスト領域など、VS CodeのUIの見た目や雰囲気を変更できます。

テーマ関連のプラグインをすべて検索するには、@category:"Themes"フィルターを使います。

特定のコンポーネントやプラグインに特化したテーマ拡張機能もあります。たとえば、先ほど紹介したC/C++ Themesプラグインは、セマンティックカラーリングの強化など、C/C++開発向けに視認性を最適化したテーマを提供します。

カラーテーマは通常、JSONを使って作成・設定でき、簡単にカスタマイズできます。ユーザー設定でworkbench.colorCustomizationsとeditor.tokenColorCustomizationsのオプションを確認できます。

テーマ拡張機能は主に見た目を整える目的で使われ、比較的簡単に作成できます。一方で、アクセシビリティの向上や、コーディング体験全体の改善にも役立ちます。

機能拡張

機能拡張とは、VS Codeに機能を追加するさまざまなカテゴリの拡張機能を指します。たとえば、リンター（@category:"linters"）、ノートブック（@category:"notebooks"）、フォーマッター（@category:"formatters"）、テスト（@category:"testing"）、可視化（@category:"visualization"）、プログラミング言語（@category:"programming languages"）、デバッガー（@category:"debuggers"）、ソフトウェアサプライチェーン管理（SCM）との連携（@category:"scm providers"）などがあります。

ただし、MicrosoftとVS Codeが用意しているカテゴリタグの数には限りがあるため、拡張機能の目的がカテゴリに正確に反映されないことがあります。たとえば、Snyk Securityはリンターおよびプログラミング言語の拡張機能として分類されています。Snyk Security拡張機能はリンティングツールのように見えるかもしれませんが、それだけではありません。ソフトウェア開発プロジェクトのセキュリティ向上を主な目的とし、オープンソースの脆弱性、コードの脆弱性、ライセンスの問題、安全でないInfrastructure as Code（IaC）の設定などをスキャンします。

実際、Snyk SecurityのようなVS Codeプラグインは、拡張機能の開発にも役立ちます。Snykを使えば、拡張機能の依存関係が安全かどうかを自動で確認し、プロジェクトが正しく設定されていることを確かめ、コードの品質と安全性を検証できます。

スニペットとショートカット

スニペットやショートカットの拡張機能を使うと、VS Codeのキーマップ（@category:"keymaps"）やコードスニペット（@category:"snippets"）の機能をカスタマイズできます。たとえば、REST Clientは複数の言語に対応した拡張機能で、HTTPリクエストのスニペットやテンプレートを生成します。

一方、Eclipse Keymapは、Eclipse IDEのキー割り当てをVS Codeに追加します。EclipseをメインのIDEとして使っているJava開発者がVS Codeへの移行を検討する際に便利です。

パック

パックには、言語パック（@category:"language packs"）と拡張機能パック（@category:"extension packs"）の2種類があります。言語パックには、テキストの翻訳やキーボード入力などのローカライズデータが含まれています。たとえば、Chinese (Simplified) (简体中文) Language Packを使うと、VS Codeの既定のUI言語を簡体字中国語に切り替えられます。

言語パックをインストールした後で、VS Codeの表示言語を変更することもできます。翻訳に協力し、言語パックの作成に貢献したい場合は、VS Codeコミュニティのローカライズプロジェクトへの参加をご検討ください。

また、拡張機能パックは複数の拡張機能をひとまとめにして、一度にインストールできるようにしたものです。通常は共通のテーマに沿って構成されているか、開発環境をすぐに使い始められるようになっています。たとえば、Python Extension Packには、Python for VS Codeに加え、Python Environment Manager、Python Indent、autoDocstring - Python Docstring Generatorが含まれています。

Python Extension Packのインストールボタンをクリックすると、まだインストールされていないパック内の拡張機能が、すべてVS Codeに一括でインストールされます。

拡張機能パックを使えば、複数の拡張機能を個別にダウンロードする手間を省けます。特に、Microsoftが直接または公式にはサポートしていない言語向けのワークスペースを設定する際に便利です。また、自作のVS Code拡張機能をまとめる方法としても活用できます。

開発する拡張機能の種類が決まったら、次は構成を考えていきましょう。

VS Code拡張機能の一般的なアーキテクチャ

拡張機能の実行はVS Code Extension Hostが担います。拡張機能のマニフェスト（package.json）からエントリーポイントの場所を特定し、アクティベーションイベントに従って実行します。アクティベーションイベントもマニフェストファイルで宣言します。これにより、コマンドの実行時や特定の言語が選択されたときなど、拡張機能を起動するトリガーを定義できます。

package.jsonファイルには、拡張機能プロジェクトに欠かせない依存関係の一覧も含まれています。これには、VS Codeの拡張機能APIと連携するための@types/vscode moduleも含まれます。

ご注意ください： @types/vscodeモジュールは`vscode-extension-vscodeパッケージに取って代わるものです。後者は非推奨となっているため、プロジェクトのpackage.jsonファイルやその他の場所で参照しないでください。

拡張機能のマニフェストには、コントリビューションポイントも含まれています。コントリビューションポイントを使うと、VS Codeから拡張機能の機能をどのように呼び出すかを制御できます（たとえば、コマンドやメニュー項目から拡張機能を呼び出すように設定できます）。

拡張機能のエントリーファイルには、拡張機能の中核となる動作を記述します。主にvscodeモジュールを使用します。このモジュールは、拡張機能で常に最初にインポートしてください。

export function activate(context: vscode.ExtensionContext) {
    //Instructions and Commands
}

vscodeモジュールには、VS Codeの機能を拡張するためのインターフェース群を提供するVS Code APIが含まれています。これには、拡張機能の管理、設定、作成に必要な機能を備えた拡張機能インターフェースも含まれます。

拡張機能インターフェースのactivateメソッドでは、拡張機能の起動時に実行する処理を定義します。これは、エントリーファイルで次に行う作業です。

export function activate(context: vscode.ExtensionContext) {
    //Instructions and Commands
}

このコードはイベントハンドラーのように機能し、イベント発生時に実行する一連のコマンドを宣言します。deactivate関数の呼び出しとエクスポートも追加できます。

export function deactivate(context: vscode.ExtensionContext) {}

これにより、拡張機能のアクティベーションや実行後にクリーンアップ処理を実行できます。

エントリーファイルはTypeScriptまたはJavaScriptで記述できますが、前者の使用が推奨されています。どちらの言語を使う場合でも、TypeScriptとJavaScriptの拡張機能プロジェクトにはconfigファイルを用意してください。このファイルはディレクトリをプロジェクトのルートフォルダーとして示し、コンパイラーによる認識を助けます。また、configファイルにはさまざまなプロパティやコンパイラーフラグも含まれています。TypeScriptプロジェクトではtsconfig.jsonファイルを、JavaScriptプロジェクトではjsconfig.jsonファイルを使用してください。

拡張機能プロジェクトのディレクトリには、.vscodeフォルダー内に次の2つのファイルも含まれます。

1. tasks.json

tasks.jsonは、VS Codeが実行するフォルダー、プロジェクト、またはワークスペース固有のタスクを定義します。タスクは主に、プロジェクトのビルド手順や設定で構成されます。たとえば、VS Codeはnpmなどのパッケージマネージャーを使って拡張機能をビルドするため、拡張機能プロジェクトのtasks.jsonには、次のような参照が含まれます。

	"type": "npm",
	"script": "watch",
	"problemMatcher": "$ts-webpack-watch",
	"isBackground": true,
	"presentation": {
		"reveal": "never",
		"group": "watchers"
	},
	"group": {
		"kind": "build",
		"isDefault": true
	}

このtasks.jsonの例では、プロジェクトのコンパイル処理を監視してエラーや警告を検出するビルドウォッチャーを定義しています。このスクリプトは主にnpmを使って、ts-webpack-watch問題マッチャーを実行・パッケージ化します。

2. launch.json

launch.jsonは、ビルド後にVS Codeで拡張機能を実行（またはデバッグ）する方法を定義します。拡張機能が使用するランタイムに関する情報も含まれます。

"configurations": [
    {
        "name": "Run Extension",
        "type": "extensionHost",
        "request": "launch",
        "args": [
            "--extensionDevelopmentPath=${workspaceFolder}"
        ],
        "outFiles": [
            "${workspaceFolder}/dist/**/*.js"
        ],
        "preLaunchTask": "${defaultBuildTask}"
    },
]

このlaunch.jsonの例は、VS Code拡張機能の起動方法を定義する設定です。ソースコードとパッケージ化された実行ファイルの場所などが含まれます。

基本的な拡張機能プロジェクトのディレクトリ構成は次のとおりです。

Project Parent Folder
├── .vscode
│   ├── launch.json     
│   └── tasks.json                
├── src
│   └── extension.ts    //Extension Entry File
├── package.json       	//Manifest
├── tsconfig.json  

VS Code拡張機能開発のベストプラクティス

VS Code拡張機能の構造上、開発者は基本的な工程を省略してしまうことがあります。しかし、効果的に拡張機能を開発するには、次のようなベストプラクティスを含む、いくつかの原則に従う必要があります。

拡張機能を徹底的にテストする

Visual Studio Code Marketplaceで拡張機能を公開する場合、不具合のあるコードを含めないようにする必要があります。そのため、ユニットテスト（適用できる場合）や入念なシナリオテストなど、さまざまなソフトウェア評価手法を用いて、拡張機能を十分にテストしてください。

VS Code拡張機能のテストに外部のプラグインやライブラリを使う必要はありませんが、VS Codeには統合テストのための仕組みやツールが用意されています。特にExtension Development Hostを使うと、公式のVS Code環境とは別の環境で拡張機能をテストできます。

Visual Studio Code Marketplaceでは、ユーザーが拡張機能を評価・レビューします。そのため、拡張機能を十分にテストすることが重要です。バグがあったり、安全性に問題があったりする製品を公開して、ブランドの評判を損なわないようにしましょう。

機密データをできる限り安全に保存する

VS Codeでは、ユーザーデータの保存方法が進化してきました。VS Code 1.53が登場する前は、ユーザー情報の管理にExtensionContextインターフェースが使われていましたが、効率的な方法ではありませんでした。

現在、VS Codeで機密情報を管理する最適な方法は、SecretStorageユーティリティを使用することです。

MicrosoftのVS Codeユーザーエクスペリエンス（UX）ガイドラインに従う

Microsoftは、拡張機能がVS Codeのアーキテクチャと標準に沿うようにするためのユーザーエクスペリエンス（UX）ガイドラインを定めています。すべてのガイドラインを把握することをおすすめしますが、拡張機能の機能に関するものには特に注意を払いましょう。

たとえば、拡張機能にWebviewなどの高度なビジュアルコンポーネントがなくても、主要な機能が複雑であればチュートリアルが役立つ場合があります。インタラクティブなクイックスタートチュートリアルであるチュートリアルを用意すると、新しいユーザーが拡張機能の機能に慣れやすくなります。ソフトウェアのコードと使い方の両方について、十分なドキュメントを用意することが開発者のベストプラクティスです。

また、利用開始までの手順をできるだけ簡単にしましょう。そのために、必要な画像や視覚的な手がかりを追加します。Microsoftは、VS Code APIのテーマカラーを使用したSVGを推奨しています。

優れたVS Code拡張機能はUIに自然に溶け込み、VS Codeの標準機能との区別がほとんどつきません。

拡張機能をバンドルする

VS CodeはMicrosoftが提供しているため、VS Code（およびその派生版）がクロスプラットフォームアプリケーションであることを忘れがちです。VS CodeはWindowsに加え、最新のmacOS、Debian、Red Hat系Linuxディストリビューションでも利用できます。そのため、拡張機能はVS Codeの基本原則に従い、VS Codeをサポートするすべてのプラットフォームで動作する必要があります。

これを実現する最善の方法は、バンドルです。Microsoftは、その速度と効率性からVS Code拡張機能のバンドルにesbuildを推奨しています。webpackも優れた代替手段です。

また、Platform as a Service（PaaS）の普及が進むなか、拡張機能がVisual Studio Code for the Webと互換性があることも重要です。このWebベースのバージョンでシームレスに動作するのは、バンドルされた拡張機能のみです。

さらに、esbuildとwebpackはどちらもコードを圧縮できます。圧縮では、不要なテキストを削除し、メンバー（メソッド／関数や変数）の名前を変更します。ただし、これによってコードの動作が変わることがあります。たとえば、Function.prototype.nameやtoString()関数を使うソースコードは、圧縮後に正常に動作しなくなることがあります。

実際、多くの圧縮ツールにはこうした制約があります。webpackの圧縮ツールがコードの問題を引き起こしていると思われる場合は、原因を特定するまで一時的に無効にすることができます。

一方、esbuildは明示的に指示しない限りコードを圧縮しません（--minify flagを使用）。そのため、圧縮プロセスをより細かく制御できます。

開発者は、重要な依存関係がバンドルに適した形に最適化されていることも確認しましょう。動的な依存関係をバンドルしようとすると、バンドルに失敗する可能性があります。こうした依存関係は静的依存関係として宣言するか、externalsを使って除外する必要があります。Snykのdependency-checkを使えば、この作業を簡単に進められます。

拡張機能を保護する

Visual Studio Code Marketplaceでは、新しい拡張機能や更新を積極的にスキャンし、悪意のあるコンテンツがないか確認しています。また、VS Codeのユーザーは、不正行為を報告リンクから安全でない拡張機能を報告できます。しかし、こうした予防策を講じていても、Visual Studio Code Marketplaceから悪意のあるコンテンツがなくなるわけではありません。

Snykが公開した調査では、Visual Studio Code Marketplaceに、サーバーサイドリクエストフォージェリやディレクトリトラバーサルなど、さまざまな攻撃にシステムをさらす可能性のある脆弱な拡張機能が複数見つかりました。

これらの拡張機能の多くは、悪意を持って作られたものではありません。開発者がリスクを知らなかったり、時間がなかったりして、セキュリティを優先できていないだけです。セキュリティ対策は開発サイクルの早い段階で検討し、実装する必要があります。

大変な作業に思えるかもしれませんが、Snykのようなツールを使えば、セキュリティ対策やチェックを一から考える必要はありません。Snykには無料プランがあり、どの開発者でも基本機能を手頃に利用して統合できます。

さらに、Snykは現代のソフトウェア開発がスピーディーであることを理解しています。GitHubまたはGoogleのプロフィールを連携すれば、Snykの新規アカウントを簡単に登録できます。また、認証やSnykの機能へのアクセスにSnyk Web UIを使う必要はありません。Snyk CLIや、VS Code拡張機能を含む各種インテグレーションも利用できます。

この拡張機能は、記述したコードのセキュリティ問題をスキャンできるだけでなく、コードが依存するモジュールやライブラリもスキャンできます。SnykのVS Code拡張機能のUIは、Web UIをコンパクトにしたものです。診断、問題ビュー/パネル、エディターなど、VS CodeのさまざまなUI要素に統合されています。これを使えば、コードのどの行が拡張機能を潜在的な攻撃にさらす可能性があるのかを確認できます。

拡張機能を公開すると、一部のモジュールや依存関係がサンドボックス化される場合があるため、すべてを手動で保護する必要があるとは限りません。たとえば、Snykの分析パネルを使って、プロジェクトのセキュリティに関係しないと思われる行やファイルを無視できます。

デフォルトでは、Snyk VS Code Extensionがプロジェクトの作成中に自動で監視・スキャンします。実行するタイミングや方法を設定することもできます。

最終的に、拡張機能をワークフローにどう組み込むかは、あなた次第です。

まとめ

このガイドでは、VS Code拡張機能の開発を始めるために必要な知識を紹介しました。拡張機能の基本的な構造や、拡張機能マニフェストとエントリーファイルの関係について解説し、開発を始める際に役立つベストプラクティスも紹介しました。

特に重要なのは、拡張機能がMicrosoftのUX標準を満たし、安全であることを確認することです。拡張機能に高品質なソースコードと安全な依存関係が使われているか確認するには、開発者ファーストのセキュリティプラットフォームであるSnykが最適です。Snykは豊富なインテグレーションを備えており、その一つであるVS Codeプラグインを使って、プロジェクトの品質とセキュリティのチェックを実行・自動化できます。