Crear una extensión para Visual Studio Code

ASIGNATURA: Computación en el Cliente Web ALUMNO: Saúl MesÍas Morocho Ahoña FECHA: 19 - 04 - 2018

Crear una extensión para Visual Studio Code

[pic 1]

En esta actividad vamos a desarrollar una extensión para Visual Studio Code, cuya funcionalidad consiste en insertar una línea en blanco cada N líneas en un archivo.

A continuación se detalla paso a paso las actividades realizadas para la ejecución de la extensión dese la instalación de VS Code, NodeJS, componentes y paquetes necesarios:

Software necesarios.[pic 2]

VS Code (Visual Studio Code):

Es un editor de código que ha tomado gran auge en estos tiempos, desarrollado por Microsoft y una de sus ventajas es la compatibilidad que tiene con varios sistemas operativos (Windows, Linux, macOS) y nos permite trabajar con distintos archivos y varios tipos de lenguajes como son css, html, php, etc. Sin ocupar muchos recursos del equipo lo que permite que a la hora de trabajar no de ningún problema.

Pasos para la instalación

1. Para descargar el instalador nos dirigimos al enlace https://code.visualstudio.com, aquí nos muestra una versión específica para el sistema operativo que estemos usando y procedemos a descargar.[pic 3]

1. Una vez descargado el instalador ejecutamos la aplicación y como estamos acostumbrados a los instaladores de Microsoft solo debemos ejecutar la aplicación y darle siguiente hasta finalizar la instalación.[pic 4]
2. Finalmente tenemos instalado nuestro VS Code.

NodeJS:

Esta plataforma se utiliza principalmente para el desarrollo de páginas web utilizando JavaScript desde el lado del servidor.

Pasos para la instalación

1. Para descargar el instalador nos dirigimos al enlace https://nodejs.org/en/download/current/, Seleccionamos el instalador para nuestro sistema operativo y le damos descargar.[pic 5]

1. Una vez descargado el instalador ejecutamos la aplicación y damos siguiente hasta finalizar la instalación.[pic 6]

Instalación de paquetes NPM

Para el desarrollo de la extensión es necesario instalar estos dos paquetes: Yeoman: nos permite generar el esqueleto inicial de una aplicación web.[pic 7]

generator-code: es un generador de Yeoman que nos permite crear la extensión.[pic 8]

Para la instalación de estos paquetes solo es necesario ejecutar en nuestro terminal (dependiendo del sistema operativo) y escribir la siguiente línea de código, que instala de manera global los elementos yo (Yeoman), generator-code y el compilador TypeScript.

[pic 9]

Creación de la extensión[pic 10]

1. Para la creación de la extensión ejecutamos el siguiente código en el terminal

[pic 11]

A continuación nos mostrará en pantalla las opciones para crear nuestro proyecto

[pic 12]

Los datos que debemos ingresar son:

Nombre de la extensión: Line Gapper Nombre del identificador: gapline[pic 13][pic 14]

Nombre de la descripción: ideext (en este caso es el nombre que desees)[pic 15]

Finalmente a las siguientes opciones solo damos el valor que vienen por defecto hasta terminar la instalación.[pic 16]

Nos muestra en pantalla un detalle de la extensión ya creada donde estarán los paquetes, ficheros y archivos con los que trabajaremos en el proyecto.

[pic 17]

Pasos para ejecutar la extensión.[pic 18]

Ejecutamos nuestro VS Code y abrimos la carpeta que acabamos de crear y si nos pide instalar algunos componentes necesarios para la correcta ejecución de la extensión damos en aceptar la instalación.

Nos dirigimos al archivo extension.ts que esta dentro de la carpeta src, donde esta un pequeño ejemplo de un ¡Hola Mundo![pic 19]

"Ejecución del ejercicio"

1. En este archivo borramos todo lo que contiene y reemplazamos con el siguiente código descrito a continuación: (código que nos permite inserta una línea en blanco cada N líneas en un archivo).

//Llamamos  al  modo  estricto  de  javaScrip  para  compatibilidad  con  versiones  anteriores 'use  strict';[pic 20]

//  Importamos  el  módulo  y  lo  referenciamos  con  el  alias  'vscode'  el  cual  contiene  el  API  de extensiones

import  *  as  vscode  from  'vscode';

//Llamamos  al  método  cuando  la  extensión  es  activada  la  cual  se  activa  la  primera  vez  que  el comando  es  ejecutado

export  function  activate(context:  vscode.ExtensionContext)  {

/*Implementa  la  funcionalidad  del  comando  definido  en    package.json Comando  que  debe  coincidir  con  el  nombre  comando  en  pakage  json*/

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

//Obtiene  la  instancia  que  se  está  ejecutando  actualmente var  editor  =  vscode.window.activeTextEditor;

//Si  no  encuentra  el  editor  regresa  sin  realizar  ninguna  función if  (!editor)  {  return;  }

//Obtiene  el  bloque  de  texto  del  editor  actual var  selection  =  editor.selection;

//Obtiene  los  datos  seleccionados  del  archivo var  text  =  editor.document.getText(selection);

/*Muestra  un  cuadro  de  mensaje  al  usuario  en  el  que  pide  ingresar

...