Visual Studio Code. CSS Lint

Qué es CSS Lint

lint fue el nombre de un programa creado a finales de los 70 para analizar programas escritos en C en busca de expresiones sintácticamente correctas pero que pudieran dar lugar a errores en los programas. Actualmente, lint se utiliza para referirse a las heramientas que analizan programas o documentos en busca de errores sintácticos, de posibles fuentes de errores, o incluso programas que no siguen reglas de estilo.

CSS Lint es un validador de hojas de estilo que nos da dos tipos de avisos:

Los errores deben corregirse necesariamente, porque la hoja de estilo no puede interpretarse correctamente mientras contenga errores. Pero los consejos deben tomarse como lo que son: consejos, que en unos casos es conveniente seguir, pero en otros casos no, ya que puede haber motivos para estar en desacuerdo con ellos.

Errores detectados por CSS Lint

CSS Lint indica varios tipos de errores, que debemos corregir necesariamente:

Consejos proporcionados por CSS Lint

CSS Lint proporciona una serie de consejos para evitar problemas en diferentes ámbitos. Estos avisos no tiene por qué corregirse, ya que no son errores, pero en general conviene tenerlos en cuenta. En la web de CSS Lint se puede consultar la lista comentada de consejos de CSS Lint y la lista resumida de consejos.

Actualmente (octubre de 2018), los consejos son los siguientes:

Nota: Los consejos que muestra VSCode se indican con el logotipo de VSCode (Visual Studio Code). El tipo de mensaje se indica con los logotipos Visual Studio Code Ignore (no se muestra ningún aviso), Visual Studio Code Warning (se muestra como aviso) y Visual Studio Code Error (se muestra como error),

CSS Lint en Visual Studio Code

Visual Studio Code incorpora una parte de los avisos de CSS Lint. En el archivo de configuración de Visual Studio Code hay una serie de preferencias de configuración relacionadas con CSS Lint.

Preferencias de configuración de Visual Studio Code

Las preferencias de configuración relacionadas con CSS Lint tienen tres valores posibles:

Preferencias de configuración predetrminadas de Visual Studio Code

Estas son actualmente (octubre de 2018) las preferencias de configuración de Visual Studio Code relacionadas con CSS Lint.

{
  // Número de parámetros no válido.
  "css.lint.argumentsInColorFunction": "error",

  // No use "width" o "height" cuando se utilice "padding" o "border".
  "css.lint.boxModel": "ignore",

  // Cuando use un prefijo específico del proveedor, asegúrese de incluir todas las demás propiedades específicas del proveedor.
  "css.lint.compatibleVendorPrefixes": "ignore",

  // No utilice las definiciones de estilo duplicados.
  "css.lint.duplicateProperties": "ignore",

  // No utilice conjuntos de reglas vacías.
  "css.lint.emptyRules": "warning",

  // Evite usar `float`. Usarlo puede provocar CSS frágiles que pueden romperse fácilmente si un aspecto del diseño cambia.
  "css.lint.float": "ignore",

  // la regla `@font-face` debe definir las propiedades `src` y `font-family`.
  "css.lint.fontFaceProperties": "warning",

  // Colores hexadecimales deben consistir en tres o seis números hexadecimales.
  "css.lint.hexColorLength": "error",

  // Los selectores no deben contener identificadores porque estas reglas están estrechamente ligadas a HTML.
  "css.lint.idSelector": "ignore",

  // Las modificaciones de IE solo son necesarias cuando se admite IE7 y versiones anteriores.
  "css.lint.ieHack": "ignore",

  // Evite usar `!important`. Es una indicación que la especificidad de todo el CSS se ha salido de control y debe ser refactorizada.
  "css.lint.important": "ignore",

  // Las instrucciones Import no se cargan en paralelo.
  "css.lint.importStatement": "ignore",

  // La propiedad se ignora a causa de la pantalla. Por ejemplo, con "display: inline", las propiedades "width", "height", "margin-top", "margin-bottom" y "float" no tienen ningún efecto.
  "css.lint.propertyIgnoredDueToDisplay": "warning",

  // El selector universal (`*`) es conocido por ser lento.
  "css.lint.universalSelector": "ignore",

  // Regla At desconocida.
  "css.lint.unknownAtRules": "warning",

  // Propiedad desconocida.
  "css.lint.unknownProperties": "warning",

  // Propiedad específica del proveedor desconocida.
  "css.lint.unknownVendorSpecificProperties": "ignore",

  // Cuando se utiliza un prefijo de proveedor específico, también incluye la propiedad estándar.
  "css.lint.vendorPrefix": "warning",

  // No se necesita una unidad para cero.
  "css.lint.zeroUnits": "ignore",

  // Hace un seguimiento de la comunicación entre VSCode y el servidor de lenguaje CSS.
  "css.trace.server": "off",

  // Habilita o deshabilita todas las validaciones.
  "css.validate": true
}

Entre las preferencias anteriores, las siguientes preferencias no parecen estar relacionadas con recomendaciones de CSS Lint.

{
// Número de parámetros no válido.
"css.lint.argumentsInColorFunction": "error",

// Colores hexadecimales deben consistir en tres o seis números hexadecimales.
"css.lint.hexColorLength": "error",

// Las modificaciones de IE solo son necesarias cuando se admite IE7 y versiones anteriores.
"css.lint.ieHack": "ignore",

// Regla At desconocida.
"css.lint.unknownAtRules": "warning",

// Propiedad específica del proveedor desconocida.
"css.lint.unknownVendorSpecificProperties": "ignore",

// Hace un seguimiento de la comunicación entre VSCode y el servidor de lenguaje CSS.
"css.trace.server": "off",

// Habilita o deshabilita todas las validaciones.
"css.validate": true