Extensiones en Visual Studio Code
En el reciente evento Connect(), entre otras tantas increíbles noticias, se anunció el Visual Studio Marketplace, un lugar donde podremos conseguir extensiones para Visual Studio en todas sus versiones vigentes, incluyendo Visual Studio Code. Este post está particularmente apuntado a la creación de extensiones para Visual Studio Code, para aquellos que no conozcan esta herramienta, los invito a mi post introductorio.
Las extensiones nos permiten agregar funcionalidad a Visual Studio Code de forma modular y aislada, son una excelente manera de personalizar nuestra experiencia con la herramienta. Actualmente hay soporte para otros lenguajes, generación de snippets o simplemente herramientas para casos particulares de uso (como mi extensión DNXWatcher).
Prerequisitos
Visual Studio Code es un editor multiplataforma, por lo que, las herramientas que necesitamos para la creación de extensiones pueden conseguirse en Mac, Linux y obviamente, Windows.
- Visual Studio Code (instalador multiplataforma)
- NodeJS (en Windows podemos usar Chocolatey)
- Yeoman (instalable desde NodeJS/NPM)
- Cuenta de Visual Studio Team Services (gratuita) si queremos publicar nuestra extensión en el Marketplace.
Primeros pasos
Una vez que tenemos los prerequisitos, utilizaremos Yeoman para generarnos el template inicial de nuestra extensión.
npm install -g yo generator-codeUna vez que la instalación del generador termina, utilizamos:
yo codeLo cual nos habilita un menú de selección de Tipo de Extensión:
Para comenzar voy a realizar una extensión para proyectos Web que se encargará de mantener actualizadas nuestras dependencias de Bower en nuestro entorno de desarrollo. Los tipos de extensiones están explicados en la documentación en detalle.
Una vez que elijo New Extension (Typescript) me pregunta algunos datos extra. Uno a detallar y que es importante es el nombre de Publisher. Este nombre o código (en mi caso ealsur) es el mismo que utilizaremos al Publicar.
La estructura del directorio creado es:
Y podremos comenzar a crear la extensión desde el propio Visual Studio Code con:
code .Creando una extensión
Lo primero que haremos es editar el archivo package.json, el cuál define el manifiesto nuestra extensión para Visual Studio Code. Su estructura por defecto sería:
Los atributos más importantes son: name, displayName, description, version, publisher, categories y activationEvents. La descripción de todos los campos y sus funciones la pueden encontrar en la documentación oficial.
- name: El identificador de nuestra extensión. En minúscula sin espacios.
- displayName: El nombre visual que nuestra extensión tendrá en el Marketplace.
- description: Texto para que aparezca como descripción en el Marketplace.
- version: Número incremental de versionado. Si actualizamos la extensión, debemos acordarnos de aumentar el número antes de publicar.
- categories: Un array con uno o más de Languages, Snippets, Linters, Themes, Debuggers, Other.
- activationEvents: Este es el atributo que define como se comporta nuestra extensión. Sus posibles valores están detallados aquí.
Mi extensión tiene el siguiente manifiesto:
{ “name”: “bowerwatcher”, “displayName”: “Bower package watcher”, “description”: “Keeps your Bower dependencies fresh and updated with your bower.json file”, “version”: “0.0.1”, “publisher”: “ealsur”, “engines”: { “vscode”: “^0.10.1” }, “galleryBanner”: { “color”: “#FFFFFF”, “theme”: “light” }, “icon”: “images/icon.svg”, “repository”: { “type”: “git”, “url”: “https://github.com/ealsur/bowerwatcher.git” }, “categories”: [ “Other” ], “activationEvents”: [ “workspaceContains:bower.json” ], “main”: “./out/src/extension”, “contributes”: { “commands”: [{ “command”: “extension.sayHello”, “title”: “Hello World” }] }, “scripts”: { “vscode:prepublish”: “node ./node_modules/vscode/bin/compile”, “compile”: “node ./node_modules/vscode/bin/compile -watch -p ./” }, “devDependencies”: { “typescript”: “^1.6.2”, “vscode”: “0.10.x” } }
Una vez que tenemos el manifiesto, sólo resta crear el comportamiento de nuestra extensión editando el archivo src/extension.ts. Dependiendo del tipo de extensión y del Activation Event, el código variará, pero lo que importa es que podremos incluir otros módulos de NodeJS si necesitamos (declarándolos como devDependencies en el manifiesto) e importándolos dentro de extension.ts. El código de mi extensión está disponible en GitHub.
- Ejemplo de extensión para agregar soporte de lenguaje.
- Ejemplo de extensión para debugger.
- Listado completo de ejemplos.
En líneas generales, toda extensión va a hacer uso del namespace vscode. Algunos namespaces destacados dentro de él:
- vscode.commands: Utilizado para registrar comandos utilizables desde la barra superior de Visual Studio Code. Principalmente para extensiones que son disparadas por la ejecución de uno o varios comandos.
- vscode.extensiones: Utilizado para interactuar con otras extensiones mediante APIs que las mismas pueden haber creado.
- vscode.languages: Utilizado para declarar soporte para lenguajes.
- vscode.window: Interacción con la ventana actual, incluyendo el editor y mensajes.
- vscode.workspace: Utilizado para interactuar con la actual carpeta de trabajo, incluyendo los archivos que ella contiene.
La documentación completa de la API se encuentra aquí.
Testeando una extensión
Para testear una extensión de Visual Studio Code, usamos… Visual Studio Code! Bastará con presionar F5 y se lanzará una nueva instancia del editor donde podremos abrir o crear nuevos archivos con nuestra extensión ya cargada.
Algo a destacar es que la instancia que queda como debugger, posee una Debug Console (a la cuál podremos mandar mensajes desde nuestra extensión usando console.log() ), breakpoints, call stack y hasta watch de variables. Podemos poner breakpoints e ir paso a paso para verificar o encontrar los problemas de nuestra extensión, un soporte totalmente completo.
Publicando nuestra extensión
Para publicar una extensión de Visual Studio Code en el Marketplace, necesitamos una cuenta de Visual Studio Team Services, que son gratuitas. Adicionalmente necesitaremos la herramienta de publicación, instalable desde la línea de comando:
npm install -g vsceUna vez creada nuestra cuenta (o tomando una existente), deberemos obtener un Access Token. Este token hay que guardarlo bajo 20 llaves en algún lugar que podamos luego obtenerlo, porque no podremos volver a leerlo del portal de VSTS. Con el Token, bastará con registrar nuestro Publisher (recordar el nombre que elegimos al crear la Extensión):
vsce create-publisher <nombre>O si ya teníamos un usuario (por ejemplo, realizamos la creación en otra PC), podemos usar el comando:
vsce login <nombre>Nos pedirá nuestro Token y luego podremos publicar la extensión (desde la carpeta donde está el código de la extensión) con:
vsce publishEl proceso de Creación/Login sólo hay que hacerlo la primera vez que publicamos una extensión por entorno de desarrollo. En futuras ocasiones podemos simplemente hacer “publish”.
Material relacionado
Originally published at Twisting code.
