Creación de una extensión para Visual Studio Code VS Code
Juan Fernando Villegas VasquezTrabajo8 de Abril de 2020
2.301 Palabras (10 Páginas)107 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.
[pic 3]
Figura 3:Instalador VS Code descargado.
Con el instalador descargado se continuó con la instalación de VS Code, para esto se procedió a dar doble clic sobre el ejecutable que quedó almacenado en la carpeta “Descargas”.
[pic 4]
Figura 4: Instalador VS Code capeta Descargas
La primera ventana que nos abre es el acuerdo de licencia para utilización del software, antes de continuar se debió seleccionar la opción “Acepto el acuerdo”, y después de esto dar clic en el botón “Siguiente”.
[pic 5]
Figura 5: Acuerdo de Licencia VS Code
La siguiente ventana que me mostró el instalador fue la de la ruta de donde deseamos instalar el software, en mi caso dejé la ruta de instalación por defecto y di clic en el botón “Siguiente”:
[pic 6]
Figura 6: Ruta Instalación VS Code
Después de esto el instalador nos pide el nombre de la carpeta de la ruta inicio, en este caso dejé las opciones que ofrece el instalador por defecto y di en clic en el botón “Siguiente”:
[pic 7]
Figura 7:Carpeta Menú Inicio VS Code
La siguiente ventana que me arrojo fue la de tareas adicionales, en este caso solo cambié la selección para “Crear un icono en el escritorio” y di clic en el botón “Siguiente”:
[pic 8]
Figura 8:Tareas Adicionales VS Code
Finalmente, mostró el resumen de las opciones seleccionadas y procedí a dar clic en el botón “Instalar”:
[pic 9]
Figura 9: Resumen de opciones VS Code
Después de eso el software se comenzó a instalar de forma automática y al final arrojó la ventana donde indicaba que la instalación se había completado y que ya podía iniciar el editor:
[pic 10]
Figura 10: Se completo la instalación de VS Code
Al dar clic en el botón “Finalizar” el editor VS Code se abrió de manera automática:
[pic 11]
Figura 11: Interface grafica VS Code
- NodeJS
Abrí el navegador Google Chrome en ingresé la url: https://nodejs.org/es/, lo cual abrió la siguiente página:
[pic 12]
Figura 12: Página NodeJS
Al dar clic en el botón “12.16.1 LTS” automáticamente comenzó la descarga del instalador:
[pic 13]
Figura 13: Instalador de NodeJS descargado.
Para continuar con la instalación de NodeJS, se procedió a dar doble clic sobre el ejecutable que quedó almacenado en la carpeta “Descargas”.
[pic 14]
Figura 14: Instalador NodeJS en carpeta Descargas
...