VS Codeプラグイン開発の概要

前の記事

開発者のためのコード開発ツールとして、VS Codeはますます開発者に愛されています。私の周りのフロントエンドと同様に、毎日の開発作業の80%はVS Codeで行われています。人々がそれを使用するにつれて、もはやシンプルでエレガントで快適なコードを書くという基本的なニーズを満たしていません。魚を釣り、小説を読んだり、株を調べたり、記事を読んだり、チェスをしたりする人もいます。VS Codeのプラグイン市場に2つの単語を入力すると、20以上のプラグインがあります。この記事では、VS Codeの機能の概要を説明し、プラグインドキュメントをすばやくインデックス化するのに役立ちます。

プラグイン機能

プラグインは以下の機能を実現できます。

• 各種ファイルのアイコンとテーマの色をカスタマイズ
• カスタムコンポーネントとUIの追加
• HTMLで機能豊富なWebビューを作成する
• 新しいプログラミング言語のサポート
• 特殊なデバッグ手段のサポート

コンポーネントの主なモジュール

ケースの大集合

プラグインの公式事例大集合 https://github.com/microsoft/vscode-extension-samples ここで提供された例を見ると、ほとんどのシナリオの開発パラダイムがわかります。

各プラグインのディレクトリはほぼ同じであり、これは公式に合意された標準プラグインディレクトリでもあります。

ケース·オブ·ケース

UIコンポーネント

vscodeは非常に標準的なUIを提供し、プラグインを作成する際には、アイコンサイズ16*16のsvgファイルなどの要件に厳密に従う必要があります。

以下は公式のUIゾーンです。

コマンドライン·ツール

yo と、 generator-code

によると

#依存関係のインストール
npm install-g yo generator-code
新しいプロジェクトのコード

ボタンの位置

プラグインを使用して、vscode内のさまざまな場所に多くのカスタムボタンを挿入できます。vscodeでサポートされる場所は以下の通りです。 https://code.visualstudio.com/api/references/contribution-points#contributes.menus

コンポーネントのローカル開発手順

ローカル開発のステップは簡単です。

#依存関係のインストール
npm install-g yo generator-code
新しいプロジェクトのコード

ケース2。

依存関係をインストールした後、F 5キーを押すと、デバッグ用の新しいウィンドウが開きます。コードを変更すると、再ロードが有効になります。

出版物を https://code.visualstudio.com/api/working-with-extensions/publishing-extension

npm install -g @vscode/vsce

vsce package

vsce login <publisher name>

vsce publish

条件があるとき

ボタンを挿入する際に条件が必要な場合があります。例えば、現在開いているファイルがあるときにボタンが表示されます。これらの条件は以下の文書に従うべきです。 https://code.visualstudio.com/api/references/when-clause-contexts

プラグインの概要ガイダンス https://code.visualstudio.com/api/extension-guides/overview

コンポーネントのビジネスロジックを記述するVS Code APIが使用できる https://code.visualstudio.com/api/references/vscode-api#tasks.registerTaskProvider