このチュートリアルで学ぶこと
✓ 拡張機能プロジェクト作成
✓ コマンド登録
✓ 言語サポート
✓ WebView
✓ 公開
Step 1: プロジェクト作成
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
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キーで拡張機能開発ホストを起動
# ビルド
npm run compile
# パッケージ化
npm install -g vsce
vsce package
# 公開
vsce publish
まとめ
VS Code拡張機能でエディタをカスタマイズできます。コマンド、言語サポート、WebViewで強力な機能を追加しましょう。
← 一覧に戻る