Open6
VSCode拡張機能 CodeZoo
まさきちvscode-petsのようなVScodeの拡張機能を作成したい。
まさきちYeoman と VS Code Extension Generatorジェネレータをインストール
npm install -g yo generator-code
yo code // 拡張機能プロジェクトの生成
インストールされたパッケージを確認
➜ ~ npm -g list
/Users/takahashi_masaki/.nodebrew/node/v16.0.0/lib
├── generator-code@1.11.4
├── npm@7.10.0
├── yarn@1.22.19
└── yo@5.0.0
npx yo code
src/extension.tsを主な開発ファイルとして使用
まさきちアニメーションの生成
requestAnimationFrame()
まさきちWebView API
Webviewはアプリケーション内に埋め込まれたブラウザコンポーネント
まさきち- ペットの動きをユーザーの操作に連動。
- ユーザーのマウス移動に反応
- ペットが大きくなる。
WebviewとVS Code APIの間でメッセージ通信
WebviewからVS Codeへのメッセージ送信
const vscode = acquireVsCodeApi();
vscode.postMessage({ type: 'move', direction: 'left' });
逆にVS CodeからWebviewへメッセージを送るには、postMessageメソッドを使用
panel.webview.postMessage({ command: 'movePet', direction: 'right' });
VS Codeの「Run Extension」機能で拡張機能をテスト
vsceツールを使用して拡張機能をパッケージ化し、VS Codeのマーケットプレイスに公開