Visual Studio Code. Uso de extensiones para el curso Páginas web HTML y hojas de estilo CSS

Las extensiones que se aconseja instalar para seguir el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org se encuentran en la lección sobre la Configuración recomendada de Visual Studio Code.

En esta lección se comenta la utilización de algunas de esas extensiones, concretamente:

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