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, Viscual 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

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 carácteres, 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 arria 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