Preparación del entorno de trabajo

Instalación del VSCode, Extensión LiveServer, NodeJS, Git y GitHub

Javier Ribal del Río

2025-10-11

Contenido

Concepto de IDE
Instalación del Visual Studio Code (VSCode)
Configuración del VSCode, extensión LiveServer
Instalación de NodeJS y npm
Introducción a Git y GitHub

IDE

¿Qué es una IDE?

Las Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.

Aunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:

Debugger integrado en la interfaz
Gestor de archivos
Editor de código inteligente: autocompletados

¿Cuántas IDE existen?

Android Studio
RStudio
Eclipse

¿Qué IDE utilizaremos nosotros?

Principalmente trabajaremos con VSCode una IDE de proposito general que configuraremos para el desarrollo frontend

Instalación de VScode

Enlace

Familiarizarse con VSCode

Barra lateral:

Explorador de archivos
Menú de Git
Menú de extensiones
Buscar
Debugger

Editor o área de edición: componente más importante de la IDE, lugar donde se escribe el código.

Extensiones

Las extensiones son aplicaciones software desarolladas por empresas o por particulares para modificar o agregar una nueva funcionalidad a las IDE. Pueden ir desde pequeñas modificaciones del tema o de la UI, o incorporar nuevas funcionalidades como la interacción con bases de datos.

LiveServer

Nosotros para el transcurso del curso utilizaremos la extensión Liveserver que nos permitirá desplegar comodamente un pequeño servidor para la programación con HTML (Ahondaremos más la próxima semana)

Instalación de LiveServer

Node.JS y NPM

¿Qué es node JS?

Node.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.
Permite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.
De este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend.

¿Qué es NPM?

NPM (Node Package Manager) es el gestor de paquetes de Node.js.
Facilita la instalación, actualización y gestión de librerías que amplían las funcionalidades de los proyectos.

Descarga node y npm nodejs.org

Git y GitHub

¿Qué es Git?

Git es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión.

¿Qué es GitHub?

GitHub es una plataforma en la nube que utiliza Git para almacenar y gestionar proyectos. Permite compartir código, colaborar con otros desarrolladores y mantener un control de versiones centralizado.

Git frente GitHub

Git es la herramienta de control de versiones.(Software Libre, Linux Fundation)
GitHub es la plataforma online donde se alojan los repositorios y se facilita el trabajo en equipo. (Coporativa Microsoft)

Uso de Git y GitHub

En Hyperloop UPV, tanto en los subsistemas de Software y Firmware utilizamos GitHub como herramienta de gestión de código.

Nosotros en el TC, también trataremos de facilitarnos con esta herramienta