Creación de una extensión para Visual Studio Code

Trabajo: Creación de una extensión para Visual Studio Code

• En este ejercicio proponemos crear una extensión para el conocido editor de texto de Microsoft: Visual Studio Code.

• Esta extensión va a hacer una cosa muy sencilla: insertar una línea en blanco cada N líneas.

• El objetivo es practicar la programación en Javascript (conocer de paso TypeScript) y aplicarlo de manera novedosa. De forma paralela, vamos a trabajar con otras tecnologías modernas muy usadas hoy en día en el desarrollo web, tales como generadores y gestores de paquetes.

Contenido

Proceso de creación de una extensión para Visual Studio Code        3

Instalación de las utilidades        3

Creación de la extensión        4

Primer ejercicio        5

Modificar el archivo extension.ts        5

Comentar el archivo extension.ts        6

Segundo ejercicio        8

Modificar el archivo package.json        8

Prueba funcional de la extensión        9

Proceso de creación de una extensión para Visual Studio Code

Empezamos mencionando las siguientes dos utilidades necesarias para la creación de nuestra extensión:

• Yeoman es una aplicación para generar el esqueleto inicial de un proyecto web. Yeoman utiliza a su vez generadores para cada tipo de proyecto (webs estáticas, páginas que usen jQuery, programas basados en Node, etc.). Yeoman está escrito, a su vez, en JavaScript.

• Generator-code es uno de estos generadores para Yeoman y sirve para comenzar el desarrollo de una extensión para Visual Studio Code.

Instalación de las utilidades

Para instalar estos paquetes sólo necesitaremos abrir una terminal y ejecutar el siguiente comando:

npm install -g yo generator-code

[pic 1]

Ya instalados los paquetes podremos empezar a crear nuestra extensión de Visual Studio Code.

Creación de la extensión

Para generar el esqueleto inicial de nuestra extensión deberemos de abrir la terminal en el directorio donde deseamos guardar la extensión, una vez en el directorio procedemos a ejecutar el siguiente comando:

yo code

[pic 2]

Una vez ejecutado el comando, primero nos preguntará que especifiquemos que tipo de extensión queremos crear. Ahora nos solicitará que proporcionemos los datos de nuestra extensión, estos datos serán el nombre, identificador y descripción de la extensión, también nos preguntará si deseamos inicializar un repositorio con git y el manejador de paquetes que usaremos.

[pic 3]

En nuestro caso elegiremos las siguientes opciones: ya que deseamos crear una extensión para TypeScript seleccionaremos la opción correspondiente; el nombre de nuestra extensión será “Line Gapper”; el identificador de la extensión será “gapline”; la descripción será “Creación de una extensión para Visual Studio Code”; no requeriremos un repositorio de git; y usaremos el manejador de paquetes “npm”.

Al finalizar la creación podremos modificar nuestro proyecto usando el editor Visual Studio Code, la carpeta del proyecto creado tendrá el nombre de identificador proporcionado anteriormente.

[pic 4]

Primer ejercicio

El primer ejercicio nos indica que debemos encontrar el fichero “extension.ts” dentro de la carpeta
“src”.

[pic 5]

Modificar el archivo extension.ts

Ahora debemos de sustituir el código del fichero “extension.ts” por el siguiente código:

[pic 6]

Comentar el archivo extension.ts

La siguiente lista será la explicación de cada línea de código del nuevo contenido del fichero “extension.ts”:

1. 'use strict';

Hace referencia al “Modo Estricto”, la cual es una funcionalidad de ECMAScript que pone a nuestro programa/función en un contexto estricto.

2. import * as vscode from 'vscode';

Importa el módulo "vscode" y lo referencia con el alias "vscode".

3. export function activate(context: vscode.ExtensionContext) {

Se define el método “activate” que será invocado cuando nuestra extensión sea activada.

4. let disposable = vscode.commands.registerCommand('extension.gapline', () => {

Implementa la funcionalidad del comando definido en package.json.

5. var editor = vscode.window.activeTextEditor;

Obtenemos la instancia del editor que estamos ejecutando actualmente, esto es necesario ya que necesitamos manipular el contenido del editor.

6. if (!editor) { return; }

Se valida que exista la instancia del editor, si no existe entonces termina la función y nuestra extensión no realizará ninguna modificación.

7. var selection = editor.selection;

Obtenemos el elemento seleccionado en el editor.

8. var text = editor.document.getText(selection);

Se obtiene el bloque de texto a partir del elemento seleccionado.

9. vscode.window.showInputBox({ prompt: 'Lineas?' }).then(value => {

Ahora mostramos un cuadro de diálogo para solicitarle al usuario el número de líneas a las cuales le insertaremos una línea en blanco.

...