Visual Studio Code.

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

 
VSC: Configuración
 Temas de color
 Área de trabajo
 Preferencias
 Extensiones
 Tareas
 Atajos de teclado
 Otros
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).
Á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:
2. Cree las carpeta Documentos > LMSGI > HTML > ejercicios y Documentos >
LMSGI > HTML > pruebas:

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

4. Elija la carpeta Documentos > LMSGI > HTML:

5. Haga clic en el icono Explorador en la barra de actividades para ver el contenido de
la carpeta elegida:
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-color", "border-width",
"border-style", "border-top", "border-top-color", "border-top-width",
"border-top-style", "border-right", "border-right-color", "border-right-
width", "border-right-style", "border-bottom", "border-bottom-color",
"border-bottom-width", "border-bottom-style", "border-left", "border-
left-color", "border-left-width", "border-left-style", "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-color", "outline-
width", "outline-style", "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",
],
],
},
//
//
}
Copiar

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+",
//
//
}
Copiar

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

 "css.lint.idSelector": "warning",

CSS Lint recomienda que los selectores no contengan identificadores (id) porque
estas reglas están estrechamente ligadas a HTML.
 "editor.insertSpaces": true,

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.
 "editor.minimap.enabled": false

Esta preferencia hace que VSC oculte el minimapa.

 "editor.renderWhitespace": "all"

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.
 "editor.wordWrap": "on"

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.
 "files.eol": "\n"

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 7 es uno de estos
programas, por lo que no se recomienda editar los documentos creados en este curso
con el Bloc de notas de Windows 7.
 "files.trimTrailingWhitespace": true

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

A veces, parece que Visual Studio Code ha bloqueado los archivos (por ejemplo, si
se intenta sustituir una imagen por otra). No pasa siempre, pero parece que está
relacionado con una preferencia de git, que está comprobando si hay cambios y
bloquea temporalmente los archivos.
 "html.autoClosingTags": false
 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 ejercicios se proporciona 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 extensión Close HTML/XML tag que, mediante el atajo de
teclado Alt+., cierra la última etiqueta abierta.
 "html.format.endWithNewline": true

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.
 "html.format.extraLiners": "body"

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>.
 "html.format.wrapLineLength": 0

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.
Referencia: Novedades VSC 1.0: Formateador HTML
  "editor.tabSize": 2 / 4

Como en una página web suele haber bastante anidamiento, en los ficheros .html se
recomienda un sangrado de sólo 2 espacios. Pero una hoja de estilo no suele haber
más que uno o dos niveles de anidamiento, por lo que el sangrado puede ser de 4
espacios.
 "workbench.colorTheme": "Default Light+"

Esta preferencia selecciona el tema de color. En estos apuntes del curso de HTML y
CSS se recomienda guardarla en las preferencias del área de trabajo porque los
apuntes de los cursos de Python y PHP se recomienda otro tema de color.

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

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.

Close HTML/XML tag: Cierre de etiquetas

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:
 La etiqueta de cierre se añade aunque la etiqueta de cierre ya esté escrita en el
documento. La extensión sólo se fija en lo que hay antes de la posición del cursor,
no en lo que hay después.

Image preview: Información de imágenes

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

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:
 seleccione con el ratón el texto alrededor del cual se quiere añadir una etiqueta
 pulse el atajo de teclado Alt+Shift+i
 se abrirá en la parte superior la paleta de comandos
 escriba en ella la etiqueta deseada (puede incluir atributos) y pulse Intro
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

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 significado 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

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": []
},
]
}
Copiar
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.
 Los dos primeros atajos permiten abrir en los navegadores Firefox o Google
Chrome las páginas web que se están editando en Visual Studio Code. para que
estos atajos funcionen es necesario crear las tareas correspondientes, que se
comentan en el apartado Tareas recomendadas.
 El tercer atajo ejecuta CSScomb, extensión que formatea hojas de estilo CSS. este
atajo sólo funciona cuando se está editando un archivo .css.
 Los siguientes atajos permiten aplicar comandos de Emmet. Estos comandos ya
están incluidos en Visual Studio Code, por lo que los atajos funcionan
inmediatamente. Para que sea más fácil recordar los atajos, todos empiezan por la
letra "e" (de Emmet).

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"
},
]
Copiar

Otros (en elaboración)

 Extensiones
o Ordenar atributos: Sorting HTML and Jade attributes en Marketplace
o Project Manager
o Brackets Surround para VSC: VSC issue 1307
o Validador CSS: CSSTree validator
o Formatear CSS: CSS Formatter
o Ordenar propiedades en CSS: PostCSS sorting
 Remove telemetry
 UTF-8 con o sin BOM
 EditorConfig
 No formatear algunas etiquetas

Última modificación de esta página: 7 de enero de 2020

Esta página forma parte del curso Páginas web HTML y hojas de estilo
CSS por Bartolomé Sintes Marco
que se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual
4.0 Internacional (CC BY-SA 4.0).