Lo que aprenderas en este tutorial
✓ Creacion del proyecto de extension
✓ Registro de comandos
✓ Soporte de lenguajes
✓ WebView
✓ Publicacion
Step 1: Creacion del proyecto
npm install -g yo generator-code
yo code
# Seleccionar:
# - New Extension (TypeScript)
# - Extension name: my-extension
# - Identifier: my-extension
Step 2: Estructura del proyecto
my-extension/
├── src/
│ └── extension.ts
├── package.json
├── tsconfig.json
└── .vscode/
└── launch.json
Step 3: Extension basica
// src/extension.ts
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
// Registro de comandos
const disposable = vscode.commands.registerCommand(
'my-extension.helloWorld',
() => {
vscode.window.showInformationMessage('Hello World!');
}
);
context.subscriptions.push(disposable);
}
export function deactivate() {}
Step 4: Configuracion de 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: Operaciones del 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: Operaciones de archivos
// Lectura de archivos
const uri = vscode.Uri.file('/path/to/file');
const content = await vscode.workspace.fs.readFile(uri);
// Escritura de archivos
await vscode.workspace.fs.writeFile(uri, Buffer.from('content'));
// Busqueda de archivos en el 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: Depuracion y publicacion
# Depuracion
# Presiona F5 para iniciar el host de desarrollo de extensiones
# Compilacion
npm run compile
# Empaquetado
npm install -g vsce
vsce package
# Publicacion
vsce publish
Resumen
Con las extensiones de VS Code puedes personalizar el editor. Agrega funcionalidades potentes con comandos, soporte de lenguajes y WebView.
← Volver a la lista