Trabajo: Creación de Una Extensión para Visual Studio Code

Asignatura Datos del alumno Fecha
Computación en el Apellidos: Limón Olvera

21/11/2021
Cliente Web Nombre: Carlos Elrond
Trabajo: Creación de una extensión para Visual

Studio Code
Objetivos Generales
• En este ejercicio proponemos crear una extensión para el conocidísimo 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 (y conocer de paso
TypeScript) y aplicarlo de manera novedosa. De manera 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.
© Universidad Internacional de La Rioja (UNIR)
Tarea 1: Creación de extensión VS
1
21/11/2021
Contenido
Instalación de utilerías de software. ........................................................... 3
Desarrollo de la extensión .......................................................................... 4
Configuración del proyecto de la extensión ............................................ 5
Ejercicio 1: Comentar las líneas de código ............................................... 6
Pruebas de funcionamiento de la Extensión. .............................................. 9
2
21/11/2021
Instalación de utilerías de software.

Inicialmente necesitamos de 4 programas para poder crear nuestra extensión:
• Visual Studio Code: Es un editor de código que con el paso del tiempo se ha
vuelto amplio debido a sus extensiones.
o Este paquete lo podemos bajar directamente desde la página oficial
https://code.visualstudio.com/#alt-downloads para el sistema operativo
que tengamos.
• Node JS: Es un motor javascript para el servidor con muchas utilidades, una de
ellas son los paquetes de node a través de su repositorio de software
centralizado llamado NPM.
o Este paquete lo podemos bajar directamente desde la página oficial
https://nodejs.org/en/download/current/ para el sistema operativo que
tengamos.
• Yeoman es una aplicación para generar el esqueleto inicial de un proyecto web,

esta escrito a su vez que Javascript

• Generator-code es uno de estos generadores para Yeoman y sirve para
comenzar el desarrollo de una extensión para VS Code.
3
21/11/2021
o Ya que ambos son paquetes NPM, se pueden instalar desde una terminal
de PowerShell (Independiente o de VS Code) o de Símbolo de Sistema en
caso de Windows,
o Utilizando el siguiente comando:
o npm install -g yo generator-code typescript
Desarrollo de la extensión
Debemos de abrir una terminal de PowerShell independiente o de VS Code donde
deseemos crear nuestro proyecto y seguido tecleamos el siguiente comando de
Yeoman: yo code
4
21/11/2021
• Si por alguna razón que desconocemos, llegara a presentar un error de

autorización con respecto al archivo yo.ps1 de nuestro proyecto, deberemos de
abrir una terminal independiente de PowerShell con permisos de administrador
y teclear el siguiente comando: Set-ExecutionPolicy Unrestricted
Configuración del proyecto de la extensión

El generador de extensiones nos hará unas preguntas para la configuración inicial, una
vez terminado ese proceso, seleccionamos la opción: New Extension (TypeScript)
Le daremos el nombre Line Gapper a nuestra extensión, el identificador gapline, la
descripción que deseemos, no inicializaremos el repositorio de GIT, ni el webpack y
escogeremos a npm como administrador de paquetes.
5
21/11/2021
Ejercicio 1: Comentar las líneas de código

Una vez creado el proyecto, debemos abrir un editor de VS Code con nuestra carpeta
del proyecto, a veces nos puede mostrar la opción desde la misma terminal de
PowerShell:
Una vez abierto nuestro editor, debemos de ubicar el archivo extensión.ts que se
encuentra en la carpeta src y sustituir completamente el código inicial que tiene por el
siguiente:
6
21/11/2021
Ya con nuestro archivo extensión.ts actualizado, deberemos de comentar cada linea de

código con la finalidad de explicar lo que expresa cada función, para esto podemos
apoyarnos en la documentación de VS Code, inicialmente con las funciones “actívate” y
“deactive”. https://code.visualstudio.com/api/references/vscode-api
1. 'use strict';
a. Utiliza el modo 'estricto' aunque se haya deshabilitado en el archivo de
configuración (tsconfig.json)
2. import * as vscode from 'vscode';
a. Importa el módulo de VS Code y le coloca el alias de 'vscode'
3. export function activate(context: vscode.ExtensionContext) {

a. Utilizando el método 'activate' indicamos que nuestra extensión será activada
4. let disposable =vscode.commands.registerCommand('extension.gapline',() =>{
a. Hace referencia al nombre que le dimos 'gapline' definido en el archivo de
configuración de paquetes 'package.json'
5. var editor = vscode.window.activeTextEditor;
a. Se obtiene el editor actual
6. if (!editor) { return; }
a. Si no existe la instancia, regresa nada
7. var selection = editor.selection;
a. Obteniendo selección del editor
8. var text = editor.document.getText(selection);
a. Obteniendo el texto seleccionado del editor
9. vscode.window.showInputBox({ prompt: 'Lineas?' }).then(value => {
a. Mostrando cuadro de texto que pide el número de lineas
10. let numberOfLines = +value;
a. Obteniendo número de líneas actual
11. var textInChunks: Array<string> = [];
a. Declarando arreglo de cadenas

12. text.split('\n').forEach((currentLine: string, lineIndex) => {
a. Dividiendo líneas de texto por cada salto
13. textInChunks.push(currentLine);
7
21/11/2021
a. Añadiendo linea actual al arreglo

14. if ((lineIndex+1) % numberOfLines === 0) textInChunks.push('');
a. Si el residuo del índice de mi linea actual entre el número de líneas es 0,
Entonces inserto una linea vacía
15. text = textInChunks.join('\n');
a. Añadiendo texto dividido por los saltos de carro
16. editor.edit((editBuilder) => {
a. Creando editor de texto en base al texto procesado
17. var range = new vscode.Range(
a. Generamos el rango a partir de lo siguiente
18. selection.start.line, 0,
a. parámetro inicial de la linea
19. selection.end.line,
a. parámetro final de la linea
20. editor.document.lineAt(selection.end.line).text.length
a. parámetro del número final de la columna
21. editBuilder.replace(range, text);
a. Reemplazando lo anterior con la que está gestionando
22. context.subscriptions.push(disposable);
a. Esta función nos ayuda a eliminar los objetos una vez que la extensión se
desactive
23. export function deactivate() {}
a. Ya que tenemos una acción para activar la extensión, también debemos de
tener una para desactivarla
Cuando generamos nuestro proyecto, VS Code crea la extensión con la configuración de
la famosa frase “Hello World” y la configura en el proyecto, lo primero que hay que
hacer, es sustituir esta frase del archivo de configuración de paquetes package.json,
tanto en el arreglo de activationEvents como en el de contributes->commands-

>command por el nombre extensión.gapline, tal y como nombramos a nuestro
proyecto.
8
21/11/2021
Pruebas de funcionamiento de la Extensión.

Iniciamos nuestro proceso de depuración en nuestro VS, presionando F5
9
21/11/2021
Inmediatamente se nos abrirá una instancia nueva de VS Code con nuestra extensión
precargada, seguido de eso abrimos un archivo de texto cualquiera y seleccionamos una
parte del texto o todo el texto, después nos vamos al menú View->Command Palette o
bien presionamos Ctrl+Shift+P y se nos abrirá un cuadro de texto donde buscar nuestra
extensión, colocamos el nombre GapLine
Despues nos pedira ingresar el intervalo de lineas:

10
21/11/2021
Una vez ingresado el intervalo, si nuestra configuración fue correcta, nos mostrara
nuestro archivo de la siguiente forma:
Mostrando que en cada 4 renglones se añade un espacio en blanco.

11

Trabajo: Creación de Una Extensión para Visual Studio Code

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Trabajo: Creación de Una Extensión para Visual Studio Code

Cargado por

Copyright:

Formatos disponibles

Asignatura Datos del alumno Fecha

Computación en el Apellidos: Limón Olvera

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

Tarea 1: Creación de extensión VS

Tarea 1: Creación de extensión VS

Instalación de utilerías de software.

• Yeoman es una aplicación para generar el esqueleto inicial de un proyecto web,

esta escrito a su vez que Javascript

Tarea 1: Creación de extensión VS

Tarea 1: Creación de extensión VS

• Si por alguna razón que desconocemos, llegara a presentar un error de

Configuración del proyecto de la extensión

Tarea 1: Creación de extensión VS

Ejercicio 1: Comentar las líneas de código

Tarea 1: Creación de extensión VS

Ya con nuestro archivo extensión.ts actualizado, deberemos de comentar cada linea de

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

a. Declarando arreglo de cadenas

Tarea 1: Creación de extensión VS

a. Añadiendo linea actual al arreglo

tanto en el arreglo de activationEvents como en el de contributes->commands-

Tarea 1: Creación de extensión VS

Pruebas de funcionamiento de la Extensión.

Tarea 1: Creación de extensión VS

Despues nos pedira ingresar el intervalo de lineas:

Tarea 1: Creación de extensión VS

Mostrando que en cada 4 renglones se añade un espacio en blanco.

Tarea 1: Creación de extensión VS

También podría gustarte