はじめに
私が最近感じている課題が、作業のタイムボックスをうまく切ることです。
意志が弱く、作業の区切りどきを決めるのが苦手です。
そして、AIによって作業がスムーズに進む分、あと少しだけ続けたいという気持ちが強まり、タイムボックスを切るのがさらに難しくなっていました。
そこで、VSCode 内で半ば強制的に作業を中断させてみてはどうかと考え、拡張機能を作りました。
本記事では、次のポイントをまとめています。
- 拡張機能の基本構造
- Activation Events / Contribution Points /VS Code APIの概要
- Webviewについて
「自分でも VSCode 拡張を作れるのか試してみたい」という方に向けた内容です。
この拡張機能でできること
今回作成した拡張機能では、次のような仕組みを実装しました。
- ポモドーロタイマーで作業時間を計測
- 休憩時間になると Webview が起動し、コーヒーブレイク動画を自動再生
- 休憩後にやったことと次やることを忘れないようにメモ＆出力
VSCode内でタイムマネジメントしたい人向けのミニツールです。
公式ドキュメントを参考に進めていきました。
VSCode 拡張機能の基本構造
まず初めにVSCode 拡張機能を作るためのセットアップを行います。
npm install --global yo generator-code
yo code
上記のコマンドを実行し、設定を進めると、基本構造は次のようになります。
.
├── .vscode
│ ├── launch.json
│ └── tasks.json
├── .gitignore
├── README.md
├── src
│ └── extension.ts // 拡張機能のソースコード
├── package.json // 拡張機能のマニフェストファイル
├── tsconfig.json
簡単な拡張機能であれば、package.jsonに拡張機能の設定とextension.tsに具体的に何を実行するかのコードを追記するだけで完成します。
VSCode 拡張機能の3つの概念
VSCode の拡張機能は、ざっくり次の3つの概念で構成されています。
最初は理解できなかったので、概念をAIに図式化してもらいました。
1. Activation Events
拡張機能がいつ有効化されるかを定義します。
今回の拡張は常にタイマー状態を管理したかったため onStartupFinished を使用しています。
"activationEvents": [
"onStartupFinished"
]
2. Contribution Points
拡張機能はContribution Pointsを登録することで、Visual Studio Code内の様々な機能を拡張することができます。
commands でコマンドIDを登録し、VSCode にこのコマンドがありますよと宣言します。
menus ではどこからコマンドを実行できるかを指定できます。
その他にも、ステータスバーやサイドバーに独自UIを置いたりもできます。
思った以上に、いろんな場所に機能を追加できることに驚きました！
この拡張機能ではコマンドパレットからコマンドを実行しないように設定したかったため、menusでコマンドパレットを指定して、when句でfalseを指定しました。
"contributes": {
"commands": [
{
"command": "coffeeBreakTimer.startCycle",
"title": "Coffee Break Timer: Start Cycle"
},
{
"command": "coffeeBreakTimer.start",
"title": "Coffee Break Timer: Start"
},
{
"command": "coffeeBreakTimer.pause",
"title": "Coffee Break Timer: Pause"
},
{
"command": "coffeeBreakTimer.stop",
"title": "Coffee Break Timer: Stop"
}
]
,
"menus": {
"commandPalette": [
{
"command": "coffeeBreakTimer.startCycle",
"when": "false"
},
{
"command": "coffeeBreakTimer.start",
"when": "false"
},
{
"command": "coffeeBreakTimer.pause",
"when": "false"
},
{
"command": "coffeeBreakTimer.stop",
"when": "false"
}
]
}
}
3. VS Code API
VS Code APIはVisual Studio Code 拡張機能から呼び出せる JavaScript API のセットです。コマンドは、registerCommand関数を使用してエディターに追加します。
function registerCommands(context: vscode.ExtensionContext) {
const app = new AppController(context);
app.init();
const startCycle = vscode.commands.registerCommand('coffeeBreakTimer.startCycle', () => {
app.startCycle();
});
const startCmd = vscode.commands.registerCommand('coffeeBreakTimer.start', () => {
app.start();
});
const pauseCmd = vscode.commands.registerCommand('coffeeBreakTimer.pause', () => {
app.pause();
});
const stopCmd = vscode.commands.registerCommand('coffeeBreakTimer.stop', () => {
app.stop();
});
context.subscriptions.push(startCycle, startCmd, pauseCmd, stopCmd, app);
}
export function activate(context: vscode.ExtensionContext) {
registerCommands(context);
}
WebView API
拡張機能では集中する時間が終了したときに、WebViewを開き、CanvaのAIで生成した短いコーヒーブレイク動画を再生しています。WebView APIを使用すると、拡張機能はVisual Studio Code内で新たなビューを作成できます。
// Webviewパネルを作成し、動画ページを表示する
this.panel = vscode.window.createWebviewPanel(
'coffeeBreak',
'Coffee Break',
vscode.ViewColumn.Active,
{ enableScripts: true }
);
// 拡張内のファイルをWebviewで読み込める形に変換する
const videoSrc = webview.asWebviewUri(
vscode.Uri.joinPath(this.context.extensionUri, 'media', 'coffee.mp4')
);
// Webview → 拡張へのメッセージ受信（メモ反映）
this.panel.webview.onDidReceiveMessage((message) => {
if (message.type === 'REFLECT') {
this.outputChannel.appendLine(message.text);
}
});
※VSCode 公式でWebviewは必要な場合のみ使用すべきとガイドラインで定められています。今回は動画再生という通常APIでは実現できない機能が必要だったため、Webviewを使用しています。
まとめ
初めて拡張機能を作ってみて、思っていたより簡単！というのが率直な感想でした。
VSCodeのAPIは柔軟性が高く、アイデア次第で便利なツールがまだまだ作れそうだなとワクワクしています。
今回の経験をきっかけに、今後もいろんな拡張機能を模索していこうと思います。
公式にもたくさんの拡張機能の例があったので、気になる方はチェックしてみてください。
VSCode 拡張に興味がある方の参考になれば嬉しいです！
GitHub
作成した拡張機能のソースコードはこちら