M

MLOG

Español

Desbloquee el poder de VS Code aprendiendo a crear extensiones personalizadas. Esta guía proporciona un tutorial completo, desde la configuración hasta la publicación.

Dominar el Desarrollo de Extensiones de VS Code: Una Guía Completa para Desarrolladores Globales

Visual Studio Code (VS Code) se ha convertido en el editor de código preferido por millones de desarrolladores en todo el mundo. Su popularidad se debe a su naturaleza ligera, sus potentes funciones y, lo más importante, su extensibilidad. La capacidad de crear extensiones personalizadas permite a los desarrolladores adaptar el editor a sus necesidades específicas, aumentando la productividad y optimizando los flujos de trabajo. Esta completa guía le guiará a través del proceso de creación de sus propias extensiones de VS Code, desde la configuración inicial hasta la publicación de su creación para que el mundo la utilice.

¿Por qué desarrollar extensiones de VS Code?

El desarrollo de extensiones de VS Code ofrece numerosos beneficios, tanto para los desarrolladores individuales como para las organizaciones:

Requisitos previos

Antes de sumergirse en el desarrollo de extensiones, asegúrese de tener instalado lo siguiente:

Configuración de su entorno de desarrollo

Con los requisitos previos en su lugar, está listo para configurar su entorno de desarrollo:

  1. Crear un nuevo proyecto de extensión: Abra su terminal y ejecute el siguiente comando para iniciar el generador de extensiones:
    2. yo code
  2. Responder a las indicaciones: El generador le hará una serie de preguntas sobre su extensión. Aquí hay un desglose de las indicaciones comunes y las respuestas recomendadas:
    • ¿Qué tipo de extensión desea crear? Elija "Nueva extensión (TypeScript)" para una extensión basada en TypeScript, que es el enfoque recomendado.
    • ¿Cómo se llama su extensión? Elija un nombre descriptivo y único para su extensión. Ejemplos: "Corrector ortográfico de código", "Fragmentos de JavaScript", "Autocompletado de Python".
    • ¿Cuál es el identificador de su extensión? Este es un identificador único para su extensión, normalmente en el formato `editor.extension-name`. Elija un nombre de editor (por ejemplo, su nombre de usuario de GitHub o el nombre de su empresa).
    • ¿Cuál es la descripción de su extensión? Proporcione una descripción concisa e informativa de lo que hace su extensión.
    • ¿Inicializar un repositorio git? Elija "Sí" para inicializar un repositorio Git para el control de versiones.
    • ¿Desea utilizar eslint para el código lint? Elija "Sí" para hacer cumplir la coherencia del estilo de código.
  3. Abra el proyecto en VS Code: Una vez que el generador se complete, abra la carpeta del proyecto recién creada en VS Code.

Comprender la estructura del proyecto

El generador de extensiones crea una estructura de proyecto básica con los siguientes archivos clave:

Escribir su primera extensión

Empecemos por crear una extensión sencilla que muestre un mensaje "Hola Mundo" cuando se ejecuta un comando:

  1. Abra `src/extension.ts`: Este archivo contiene la función `activate`, que se llama cuando se activa su extensión.
  2. Modifique la función `activate`: Reemplace el código existente con el siguiente:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('¡Enhorabuena, su extensión \"my-extension\" ya está activa!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('¡Hola Mundo desde mi extensión!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Explicación:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registra un comando con el ID `my-extension.helloWorld`. Este comando estará disponible en la paleta de comandos de VS Code.
    • `vscode.window.showInformationMessage('Hola Mundo desde mi extensión!')`: Muestra un mensaje informativo en la ventana de VS Code.
    • `context.subscriptions.push(disposable)`: Agrega el comando a las suscripciones de la extensión, asegurando que se descarte correctamente cuando la extensión se desactiva.
  4. Modifique `package.json`: Agregue lo siguiente a la sección `contributes` para definir el comando:
    5. 
"contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hola Mundo"
		}]
	}
  5. Explicación:
    • `"commands"`: Define los comandos que su extensión aporta.
    • `"command": "my-extension.helloWorld"`: Especifica el ID del comando que coincide con el ID usado en `extension.ts`.
    • `"title": "Hola Mundo"`: Establece el nombre para mostrar del comando en la paleta de comandos.

Probar su extensión

Ahora es el momento de probar su extensión:

  1. Pulse F5: Esto iniciará una nueva ventana de VS Code con su extensión instalada. Este es el "Host de desarrollo de extensiones".
  2. Abra la paleta de comandos: Pulse `Ctrl+Shift+P` (o `Cmd+Shift+P` en macOS) para abrir la paleta de comandos.
  3. Escriba "Hola Mundo": Debería ver su comando en la lista de la paleta de comandos.
  4. Seleccione "Hola Mundo": Al hacer clic en el comando, se ejecutará y se mostrará el mensaje "Hola Mundo" en la ventana de VS Code.

Depurar su extensión

La depuración es crucial para identificar y solucionar problemas en su extensión. VS Code proporciona una excelente compatibilidad con la depuración:

  1. Establecer puntos de interrupción: Haga clic en el medianil del editor junto a los números de línea para establecer puntos de interrupción en su código.
  2. Pulse F5: Esto iniciará el Host de desarrollo de extensiones en modo de depuración.
  3. Active su extensión: Ejecute el comando o la acción que activa el código que desea depurar.
  4. Inspeccione las variables y la pila de llamadas: El depurador de VS Code pausará la ejecución en sus puntos de interrupción, lo que le permitirá inspeccionar las variables, recorrer el código y examinar la pila de llamadas.

Trabajar con la API de VS Code

La API de VS Code proporciona un rico conjunto de interfaces y funciones para interactuar con el editor. Aquí hay algunas áreas clave de la API:

Ejemplo: Creación de una extensión de fragmento de código

Creemos una extensión que agregue un fragmento de código para crear un componente React básico:

  1. Crear una carpeta `snippets`: Cree una nueva carpeta llamada `snippets` en la raíz de su proyecto.
  2. Crear un archivo de fragmento de código: Cree un archivo llamado `react.json` dentro de la carpeta `snippets`.
  3. Agregar la definición del fragmento de código: Agregue el siguiente JSON a `react.json`:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Crea un componente React básico"
	}
}
  4. Explicación:
    • `"React Component"`: El nombre del fragmento de código.
    • `"prefix": "reactcomp"`: El prefijo que activa el fragmento de código. Escribir `reactcomp` y pulsar `Tab` insertará el fragmento de código.
    • `"body"`: Una matriz de cadenas que representan las líneas de código en el fragmento de código.
    • `${1:ComponentName}`: Una parada de tabulación que le permite cambiar rápidamente el nombre del componente.
    • `"description"`: Una descripción del fragmento de código.
  5. Modificar `package.json`: Agregue lo siguiente a la sección `contributes`:
    6. 
"contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Explicación:
    • `"snippets"`: Define los fragmentos de código que su extensión aporta.
    • `"language": "javascriptreact"`: Especifica el idioma al que se aplica el fragmento de código.
    • `"path": "./snippets/react.json"`: Especifica la ruta al archivo del fragmento de código.
  7. Pruebe su fragmento de código: Abra un archivo `.jsx` o `.tsx` y escriba `reactcomp`. Pulse `Tab` para insertar el fragmento de código.

Técnicas avanzadas de desarrollo de extensiones

Una vez que haya dominado los conceptos básicos, puede explorar técnicas de desarrollo de extensiones más avanzadas:

Internacionalización y localización (i18n y L10n)

Para llegar a una audiencia global, considere internacionalizar y localizar su extensión. Esto implica adaptar su extensión para que sea compatible con diferentes idiomas y regiones.

Publicación de su extensión

Una vez que su extensión esté lista, puede publicarla en el mercado de VS Code para que otros la utilicen:

  1. Crear una organización de Azure DevOps: Necesitará una organización de Azure DevOps para publicar su extensión. Si no tiene una, cree una cuenta gratuita en el sitio web de Azure DevOps.
  2. Instalar la herramienta `vsce`: El administrador de extensiones de VS Code (`vsce`) es una herramienta de línea de comandos para empaquetar y publicar extensiones. Instálela globalmente mediante npm:
    3. npm install -g vsce
  3. Crear un editor: Un editor es una identidad que posee sus extensiones en el mercado. Cree un editor mediante el comando `vsce create-publisher`. Tendrá que proporcionar un nombre de editor y un token de acceso personal (PAT) de Azure DevOps.
  4. Generar un token de acceso personal (PAT): En Azure DevOps, vaya a "Configuración de usuario" -> "Tokens de acceso personal" y cree un nuevo PAT con el ámbito "Marketplace (Publicar)".
  5. Empaquetar su extensión: Use el comando `vsce package` para empaquetar su extensión en un archivo `.vsix`.
  6. Publicar su extensión: Use el comando `vsce publish` para publicar su extensión en el mercado. Deberá proporcionar el nombre de su editor y su PAT.

Mejores prácticas para el desarrollo de extensiones

Siga estas mejores prácticas para crear extensiones de VS Code de alta calidad y mantenibles:

Recursos de la comunidad

Aquí hay algunos recursos valiosos para obtener más información sobre el desarrollo de extensiones de VS Code:

Conclusión

El desarrollo de extensiones de VS Code es una forma poderosa de personalizar su entorno de codificación, aumentar la productividad y compartir sus soluciones con la comunidad global de desarrolladores. Siguiendo esta completa guía, puede dominar el arte del desarrollo de extensiones y crear herramientas innovadoras que mejoren la experiencia de VS Code para usted y para los demás. Recuerde abrazar la comunidad, contribuir a proyectos de código abierto y aprender y explorar continuamente el mundo en constante evolución del desarrollo de extensiones de VS Code. ¡Buena suerte y feliz codificación!