Crear extensión visual studio code

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

El objetivo es practicar la programación en JavaScript (conocer, además, 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.

Descripción

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 realizar una tarea muy sencilla: insertar una línea en blanco cada N líneas.

Visual Studio Code

VS Code se está convirtiendo en el editor de facto en el desarrollo web. Este software puede ser ampliado mediante las llamadas extensiones, que pueden escribirse en JavaScript o TypeScript. Nosotros utilizaremos este último lenguaje. A continuación, puedes acceder a más información sobre las extensiones en el siguiente enlace.

TypeScript

TypeScript es un lenguaje basado sobre JavaScript (un superset) y desarrollado también por Microsoft (al igual que Visual Studio Code), que se está imponiendo de manera muy contundente en el mundo del desarrollo web. Se parece mucho a JavaScript, ya que solo añade lo justo para que JavaScript sea un lenguaje más seguro. Nosotros vamos a crear una pequeña extensión para Visual Studio Code y lo vamos a hacer en este lenguaje. En el siguiente enlace encontrarás más información sobre TypeScript.

No es necesario que conozcas a fondo TypeScript, tan solo una característica: la adición de tipos sobre JavaScript. En el siguiente enlace puedes acceder a un pequeño resumen del lenguaje.

Instalación de las Herramientas

Para el ejercicio se necesita tener instalado el siguiente software:

1. Visual Studio Code
2. NodeJS
3. NPM
4. Yeomán
5. GeneratorCode

1. Visual Studio Code

1. Ir a su página de VS Code para descargar el programa para la instalación. Simplemente dar clic en el botón de descarga de acuerdo al Sistema Operativo utilizado.

[pic 1]

1. Ejecutar el programa de instalación, la primer ventana que nos aparecerá es la de Aceptar los Términos y Condiciones, por lo que aceptaremos y hacer clic en siguente.

[pic 2]

Nos pedirá la ubicación en donde se va a instalar VS Code, podemos dejar la que trae por defecto y continuamos con el siguiente paso.

[pic 3]

Preguntará si queremos instalar la Carpeta de Acceso directo para el menú, damos clic en "Siguiente".

[pic 4]

En la siguiente ventana tenemos varias opciones extra de configuración que podemos elegir, dejararemos las opciones por defecto.

[pic 5]

Por último nos muestra el resumen de la instalación y damos clic en el botón "Instalar" para comenzar la instalación. Una vez terminada tendremos disponible VS Code como editor.

[pic 6]

2. NodeJS

1. Ir a su página de NodeJS para descargar el programa de instalación. Dar clic en el botón correspondiente de descarga de acuerdo al Sistema Operativo utilizado.

[pic 7]

1. Una vez descargado el instalador, ejecutar dando doble clic sobre el archivo descargado. Se abre una nueva venta como la siguiente en donde podemos iniciar el proceso de instalación. Clic en "Siguiente".

[pic 8]

1. En la siguiente ventana debemos aceptar los Términos y Conciiones de NodeJS.

[pic 9]

1. Déspues debemos seleccionar la ruta en donde se guardará la instalación de NodeJS, podemos dejarlo por defecto.

[pic 10]

1. En la siguiente ventana podemos decidir los paquetes que se van a instalar, para el ejercicio podemos dejarlo por defecto y continuamos.

[pic 11]

1. Finalmente debemos dar clic en "Instalar". Al finalizar la instalación tendremos instalado NodeJS.

[pic 12]

3. NPM

NPM es uno de los paquetes que se instalan junto con NodeJS, así que si seguimos la instalación anterior ya tenemos NPM

Podemos comprobar que tenemos instalado NPM desde una terminal de comandos.

                  $ npm

[pic 13]

Si logramos obtener una respuesta parecida a la imagen, quiere decir que NPM esta instalado.

Configuración del Proyecto

Para inciar con el proyecto debemos tener una terminal (Para el caso de windows podemos usar CMD). Lo primero que debemos hacer es posicionarnos en la terminal en la carpeta donde vamos a instalar nuestro proyecto. Déspues debemos instalar las dos herramientas con NPM para la generación de nuestro proyecto.

1. Abrir una terminal de comandos (CMD) y posicionarnos en la dirección donde vamos a trabajar.

[pic 14]

1. Debemos instalar la herramienta Yeoman y la herramienta Generator-Code. Para eso debemos ejecutar el comando npm install -g yo generator-code typescript

Con este comando le indicamos a NPM que vamos a instalar de forma global (-g) las herramientas yo y generator-code ademas del transpilador de TypeScript necesarios para la creación y configuración de nuestro proyecto. Al terminar nuestra terminal debe quedar como la siguiente imagen:

[pic 15]

1. Ahora para empezar a crear el proyecto debemos ejecutar el comando yo code

[pic 16]

1. Al iniciar el instalador nos hará una serie de preguntas que debemos elegir. 1. Seleccionar "New Extension (TypeScript)". 2. Darle un nombre a nuestra extensión: "gapline". 3. Darle un identificador, podemos usar "gapline". 4. Darle una descripción 5. Nos preguntará si deseamos inicializar un respositorio de GIT y seleccionaremos "N". 6. Si deseamos empaquetar la extensión con Webpack, elegiremos "N" y. 7. Debemos seleccionar "NPM" como manejador de paquetes. Con todas estas opciones se empezará a crear todo nuestro proyecto con las configuraciones hechas.

[pic 17]

1. Al terminar la instalación debemos ver nuestra terminal de comandos como la siguiente imagen, donde nos dice que entremos a la carpeta que acabo de crear.

[pic 18]

Código

En este apartado ya vamos a trabajar con el código del proyecto que acabamos de crear con todas las herramientas revisadas anteriormente. Podemos abri la carpeta con el editor que instalamos VS Code, simplemente abrimos el programa como cualquier otro y vamos a la opción

"File" > "Open Folder" y búscamos nuestra carpeta que se creo desde la terminal de comandos.

[pic 19]

Una vez abierto nuestro proyecto debemos ver la ventana de nuestro editor VS Code con la estructura de carpetas del proyecto, así mismo buscamos el archivo extension.ts que se encuentra dentro de la carpeta src/, lo seleccionamos para abrir y se puede observar que trae un código de ejemplo, para el ejercicio vamos a eliminar todo el código y sustituimos por el código que se encuentra abajo.

...