Visual Studio Code. Uso

Interfaz de Visual Studio Code

Estos son los elementos principales del interfaz de Visual Studio Code:

Visual Studio Code. Validación

Referencia: Visual Studio Code Docs: User Interface

Abrir enlace

Para abrir un documento enlazado, haga Ctrl+clic en la URL. Si es un documento local, el documento se abrirá en Visual Studio Code en una nueva pestaña. Si es un documento externo, el documento se abrirá en el navegador predeterminado.


Si el documento no existe, Visual Studio Code ofrece la posibilidad de crearlo, como muestra el ejemplo siguiente.

Ocultar / mostrar minimapa

El minimapa es una imagen reducida de la página web que se muestra en la parte derecha de Visual Studio Code y que permite desplazarse rápidamente a lo largo de un documento.

Visual Studio Code. Ocultar / mostrar minimapa

Si el documento no es muy largo (como ocurre en los ejercicios de este curso), el minimapa no resulta demasiado útil, pero ocupa espacio de pantalla.

Visual Studio Code. Ocultar / mostrar minimapa

Para ocultar (o mostrar si está oculto) el minimapa, elija la opción de menú Ver > Alternar minimapa:

Visual Studio Code. Ocultar / mostrar minimapa

Una vez oculto el minimapa, la ventana de edición se extenderá hasta el borde derecho:

Visual Studio Code. Ocultar / mostrar minimapa

Ajuste de línea

Inicialmente, Visual Studio Code no ajusta las líneas, por lo que las líneas largas no se ven completas.

Visual Studio Code. Ajuste de línea

Para que Visual Studio Code ajuste automáticamente las líneas, elija la opción de menú Ver > Alternar ajuste automático de línea:

Visual Studio Code. Ajuste de línea

Con el ajuste de líneas, las líneas largas se verán completas. El número de línea situado a la izquierda se mantiene para la toda la línea:

Visual Studio Code. Ajuste de línea

Apartados del Explorador en la barra de actividades

El Explorador de la barra de actividades puede mostrar diferentes apartados. Por ejemplo, en la captura siguiente muestra únicamente el árbol de ficheros del área de trabajo.

Visual Studio Code. Apartados del Explorador en la barra de actividades

Haciendo clic en el botón de los puntos suspensivos se muestran los distintos apartados que se pueden elegir. Estos apartados se denomina Vistas en Visual Studio Code. Las vistas "Editores abiertos", "Carpetas" y "Esquema" son las vistas disponibles inicialmente. Algunas extensiones amplian el número de vistas disponibles. Para mostrar u ocultar una vista, haga clic en el nombre de la vista.

Visual Studio Code. Apartados del Explorador en la barra de actividades

La vista "Editores abiertos" muestra una lista de los ficheros abiertos. La vista "Carpetas" muestra el árbol de ficheros del área de trabajo. La vista "Esquema" muestra la estructura de etiquetas del documento abierto en el Editor.

Visual Studio Code. Apartados del Explorador en la barra de actividades

Formatear código

Para formatear código, pulse el atajo de teclado Alt+Shift+f.

Referencia: Visual Studio Code Docs: Formatear fragmentos

Pegar código

Al pegar código, Visual Studio Code añade un sangrado que puede resultar molesto en caso de que un formateo automático posterior no lo corrija (por ejemplo, si el código pegado incluye un elemento <pre>.

La solución es pulsar Ctrl+z (deshacer) inmediatamente después de pegar el código. De esa manera se eliminará el sangrado añadido.

VSC issue #6392: Copy/Cut then Paste doesn't preserve or fix indentation

Sangrado incorrecto

A veces el tamaño del sangrado no coincide con el establecido en la configuración.

Referencia: Pregunta en Stack Overflow

Insertar rutas de archivos

Cuando se escribe una ruta relativa en algún atributo (en una imagen, en un enlace, etc), se muestra un selector con los archivos y directorios disponibles. Al seleccionar uno de ellos, el nombre se añade a la ruta. Si con la lista visible escribimos uno o más caracteres, la lista muestra únicamente los archivos y directorios que comienzan por esos caracteres.


Si las imágenes se encuentran en un subdirectorio del directorio actual:

  1. Al escribir las comillas en el atributo src ...:

    VSC. Insertar rutas de archivos

  2. ... se mostrará un cuadro con el contenido del directorio actual con uno de los elementos resaltado en azul claro:

    VSC. Insertar rutas de archivos

  3. Si la ruta que desea escribir es precisamente la que está resaltada en azul claro, pulse Intro. La ruta se añadirá automáticamente y si se trata de un directorio (como en el ejemplo), se mostrará el contenido:

    VSC. Insertar rutas de archivos

  4. Si escribe caracteres, el cuadro mostrará únicamente los ficheros cuyo nombre coincida con lo escrito:

    VSC. Insertar rutas de archivos

  5. En vez de escribir el nombre completo, en cualquier momento puede desplazar con las teclas de flecha arriba o abajo la franja azul hasta el nombre deseado ...:

    VSC. Insertar rutas de archivos

  6. ... y pulsar Intro para que se escriba en la página el nombre seleccionado en azul:

    VSC. Insertar rutas de archivos

Si en algún momento no se muestra el cuadro con los nombres de los ficheros, pulse Ctrl+Espacio para mostrarlo.

Si las imágenes se encuentran en un directorio superior al directorio actual:

  1. Escriba ../ para indicar que el camino empieza subiendo al directorio superior y se mostrarán los directorios y ficheros contenidos en el directorio superior:

    VSC. Insertar rutas de archivos

  2. A partir de ahí elija o escriba el nombre del directorio (o ../ si fuera necesario subir otro directorio) y se mostrará su contenido como en el ejemplo anterior:

    VSC. Insertar rutas de archivos

Seleccionar bloques

Se pueden seleccionar bloques de etiquetas completos con los atajos de teclado Alt+Shift+FlechaDerecha y Alt+Shift+FlechaIzquierda:

Cada vez que se pulsa Alt+Shift+FlechaDerecha se van seleccionando los elementos de nivel superior a la selección actual. Cada vez que se pulsa Alt+Shift+FlechaIzquierda se vuelve a la selección de nivel inferior anterior.

Modificar el juego de caracteres

Visual Studio Code permite modificar el juego de caracteres de un documento. El ejemplo siguiente muestra cómo cambiar el juego de caracteres de UTF-8 con BOM a UTF (es decir, eliminar la marca de orden de bytes de UTF-8):

  1. Visual Studio Code detecta el juego de caracteres de un documento y muestra el juego de caracteres en la barra de estado:

    VSC. Modificar juego de caracteres

  2. Haga clic en el nombre del juego de caracteres de la barra de estado y se abrirá un menú en la ventana de comandos. Elija la opción Guardar con Encoding:

    VSC. Modificar juego de caracteres

  3. Se abrirá un menú con los juegos de caracteres disponibles. El juego de caracteres actual del documento se mostrará el primero de la lista. Si quiere cambiar el juego de caracteres a UTF-8 (sin BOM), haga clic en la opción UTF-8:

    VSC. Modificar juego de caracteres

  4. Automáticamente el documento se guardará en el juego de caracteres elegido. El nuevo juego de caracteres se mostrará en la barra de estado:

    VSC. Modificar juego de caracteres