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. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com