Creación de una extensión para Visual Studio Code VS Code
Enviado por Juan Fernando Villegas Vasquez • 8 de Abril de 2020 • Trabajos • 2.301 Palabras (10 Páginas) • 78 Visitas
Universidad Internacional de la Rioja
Facultad de Ingeniería
Creación de una extensión para Visual Studio Code
VS Code
Computación en el Cliente Web (ISW) - PER1177 2020-2021
Ismael Sagredo Olivenza
Juan Fernando Villegas Vásquez
Medellín - Colombia
2020
Tabla de Contenido
Pág.
Tabla de Contenido 2
Tabla Figuras 3
Creación de una extensión para Visual Studio Code 5
1. Instalación de Software 5
1.1. Visual Studio Code (VS Code) 5
1.2. NodeJS 11
1.3. Paquetes NPM 16
2. Ejecución de la Actividad 17
2.1. Generación del esqueleto del proyecto 17
2.2. Trabajo con VS Code 19
2.3. Documentación Código Fuente Extensión 24
2.4. Pruebas Extensión 26
Tabla Figuras
Pág.
Figura 1: Página Principal Visual Studio Code (VS Code) 5
Figura 2: Botón para descargar VS Code 5
Figura 3:Instalador VS Code descargado. 6
Figura 4: Instalador VS Code capeta Descargas 6
Figura 5: Acuerdo de Licencia VS Code 7
Figura 6: Ruta Instalación VS Code 7
Figura 7:Carpeta Menú Inicio VS Code 8
Figura 8:Tareas Adicionales VS Code 8
Figura 9: Resumen de opciones VS Code 9
Figura 10: Se completo la instalación de VS Code 9
Figura 11: Interface grafica VS Code 10
Figura 12: Página NodeJS 11
Figura 13: Instalador de NodeJS descargado. 11
Figura 14: Instalador NodeJS en carpeta Descargas 11
Figura 15:Ventana bienvenida instalador NodeJS 12
Figura 16:Ventana de Licencia de NodeJS 12
Figura 17: Ruta instalación NodeJS 13
Figura 18:Componentes a instalar de NodeJS 13
Figura 19:Ventana para instalar herramientas adicionales para NodeJS 14
Figura 20:Ventana final para comenzar la instalación de NodeJS 14
Figura 21: Ventana final instalador NodeJS 15
Figura 22:Resultado de ejecución comando de instalación. 16
Figura 23:Resultado ejecución comando yo code. 17
Figura 24: Menú Yeoman 17
Figura 25: Selección de extensión tipo TypeScript 18
Figura 26: Resultado de la creación de la extensión 19
Figura 27:Comandos para abrir la extensión en VS Code. 19
Figura 28:Extensión cargada en VS Code. 20
Figura 29:Codigo fuente inicial del archivo extension.ts 20
Figura 30:codigo de la extensión pegado a VS Code 21
Figura 31:Error corregido en el código de la extensión 21
Figura 32:Mejora en cláusula "if". 22
Figura 33: Configuración de la variable strict. 22
Figura 34:Modificaciones archivo package.json 23
Figura 35:Ventaja VS Code con extensión cargada. 26
Figura 36:Texto copiado y pegado en el editor. 26
Figura 37:Texto seleccionado y habilitar paleta de comandos. 27
Figura 38: En el campo de texto ingresamos 2 para hacer la prueba. 27
Figura 39:Resultado de la ejecución de la extensión 28
Creación de una extensión para Visual Studio Code
- Instalación de Software
- Visual Studio Code (VS Code)
Para comenzar con la instalación de Visual Studio Code (en adelante VS Code) el primer paso fue ingresar al link: https://code.visualstudio.com/, al abrir la página en el navegador Google Chrome se carga el sitio web que se muestra en la Figura 1:
[pic 1]
Figura 1: Página Principal Visual Studio Code (VS Code)
El siguiente paso fue dar clic al botón “Download for Windows” como lo muestra la Figura 2, por defecto la página cargó la plataforma sobre la que voy a trabajar (para mi caso trabajaremos sobre Windows 10 a 64bits).
[pic 2]
Figura 2: Botón para descargar VS Code
Al dar clic al botón “Download for Windows”, el navegador fue redirigido a una nueva página donde la descarga comenzó automáticamente. Una de las grandes ventajas de este editor es que no es muy pesado, su peso fue de aproximadamente 57MB y descargo de una manera rápida. La Figura 3 muestra la página y el software descargado.
...