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

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.

Formatear código

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

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 establecida en la configuración.

Referencia: Pregunta en Stack Overflow

Extensión Image preview: Información de imágenes

La información sobre esta extensión se encuentra en la lección Configuración recomendada para el curso Páginas web HTML y hojas de estilo CSS.


Al situar el cursor sobre la ruta de una imagen, se muestra un cuadro con una miniatura de la imagen y el tamaño de la imagen. Además, haciendo Ctrl+clic izquierdo se abre la imagen en otra pestaña.

En este curso, utilizaremos esta extensión para ver el tamaño de las imágenes insertadas y poder rellenar los atributos width y height fácilmente.

  1. Cree la etiqueta <img> con los atributos src y alt:

    VSC. Extensión Imagen preview

  2. Sitúe el cursor sobre el atributo src y se mostrará un cuadro con una miniatura de la imagen y el tamaño de la imagen:

    VSC. Extensión Imagen preview

  3. Añada los atributos width y height con los valores indicados en el cuadro:

    VSC. Extensión Imagen preview

Extensión Path Intellisense: Rutas de archivos

La información sobre esta extensión se encuentra en la lección Configuración recomendada para el curso Páginas web HTML y hojas de estilo CSS.


Cuando se escribe una ruta relativa (en un enlace, en una imagen, etc), al escribir una barra (/), 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.

Problemas detectados:


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

  1. Empiece a escribir el camino hasta las imágenes en el atributo src:

    VSC. Extensión Path Intellisense

  2. Al escribir el carácter / (barra) se mostrará un cuadro con el contenido del directorio:

    VSC. Extensión Path Intellisense

  3. Si sigue escribiendo, el cuadro mostrará únicamente los ficheros cuyo nombre coincida con lo escrito:

    VSC. Extensión Path Intellisense

  4. 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. Extensión Path Intellisense

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

    VSC. Extensión Path Intellisense

Si las imágenes se encuentran en un directorio que no es un subdirectorio del 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. Extensión Path Intellisense

  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. Extensión Path Intellisense

Si las imágenes se encuentran en el mismo directorio que la página web:

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

    VSC. Extensión Path Intellisense

  2. Elija la imagen deseada, como en los ejemplos anteriores:

    VSC. Extensión Path Intellisense

  3. Por último, borre los caracteres ./ iniciales (no son incorrectos, pero sí innecesarios):

    VSC. Extensión Path Intellisense