Cómo crear una extensión de VSCode
- Requisitos Previos
- Paso 1: Crear un Proyecto de Extensión
- Paso 2: Explorar la Estructura del Proyecto
- Paso 3: Desarrollar la Funcionalidad de la Extensión
- Paso 4: Probar la Extensión
- Paso 5: Publicar tu Extensión
- Conclusión
Requisitos Previos
Antes de comenzar, asegúrate de tener los siguientes elementos instalados:
1. Node.js y npm: Puedes descargar Node.js (que incluye npm) desde nodejs.org.
2. Yeoman y el generador de extensiones de VSCode: Ejecuta el siguiente comando en tu terminal para instalarlos globalmente:
npm install -g yo generator-code3. Visual Studio Code: Puedes descargarlo desde code.visualstudio.com.
Paso 1: Crear un Proyecto de Extensión
1. Abre tu terminal y crea un nuevo directorio para tu proyecto de extensión:
mkdir mi-primera-extension
cd mi-primera-extension2. Ejecuta Yeoman para generar tu proyecto de extensión:
yo codeResponde a las preguntas que aparecen:
- What type of extension do you want to create?: Selecciona "New Extension (TypeScript)" o "New Extension (JavaScript)" según prefieras.
- What's the name of your extension?: Proporciona un nombre para tu extensión.
- What's the identifier of your extension?: Proporciona un identificador único.
- What's the description of your extension?: Proporciona una breve descripción.
-
Initialize a git repository?: Opcional, puedes elegir
YesoNo. -
Which package manager to use?: Selecciona
npm.
Yeoman creará un proyecto básico de extensión con la estructura de archivos necesaria.
Paso 2: Explorar la Estructura del Proyecto
El proyecto generado tendrá la siguiente estructura:
mi-primera-extension/
├── .vscode/
│ ├── extensions.json
│ └── launch.json
├── src/
│ ├── extension.ts
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
├── vsc-extension-quickstart.md- src/extension.ts: Contiene el código principal de tu extensión.
- package.json: Contiene la configuración de tu extensión, incluyendo su nombre, versión, descripciones, comandos, etc.
Paso 3: Desarrollar la Funcionalidad de la Extensión
Abre el archivo src/extension.ts. Aquí es donde añadirás la lógica para tu extensión. Vamos a crear una simple extensión que muestra un mensaje de bienvenida cuando se activa.
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
console.log('Congratulations, your extension "mi-primera-extension" is now active!');
let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
vscode.window.showInformationMessage('¡Hola, mundo!');
});
context.subscriptions.push(disposable);
}
export function deactivate() {}Este código hace lo siguiente:
-
Registra un comando
extension.helloWorld. -
Cuando se ejecuta este comando, muestra un mensaje de información
¡Hola, mundo!en la ventana de VSCode.
Paso 4: Probar la Extensión
1. Abre tu proyecto en VSCode:
code .
2. Presiona F5 para abrir una nueva ventana de VSCode con tu extensión cargada.
3. Abre la paleta de comandos (Ctrl+Shift+P) y ejecuta el comando Hello World.
Deberías ver un mensaje emergente con el texto ¡Hola, mundo!.
Paso 5: Publicar tu Extensión
Para publicar tu extensión en el Visual Studio Code Marketplace, sigue estos pasos:
1. Crea una cuenta en Visual Studio Code Marketplace.
2. Instala vsce, la herramienta de empaquetado y publicación de extensiones:
npm install -g vsce3. Empaqueta tu extensión:
vsce package4. Publica tu extensión:
vsce publishNecesitarás un token de acceso personal que puedes generar en el Marketplace.
Conclusión
¡Felicidades! Has creado y probado tu primera extensión de VSCode. A partir de aquí, puedes seguir ampliando su funcionalidad y personalizarla según tus necesidades. Las extensiones de VSCode pueden ser tan simples o complejas como necesites, desde agregar simples comandos hasta integrar servicios externos y personalizar la interfaz de usuario.
Para más detalles y ejemplos avanzados, consulta la documentación oficial de Visual Studio Code.
Jorge García
Fullstack developer