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 este curso.

Esta lección no detalla los pasos para configurar Visual Studio Code. En caso necesario, puede consultar la lección Personalización de VSC de los apuntes de Informática general, en la que se explica detalladamente cómo se personaliza Visual Studio Code. En dichos apuntes también puede consultar lecciones dedicadas a Visual Studio Code, como Presentación general, Instalación, Uso y otras, que le pueden ser de ayuda si no conoce 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 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.

Las preferencias propuestas relacionadas con extensiones requieren la instalación de las extensiones correspondientes.

Preferencias globales (Usuario)

{
  // Configuraciones recomendadas para el curso Páginas web HTML y hojas de estilo CSS de www.mclibre.org
  //
  // CSS Lint: idSelector
  // Los selectores no deben contener identificadores porque estas reglas están estrechamente ligadas a HTML.
  "css.lint.idSelector": "warning",
  //
  // Editor: Insert Spaces
  // Insertar espacios al presionar "TAB"
  "editor.insertSpaces": true,
  //
  // Editor: Minimap enabled
  // Controla si se muestra el minimapa.
  "editor.minimap.enabled": false,
  //
  // Editor: Render Whitespace
  // Controla la forma en que el editor debe representar los caracteres de espacio en blanco.
  "editor.renderWhitespace": "all",
  //
  // Editor: Word Wrap
  // Controla cómo deben ajustarse las líneas.
  "editor.wordWrap": "on",
  //
  // Files: eol
  // Carácter predeterminado de final de línea.
  "files.eol": "\n",
  //
  // Files: Trim Trailing Whitespace
  // Si se habilita, se recortará el espacio final cuando se guarde un archivo.
  "files.trimTrailingWhitespace": true,
  //
  // Git: Autofetch
  // Si se habilita, se comprobarán automáticamente los commits del repositorio remoto.
  "git.autofetch": true,
  //
  // HTML: Auto Closing Tags
  // Habilita o deshabilita el cierre automático de las etiquetas HTML.
  "html.autoClosingTags": false,
  //
  // HTML: Format: End With Newline
  // Finalizar con una nueva línea.
  "html.format.endWithNewline": true,
  //
  // HTML: Format Extra Liners
  // Lista de etiquetas, separadas por comas, que deben tener una nueva línea adicional delante. null equivale a "head, body, /html".
  "html.format.extraLiners": "body",
  //
  // HTML: Format Wrap Line Length
  // Cantidad máxima de caracteres por línea (0 = deshabilitar).
  "html.format.wrapLineLength": 0,
  //
  // HTML
  // Establece los valores de configuración específicos para el lenguaje HTML
  "[html]": {
    "editor.tabSize": 2,
  },
  //
  // CSS
  // Establece los valores de configuración específicos para el lenguaje CSS
  "[css]": {
    "editor.tabSize": 4,
  },
  //
  //
  // Configuraciones de extensiones recomendadas para el curso Páginas web HTML y hojas de estilo CSS de www.mclibre.org
  //
  // Extension Close HTML/XML Tag
  //
  // CloseTag : IgnoreTags
  // Específica las etiquetas que serán ignoradas y no serán cerradas.
  "closeTag.ignoreTags": "html",
  //
  //
  // Extensión HTMLHint
  //
  // HTMLHint: Options
  // Opciones de configuración de HTMLHint
  "htmlhint.options": {
    // Opciones predeterminadas
    "attr-lowercase": ["allowReorder", "attributeName", "attributeType", "autoReverse", "baseFrequency", "baseProfile", "calcMode", "clipPathUnits", "contentScriptType", "contentStyleType", "diffuseConstant", "edgeMode", "externalResourcesRequired", "filterRes", "filterUnits", "glyphRef", "gradientTransform", "gradientUnits", "kernelMatrix", "kernelUnitLength", "keyPoints", "keySplines", "keyTimes", "lengthAdjust", "limitingConeAngle", "markerHeight", "markerUnits", "markerWidth", "maskContentUnits", "maskUnits", "numOctaves", "pathLength", "patternContentUnits", "patternTransform", "patternUnits", "pointsAtX", "pointsAtY", "pointsAtZ", "preserveAlpha", "preserveAspectRatio", "primitiveUnits", "refX", "refY", "repeatCount", "repeatDur", "requiredExtensions", "requiredFeatures", "specularConstant", "specularExponent", "spreadMethod", "startOffset", "stdDeviation", "stitchTiles", "surfaceScale", "systemLanguage", "tableValues", "targetX", "targetY", "textLength", "viewBox", "viewTarget", "xChannelSelector", "yChannelSelector", "zoomAndPan"],
    "attr-no-duplication": true,
    "attr-value-double-quotes": true,
    "doctype-first": true,
    "id-unique": true,
    "spec-char-escape": true,
    "src-not-empty": true,
    "tag-pair": true,
    "tagname-lowercase": true,
    "title-require": true,

    // Opciones adicionales
    "alt-require": true,
    "doctype-html5": true,
    "id-class-ad-disabled": true,
  },
  //
  //
  // Extensión CSScomb
  //
  // CSScomb : Preset
  // Opciones de configuración de CSScomb
  "csscomb.preset": {
    "always-semicolon": true,               // Escribe punto y coma (;) tras las propiedades
    "block-indent": "    ",                 // Utiliza sangrado de cuatro espacios
    "color-case": "lower",                  // Escribe los códigos de color en minúsculas
    "color-shorthand": false,               // Escribe los códigos de color hexadecimales con seis caracteres
    "element-case": "lower",                // Escribe los selectores en minúsculas
    "eof-newline": true,                    // Escribe una línea en blanco  al final del archivo
    "leading-zero": true,                   // Escribe un cero antes de un punto decimal
    "lines-between-rulesets": 1,            // Escribe una línea entre sentencias consecutivas
    "quotes": "double",                     // Escribe comillas dobles
    "remove-empty-rulesets": false,         // No elimina las sentencias sin propiedades
    "space-after-colon": 1,                 // Escribe un espacio en blanco después de los dos puntos (:)
    "space-after-combinator": " ",          // Escribe un espacio en blanco después de un combinador de selectores
    "space-after-opening-brace": "\n",      // Escribe un salto de línea después de la llave de apertura ({)
    "space-after-selector-delimiter": " ",  // Escribe un espacio en blanco después de las comas (,) en los selectores
    "space-before-closing-brace": "\n",     // Escribe un salto de línea antes de la llave de cierre (})
    "space-before-colon": 0,                // No escribe espacios en blanco antes de una coma (,)
    "space-before-combinator": " ",         // Escribe un espacio en blanco antes de un combinador de selectores
    "space-before-opening-brace": " ",      // Escribe un espacio en blanco entre el selector y la llave de apertura ({)
    "space-before-selector-delimiter": "",  // No escribe espacios en blanco antes de las comas (,) en los selectores
    "space-between-declarations": "\n",     // Escribe un salto de línea entre propiedades
    "strip-spaces": true,                   // No escribe espacios en blanco al final de las líneas
    "tab-size": 4,                          // Escribe cuatro espacios en blanco en vez de un tabulador
    "unitless-zero": true,                  // No escribe unidades en los valores nulos (0)
    "vendor-prefix-align": true,            // Alinea las propiedades específicas de cada navegador para facilitar la lectura
    "sort-order-fallback": "abc",           // Las propiedades no mencionadas en sort-order se ordenan alfabéticamente
    "sort-order": [                         // Orden de las propiedades
      [
        // Posicionamiento clásico
        "position", "z-index", "top", "right", "bottom", "left",
        // Visibilidad y flexbox
        "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "clip", "zoom", "align-content", "align-items", "align-self", "flex", "flex-flow", "flex-basis", "flex-direction", "flex-grow", "flex-shrink", "flex-wrap", "justify-content", "order",
        // Modelo de caja: tamaño
         "box-sizing", "width", "min-width", "max-width", "height", "min-height", "max-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left",
        // Modelo de caja: borde, outline, fondos
        "opacity", "color", "border", "border-width", "border-style", "border-color", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius", "border-image", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat", "outline", "outline-width", "outline-style", "outline-color", "outline-offset", "background", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "background-position-x", "background-position-y", "background-clip", "background-origin", "background-size", "box-decoration-break", "box-shadow", "text-shadow",
        // Tablas y listas
        "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image", "content", "counter-increment", "counter-reset",
        // Texto
        "cursor", "font", "font-family", "src", "font-size", "font-style", "font-variant", "font-weight", "letter-spacing", "line-height", "quotes", "resize", "text-align", "text-align-last", "text-decoration", "text-indent", "text-justify", "text-outline", "text-transform", "vertical-align", "white-space", "word-spacing",
        // Animaciones y transformaciones
        "animation", "animation-delay", "animation-direction", "animation-duration", "animation-iteration-count", "animation-name", "animation-play-state", "animation-timing-function", "transform", "transform-origin", "transition", "transition-delay", "transition-duration", "transition-property", "transition-timing-function",
      ],
    ],
  },
  //
  //
}

Preferencias de área de trabajo o carpeta (Área de trabajo)

{
  // Configuraciones recomendadas para el curso Páginas web HTML y hojas de estilo CSS de www.mclibre.org
  //
  // Workbench: Color Theme
  // Tema de color
  "workbench.colorTheme": "Default Light+",
  //
  //
}

Esta es la justificación de la elección de estas preferencias de configuración:

Extensiones recomendadas para el curso de HTML y CSS

Para seguir el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org se aconseja instalar las extensiones Image Preview, Close HTML/XML tag, HTMLHint y CSScomb.

Estas extensiones, que se comentan a continuación, se pueden instalar una a una, pero también se pueden instalar de forma conjunta mediante el mclibre.org HTML+CSS Extension Pack. Aunque instale el Extension Pack, lea los apartados correspondientes a cada extensión y la lección Uso de extensiones.

mclibre.org HTML+CSS Extension Pack: paquete de extensiones

Logotipo de mclibre.org HTML+CSS Extension Pack

Autor: Bartolomé Sintes

Marketplace: mclibre.org HTML+CSS Extension Pack

Repositorio GitHub: mclibre.org HTML+CSS Extension Pack


Esta extensión instala de forma conjunta las seis extensiones que se comentan a continuación, pero no las configura. La configuración de las extensiones que necesitan ser configuradas se debe realizar manualmente.

Auto Rename Tag: Renombra las etiquetas de apertura y cierre

Logotipo Auto Rename Tag

Autor: Jun Han

Marketplace: Auto Rename Tag

Repositorio GitHub: Auto Rename Tag


Esta extensión facilita la edición de una página web. Cuando se modifica una etiqueta de apertura, modifica automáticamente la etiqueta de cierre correspondiente (y viceversa).

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.

La configuración recomendada para seguir el curso Páginas web HTML y hojas de estilo CSS de mclibre.org es la siguiente:

Nota: Estas preferencias están incluidas en el apartado anterior de preferencias de configuración. No es necesario añadirlas si ya se han añadido anteriormente.

  // Extensión Close HTML/XML tag
  //
  // Close Tag: Ignore Tags
  // Específica las etiquetas que serán ignoradas y no serán cerradas.
  "closeTag.ignoreTags": "html",
  //
  //

Problemas detectados:

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 Extensiones de Visual Studio Code para HTML/CSS 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.

Nota: En cursos anteriores recomendaba este extensión para ver el tamaño de las imágenes insertadas y poder rellenar los atributos width y height fácilmente. Pero en septiembre de 2019 añadí a la lista de atajos recomendados un atajo de teclado que permite crear de forma inmediata los atributos width y height. Sitúe el cursor en el interior de la etiqueta img y escriba el atajo ctrl+alt+e ctrl+alt+t y automáticamente se añadirán los atributos width y height con los valores de la imagen. La extensión Image Preview sigue siendo útil para ver una miniatura de la imagen, pero ya no es necesaria para indicar los tamaños.

Tag Inserter: Añade etiquetas alrededor del texto seleccionado

Logotipo genérico

Autor: l7ssha

Marketplace: Tag Inserter

Repositorio GitHub: Tag Inserter


En la lección Extensiones de Visual Studio Code para HTML/CSS se comenta con más detalle y capturas de pantalla el uso de esta extensión

Para añadir una etiqueta alrededor de un texto:

En este curso utilizaremos esta extensión para realizar los ejercicios, en los que se proporciona el texto de la página web sin etiquetas.

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 y el signicado de sus opciones de configuración se comentan en la lección Validación de HTML y CSS en Visual Studio Code.

La configuración recomendada para seguir el curso Páginas web HTML y hojas de estilo CSS de mclibre.org es la siguiente:

Nota: Estas preferencias están incluidas en el apartado anterior de preferencias de configuración. No es necesario añadirlas si ya se han añadido anteriormente.

  // Extensión HTMLHint
  //
  // HTMLHint: Options
  // Opciones de configuración de HTMLHint
  "htmlhint.options": {
    // Opciones predeterminadas
    "attr-lowercase": ["allowReorder", "attributeName", "attributeType", "autoReverse", "baseFrequency", "baseProfile", "calcMode", "clipPathUnits", "contentScriptType", "contentStyleType", "diffuseConstant", "edgeMode", "externalResourcesRequired", "filterRes", "filterUnits", "glyphRef", "gradientTransform", "gradientUnits", "kernelMatrix", "kernelUnitLength", "keyPoints", "keySplines", "keyTimes", "lengthAdjust", "limitingConeAngle", "markerHeight", "markerUnits", "markerWidth", "maskContentUnits", "maskUnits", "numOctaves", "pathLength", "patternContentUnits", "patternTransform", "patternUnits", "pointsAtX", "pointsAtY", "pointsAtZ", "preserveAlpha", "preserveAspectRatio", "primitiveUnits", "refX", "refY", "repeatCount", "repeatDur", "requiredExtensions", "requiredFeatures", "specularConstant", "specularExponent", "spreadMethod", "startOffset", "stdDeviation", "stitchTiles", "surfaceScale", "systemLanguage", "tableValues", "targetX", "targetY", "textLength", "viewBox", "viewTarget", "xChannelSelector", "yChannelSelector", "zoomAndPan"],
    "attr-no-duplication": true,
    "attr-value-double-quotes": true,
    "doctype-first": true,
    "id-unique": true,
    "spec-char-escape": true,
    "src-not-empty": true,
    "tag-pair": true,
    "tagname-lowercase": true,
    "title-require": true,

    // Opciones adicionales
    "alt-require": true,
    "doctype-html5": true,
    "id-class-ad-disabled": true,
  },
  //
  //

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 [Repositorio GitHub.

Para que CSScomb formatee el código de la hoja de estilo, hay que pulsar la tecla F1 y escribir el comando csscomb. Se puede también crear un atajo de teclado para ejecutar la orden (en los atajos de teclado recomendados se define el atajo Alt+Máy+c Alt+Máy+f).


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.

Nota: Estas preferencias están incluidas en el apartado anterior de preferencias de configuración. No es necesario añadirlas si ya se han añadido anteriormente.

  // Extensión CSScomb
  //
  // CSScomb : Preset
  // Opciones de configuración de CSScomb
  "csscomb.preset": {
    "always-semicolon": true,               // Escribe punto y coma (;) tras las propiedades
    "block-indent": "    ",                 // Utiliza sangrado de cuatro espacios
    "color-case": "lower",                  // Escribe los códigos de color en minúsculas
    "color-shorthand": false,               // Escribe los códigos de color hexadecimales con seis caracteres
    "element-case": "lower",                // Escribe los selectores en minúsculas
    "eof-newline": true,                    // Escribe una línea en blanco  al final del archivo
    "leading-zero": true,                   // Escribe un cero antes de un punto decimal
    "lines-between-rulesets": 1,            // Escribe una línea entre sentencias consecutivas
    "quotes": "double",                     // Escribe comillas dobles
    "remove-empty-rulesets": false,         // No elimina las sentencias sin propiedades
    "space-after-colon": 1,                 // Escribe un espacio en blanco después de los dos puntos (:)
    "space-after-combinator": " ",          // Escribe un espacio en blanco después de un combinador de selectores
    "space-after-opening-brace": "\n",      // Escribe un salto de línea después de la llave de apertura ({)
    "space-after-selector-delimiter": " ",  // Escribe un espacio en blanco después de las comas (,) en los selectores
    "space-before-closing-brace": "\n",     // Escribe un salto de línea después de la llave de cierre (})
    "space-before-colon": 0,                // No escribe espacios en blanco antes de una coma (,)
    "space-before-combinator": " ",         // Escribe un espacio en blanco antes de un combinador de selectores
    "space-before-opening-brace": " ",      // Escribe un espacio en blanco entre el selector y la llave de apertura ({)
    "space-before-selector-delimiter": "",  // No escribe espacios en blanco después de las comas (,) en los selectores
    "space-between-declarations": "\n",     // Escribe un salto de línea entre propiedades
    "strip-spaces": true,                   // No escribe espacios en blanco al final de las líneas
    "tab-size": 4,                          // Escribe cuatro espacios en blanco en vez de un tabulador
    "unitless-zero": true,                  // No escribe unidades en los valores nulos (0)
    "vendor-prefix-align": true,            // Alinea las propiedades específicas de cada navegador para facilitar la lectura
    "sort-order-fallback": "abc",           // Las propiedades no mencionadas en sort-order se ordenan alfabéticamente
    "sort-order": [                         // Orden de las propiedades
      [
        // Posicionamiento clásico
        "position", "z-index", "top", "right", "bottom", "left",
        // Visibilidad y flexbox
        "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "clip", "zoom", "align-content", "align-items", "align-self", "flex", "flex-flow", "flex-basis", "flex-direction", "flex-grow", "flex-shrink", "flex-wrap", "justify-content", "order",
        // Modelo de caja: tamaño
         "box-sizing", "width", "min-width", "max-width", "height", "min-height", "max-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left",
        // Modelo de caja: borde, outline, fondos
        "opacity", "border", "border-width", "border-style", "border-color", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius", "border-image", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat", "outline", "outline-width", "outline-style", "outline-color", "outline-offset", "background", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "background-position-x", "background-position-y", "background-clip", "background-origin", "background-size", "box-decoration-break", "box-shadow", "text-shadow",
        // Texto
        "color", "cursor", "font", "font-family", "src", "font-size", "font-style", "font-variant", "font-weight", "letter-spacing", "line-height", "quotes", "resize", "text-align", "text-align-last", "text-decoration", "text-indent", "text-justify", "text-outline", "text-transform", "vertical-align", "white-space", "word-spacing",
        // Tablas y listas
        "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image", "content", "counter-increment", "counter-reset",
        // Animaciones y transformaciones
        "animation", "animation-delay", "animation-direction", "animation-duration", "animation-iteration-count", "animation-name", "animation-play-state", "animation-timing-function", "transform", "transform-origin", "transition", "transition-delay", "transition-duration", "transition-property", "transition-timing-function",
      ],
    ],
  },
  //
  //

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 (como ficheros)

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. Si en su ordenador los programas se encuentran en otra ubicación, escriba la ubicación separando los directorios con barras (/) o con contrabarras dobles (\\), pero no con contrabarras simples (\).

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

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

En las tareas, en los valores de "args" pueden utilizarse las variables que se comentan en la página Listado de variables de la documentación oficial de Visual Studio Code.

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.

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
    {
        // Tarea: Abrir en Firefox
        "key": "ctrl+alt+f",
        "command": "workbench.action.tasks.runTask",
        "args": "Abrir en Firefox"
    },
    {
        // Tarea: Abrir en Chrome
        "key": "ctrl+alt+c",
        "command": "workbench.action.tasks.runTask",
        "args": "Abrir en Chrome"
    },
    {
        // Extensión CSScomb: Ejecutar
        "key": "alt+shift+c alt+shift+f",
        "command": "csscomb.execute"
    },
    {
        // Emmet: Borrar etiqueta
        "key": "ctrl+alt+e ctrl+alt+b",
        "command": "editor.emmet.action.removeTag"
    },
    {
        // Emmet: Insertar tamaño imagen
        "key": "ctrl+alt+e ctrl+alt+t",
        "command": "editor.emmet.action.updateImageSize"
    },
    {
        // Emmet: Seleccionar elemento superior
        "key": "ctrl+alt+e ctrl+alt+s",
        "command": "editor.emmet.action.balanceOut"
    },
    {
        // Emmet: Seleccionar elemento inferior
        "key": "ctrl+alt+e ctrl+alt+i",
        "command": "editor.emmet.action.balanceIn"
    },
]

Otros (en elaboración)