Visual Studio Code. Configuración recomendada para el curso Páginas web HTML y hojas de estilo CSS

Esta es la configuración de Visual Studio Code que se recomienda para seguir el curso Páginas web HTML y hojas de estilo CSS.

Antes de configurar Visual Studio Code, se recomienda leer la lección Personalización de VSC, en la que se explica detalladamente cómo se personaliza Visual Studio Code.

Tema de color recomendado para el curso de HTML y CSS

El tema de color es un aspecto muy personal por lo que se deja a elección del alumno el tema de color empleado.

En las capturas de los apuntes se empleará el Tema Light+ (default light).

VSC. Tema Light+ predeterminado

Área de trabajo

Esta es el área de trabajo recomendada para seguir el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org.

  1. Cree la carpeta Documentos > LMSGI > HTML:

    VSC. Área de trabajo

  2. Cree las carpeta Documentos > LMSGI > HTML > ejercicios y Documentos > LMSGI > HTML > pruebas:

    VSC. Área de trabajo

  3. Elija la opción de menú Archivo > Abrir carpeta ...:

    VSC. Área de trabajo

  4. Elija la carpeta Documentos > LMSGI > HTML:

    VSC. Área de trabajo

  5. Haga clic en el icono Explorador en la barra de actividades para ver el contenido de la carpeta elegida:

    VSC. Área de trabajo

Preferencias de configuración recomendadas para el curso de HTML y CSS

Estas son las preferencias de configuración que se aconseja establecer para seguir el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org.

En primer lugar, se muestran todas las preferencias juntas, para que se puedan copiar fácilmente, y a continuación se comentan una a una cada preferencia.

Algunas preferencias son importantes porque corresponden a prácticas extendidas en el ámbito del desarrollo web y otras son preferencias personales que el alumno puede seguir o no.

La preferencia propuesta relacionada con el cierre automático de etiquetas requiere la instalación de una extensión.

Todas las preferencias

{
  // Configuraciones recomendadas para el curso Páginas web HTML y hojas de estilo CSS de www.mclibre.org
  //
  // Controla cómo debe representar el editor los espacios en blanco.
  "editor.renderWhitespace": "all",
  //
  // Controla cómo se deben ajustar las líneas.
  "editor.wordWrap": "on",
  //
  // Carácter predeterminado de final de línea.
  "files.eol": "\n",
  //
  // Si se habilita, se recortará el espacio final cuando se guarde un archivo.
  "files.trimTrailingWhitespace": true,
  //
  // Habilita o deshabilita el cierre automático de las etiquetas HTML.
  "html.autoClosingTags": false,
  //
  // Finalizar con una nueva línea.
  "html.format.endWithNewline": true,
  //
  // Lista de etiquetas, separadas por comas, que deben tener una nueva línea adicional delante.
  "html.format.extraLiners": "body",
  //
  // Lista de etiquetas, separadas por comas, a las que no se debe volver a aplicar formato.
  "html.format.unformatted": "a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, select, small, span, strong, sub, sup, textarea, tt, var, footer, pre, time",
  //
  // Cantidad máxima de caracteres por línea (0 = deshabilitar).
  "html.format.wrapLineLength": 0,
  //
  // Establecer los valores de configuración que se reemplazarán para el lenguaje [html].
  "[html]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2
  },
  //
  // Tema Light+ (default light)
  "workbench.colorTheme": "Default Light+"
}

Mostrar espacios en blanco

Esta preferencia hace que VSC muestre un punto en cada espacio en blanco. Es una ayuda visual para poder contar fácilmente el número de espacios en blanco.

{
  // Controla cómo debe representar el editor los espacios en blanco.
  "editor.renderWhitespace": "all",
}

Ajuste de línea

Esta preferencia hace que VSC aproveche todo el ancho de pantalla para mostrar los documentos y no añada saltos de línea al formatear el documento.

{
  // Controla cómo se deben ajustar las líneas.
  "editor.wordWrap": "on",
}

Salto de línea

Esta preferencia fuerza a VSC a utilizar el carácter LF para los saltos de líneas (habitual en GNU/Linux) y no los caracteres habituales en Windows (CR LF). Esta es la configuración más extendida en el ámbito del desarrollo web.

Si se abren los documentos que utilizan el carácter LF para los saltos de línea con un programa que no entienda correctamente ese carácter, el contenido se verá todo seguido, sin saltos de línea. El Bloc de notas de Windows es uno de estos programas, por lo que este programa no se recomienda para editar los documentos creados en este curso.

{
  // Carácter predeterminado de final de línea. Utilice \n para LF y \r\n para CRLF.
  "files.eol": "\n",
}

Espacios al final de las líneas

Esta preferencia hace que, al guardar un archivo, VSC borre los espacios en blanco situados al final de las líneas. Esos espacios son inecesarios y lo único que hacen es ocupar espacio.

{
  // Si se habilita, se recortará el espacio final cuando se guarde un archivo.
  "files.trimTrailingWhitespace": true,
}

Cierre automático de etiquetas

Cuando se crea una página web desde cero, resulta conveniente que el editor cierre automáticamente las etiquetas, para no olvidarse de hacerlo. Al escribir una etiqueta, Visual Studio Code añade automáticamente la etiqueta de cierre después del cursor, de manera que lo que se escribe a continuación queda encerrado en el interior de la etiqueta.

Pero para hacer los ejercicios propuestos en este curso, el cierre automático complica la realización de los ejercicios. En los ejericios se propiorciona siempre el texto de la página web, para ahorrar al alumno el trabajo de copiarlo. Hacer un ejercicio es añadir las etiquetas de apertura al principio de los fragmentos de texto y etiquetas de cierre al final. En esta situación, el cierre automático de las etiquetas es un inconveniente, ya que el cierre se crea al principio del fragmento de texto, no al final.

Por ello, para hacer los ejercicios de este curso, en vez del cierre automático se propone la siguiente configuración:

De esta manera podrá combinar el cierre automático, ya que al escribir una etiqueta de apertura Visual Studio Code le da la posibilidad de cerrar las etiquetas pulsando Intro, y el atajo de teclado Alt+. que habilita la extensión Close HTML/XML tag.

Añadir salto de línea en la línea final

Esta preferencia hace que, al formatear automáticamente un documento (mediante el atajo de teclado Alt+Shift+f), VSC compruebe que el último carácter de un documento sea un único salto de línea (LF). Si se trata de documentos independientes (como una página web) no es algo imprescindible, pero si se trata de documentos que se pueden cargar uno detrás de otro para crear un único documento (como un programa PHP), resulta conveniente para evitar que la última línea de un documento se una a la primera del documento siguiente.

Las normas POSIX especifican que en los ficheros de texto, todas las líneas deben terminar con el carácter salto de línea.

{
  // Finalizar con una nueva línea.
  "html.format.endWithNewline": true,
}

Etiquetas que no se formatean

Esta preferencia indica las etiquetas cuyo contenido no se formatea cuando Visual Studio Code formatea automáticamente un documento (mediante el atajo de teclado Alt+Shift+f).

En la configuración recomendada, se ha añadido la etiqueta pre a la lista de etiquetas predeterminadas.

{
  // Lista de etiquetas, separadas por comas, a las que no se debe volver a aplicar formato.
  "html.format.unformatted": "a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, select, small, span, strong, sub, sup, textarea, tt, var, footer, pre",
}

Etiquetas con línea en blanco delante

Esta preferencia hace que, al formatear automáticamente un documento (mediante el atajo de teclado Alt+Shift+f), VSC compruebe que delante de determinadas etiquetas haya al menos una línea en blanco. Yo tengo las costumbre de dejar siempre una línea en blanco delante de <body>, pero no delante de <head> ni de </html>.

{
  // Lista de etiquetas, separadas por comas, que deben tener una nueva línea adicional delante. "null" tiene como valores predeterminados "head, body, /html".
  "html.format.extraLiners": "body",
}

Longitud de línea

Esta preferencia hace que, al formatear automáticamente un documento (mediante el atajo de teclado Alt+Shift+f), VSC compruebe que ninguna línea exceda el número de caracteres indicado y añada saltos de línea cuando sea necesario. Yo tengo la costumbre de mantener los párrafos de texto en una sola línea, aunque sea muy larga, para que al modificar el texto no se queden unas líneas más largas que otras. Para ello, esta preferencia tiene que tener el valor 0.

{
  // Cantidad máxima de caracteres por línea (0 = deshabilitar).
  "html.format.wrapLineLength": 0,
}

Referencia: Novedades VSC 1.0: Formateador HTML

Sangrado: Tabuladores y tamaño del sangrado

Es conveniente sangrar adecuadamente los documentos para facilitar su lectura. Para sangrar un documento, se han utilizado siempre los tabuladores. Pero en los editores modernos no es necesario utilizar tabuladores porque los editores saben gestionar los espacios, de manera que cuando se pulsa la tecla tabulador el editor añade los espacios necesarios.

Por otro lado, los tabuladores equivalían en principio a 8 espacios en blanco. Si sólo se necesita un nivel de sangrado, 8 espacios no es demasiado, pero si el documento necesita varios niveles de sangrado, ese valor es demasiado grande. Lo habitual es utilizar un sangrado de 4 espacios si se trata de código fuente de programas y de 2 si se trata de páginas web u hojas de estilo.

Esta configuración tiene una sintaxis distinta al resto porque es específica para html (páginas web y hojas de estilo). Es necesario reiniciar Visual Studio Code tras modificar esta configuración para que se aplique el tamaño del sangrado deseado en los nuevos ficheros.

{
  // Establecer los valores de configuración que se reemplazarán para el lenguaje [html].
  "[html]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
  },
},

Extensiones recomendadas para el curso de HTML y CSS

Estas son las extensiones que se aconseja instalar para seguir el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org.

Image preview: Información de imágenes

Logotipo de Image preview

Autor: Kiss Tamás

Marketplace: Image preview

Repositorio GitHub: Image preview


En la lección Uso de Visual Studio Code se comenta con más detalle y capturas de pantalla el uso de esta extensión

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.

Path Intellisense: Rutas de archivos

Logotipo de Path Intellisense

Autor: Christian Kohler

Marketplace: Path Intellisense

Repositorio GitHub: Path Intellisense


En la lección Uso de Visual Studio Code se comenta con más detalle y capturas de pantalla el uso de esta extensión

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:

Close HTML/XML tag: Cierre de etiquetas

Logotipo de Close HTML/XML tag

Autor: Compulim

Marketplace: Close HTML/XML tag

Repositorio GitHub: Close HTML/XML tag


Al pulsar el atajo de teclado Alt+., se añade automáticamente la etiqueta de cierre de la etiqueta abierta anterior.

Problemas detectados:

HTMLHint: Validación de HTML

Logotipo de HTMLHint

Autor: Mike Kaufman

Marketplace: HTMLHint

Repositorio GitHub: HTMLHint


La extensión HTMLHint permite que Visual Studio Code utilice el analizador de código estático HTMLHint.

El uso de esta extensión se comenta en la lección Validación de HTML y CSS en Visual Studio Code.

CSScomb: Formateador de CSS

Logotipo de CSScomb

Autor: Denis Malinochkin

Marketplace: CSScomb

Repositorio GitHub: CSScomb


La extensión CSScomb permite que Visual Studio Code utilice el formateador de código CSS CSScomb.

Para que CSScomb formatee el código de la hoja de estilo, hay que pulsar la tecla F1 y escribir el comando csscomb.


El estilo de formato concreto que aplica CSScomb se configura en el archivo de configuración de usuario o en el del espacio de trabajo mediante la configuración csscomb.preset.

El ejemplo siguiente muestra la configuración seguida en las hojas de estilo del curso Páginas web HTML y hojas de estilo CSS de mclibre.org.

{
  // Configuración de CSScomb
  "csscomb.preset": {
    "always-semicolon": true,               // Añade punto y coma (;) tras las propiedades
    "color-case": "lower",                  // Escribe los códigos de color en minúsculas
    "block-indent": "  ",                   // Sangrado de dos espacios
    "element-case": "lower",                // Escribe los selectores en minúsculas
    "eof-newline": true,                    // Añade un espacio al final del archivo
    "leading-zero": true,                   // Añade un cero antes de un punto decimal
    "quotes": "double",                     // Añade comillas dobles
    "space-before-colon": "",               // Elimina los espacios en blanco antes de los dos puntos (:)
    "space-after-colon": " ",               // Añade un espacio en blanco después de los dos puntos (:)
    "space-before-combinator": " ",         // Añade un espacio en blanco antes de un combinador de selectores
    "space-after-combinator": " ",          // Añade un espacio en blanco después de un combinador de selectores
    "space-between-declarations": "\n",     // Cada propiedad ocupa un línea
    "space-before-opening-brace": " ",      // El selector y la llave de apertura ({) están separados por un espacio
    "space-after-opening-brace": "\n",      // Tras la llave de apertura ({) hay un salto de línea
    "space-after-selector-delimiter": " ",  // Las comas (,) en los selectores están seguidas por un espacio en blanco
    "space-before-selector-delimiter": "",  // Las comas (,) en los selectores no están precedidas de un espacio en blanco
    "space-before-closing-brace": "\n",     // Antes de la llave de cierr (}) hay un salto de línea
    "strip-spaces": true,                   // Se eliminan los espacios en blanco situados al final de las líneas
    "tab-size": true,                       // El tabulador se convierte a espacios en blanco (el número de espacios definido para el sangrado)
    "unitless-zero": true,                  // Elimina las unidades de los valores nulos (0)
    "vendor-prefix-align": true             // Alinea las propiedades específicas de cada navegador para facilitar la lectura
  }
}

Tareas recomendadas para el curso de HTML y CSS

Estas son las tareas que se aconseja crear para seguir el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org.

Una vez definidas las tareas, se recomienda definir los atajos de teclado que ejecuten estas tareas, tal y como se comenta en el apartado sobre Atajos de teclado recomendados.

Abrir páginas en el navegador

Las siguientes tareas permiten abrir en los navegadores Firefox y Chrome las páginas que se están editando en Visual Studio Code. Compruebe que la ruta de los ejecutables de los navegadores que aparecen en las tareas coinciden con las rutas de los ejecutables en su ordenador:

{
    // Tareas recomendadas para el curso Páginas web HTML y hojas de estilo CSS de www.mclibre.org

    "version": "2.0.0",
    "tasks": [
    {
        "taskName": "Abrir en Firefox",
        "command": "explorer",
        "windows": {
            "command": "C:\\Program Files\\Mozilla Firefox\\firefox.exe"
        },
        "args": [
            "${file}"
        ],
        "presentation": {
            "reveal": "never"
        }
    },
    {
        "taskName": "Abrir en Chrome",
        "command": "explorer",
        "windows": {
            "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
        },
        "args": [
            "${file}"
        ],
        "presentation": {
            "reveal": "never"
        }
        }
    ]
}

Atajos de teclado recomendados para el curso de HTML y CSS

Estos son los atajos de teclado que se aconseja definir para seguir el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org.

Estos dos atajos permiten abrir en los navegadores Firefox o Google Chrome las páginas web que se están editando en Visual Studio Code.

Antes de definir estos atajos de teclado es necesario crear las tareas correspondientes. Las tareas recomendadas para el curso de HTML y CSS se comentan en el apartado Tareas recomendadas.

Este es el contenido del archivo keybindings.json:

// Atajos de teclado recomendados para el curso Páginas web HTML y hojas de estilo CSS de www.mclibre.org
[
    {
        "key": "ctrl+alt+f",
        "command": "workbench.action.tasks.runTask",
        "args": "Abrir en Firefox"
    },
    {
        "key": "ctrl+alt+c",
        "command": "workbench.action.tasks.runTask",
        "args": "Abrir en Chrome"
    }
]

Utilizar atajos de teclado

Estos son los pasos a realizar para utilizar alguno de los atajos de teclado personalizados:

  1. Abra en una pestaña la página web que quiera abrir en un navegador:

    VSC. Utilizar tarea

  2. Pulse el atajo de teclado. Por ejemplo, Ctrl+Alt+f, uno de los atajos de teclado recomendados para el curso de HTML y CSS.
  3. En el ejemplo de las capturas, la página abierta en Visual Studio Code se abriría en el navegador:

    VSC. Utilizar tarea

Otros (en elaboración)