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

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

[pic 1]

1. Índice General

2.        Índice de ilustraciones        3

3.        Instalación de Herramientas        5

3.1        Instalación de Visual Studio Code        5

3.2        Instalación de Node.js        10

3.3        Instalación de Yeoman y Generator-code        15

4.        Creación de la extensión para VS Code        17

5.        Codificación de la extensión        19

5.1        propiedades específicas de una extensión        19

5.2        Explicación del código de la extensión        22

5.3        Elementos identificados de Typescript utilizados en el código        24

5.4        Modificación del archivo package.json        24

5.5        Ejecución y pruebas de funcionalidad        27

5.6        Ejemplo 1 de ejecución de la extensión        29

5.7        Ejemplo 2 de ejecución de la extensión        30

6.        Bibliografía        32

1. Índice de ilustraciones

Ilustración 1 VS Code multiplataforma        5

Ilustración 2 Descarga y ejecución del instalador de VS Code        6

Ilustración 3 Acuerdo de licencia de la instalación de VS Code        6

Ilustración 4 Selección del directorio de instalación de VS Code        7

Ilustración 5 Tareas adicionales a la instalación de VS Code        7

Ilustración 6 Notificación  para comenzar la instalación        8

Ilustración 7 Instalación  de VS Code        8

Ilustración 8 Finaliza  la instalación de  VS Code        9

Ilustración 9 Interfaz gráfica de VS Code        9

Ilustración 10 Página oficial para la descarga de Node.js        10

Ilustración 11 Descarga e instalación de Node.js        11

Ilustración 12 Instalador de Node.js        11

Ilustración 13 acuerdo de licencia de Node.js        12

Ilustración 14 Directorio de instalación de Node.js        12

Ilustración 15 Configuraciones adicionales        13

Ilustración 16 Confirmación para comenzar con la instalación        13

Ilustración 17 Proceso de instalación de Node.js        14

Ilustración 18 Finaliza la instalación de Node.js        14

Ilustración 19 Instalación de generator-code        15

Ilustración 20 Instalación de Generator-code        16

Ilustración 21  Asistente para la creación  de extensiones        17

Ilustración 22  Configuración previa para la creación de la extensión        18

Ilustración 23 Proceso de creación de la extensión Line Gapper        18

Ilustración 24 Estructura de una extensión para VS Code Fuente:        19

Ilustración 25 Apertura del proyecto gapline mediante VS Code        20

Ilustración 26 Ubicación del archivo extension.ts        21

Ilustración 27 Ejecución de la extensión        27

Ilustración 28  Prueba de la extensión.        28

Ilustración 29 búsqueda de la extensión creada        28

Ilustración 30 Solicitud de captura de líneas        29

Ilustración 31 Solicitud del número de líneas del ejemplo 1        29

Ilustración 32 Resultado de la ejecución del ejemplo 1        30

Ilustración 33 Solicitud del número de líneas del ejemplo 2        30

Ilustración 34 Resultado de la ejecución del ejemplo 1        31

1.  Instalación de Herramientas

1. Instalación de Visual Studio Code

Visual Studio Code (VS Code) es un editor de código fuente moderno desarrollado por Microsoft, disponible para Linux, Windows y MacOS, de código abierto y gratuito.

Soporta una cantidad considerable de lenguajes de programación, ya sean propios de Microsoft como C# y Visual Basic, o de otros como PHP, Phyton, Perl, SQL, shell scripting en Bash y Java, siendo este último el gran rival de .NET. También soporta Git y programación web con HTML, CSS y JavaScript, entre otros lenguajes.

Para descargar VS Code se debe ingresar a  la página oficial  https://code.visualstudio.com/ y seleccionar la versión más adecuada para el sistema operativo (ver ilustración 1).

[pic 2]

Ilustración 1 VS Code multiplataforma

Fuente: elaboración propia

Una vez descargado el software, se debe ejecutar el instalador, tal y como se puede observar en la ilustración 2.

[pic 3]

Ilustración 2 Descarga y ejecución del instalador de VS Code

Fuente: elaboración propia

Una vez inicializado el instalador, se mostrará el acuerdo de licencia del software (ver ilustración 3).

[pic 4]

Ilustración 3 Acuerdo de licencia de la instalación de VS Code

 Fuente: elaboración propia

Posteriormente se debe seleccionar el directorio de instalación (ver ilustración 4), se sugiere dejar la ruta que tiene configurado el instalador por defecto.

[pic 5]

Ilustración 4 Selección del directorio de instalación de VS Code

Fuente: elaboración propia

El instalador brinda la opción de agregar tareas adicionales (ver ilustración 5) para complementar la instalación, de igual manera se recomienda utilizar la configuración por defecto.

[pic 6]

Ilustración 5 Tareas adicionales a la instalación de VS Code

Fuente: elaboración propia

El instalador muestra un listado de las tareas adicionales y la ruta seleccionada donde llevara a cabo durante la instalación (ver ilustración 6).

[pic 7]

Ilustración 6 Notificación  para comenzar la instalación

Fuente: elaboración propia

Finalmente inicializa el proceso de instalación de VS Code (ver ilustración 7), el cual puede tardar unos minutos.

[pic 8]

Ilustración 7 Instalación  de VS Code

 Fuente: elaboración propia

Una vez que finaliza la instalación de VS Code, se mostrará una interfaz como la que se puede observar en ilustración 8.

[pic 9]

Ilustración 8 Finaliza  la instalación de  VS Code

Fuente: elaboración propia

La interfaz gráfica del software es la que se muestra a continuación en la ilustración 9.

Ilustración 9 Interfaz gráfica de VS Code [pic 10]

Fuente: elaboración propia

1. Instalación de Node.js

Node.js es un entorno JavaScript de lado de servidor que utiliza un modelo asíncrono y es dirigido por eventos. Cuenta con un manejador de paquetes NPM y contiene el mayor número de librerías de código abierto del mundo.

...