I.はじめに
VSCodeはMicrosoft社の非常に軽量なエディタで、軽量でありながら非常に強力な機能を持っています。その理由は、VSCode の多くの強力な機能はプラグインに基づいて実装されており、IDE は最も基本的なフレームワークと基本的な機能しか提供しておらず、その機能を強化および拡張するにはプラグインを使用する必要があります。
プラグインの重要な役割により、VSCode のプラグイン コミュニティの規模は現在非常に大きく、私たちが一般的に使用する開発ツールのほとんどはこのアプリケーション マーケットで見つけることができます。
VScode を開くと、インターフェイスの左側がアプリケーション マーケットへの入り口となり、必要なプラグインを検索できます。
ただし、ニーズは常に複雑かつ変化しやすく、既存のプラグインでは対応できないシナリオも常に存在するため、現時点では、VScode のオープン インターフェイスを使用して必要な機能を手動で実装する必要があります。
次に、VSCode を使用して、上記の手順で生成されたプロジェクトを開くことができます。ディレクトリ構造は次のようになります。最も重要な 2 つのファイルは、package.json と extension.js です。これら 2 つのファイルを理解した後、基本的に開発を開始できます。 VSCode プラグイン。
3. package.jsonファイル
package.json ファイルは VSCode 拡張機能のマニフェスト ファイルであり、多くのフィールドが含まれています。公式ドキュメントには、各フィールドに関する特別な手順も記載されています:マニフェスト。
ここでは、初期化後に生成されるファイルのみに焦点を当てます。これには主に次の主要なノードが含まれます。
1. Main: プロジェクトのエントリ ファイルを指定します。ここから、エントリ ファイルが extension.js であることがわかります。
2. 貢献: プラグインの貢献ポイント、プラグインの最も重要な構成。拡張機能を介してコントリビューションを登録することは、Visual Studio Code のさまざまなスキルを拡張するために使用されます。公式ドキュメントでは、その方法を示しています。
ここでは、commandsにsample.helloWorldというコマンドが登録されていますが、このコマンドは実際には./extension.jsに実装する必要があります（この部分が焦点です。後で説明します）。
3. activateEvents: このノードは、プラグインがどのような状況でアクティブ化されるかを VScode に伝えます。公式ドキュメントではアクティブ化のタイミングが指定されています: activityEvents 。上のスクリーンショットは、sample.helloWorldコマンドを実行した場合にのみアクティブ化されることを示しています。さらに、次のようなシナリオもあります。
-
onCommand: コマンドが呼び出されたときにアクティブ化されます
-
onLanguage: 「onLanguage:python」など、特定の言語に解析されたファイルを開くときにアクティブ化されます。
-
*: vscode が起動するとすぐにプラグインが有効になります。
-
onFileSystem: 特定のスキームからファイルまたはフォルダーが読み取られるたびに
-
onView: 指定された ID を持つビューが VS Code サイドバーで展開されるたびに...
詳細については、興味がある場合は公式ドキュメントを参照してください。
- 拡張子.js ファイル
extension.js ファイルは、上記の package.json の main フィールドに対応するファイルです (ファイル名はカスタマイズ可能)。このファイルは主に activate と deactivate の 2 つのメソッドをエクスポートします。2 つのメソッドの実行タイミングは次のとおりです。
- activate: プラグインがアクティブ化されたときに実行されるメソッド
- deactivate: プラグインが破棄されたときに呼び出されるメソッド
5. デバッグと実戦
この初期化プロジェクトのメイン ファイルを導入した後、それをデバッグして実行できます。F5 キーを押すとデバッグ モードになり、次のように新しいウィンドウが開きます。
このウィンドウは「拡張開発ホスト」とマークされています。Ctrl + Shift +P で前に定義したコマンドを入力して実行します。テキストが右下隅にポップアップ表示されます。
生成したデモ プロジェクトは正常に実行されました。次に、プラグインにわずかな変更を加えて、今日の日付を表示し、ショートカット キーをバインドできるようにします。package.json の変更は次のとおりです。
extensions.js ファイルは次のように変更されます。
実行し、ctrl + f9 をクリックすると、通常どおりに実行されます。
コマンドを実行するためのショートカット キーの構成に加えて、右クリック メニューを構成することもできます。コントリビュートはメニューを構成できます。
実行後、エディター パネルとリソース マネージャー パネルをそれぞれ右クリックすると、このコマンドが表示されます。
6. まとめ
上記は、VSCode プラグイン開発の基本的な考え方を説明する、簡単な入門レベルの実践的なチュートリアルです。将来、より複雑でカスタマイズされたニーズが発生した場合は、公式ドキュメントを参照して詳細を検討できます。
プラグイン開発をマスターする必要はありますか? Putao は、現時点でその必要がないのであれば、あまり深く理解する必要はないと感じていますが、自律した実店舗のプログラマーとして、まず基本的な考え方を大まかに理解することができます。
実際の作業では、プラグインによって複雑な要件に対する多くの問題が解決され、作業効率が大幅に向上する場合があるからです。
たとえば、このシナリオでは、プロジェクトでActiveReportsJSなどのレポート コントロールを使用しますが、コードを記述する過程で、一部のレポートのデザインを変更する必要がある場合があります。その後、これを使用するたびに、プロジェクトを開始してレポート デザイナーを開くか、デスクトップ レポート デザイナーからレポートを開く必要があります。
しかし実際には、VScode プラグイン API によって提供される CustomEditor インターフェイスを介して、特別なレポート ファイル用に高度にカスタマイズされたプライベート エディターを実装できます。以下に示すように、レポート ファイルをクリックして、このコントロールによって提供されるデザイナー プレビュー ファイルを直接使用します。 :
このプラグインの導入により、作業効率がさらに向上し、多くの繰り返し作業が回避されます。CustomEditor インターフェースに関しては、VSCode の公式サンプルvscode-extension-samples も提供されているので、興味のある方はご覧ください。
![](https://img-blog.csdnimg.cn/img_convert/87f2be26ab32f0cd4faa97abc0a0c476.png
この記事はここで終わります、皆さん見ていただきありがとうございました~~