この記事の要点
• VS Code拡張機能のプロジェクト作成とコマンド登録
• 言語サポートとWebViewによるカスタムUI
• マーケットプレイスへの公開手順
このチュートリアルで学ぶこと
- 拡張機能プロジェクト作成
- コマンド登録
- 言語サポート
- WebView
- 公開
Step 1: プロジェクト作成
# yo generator-code 1.0+
npm install -g yo generator-code
yo code
# 選択:
# - New Extension (TypeScript)
# - Extension name: my-extension
# - Identifier: my-extension
Step 2: プロジェクト構造
my-extension/
├── src/
│ └── extension.ts
├── package.json
├── tsconfig.json
└── .vscode/
└── launch.json
ポイント: 拡張機能はactivate関数で初���化されます。コマンドの登録はpackage.jsonのcontributesセクションとextension.tsの両方で行う必要があります。
Step 3: 基本的な拡張機能
// src/extension.ts
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
// コマンド登録
const disposable = vscode.commands.registerCommand(
'my-extension.helloWorld',
() => {
vscode.window.showInformationMessage('Hello World!');
}
);
context.subscriptions.push(disposable);
}
export function deactivate() {}
Step 4: package.json設定
{
"name": "my-extension",
"displayName": "My Extension",
"version": "0.0.1",
"engines": { "vscode": "^1.85.0" },
"activationEvents": [],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "my-extension.helloWorld",
"title": "Hello World"
}
],
"keybindings": [
{
"command": "my-extension.helloWorld",
"key": "ctrl+shift+h"
}
]
}
}
Step 5: エディタ操作
vscode.commands.registerCommand('my-extension.insertDate', () => {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
const date = new Date().toISOString().split('T')[0];
editor.edit((editBuilder) => {
editBuilder.insert(editor.selection.active, date);
});
});
Step 6: ファイル操作
// ファイル読み取り
const uri = vscode.Uri.file('/path/to/file');
const content = await vscode.workspace.fs.readFile(uri);
// ファイル書き込み
await vscode.workspace.fs.writeFile(uri, Buffer.from('content'));
// ワークスペースファイル検索
const files = await vscode.workspace.findFiles('**/*.ts');
Step 7: WebView
vscode.commands.registerCommand('my-extension.openPanel', () => {
const panel = vscode.window.createWebviewPanel(
'myPanel',
'My Panel',
vscode.ViewColumn.One,
{ enableScripts: true }
);
panel.webview.html = `
<!DOCTYPE html>
<html>
<body>
<h1>Hello WebView</h1>
<button id="btn">Click me</button>
<script>
const vscode = acquireVsCodeApi();
document.getElementById('btn').onclick = () => {
vscode.postMessage({ type: 'click' });
};
</script>
</body>
</html>
`;
panel.webview.onDidReceiveMessage((message) => {
if (message.type === 'click') {
vscode.window.showInformationMessage('Button clicked!');
}
});
});
Step 8: デバッグと公開
デバッグは F5キーで拡張機能開発ホストを起動します。
# vsce 2.0+
# ビルド
npm run compile
# パッケージ化
npm install -g vsce
vsce package
# 公開
vsce publish
まとめ
実践メモ: 開発中はF5キーでExtension Development Hostが起動し、リアルタイムに拡張機能をテストできます。
注意: vsceでパッケージ化する前に、README.mdを更新し不要なファイルを.vscodeignoreに追加してください。
VS Code拡張機能でエディタをカスタマイズできます。コマンド、言語サポート、WebViewで強力な機能を追加しましょう。
参考リソース
- VS Code Extension API 公式
- Your First Extension チュートリアル
- vsce (Publishing Extensions)
- VS Code Extension Samples