Una guía práctica para principiantes sobre cómo instalar VS Code, comprender su interfaz, abrir carpetas de proyectos, crear archivos, ejecutar un sitio web, formatear código, usar la terminal y crear un flujo de trabajo diario cómodo.
Si prefieres seguir el proceso visualmente, empieza con el vídeo completo y usa la guía escrita como referencia cuando la necesites.
Visual Studio Code puede parecer complicado cuando lo abres por primera vez, pero solo necesitas una pequeña parte del editor para comenzar a crear proyectos reales. Esta guía recorre ese flujo de trabajo práctico para principiantes, desde la instalación hasta la ejecución de su primer sitio web.
Al final, sabrá cómo abrir un proyecto correctamente, crear y organizar archivos, obtener una vista previa de un sitio web con Live Server, formatear el código con Prettier, usar el terminal integrado y navegar por VS Code con algunos atajos útiles.
Visual Studio Code, generalmente llamado VS Code, es un editor de código gratuito. Le brinda un espacio de trabajo para escribir código, organizar archivos de proyecto, buscar, ejecutar comandos de terminal, instalar extensiones, rastrear cambios y depurar problemas.
VS Code no es un lenguaje de programación. Puede usarlo mientras aprende HTML, CSS, JavaScript, Python y muchas otras tecnologías.
Descargue el Visual Studio Code desde sitio web oficial de Visual Studio Code. El sitio web normalmente recomienda el instalador correcto para su sistema operativo.
En una Mac, abra el archivo descargado y mueva Visual Studio Code a la carpeta Aplicaciones si se le solicita. En Windows, ejecute el instalador y siga los pasos de configuración. Luego abra VS Code normalmente desde Aplicaciones, Launchpad o el menú Inicio.
No es necesario memorizar cada botón. Comience con estas áreas:
La barra de actividades también le brinda acceso a Búsqueda, Control de código fuente, Ejecutar y depurar y Extensiones.
Uno de los hábitos más importantes para principiantes es abrir la carpeta completa del proyecto en VS Code. La carpeta se convierte en el espacio de trabajo, por lo que VS Code puede entender cómo todos sus archivos van juntos.
Cree una carpeta llamada My First Project, luego elija Archivo → Abrir carpeta en VS Code y selecciónela. Si VS Code le pregunta si confía en los autores, puede confiar en una carpeta que creó usted mismo.
El nombre del proyecto debería aparecer ahora en la parte superior del Explorador.
Utilice el botón Nuevo archivo en el Explorador para crear estos tres archivos:
My First Project/
├── index.html
├── style.css
└── app.js
index.html contiene la estructura y el contenido de la página.style.css controla el aspecto de la página.app.js contiene el comportamiento de JavaScript.Esta misma estructura de tres archivos es utilizada por muchos proyectos para principiantes en 100 JS Projects.
Abra la vista Extensiones, busque Live Server e instale la extensión. Luego abra index.html, haga clic derecho dentro del editor y elija Abrir con Live Server.
Su página se abre en el navegador usando una dirección local. Después de editar y guardar un archivo, Live Server actualiza la página para que puedas ver el resultado rápidamente.
Para una configuración de aprendizaje cómoda, coloque VS Code en un lado de la pantalla y el navegador en el otro. Esto hace que la relación entre su código y su resultado visible sea mucho más fácil de entender.
Dentro de index.html, ingrese un signo de exclamación y presione Tab. VS Code usa Emmet para crear un documento HTML básico. Luego puede agregar un encabezado, párrafo y botón dentro de body:
<h1>My First Project</h1>
<p>I am learning VS Code.</p>
<button>Click Me</button>
Conecte el archivo CSS dentro del head del documento:
<link rel="stylesheet" href="style.css" />
Mientras trabaja, VS Code sugiere elementos HTML, propiedades CSS, nombres de archivos y otras completaciones. Esta asistencia se llama comúnmente IntelliSense.
El formato mantiene el espaciado y la sangría consistentes sin cambiar lo que hace el código. Instale la extensión Prettier - Code formatter, abra la paleta de comandos y ejecute Formatear documento.
Para formatear archivos automáticamente:
Ahora, al guardar un archivo compatible, se puede limpiar su formato automáticamente.
Elija Terminal → Nueva Terminal para abrir una línea de comando dentro de VS Code. Cuando haya abierto correctamente una carpeta de proyecto, el terminal normalmente se inicia en esa misma carpeta.
En macOS, puede confirmar la carpeta actual y enumerar sus archivos con:
pwd
ls
En Windows, los comandos comparables son cd y dir.
No es necesario memorizar muchos comandos de terminal al principio. La idea importante es que los tutoriales y las herramientas de desarrollo suelen utilizar este panel para instalar paquetes, iniciar aplicaciones y mostrar mensajes.
| Acción | MacOS | Ventanas |
|---|---|---|
| Abrir rápidamente un archivo | Comando P | Control P |
| Abra la paleta de comandos | Comando Mayús P | Controlar cambio P |
| Buscar en el archivo actual | Comando F | Control F |
| Buscar el proyecto completo | Comando Mayús F | Controlar cambio F |
| Seleccione el siguiente texto coincidente | Comando D | Control D |
| Añadir otro cursor | Opción clic | Alt clic |
Sólo necesitas recordar los atajos que utilizas habitualmente. La paleta de comandos es especialmente valiosa porque te permite buscar acciones cuyos atajos hayas olvidado.
El panel de control de código fuente funciona con Git para mostrar qué archivos cambiaron. Git también puede ayudarte a guardar puntos de control importantes y sincronizar proyectos con GitHub. No es necesario que comprenda los flujos de trabajo avanzados o de ramificación de Git antes de usar VS Code para su primer proyecto.
La depuración le ayuda a descubrir por qué el código no se comporta como se esperaba. Un punto de interrupción es un marcador al lado de una línea de código donde un depurador puede pausar. Cuando sus proyectos se vuelven más complejos, pausar le permite inspeccionar los valores y seguir el programa paso a paso en lugar de adivinar.
Por ahora, recuerda la distinción:
Utilice la paleta de comandos para buscar Tema de color y elija un tema que le resulte fácil de leer. También puede ajustar el tamaño de fuente del editor en Configuración y habilitar el guardado automático si lo prefiere.
Evite instalar una gran colección de extensiones inmediatamente. Comience con las herramientas que realmente necesita, como Live Server y Prettier, luego agregue extensiones específicas del idioma cuando un proyecto las requiera.
Mantenga cada proyecto en su propia carpeta. Una estructura de carpetas limpia hace que el Explorador, la terminal, el Servidor Live y el Control de fuente sean mucho más fáciles de entender.
Confirme que la extensión Live Server esté instalada y habilitada. Abra index.html, luego intente hacer clic derecho dentro del editor nuevamente.
Compruebe que el nombre de archivo en href coincida exactamente con su nombre de archivo CSS real. También confirme que el elemento de enlace esté dentro del head del documento HTML.
Cierre el espacio de trabajo actual y use Archivo → Abrir carpeta para abrir el proyecto completo. Luego crea una nueva terminal.
Asegúrese de que Prettier esté instalado, que Formatear al guardar esté habilitado y que Prettier esté seleccionado como formateador predeterminado para el tipo de archivo.
index.html con Live ServerNo es necesario que domines todas las funciones de VS Code antes de comenzar a codificar. Cree algunos proyectos pequeños y deje que el editor se familiarice mediante la repetición.
Si su objetivo es el desarrollo web, comience con HTML y CSS, luego agregue JavaScript. Cuando esté listo, elija su primer proyecto para principiantes de la colección de 100 proyectos de JavaScript, cree los archivos necesarios en una nueva carpeta y ejecute index.html con Live Server.
VS Code es tu espacio de trabajo. La verdadera habilidad se desarrolla a medida que abres una carpeta repetidamente, creas algo, lo pruebas, corriges pequeños errores y lo mejoras.