Extension VSCode - Creación de una extensión para el editor de texto Visual Studio Code PDF

Preview

Summary

Creación de una extensión para el editor de texto Visual Studio Code...

Description

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

2

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

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

3

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

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.

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.

4

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

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

5

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. 10. let numberOfLines = +value; Se asigna a una variable el valor obtenido en el cuadro de texto, como el valor es un string entonces lo convertimos a entero antes de asignarlo. 11. var textInChunks: Array = []; Se define “textInChunks”, un arreglo vacío de cadenas de texto. 6

12. text.split('\n').forEach((currentLine: string, lineIndex) => { Dividimos el texto seleccionado a partir de cada línea de salto y obteniendo un array para iterarlo. 13. textInChunks.push(currentLine); Durante la iteración agregamos la línea actual al array “textInChunks”. 14. if ((lineIndex+1) % numberOfLines === 0) textInChunks.push(''); Verifica si la posición en la que está corresponde al número de líneas proporcionadas por el usuario. Si se cumple entonces se ingresa un texto vacío al array. 15. text = textInChunks.join('\n'); Une cada elemento del array en un solo texto, pero agregando un salto de línea. 16. editor.edit((editBuilder) => { Se implementa la funcionalidad para editar el texto seleccionado. 17. var range = new vscode.Range( Ahora generamos un rango a partir de los parámetros de la selección que se definirán a continuación. 18. selection.start.line, 0, Se proporciona el parámetro inicial de línea y el parámetro inicial de columna. 19. selection.end.line, Luego proporcionamos el parámetro final de línea. 20. editor.document.lineAt(selection.end.line).text.length Por último, damos el parámetro del número final de columna. 21. editBuilder.replace(range, text); Para finalizar reemplazamos todo lo que se encuentra en el rango con el nuevo texto. 22. context.subscriptions.push(disposable); Esta funcionalidad la agregamos a una lista de desechables que se eliminarán cuando la extensión se desactive. 23. export function deactivate() { } Visto que tenemos un método para activar la extensión también necesitamos un método para desactivarla.

7

Segundo ejercicio En este ejercicio debemos realizar algunas modificaciones en el archivo “package.js” para después comprobar que nuestra extensión funciona usando cualquier fichero de texto que tengamos.

Modificar el archivo package.json De acuerdo con las especificaciones del segundo ejercicio, debemos de abrir el archivo “package.json” y modificar las propiedades “activationEvents”, “command” y “title”. Estas propiedades quedarían de la siguiente forma: "activationEvents": [ "onCommand:extension.gapline" ],

"contributes": { "commands": [ { "command": "extension.gapline", "title": "Line Gapper" } ] },

Finalmente el fichero resultante de “package.json” sería el siguiente:

8

Prueba funcional de la extensión Realizadas todas las modificaciones necesarias podremos empezar a realizar pruebas de nuestra nueva extensión. Para la prueba funcional de la extensión, nos ubicamos en el archivo extension.ts, luego ejecutamos la extensión con la tecla F5 o Iniciar depuración dentro del menú Depurar:

9

Esto nos abre una instancia de VS Code con la extensión precargada donde vamos a abrir un fichero de texto cualquiera. Dentro del archivo ya abierto seleccionamos una porción del texto para probar la extensión:

Ya seleccionado el texto abriremos la paleta de comandos con Control+Shift+P o Paleta de comandos o Command Palette dentro del menú Ver:

10

Buscamos y ejecutamos nuestra extensión, deberá tener el mismo nombre que colocamos en la propiedad “title” del fichero package.json:

Justo después de ejecutar la extensión el editor nos muestra un diálogo donde nos pide el número de líneas, en este caso he introducido el número 2 y seguidamente presiono la tecla Enter:

La extensión realiza su tarea con éxito, notamos que agrega una línea en blanco después de cada dos líneas:

11...