Primera configuración e interfaz

Conoce la interfaz: barra lateral, explorador de archivos, paneles, temas de color e iconos, y cómo cambiar el idioma.

La interfaz de VS Code se organiza en barra lateral (explorador, búsqueda, Git, extensiones), área de edición y paneles inferiores (terminal, problemas, salida).

Puedes cambiar el tema de color (Claro, Oscuro, Alto contraste) y el tema de iconos de archivos desde la paleta de comandos o Configuración.

El idioma de la interfaz se cambia instalando el paquete de idioma correspondiente y seleccionándolo en la configuración.

  • Barra lateral, editor y paneles.
  • A la izquierda está la barra de actividad: el primer icono abre el explorador de archivos (carpetas y archivos del proyecto), el segundo la búsqueda global, el tercero el control de código fuente (Git) y el último las extensiones. En el centro está el área de edición, con pestañas por archivo. Abajo puedes abrir la terminal integrada, la lista de problemas, la salida de extensiones o el panel de depuración.
  • Explorador: ver y abrir archivos; crear carpetas y archivos.
  • Búsqueda: buscar texto en todos los archivos del proyecto.
  • Terminal: línea de comandos sin salir del editor.

Partes de la interfaz

Barra lateral, editor y paneles.

A la izquierda está la barra de actividad: el primer icono abre el explorador de archivos (carpetas y archivos del proyecto), el segundo la búsqueda global, el tercero el control de código fuente (Git) y el último las extensiones. En el centro está el área de edición, con pestañas por archivo. Abajo puedes abrir la terminal integrada, la lista de problemas, la salida de extensiones o el panel de depuración.

  • Explorador: ver y abrir archivos; crear carpetas y archivos.
  • Búsqueda: buscar texto en todos los archivos del proyecto.
  • Terminal: línea de comandos sin salir del editor.

Temas de color e iconos

Personaliza el aspecto.

Para cambiar el tema: abre la paleta de comandos (Ctrl+Shift+P o Cmd+Shift+P), escribe «Color Theme» o «Tema de color» y elige uno (por ejemplo Dark+, Light+, Monokai). Para los iconos de archivos: «File Icon Theme» o «Tema de iconos de archivo» y selecciona uno como «Material Icon Theme» (tras instalar la extensión).

Idioma de la interfaz

Usar VS Code en español.

Instala la extensión «Spanish Language Pack for Visual Studio Code» desde el marketplace. Luego abre la paleta de comandos, escribe «Configure Display Language» o «Configurar idioma de visualización» y elige Español. Reinicia el editor si es necesario. A partir de entonces los menús y mensajes se mostrarán en español.

VS Code
02

Primera configuración e interfaz

Conoce la interfaz: barra lateral, explorador de archivos, paneles, temas de color e iconos, y cómo cambiar el idioma.

Código del tema: VS Code

📘 Teoría

Partes de la interfaz

Barra lateral, editor y paneles.

A la izquierda está la barra de actividad: el primer icono abre el explorador de archivos (carpetas y archivos del proyecto), el segundo la búsqueda global, el tercero el control de código fuente (Git) y el último las extensiones. En el centro está el área de edición, con pestañas por archivo. Abajo puedes abrir la terminal integrada, la lista de problemas, la salida de extensiones o el panel de depuración.

  • Explorador: ver y abrir archivos; crear carpetas y archivos.
  • Búsqueda: buscar texto en todos los archivos del proyecto.
  • Terminal: línea de comandos sin salir del editor.

Temas de color e iconos

Personaliza el aspecto.

Para cambiar el tema: abre la paleta de comandos (Ctrl+Shift+P o Cmd+Shift+P), escribe «Color Theme» o «Tema de color» y elige uno (por ejemplo Dark+, Light+, Monokai). Para los iconos de archivos: «File Icon Theme» o «Tema de iconos de archivo» y selecciona uno como «Material Icon Theme» (tras instalar la extensión).

Idioma de la interfaz

Usar VS Code en español.

Instala la extensión «Spanish Language Pack for Visual Studio Code» desde el marketplace. Luego abre la paleta de comandos, escribe «Configure Display Language» o «Configurar idioma de visualización» y elige Español. Reinicia el editor si es necesario. A partir de entonces los menús y mensajes se mostrarán en español.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre VS Code.

Test de VS Code

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .