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

[pic 1]

[pic 2]

COMPUTACION EN EL

CLIENTE WEB

A prender a utilizar las herramientas y funciones de cada uno de los parámetros de JavaScript y aprender a conocer las funciones básicas de TypeScript.

 [pic 3]

 [pic 4][pic 5]

MATERIA:  

Computación en el Cliente Web

TEMA:

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

PROFESOR:  

Bárbaro Jorge Ferro Castro

Nombre de Alumno:

 Jairo Mortera Velázquez

INTRODUCCIÓN

TypeScript es un lenguaje de programación libre y de código abierto desarrollado y mantenido por Microsoft. Es un superconjunto de JavaScript, que esencialmente añade tipos estáticos y objetos basados en clases. Anders Hejlsberg, diseñador de C# y creador de Delphi y Turbo Pascal, ha trabajado en el desarrollo de TypeScript.  TypeScript puede ser usado para desarrollar aplicaciones JavaScript que se ejecutarán en el lado del cliente o del servidor (Node.js y Deno (software)).

TypeScript extiende la sintaxis de JavaScript, por tanto, cualquier código JavaScript existente debería funcionar sin problemas. Está pensado para grandes proyectos, los cuales a través de un compilador de TypeScript se traducen a código JavaScript original.

TypeScript soporta ficheros de definición que contengan información sobre los tipos de librerías JavaScript existentes, similares a los ficheros de cabeceras de C/C++ que describen la estructura de ficheros de objetos existentes. Esto permite a otros programas usar los valores definidos en los ficheros como si fueran entidades TypeScript de tipado estático. Existen cabeceras para librerías populares como jQuery, MongoDB y D3.js, y los módulos básicos de Node.js.

El compilador de TypeScript está escrito así mismo en TypeScript, compilado a JavaScript y con Licencia Apache 2.

TypeScript se incluye como lenguaje de programación de primer nivel en Microsoft Visual Studio 2013 Update 2 y posteriores, junto a C# y otros lenguajes de Microsoft. Una extensión oficial permite a Visual Studio 2012 soportar también TypeScript.

ÍNDICE

OBJETIVO GENERAL        4

2. VISUAL STUDIO CODE        5

2.1 DESCARGA E INSTALACIÓN DE VISUAL STUDIO CODE        5

3.-  INSTALACIÓN DE LOS PAQUETES YEOMAN Y GENERATOR-CODE        9

3.1 GENERACIÓN DEL ESQUELETO DEL PROYECTO        10

3.2 PRIMER EJERCICIO        11

3.2.1 APERTURA DEL PROYECTO CON VS CODE        11

3.3 CÓDIGO EXTENSIÓN.TS        11

3.4.- CÓDIGO PACKAGE.JSON        13

3.5 SEGUNDO EJERCICIO        14

3.6.- DEBUG DEL CODIGO        14

CONCLUSIÓN        16

REFERENCIAS        17

OBJETIVO GENERAL

• El objetivo es practicar la programación en JavaScript (conocer de paso TypeScript) y aplicarlo de manera novedosa.                      
• Creación de una extensión para Visual Studio Code, que cada N líneas inserte un salto en blanco.

2. VISUAL STUDIO CODE

Visual Studio Code es un editor de código fuente desarrollado por Microsoft para Windows, Linux y macOS. Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis, finalización inteligente de código, fragmentos y refactorización de código. También es personalizable, por lo que los usuarios pueden cambiar el tema del editor, los atajos de teclado y las preferencias. Es gratuito y de código abierto, aunque la descarga oficial está bajo software privativo e incluye características personalizadas por Microsoft.

2.1 DESCARGA E INSTALACIÓN DE VISUAL STUDIO CODE

[pic 6]

En esta imagen damos clic en el botón de Descargar para Windows, una vez terminado la descarga damos clic en el archivo ejecutable y damos clic en abrir e iniciamos la instalación.

     [pic 7]

Nos pide que aceptemos los términos de licencia y damos clic en Siguiente [pic 8]

En esta imagen indicamos la ruta donde se guardará VS Code una vez instalado, damos clic en siguiente.

  [pic 9]

Nos pide crear una carpeta el Menú Inicio dejamos los valores por defecto y damos clic en Siguiente.

[pic 10]

Seleccionamos las tareas adicionales, aquí en este caso lo dejamos por defecto y damos clic en Siguiente.

[pic 11]

Una vez seguro que todo está bien y en orden damos clic en Instalar.

[pic 12]

[pic 13]

Finaliza la Instalación de Vs Code

3.-  INSTALACIÓN DE LOS PAQUETES YEOMAN Y GENERATOR-CODE

Instalando npm install -g yo generator-code

[pic 14]

Con esta instrucción npm install –g yo generator-code instalamos el paquete de Yeoman, y generator-Code. 

3.1 GENERACIÓN DEL ESQUELETO DEL PROYECTO

Posteriormente ejecutamos el paquete de Yeoman con el siguiente código:

Yo code 

[pic 15]

Con la opción code le estamos indicando a Yeoman que queremos usar el generador de extensiones para VS Code donde nos hará varias preguntas para configurar nuestro proyecto:

? what type of extensión do you want to créate? Donde elegimos New Extensión (TypeScript), y damos Enter.

? what’s the name of your extensión? Line Gapper va hacer el nombre de nuestra extensión creada y Enter.

? what’s the identifier of your extensión? Gapline será el nombre el cual vamos a identificar nuestra extensión y damos Enter.

? what’s the description of your extensión?  Aquí es opcional o solo damos Enter y lo dejamos por defecto.

? Initialize a git repository? Le decimos que No, ya que no lo vamos a utilizar.

Y todas las preguntas las dejamos por defecto solo damos Enter.

3.2 PRIMER EJERCICIO

3.2.1 APERTURA DEL PROYECTO CON VS CODE

Una vez instalado el paquete, ejecutamos nuestra carpeta creada con cd gapline y posteriormente tecleamos code, en la terminal.

[pic 16]

En este apartado vemos como nos muestra la carpeta creada automáticamente al ejecutar           nuestra extensión gapline, dentro de la carpeta gapline tenemos creada otra llamada src dentro de esas está el fichero extencion.ts y dentro de gapline tenemos nuestro package.json. 

3.3 CÓDIGO EXTENSIÓN.TS

En este paso sustituimos el código que genera por defecto, por el código que está en el archivo de la actividad.

//invocar el modo estricto en todo un script

'use strict';

// El módulo 'vscode' contiene la API de extensibilidad de VS Code

// Importe el módulo y haga referencia a él con el alias vscode en su código a continuación

import * as vscode from 'vscode';

// este método se llama cuando su extensión está activada

// su extensión se activa la primera vez que se ejecuta el comando

export function activate(context: vscode.ExtensionContext) {

     // El comando se ha definido en el archivo package.json

     // Ahora proporcione la implementación del comando con registerCommand

...