O que você vai aprender neste tutorial
✓ Criação de projeto de extensão
✓ Registro de comandos
✓ Suporte a linguagens
✓ WebView
✓ Publicação
Step 1: Criação do Projeto
npm install -g yo generator-code
yo code
# Seleções:
# - New Extension (TypeScript)
# - Extension name: my-extension
# - Identifier: my-extension
Step 2: Estrutura do Projeto
my-extension/
├── src/
│ └── extension.ts
├── package.json
├── tsconfig.json
└── .vscode/
└── launch.json
Step 3: Extensão Básica
// src/extension.ts
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
// Registro de comando
const disposable = vscode.commands.registerCommand(
'my-extension.helloWorld',
() => {
vscode.window.showInformationMessage('Hello World!');
}
);
context.subscriptions.push(disposable);
}
export function deactivate() {}
Step 4: Configuração do 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: Operações do Editor
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: Operações de Arquivo
// Leitura de arquivo
const uri = vscode.Uri.file('/path/to/file');
const content = await vscode.workspace.fs.readFile(uri);
// Escrita de arquivo
await vscode.workspace.fs.writeFile(uri, Buffer.from('content'));
// Busca de arquivos no workspace
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: Depuração e Publicação
# Depuração
# Pressione F5 para iniciar o host de desenvolvimento da extensão
# Build
npm run compile
# Empacotamento
npm install -g vsce
vsce package
# Publicação
vsce publish
Resumo
Com extensões do VS Code, você pode personalizar o editor. Adicione funcionalidades poderosas usando comandos, suporte a linguagens e WebView.
← Voltar para a lista