序章

Visual Studio Codeの拡張機能パックは、関連する拡張機能のコレクションをインストールする場合に役立ちます。 この記事では、拡張機能のコレクションを他の開発者と共有できるように、拡張機能パックを作成します。

ツールのインストール

拡張パックの作成を開始するには、YeomanスキャフォールディングCLIツールとVSCodeのコードジェネレーターをインストールする必要があります。 次のコマンドでYeomanをインストールできます。

  1. npm install -g yo

次に、そのようなVSCode拡張機能用のコードジェネレーターツールをインストールできます。

  1. npm install -g generator-code

新しい拡張プロジェクトの生成

正しいツールがインストールされたら、新しいExtensionPackプロジェクトを生成する準備が整います。 次のコマンドを実行すると、このプロセスを開始できます。

  1. yo code

作成する拡張機能のタイプを選択するようにすぐに求められます。 この場合、 New Extension Pack.

その後、名前、識別子、説明など、拡張機能に関するいくつかの異なる質問が表示されます。 すべての質問に答えると、プロジェクトが生成されたという確認が届きます。

VS Codeで新しいプロジェクトを開いた後、 package.json ファイル。 特に注意してください extensionPack 財産。

このプロパティの内部には、ExtensionPackに含める必要のある各拡張機能を一覧表示します。 拡張機能ごとに、発行元と拡張機能の名前を次の形式で含める必要があります。

<author>.<extension-name>

拡張パックへの拡張の追加

デモの目的で、 Debugger forChrome拡張機能をマーケットプレイスで公開します。

そのページで検索して必要な情報を見つけることができますが、さらに簡単な方法があります。 拡張子のURLを見ると、「itemName=」の後のテキストの最後のビットがまさに必要なものです。 msjsdiag.debugger-for-chrome.

そこから、そのテキストをコピーして、自分のテキストに直接追加できます。 package.json ファイル。

同じプロセスに従って、必要な数の拡張機能を含めることができます。

役立つ拡張パック

独自の拡張パックを作成する前に、どの拡張パックがすでに存在するかを確認するために、少し調査する価値があるかもしれません。 コードマーケットプレイスを開くことから始めることができます。 一番下までスクロールすると、拡張パックでフィルタリングするためのボタンが表示されます。

そのリンクをクリックすると、すぐにVSCodeの最も人気のある拡張パックのリストが表示されます。

例えば:

結論

VisualStudioCodeの拡張パックの作成は非常に簡単です。 それらはすべての足場を提供するので、あなたがしなければならないのは含まれる拡張機能のリストを追加することだけです。