Creación de una extension para VS Code

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

Alumno: YANG MENDOZA RAMIREZ

1.- OBJETIVO GENERAL

• Crear una extensión pata el conocido editor de texto de Microsoft, Visual Studio Code.

2.- OBJETIVOS ESPECÍFICOS

• Practicar la programación en Javascript (y conocer de paso TypeScript)
• Conocer el uso de las extensiones de Visual Studio Code
• Comprobar el uso de la extensión creada

3.- INSTALACIÓN DE YEOMAN Y GENERATOR-CODE

Para instalar ambos paquetes se abre el Windows PowerShell y se ejecuta la siguiente instrucción:

npm install -g yo generator-code typescript

En esta línea, npm es el manejador de paquetes Javascript Node, install es el comando a ejecutar, -g indica que la instalación debe realizarla de manera global para poder tener acceso a ella desde cualquier proyecto.

La imagen N° 1 muestra el inicio de la instalación:

[pic 1]

IMAGEN N° 1

Al término de la instalación apareció una pantalla de bienvenida a Visual Studio Code Extension generator, asimismo, una lista de opciones para elegir el tipo de extensión que se quiere crear.

De acuerdo a lo indicado en la especificación de la tarea, se eligió New Extension (TypeScript), como puede verse en la imagen N° 2.

[pic 2]

IMAGEN N° 2

Luego de elegir New Extension TypeScript, se especificó lo siguiente:

• El nombre de la extensión: Line Gapper (especificado en la tarea)
• Un identificador de la extensión: gapline (especificado en la tarea)
• La descripción de la extensión: Tarea (criterio propio)
• Va iniciar un repositorio Git?: No (especificado en la tarea)
• Empacará el código fuente con webpack?: No (especificado en la tarea)
• Qué gestor de paquetes usas: npm (criterio propio)

Luego de ingresar las especificaciones, el programa realiza unos cambios (instalaciones) en package.json  como puede verse en la imagen N° 3.

[pic 3]

IMAGEN N° 3

Al término de la instalación el programa indica que la extensión gapline ha sido creada, como puede verse en la imagen N° 4

[pic 4]

IMAGEN N° 4

Finalmente, se ejecutó Visual Studio Code utilizando el comando code gapline. Al abrir el VS Code automáticamente reconoce la extensión creada como puede verse en la imagen N° 5

[pic 5]

IMAGEN N° 5

Luego de instalar algunos componentes propuestos por defecto por VS Code, se cerró el editor y se volvió a abrir para abrir la carpeta del proyecto como puede verse en la imagen N° 6.

[pic 6]

IMAGEN N° 6

Al abrir la carpeta del proyecto extensión.ts el generador de Yeoman muestra un código genérico, el conocido “Hola Mundo” como puede verse en la imagen N° 7

[pic 7]

IMAGEN N° 7

4.- CONFIGURACIÓN DE LOS ARCHIVOS NECESARIOS PARA EL PROYECTO

Antes de pasar a la codificación del proyecto es necesario configurar el archivo tsconfig.json. En este caso al abrir el archivo tsconfig.json se observa que la línea 11 indica “strict”: true, como puede verse en la imagen N° 8:

[pic 8]

IMAGEN N° 8

De acuerdo a las especificaciones de la tarea, en esta línea 11 debe estar marcado como false, por lo tanto se hizo el cambio respectivo como puede verse en la imagen N° 9

[pic 9]

IMAGEN N° 9

5.- CODIFICACIÓN DE LA EXTENSIÓN

A continuación, se presenta la codificación de la extensión (extensión.ts) que reemplaza al código del Hello World que aparecía por defecto, asimismo, se ha insertado los respectivos comentarios:

// Invoca el modo estricto de javascript que no permite utilizar variables no declaradas

'use strict';

// Se importa el modulo y lo referencia con el alias vscode

import * as vscode from 'vscode';

// Este método se invoca cuando la extensión se activa

// La extensión se activa la primera vez que el comando se ejecuta

export function activate(context: vscode.ExtensionContext) {

  // Implementa la funcionalidad del comando definido en package.json

  // El parámetro debe ser igual al nombre de comando en el archivo package.json es decir: gapline.gapline

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

        // Obtiene la instancia de VS Code que se esta ejecutando actualmente

        var editor = vscode.window.activeTextEditor;

        // Si no encuentra el editor retorna sin hacer nada

...