Extensión en VSCode

[pic 1][pic 2][pic 3][pic 4]

Contenido

Objetivo        3

Descripción general        3

Ejercicio Inicial        4

Encabezados        5

Función activate        6

Función deactivate        9

Segundo ejercicio        10

Funcionamiento de la extensión        10

Bibliografía        15

Ilustraciones

Ilustración 1. Archivo extension.ts líneas desde 1 hasta 9        5

Ilustración 2. Archivo extension.ts líneas desde 10 hasta 41        6

Ilustración 3. Archivo extension.ts líneas desde 42 hasta 73        7

Ilustración 4. Archivo extension.ts líneas desde 74 hasta 105        8

Ilustración 5. Archivo extension.ts desde 106 hasta 109        8

Ilustración 6. Archivo extension.ts desde 110 hasta 116        9

Ilustración 7. Archivo package.json con las configuraciones correctas        10

Ilustración 8. Pantalla de VS Code con el proyecto lineGap abierto        11

Ilustración 9. Pantalla de VS Code con texto seleccionado        11

Ilustración 10. Pantalla de VS Code con la selección de la extensión desarrollada        12

Ilustración 11. Pantalla de VS Code con el texto seleccionado justo antes del cambio        12

Ilustración 12. Pantalla de VS Code con el texto seleccionado justo después del cambio        13

Ilustración 13. Código fuente en VS Code para insertar texto en la extensión        13

Ilustración 14. Texto insertado por la extensión        14

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

Objetivo

El objetivo principal es practicar la programación en Javascript (y conocer de paso TypeScript) de manera novedosa.

Descripción general

VS Code se está convirtiendo en el editor de facto en el desarrollo web. Este software es capaz de funcionar como IDE, es decir, es un “software para el diseño de aplicaciones que combina herramientas comunes para desarrolladores en una sola interfaz de usuario gráfica”^[1], y como tal, puede ser ampliado mediante las extensiones. Las extensiones son funcionalidades adjuntas a un programa que pueden ser descargadas desde^[2] Visual Studio Code Marketplace^[3] o bien pueden ser desarrolladas por cualquier programador en un lenguaje de programación tal como son JavaScript o TypeScript.

Ejercicio Inicial

El primer ejercicio consiste en comentar cada línea de código teniendo en cuenta que trata acerca de la creación de una extensión en VS Code. Para ello, seguimos estos lineamientos:

• Los comentarios serán en su mayoría multilíneas cuidando de no extender demasiado las líneas como una buena práctica de documentación de código, que permite en caso de ser necesario imprimir el mismo, sea legible tal y como se presenta en pantalla.
• El comentario deberá de estar lo menos técnico posible para que en caso de que un analista o documentador entrará a verlo le sea simple de leer y proporcione una idea lo más clara posible del código.

Quedando claro lo anterior, podríamos dividir el código en tres secciones principales:

• La primera sección trata sobre los encabezados, los cuales incluyen información de los modulos importados para el correcto funcionamiento de la extensión
• La segunda sección trata sobre la función activate.
• La tercera sección trata sobre la función deactivate.

Encabezados

En esta sección se incluye la especificación ‘use strict’, con ello se someterá su código a reglas más estrictas en términos de verificación de tipos estáticos. Más estricto significa más seguro, por lo que es algo bueno^[4]. El módulo vscode, es una librería de TypeScript

[pic 5]

Ilustración 1. Archivo extension.ts líneas desde 1 hasta 9

Función activate

En esta sección se incluye el detalle de la programación correspondiente a la función activate. Gracias a la llamada de esta función, los escritores de extensiones pueden proporcionar API a otras extensiones devolviendo su superficie pública de API desde la llamada de activación^[5].

[pic 6]

Ilustración 2. Archivo extension.ts líneas desde 10 hasta 41

[pic 7]

Ilustración 3. Archivo extension.ts líneas desde 42 hasta 73

[pic 8]

Ilustración 4. Archivo extension.ts líneas desde 74 hasta 105

...