“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:

...