Tutoriales de Visual Studio Code para empezar a programar desde cero

Inicio » Software » Tutoriales de Visual Studio Code para empezar a programar desde cero

Si te estás metiendo en el mundillo de la programación, seguramente ya te habrás dado cuenta de que un buen editor de código marca la diferencia. Visual Studio Code (VS Code) se ha convertido en uno de los favoritos porque es ligero, gratuito y, aun así, muy potente. En este tutorial completo vas a aprender a manejarlo desde cero y a sacarle jugo tanto si quieres programar en JavaScript, HTML, CSS, TypeScript como si solo quieres editar archivos de texto de forma cómoda.

A lo largo de esta guía vamos a ver cómo instalar VS Code, entender su interfaz, dominar los comandos básicos, gestionar archivos, trabajar con Git, personalizar el entorno y aprovechar extensiones. También tomaremos algunas ideas de otros entornos como Visual Studio “grande” para que veas qué aporta cada herramienta. La idea es que, al terminar, puedas trabajar con soltura, cambiar entre pestañas sin perderte, guardar y versionar tu código, y tener un entorno adaptado a tu forma de trabajar.

Qué es Visual Studio Code y por qué se usa tanto

Visual Studio Code es un editor de código fuente moderno, gratuito y multiplataforma (funciona en Windows, macOS y Linux) pensado para programar de forma cómoda y eficiente. No es un monstruo pesado como algunos IDE clásicos, pero incorpora de serie muchas funciones que antes solo veíamos en herramientas “grandes”: depuración integrada, terminal, control de versiones, extensiones, resaltado de sintaxis para multitud de lenguajes, etc.

Una de sus grandes ventajas es que VS Code es de código abierto y se puede descargar directamente desde su web oficial. No necesitas licencias de pago para aprender ni para trabajar a nivel individual. Además, el ecosistema de extensiones permite conectar con servicios y herramientas externas como linters, formateadores de código, Docker, bases de datos o GitHub, de manera que puedes montar un entorno de desarrollo completo sin salir del editor.

Frente a un IDE clásico, un editor como VS Code apuesta por la ligereza y la modularidad: tú decides qué componentes añadir. Sin embargo, mantiene características clave de los entornos de desarrollo integrados (IDE), como la gestión de proyectos, la autocompletación inteligente, la posibilidad de depurar paso a paso o el trabajo con control de versiones integrado.

En la práctica, esto significa que puedes usar Visual Studio Code para casi cualquier tipo de proyecto: desarrollo web, aplicaciones con TypeScript, scripts en Python, pequeños microservicios, frontends en React o Angular, trabajo con contenedores Docker, documentación técnica y mucho más.

Cómo descargar e instalar Visual Studio Code

Lo primero es conseguir el programa. El proceso no tiene misterio, pero es importante seguirlo bien para evitar problemas, sobre todo al elegir la versión correcta para tu sistema operativo y los componentes que quieras añadir.

Para instalar VS Code, accede a la web oficial en https://code.visualstudio.com/ y descarga el instalador correspondiente a tu sistema (Windows, macOS o Linux). El sitio detecta normalmente tu sistema y te ofrece la descarga adecuada, aunque puedes cambiarla manualmente si lo necesitas.

Una vez descargado el archivo, ejecuta el instalador y sigue los pasos del asistente. En Windows, el típico siguiente-siguiente: acepta la licencia, selecciona la carpeta de instalación y, si quieres, marca las opciones útiles como “Agregar al PATH” o “Abrir con Code” en el menú contextual del explorador de archivos. Eso te facilitará mucho abrir proyectos directamente desde las carpetas.

En macOS, suele bastar con arrastrar Visual Studio Code a la carpeta Aplicaciones, mientras que en Linux dispones de paquetes en formato .deb, .rpm y también opciones tipo Snap o repositorios específicos según la distribución. En todos los casos, el instalador se encarga de dejar el editor listo para abrirlo desde el menú de aplicaciones.

Una vez instalado, abre VS Code. Verás una pantalla inicial con accesos a proyectos recientes, atajos a documentación y un panel de bienvenida que puedes cerrar si quieres empezar directamente a trabajar con archivos o carpetas.

Conociendo la interfaz de usuario de VS Code

Al abrir Visual Studio Code por primera vez, es fácil perderse un poco entre paneles, iconos y menús. Sin embargo, la interfaz está muy pensada y, cuando la conoces, resulta muy intuitiva y cómoda para moverte por tus proyectos. Vamos a repasar las zonas principales.

En la parte superior tienes la barra de menú, desde donde puedes acceder a todas las funciones: abrir y guardar archivos, cambiar la configuración, gestionar extensiones, opciones de vista, depuración y más. Muchísimas acciones tienen atajos de teclado, pero el menú es el punto de partida perfecto mientras te vas familiarizando.

A la izquierda se encuentra la barra lateral principal, con un conjunto de iconos verticales. Estos iconos activan diferentes vistas: el explorador de archivos, el buscador, el control de versiones (Git), la vista de ejecución y depuración, y la sección de extensiones. Desde aquí controlarás casi todo lo relativo a tu proyecto sin necesidad de andar abriendo ventanas externas.

El panel que verás nada más abrir un proyecto es normalmente el explorador. Muestra la estructura de carpetas y archivos de la carpeta que tengas abierta. Desde aquí puedes crear nuevos archivos, renombrar, mover elementos, eliminar lo que no necesites y abrir cualquier archivo con un simple clic.

En el centro tienes el área de edición, donde se abren tus archivos en pestañas. Puedes tener varios documentos abiertos a la vez, dividir el editor en columnas, cambiar el orden de las pestañas y moverte entre ellas con el ratón o con atajos de teclado, algo muy útil cuando trabajas con código HTML, CSS y JavaScript a la vez.

En la parte inferior se encuentra la barra de estado. Ahí verás información sobre el archivo activo (codificación, tipo de fin de línea, lenguaje detectado, errores o advertencias), el estado de tu repositorio Git y, en muchos casos, indicadores añadidos por extensiones (por ejemplo, el formato de código activo o el entorno de Python seleccionado).

Comandos básicos y atajos de teclado imprescindibles

Parte de la gracia de Visual Studio Code es que permite trabajar muy rápido gracias a los atajos de teclado. Todos los comandos se pueden lanzar desde la barra de menú, sí, pero aprenderte algunos básicos te ahorra mucho tiempo, sobre todo cuando estás escribiendo código sin parar.

Para abrir un archivo existente puedes ir a la opción Archivo → Abrir archivo, o usar el atajo Ctrl + O en Windows y Linux, o Cmd + O en macOS. Esto muestra un cuadro de diálogo donde eliges el archivo de tu disco duro. Si en lugar de un archivo quieres abrir una carpeta completa como proyecto, utiliza Archivo → Abrir carpeta.

Cuando crees o modifiques un archivo, tendrás que guardar los cambios. Lo habitual es utilizar la opción Archivo → Guardar o recurrir directamente al atajo Ctrl + S (Windows/Linux) o Cmd + S (Mac). Si el archivo es nuevo, será el momento de ponerle un nombre y seleccionar la carpeta donde se guardará.

Si cometes una metedura de pata —cosa bastante habitual cuando se programa—, puedes recurrir a deshacer y rehacer. Con Ctrl + Z (o Cmd + Z en Mac) deshaces la última acción, y con Ctrl + Shift + Z (Cmd + Shift + Z en Mac) la rehaces. Estos comandos se aplican tanto a texto como a acciones de edición generales.

Para localizar fragmentos de código dentro de un archivo, usa la función de buscar y reemplazar. El atajo Ctrl + F (Cmd + F en Mac) abre el cuadro de búsqueda en la parte superior del editor. Si quieres reemplazar texto, puedes activar las opciones de reemplazo y, si lo necesitas, buscar incluso en todos los archivos del proyecto desde la vista de búsqueda en la barra lateral.

La selección de texto tiene también sus trucos: con doble clic seleccionas una palabra, con triple clic una línea completa. Si necesitas marcar múltiples apariciones de una misma palabra o patrón, puedes usar Ctrl + D (Cmd + D en Mac) para ir añadiendo ocurrencias adicionales a la selección y editar todas a la vez.

Para comentar y descomentar líneas de código, una acción que se hace constantemente al probar cosas, selecciona el bloque que quieras y pulsa Ctrl + / en Windows y Linux o Cmd + / en Mac. VS Code añadirá o quitará los caracteres de comentario adecuados según el lenguaje que tengas abierto.

Gestión de archivos: crear, abrir, cambiar entre pestañas y cerrar

Una parte importante del día a día con Visual Studio Code es aprender a manejar archivos y pestañas con soltura, especialmente si vas a trabajar con varios documentos a la vez, como suele pasar en proyectos web o backend.

Para crear un archivo nuevo, puedes usar la opción Archivo → Nuevo archivo o el atajo Ctrl + N. VS Code abrirá una pestaña vacía en el área de edición. Aún no tiene nombre ni extensión, así que hasta que no lo guardes no verás el resaltado de sintaxis específico para HTML, CSS, JavaScript u otro lenguaje.

Cuando tengas algo de contenido, usa Archivo → Guardar o el clásico Ctrl + S para que aparezca el cuadro de diálogo. Elige la carpeta, ponle un nombre al archivo y añade la extensión, por ejemplo pagina1.html. A partir de ese momento, la pestaña mostrará el nombre del archivo y el editor aplicará el coloreado de sintaxis correcto.

Si detectas un pequeño círculo junto al nombre del archivo en la pestaña, significa que hay cambios sin guardar. Cuando vuelvas a pulsar Ctrl + S, los cambios se escribirán en disco y desaparecerá el indicador. Si cierras la pestaña con modificaciones sin guardar, VS Code te preguntará si quieres conservar o descartar los cambios.

Trabajar con varios archivos a la vez es habitual: puedes abrir varios documentos y tenerlos en pestañas distintas. Si quieres basar un archivo nuevo en uno existente, utiliza Archivo → Guardar como y escribe un nombre diferente (por ejemplo, pagina3.html a partir de pagina2.html). El contenido será el mismo, pero a partir de ahí podrás modificarlos por separado.

Para moverte entre pestañas no tienes que depender del ratón. Puedes usar Alt + número (Alt + 1, Alt + 2, etc.) para saltar a una pestaña según su posición, o combinar Ctrl con las teclas Av Pág y Re Pág para avanzar o retroceder pestañas. Desde el menú Ir → Cambiar editor → Editor siguiente/anterior también puedes navegar entre ellas de forma secuencial.

Cuando ya no necesites un archivo abierto, tienes varias formas de cerrar pestañas. La más evidente es pinchar en la cruz de la propia pestaña con el ratón. Si prefieres atajos, puedes usar Ctrl + W o Ctrl + F4 para cerrar el editor activo. Si el archivo tiene cambios sin guardar, el programa te pedirá confirmación antes de perder nada.

En el menú Archivo también encontrarás la opción Guardar todo, muy práctica cuando has tocado varios archivos y quieres dejarlo todo grabado antes de cerrar el proyecto. El atajo asociado combina Ctrl + K, sueltas las teclas, y luego pulsas S; es un poco peculiar, pero muy útil cuando te acostumbras.

Guardado automático y apertura de proyectos

Si eres de las personas que se olvidan constantemente de guardar, Visual Studio Code incluye una función de guardado automático que te puede salvar de más de un susto. Puedes activarla desde el menú Archivo → Autoguardado, marcando la opción correspondiente para que los cambios se guarden de forma automática.

Cuando el autoguardado está activo, cada modificación que realices se escribe en el disco automáticamente tras un breve intervalo o al cambiar de pestaña, según la configuración elegida. Así te olvidas de ir pulsando Ctrl + S cada dos por tres, aunque conviene tener cuidado si estás probando cosas que no quieres conservar.

Para abrir archivos o proyectos ya existentes, además del clásico Archivo → Abrir archivo (Ctrl + O), tienes la opción de abrir carpetas completas. Esto es lo más recomendable cuando trabajas con proyectos que incluyen muchas piezas, como páginas HTML, CSS, scripts y recursos. Al abrir la carpeta, todo su contenido aparecerá en el explorador lateral.

Una vez tengas un proyecto cargado, podrás ver en el primer icono de la barra lateral el número de archivos modificados sin guardar o con cambios respecto al repositorio Git, lo que te da una foto rápida de cómo está tu trabajo. Gestionar correctamente carpetas y archivos te ayuda a mantener el proyecto organizado y a evitar líos con versiones duplicadas o documentos dispersos.

Extensiones en Visual Studio Code

Una de las razones por las que VS Code se ha vuelto tan popular es porque se puede ampliar casi hasta el infinito mediante extensiones. Estas pequeñas piezas de software añaden nuevas funciones al editor o se integran con herramientas externas para mejorar tu flujo de trabajo.

Para acceder a ellas, abre la vista de extensiones desde el icono con forma de cubo en la barra lateral. Ahí verás un buscador para localizar extensiones por nombre, lenguaje o tipo de funcionalidad. Por ejemplo, puedes buscar soporte específico para React, formateadores de código como Prettier, linters como ESLint o integraciones con Docker y GitHub.

Cuando encuentres una extensión que te interese, pulsa el botón Instalar. En muchos casos, el editor te pedirá que recargues la ventana (botón Recargar) para activar correctamente la extensión. A partir de ese momento, las nuevas capacidades formarán parte de tu entorno de trabajo y, a menudo, verás nuevos iconos, opciones en el menú o configuraciones adicionales.

Las extensiones pueden añadir resaltado de sintaxis para nuevos lenguajes, mejorar la autocompletación, proporcionar snippets de código, integrar depuradores avanzados o conectar con servicios de control de calidad y despliegue. De esta forma, vas transformando un editor de texto en un entorno de desarrollo a tu medida.

Eso sí, conviene ser selectivo: instalar demasiadas extensiones puede hacer que el editor consuma más recursos de la cuenta. Lo recomendable es ir añadiendo solo las que realmente necesites para tu trabajo del día a día y desactivar o desinstalar las que no utilices.

Integración con Git y control de versiones

Hoy en día casi cualquier proyecto serio requiere control de versiones. Visual Studio Code incluye soporte integrado para Git, lo que te permite trabajar con repositorios sin salir del editor, ver los cambios, hacer commits y sincronizar con plataformas como GitHub, GitLab o Bitbucket.

En la barra lateral tienes un icono con el símbolo de Git que abre la vista de control de código fuente. Desde ahí podrás inicializar un repositorio nuevo en la carpeta de tu proyecto o clonar uno existente desde una URL remota. VS Code creará la estructura necesaria y comenzará a rastrear los cambios.

En el panel principal verás secciones como “Cambios”, donde se listan los archivos modificados respecto al último commit. Puedes revisar cada archivo, ver las diferencias y decidir qué quieres incluir en el siguiente commit. Para confirmar los cambios, escribe un mensaje descriptivo y pulsa en el icono de la marca de verificación (✓).

En el menú de opciones del panel de Git (los tres puntos) encontrarás distintas acciones relacionadas con ramas y sincronización: crear o cambiar de rama, hacer pull de los cambios del servidor remoto, enviar tus commits con un push, gestionar etiquetas y más. Todo desde la interfaz de VS Code, sin necesidad de abrir la línea de comandos si no quieres.

Además, muchas extensiones mejoran esta integración mostrando indicadores en el margen del editor con los cambios añadidos, modificados o eliminados, o integrando revisiones de pull requests y comentarios directamente en el código. Esto hace que trabajar en equipo resulte mucho más cómodo.

Personalizar Visual Studio Code a tu gusto

Pasarás muchas horas mirando el editor, así que conviene adaptarlo a ti. Visual Studio Code permite personalizar el tema de color, el tipo de letra, el diseño de las ventanas y los atajos de teclado con bastante detalle. Así puedes tener un entorno cómodo tanto si prefieres el modo oscuro como si te van las interfaces claras.

Para cambiar el aspecto, ve a Archivo → Preferencias → Tema de color (en macOS, Código → Preferencias → Tema de color). Ahí podrás elegir entre los temas que vienen instalados por defecto o añadir otros nuevos mediante extensiones. Es tan sencillo como seleccionar el que más te guste y ver cómo cambia todo el editor.

En el apartado Archivo → Preferencias → Configuración encontrarás un panel con buscador donde puedes ajustar prácticamente cualquier detalle: fuente del editor, tamaño de letra, comportamiento del autoguardado, cómo se abren las pestañas, opciones del terminal integrado, integración con lenguajes concretos y mucho más.

Si no te convencen los atajos estándares, también puedes acceder a Archivo → Preferencias → Métodos abreviados de teclado. Desde ahí es posible cambiar combinaciones, buscar comandos concretos y asignar teclas nuevas, muy útil si vienes de otros editores y quieres mantener tus costumbres de siempre.

Este nivel de personalización, muy parecido a lo que ofrecen entornos más grandes como Visual Studio IDE, te permite montar un entorno realmente cómodo para tu forma de trabajar, con tus atajos preferidos, tu tema favorito y el diseño de paneles que mejor se adapte a tu monitor y a tu flujo de trabajo.

Diferencias con Visual Studio IDE y otros entornos

Además de VS Code, Microsoft ofrece Visual Studio como IDE completo, que está más orientado a proyectos grandes en .NET, C++, aplicaciones de escritorio o soluciones empresariales. Aunque comparten nombre, son herramientas con enfoques diferentes, y conviene tener claro cuándo usar una u otra.

En Visual Studio IDE encontrarás diseñadores gráficos avanzados, asistentes para proyectos complejos, herramientas de análisis de rendimiento, integración profunda con SQL Server y un sistema de proyectos más pesado. Es ideal para aplicaciones de gran tamaño o soluciones corporativas que requieren toda esa artillería.

Visual Studio Code, por su parte, se orienta más al desarrollo web, scripts, microservicios y proyectos donde se valora la ligereza. No trae tantos componentes preinstalados, pero puedes añadir lo que necesites mediante extensiones, manteniendo el editor ágil y rápido.

En ambos casos puedes personalizar temas, cambiar el diseño de las ventanas, elegir tu esquema de atajos de teclado favorito y disfrutar de herramientas como la autocompletación, la depuración y el control de versiones. La gran diferencia está en el peso, el tipo de proyectos y el ecosistema de funciones que cada uno incluye de serie.

Al final, si tu foco es el desarrollo web, JavaScript, TypeScript o lenguajes similares, lo más cómodo es empezar con Visual Studio Code. Si en algún momento pasas a proyectos más corporativos o muy centrados en .NET, puedes combinarlo con Visual Studio IDE sin problema, ya que muchas ideas y atajos son similares.

Tras todo este recorrido, ya tienes una panorámica bastante completa de lo que ofrece Visual Studio Code: desde la instalación y la organización de la interfaz hasta la gestión de archivos, atajos clave, guardado automático, extensiones, Git y personalización profunda. Con un poco de práctica, verás que es una herramienta tremendamente versátil, perfecta tanto para tus primeros pasos como desarrollador como para proyectos serios en los que necesites trabajar cómodo, rápido y con todo tu entorno de trabajo bien integrado.