Visual Studio Code no realiza validaciones completas de las páginas web ni de las hojas de estilo, pero puede ayudar a corregir algunos errores en estos archivos.
En la barra lateral se muestran dos iconos y acompañados de dos números que corresponden al número de problemas detectados por Visual Studio Code en los archivos abiertos. Visual Studio Code distingue entre errores y advertencias (en inglés, warnings), según la gravedad del problema detectado. El número de errores se muestra junto al icono . El número de advertencias se muestra junto al icono . También se pueden instalar extensiones que detectan más tipos de problemas, como se explica más adelante en esta lección.
Si Visual Studio Code detecta un problema (errores o advertencias), se muestra un valor distinto de cero.
Haga clic en los iconos para abrir el panel, que mostrará los errores detectados, ordenados por ficheros.
Haga clic en el error para mostrar en el editor el documento correspondiente y la línea en la que se ha identificado el problema. Tenga en cuenta que Visual Studio Code muestra la línea en la que ha identificado el problema, pero el origen del problema puede estar en esa línea o en una línea anterior.
Las advertencias corresponden a avisos de todo tipo, que en general se aconseja corregir, pero que a menudo no impiden que el documento se muestre correctamente. Por ejemplo, la captura siguiente muestra un aviso que corresponde a una mala práctica (en este caso, el dejar reglas vacías en la hoja de estilo), pero que no provoca ningún problema real.
Los errores corresponden generalmente a errores de sintaxis que deben corregirse para que el documento sea válido y se pueda mostrar correctamente. A veces un error provoca que Visual Studio Code detecte más errores de los que realmente existen, por eso se aconseja resolver los problemas en orden, para que al corregir uno, desaparezcan los siguientes errores provocados por el anterior.
Cuando se corrigen los errores y avisos, la pestaña Problemas del panel indica que no hay problemas en los archivos abiertos. Puede cerrar el panel haciendo clic en los iconos de la barra lateral o en el icono en forma de cruz situado en la parte superior derecha del panel.
Las páginas web se pueden validar en Visual Studio Code mediante la extensión HTMLHint. Esta extensión instala y utiliza el analizador de código estático HTMLHint. Este validador no detecta todos los posibles errores, pero sí los más importantes.
La configuración recomendada para seguir el curso Páginas web HTML y hojas de estilo CSS de mclibre.org se encuentra en la lección Configuración recomendada para HTML y CSS.
Los tipos de errores detectados de forma predeterminada por la extensión HTMLHint son los siguientes:
Además, HTMLHint permite detectar otro tipos de errores (que están desactivados de forma predeterminada):
El valor de cada propiedad suele true (activada) o false (desactivada), salvo en los casos en que ofrece más posibilidades (en la explicación anterior los valores se han indicado entre paréntesis).
Notas:
Se puede modificar la configuración predeterminada de la extensión HTMLHint de dos maneras, detallando las opciones deseadas:
// Extensión HTMLHint
//
// HTMLHint: Options
// Opciones de configuración de HTMLHint
"htmlhint.options": {
// Aquí se escribirían las propiedades ...
},
//
//
{
// Aquí se escribirían las propiedades ...
}
En ambos casos, sería necesario incluir las diez propiedades predeterminadas ya que dejan de aplicarse de manera predeterminada.
Visual Studio Code detecta los errores de sintaxis en las hojas de estilo. Estos errores deben corregirse puesto que impiden que la hoja de estilo se interprete correctamente.
Además, Visual Studio Code también incluye un validador de hojas de estilo basado parcialmente en CSS Lint que proporciona consejos que ayudan a mejorar las hojas de estilo.
En el archivo de Preferencias de configuración, Visual Studio Code permite especificar el tipo de mensaje mostrado al usuario para cada una de las reglas de validación disponibles:
La configuración predeterminada de Visual Studio Code es la siguiente:
Actualmente (octubre de 2021), los dos consejos que están configurados como errores no parecen funcionar correctamente, ya que parecen no generar nunca mensajes de error.
No sé cómo se puede provocar este error y no he encontrado información sobre él. El 21/10/2021 planteé una pregunta en StackOverflow: StackOverflow Question 69651379
Parece que este aviso no funciona, como se comenta en VSCode issue 81808.
Corresponde a la regla de CSSLint: Disallow empty rules
En los ejercicios de fuentes web propuestos en estos apuntes se utiliza una versión sencilla de la propiedad @font-face que sólo hace referencia a la fuente en formato WOFF y que cumple esta regla, por lo que Visual Studio Code no debería mostrar el aviso:
@font-face {
font-family: "MyFontFamily";
src: url("myfont.woff")
}
En septiembre de 2020 se eliminó el código que implementaba esta regla [Issue 56907], por lo que el aviso no se muestra, independientemente de la configuración establecida. El 20/10/2021 abrí una VSCode Issue 135493 preguntando si no deberían eliminar la configuración css.lint.propertyIgnoredDueToDisplay.
Corresponde a la regla de CSSLint: Require use of known properties
Esta configuración permite ampliar la lista de propiedades reconocidas como válidas por Visual Studio Code.
Corresponde a la regla de CSSLint: Require standard property with vendor prefix
Corresponde a la regla de CSSLint: Beware of box model size
Corresponde a la regla de CSSLint: Require compatible vendor prefixes
Corresponde a la regla de CSSLint: Disallow duplicate properties
Corresponde a la regla de CSSLint: Disallow too many floats
Corresponde a la regla de CSSLint: IDs in selectors
CSS Lint desaconseja el uso de ids en los selectores porque no se pueden reutilizar en una misma página web y aconseja utilizar clases en su lugar.
En los ejercicios propuestos en estos apuntes no se hace caso de este consejo ya que los ejercicios lo que pretenden es ilustrar el uso del selector de IDs.
div#intro {
background-color: #E56F60;
}
Disallow IDs in selectors - Don't use IDs in selectors.
Corresponde a la regla de CSSLint: Disallow !important
Corresponde a la regla de CSSLint: Disallow @import
Si en la hoja de estilo se utilizan reglas-arroba @import, CSS Lint genera un aviso "Disallow @import".
@import url("https://fonts.googleapis.com/css?family=Ribeye+Marrow");
Disallow @import - @import prevents parallel downloads, use <link> instead. (import)
Cuando se utiliza una regla-arroba @import, el navegador descarga el archivo al que se hace referencia y se espera a que termine la descarga para continuar leyendo la hoja de estilo. Eso ralentiza la carga de la página completa, por lo que CSS Lint aconseja utilizar en su lugar un enlace <link> en la página web (en la hoja de estilo no haría falta escribir nada), ya que la descarga de varios ficheros sí que se gestiona en paralelo. Pero entonces la asignación de la fuente a los elementos se debe hacer también en la página web.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ribeye+Marrow">
<style>
h1 {
font-family: "RibEye Marrow", cursive;
}
</style>
En los ejercicios propuestos en estos apuntes no se hace caso de este consejo y las fuentes de Google Fonts se llaman desde la hoja de estilo.
Corresponde a la regla de CSSLint: Disallow universal selector
Corresponde a la regla de CSSLint: Disallow units for zero values