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

Actividades[pic 1]

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

Introducción

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.

VS Code se está convirtiendo en el editor de facto en el desarrollo web. Este software puede ser ampliado mediante las llamadas extensiones (https://code.visualstudio.com/docs/editor/extension-gallery) Y lo mejor de todo es que estas extensiones pueden escribirse en JavaScript o TypeScript (http://www.typescriptlang.org/). Nosotros utilizaremos este último lenguaje.

TypeScript es un lenguaje basado sobre JavaScript (un superset) y desarrollado también por Microsoft (al igual que Visual Studio Code). Se parece enormemente a JavaScript, ya que sólo 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. TypeScript se está imponiendo de manera muy contundente en el mundo del desarrollo web.

No es necesario que conozcas a fondo TypeScript, tan sólo una característica: la adición de tipos (https://www.typescriptlang.org/docs/handbook/basic-types.html) sobre JavaScript. En esta página tienes también un pequeño resumen del lenguaje: https://github.com/lakshaydulani/typescript-summary 

Descripción de la tarea

La actividad simplemente necesita de dos paquetes de software fáciles de instalar y disponibles para todos los sistemas operativos.

• Visual Studio Code (VS Code): como no podía ser de otra manera, vamos a emplear este editor para desarrollar una extensión para sí mismo. Ve a la página de Visual Studio Code (VS Code para los amigos) y descárgatelo: encontrarás una versión específica para tu sistema operativo.

• NodeJS: es un motor JavaScript para el servidor. Se está convirtiendo poco a poco en la tecnología de servidor por excelencia. Además, muchas utilidades ya están siendo distribuidas como paquetes Node a través de su repositorio centralizado de software: NPM.

Ve a la página de descarga de Node e instala la versión pertinente para tu sistema operativo: https://nodejs.org/en/download/current/ 

La instalación es directa e inmediata. Una vez completada, ya deberías tener acceso al comando node desde un terminal (cmd.exe, PowerShell o Terminal.app, según tu sistema operativo).

Cuando se ejecuta este comando sin opciones, se abre una sesión REPL (un intérprete de comandos JavaScript en tiempo real: https://es.wikipedia.org/wiki/REPL). No vamos a usar esta modalidad de Node. Sólo se trata de asegurarnos de que funciona.

Puedes cerrar el programa pulsando Control+c dos veces o cerrar la ventana del terminal

Es necesario instalar además dos utilidades basadas en Node (dos paquetes NPM):

• 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.

Para instalar ambos paquetes, ejecuta la siguiente instrucción en un terminal: npm install -g yo generator-code. En esta línea, el comando npm instala de manera global (-g) el comando yo (que no es otra cosa que Yeoman) y el generador generator-code (un generador para Yeoman que sirve para crear el esqueleto inicial de extensiones para VS Code).

Ejecución de la actividad

• Generación del esqueleto del proyecto

Para empezar, genera el esqueleto del proyecto con Yeoman (comando yo, que deberías ya tener a tu disposición por el simple hecho de haber instalado el paquete yo).

yo code

Con la opción code le estamos indicando a Yeoman que queremos usar el generador de extensiones para VS Code (que hemos instalado previamente mediante el paquete generator-code). Al ejecutar este comando, Yeoman nos hará varias preguntas para configurar nuestro proyecto:

Elige TypeScript como tipo de lenguaje de desarrollo: New Extension (TypeScript). Luego dale un nombre a la extensión (Line Gapper) y un identificador (gapline). La opción de publisher name es por si vamos a publicar la extensión en el repositorio de extensiones de VS Code, pero nosotros no vamos a hacerlo, así que podéis elegir un nombre cualquiera.

Por último, cuando se nos pregunte si queremos iniciar un repositorio Git, decimos que no (Git se utiliza para control de versiones, que no vamos a utilizar). Todas estas opciones acaban registradas en el fichero package.json. Si se te preguntara algo más, puedes elegir la opción por defecto y pulsar intro.

Además del fichero package.json, Yeoman también habrá generado una carpeta de trabajo con otros archivos y carpetas. Esta es la carpeta de nuestro proyecto.

• Apertura del proyecto con VS Code

Ejecuta VS Code y dile que quieres abrir la carpeta que acabamos de crear. Nada más hacerlo, VS Code la escaneará y sabrá inmediatamente de qué tipo de desarrollo se trata (una extensión, en nuestro caso). Incluso es posible que nos proponga instalar ciertos componentes apropiados. Dile que sí a todo. Si finalmente instala algo, es mejor que reinicies el editor (y vuelve a abrir la carpeta del proyecto).

...