Está en la página 1de 4

Las extensiones en VS Code se implementan por medio de

una API llamada Extension API, esta API es tan flexible que


algunas de las características base del editor están hechas
con ella. La Extension API tiene control sobre casi todo lo
que forma VS Code incluyendo vistas, componentes e
incluso soporte a nuevos lenguajes de programación.

Esto podría hacerte pensar que usar esta API es complicado,


pero comenzar a trabajar con ella es muy simple.

Primeros pasos

Lo primero que hay que hacer para comenzar a crear tu


propia extensión es instalar Yeoman y VS Code Extension
Generator, esto es bastante sencillo, todo lo que ocupas
hacer es usar unos simples comandos en la terminal:
npm install -g yo generator-code

Después de ejecutar correctamente el comando anterior


ejecutas el comando:
yo code

y llenas la información correspondiente (la mayoría de la


información se puede dejar vacía):
# ? What type of extension do you want to create? New
Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld


# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'?
Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

El comando generará una nueva carpeta que abriremos con


VS Code. Dentro de VS Code presionamos F5 para ejecutar
la extensión en modo de debug, para probar tu extensión
presionas ctrl+p y escribes:

>NombreDeLaExtensión

Cambios al comportamiento de la extensión se hacen desde


el archivo ‘extension.ts’

¿Y cómo funciona?

Principalmente hace uso de 3 componentes, Activations


Events, Contribution Points y la VS Code API.

Activation Events: Son eventos que causan que tu


extensión se active.

Contribution Points: Son declaraciones estáticas hechas


en el archivo package.json.

VS Code API: Es el set de JavaScript API que puede ser


usado en el código de tu extensión.

Estructura de archivos
├── .vscode
│ ├── launch.json //Configuración para la ejecución y debug
de la extension
│ └── tasks.json // Configuración para construir tareas que
compilan TypeScript
├── .gitignore //git ignore para los archivos de node_modules
├── README.md // Descripcion de la funcionalidad de tu
extensión
├── src
│ └── extension.ts // Codigo fuente de tu extensión
├── package.json // Extension manifest
└── tsconfig.json // Configuracion de TypeScript

El archivo package.json compone el Extension
Manifest, algunos de sus campos más importantes son:

 `name` y `publisher`: Estos dos campos son usados


para formar una ID única para la extensión.

 `main`: Este es el archivo que la extensión va a usar


como punto de entrada.

 `activationEvents` y `contributes`: Aquí es en
donde los Activation Events y Contribution
Points mencionados anteriormente son definidos.

 `engines.vscode`: Especifica la versión mínima de la


VS Code API con la que tu extensión es compatible.

El archivo especificado en el campo main exporta dos


funciones, `activate` y `deactivate`. La
función `activate` es ejecutada cuando ocurre
algún `activationEvent`. Mientras tanto, la
función `deactivate` te da una oportunidad de limpiar
procesos antes de que tu extensión se desactive.

Con esto quedaría lo más básico sobre como crear tu propia


extensión para VS Code y una explicación básica de cómo
funciona. Pero antes de que comiences a escribir tu propia
extensión deberías buscar si hay alguna extensión existente
que ya hace lo que quieres implementar. Muchas de las
extensiones forman parte de un proyecto de Open Source en
donde es fácil entrar a un proyecto y aportar ideas,
funcionalidad y/o documentación para mejorar la extensión
y formar parte de la comunidad.

Para más información en cómo crear una extensión en VS


Code →

También podría gustarte