/stylelint-config-manzdev

Primary LanguageJavaScript

stylelint-config-manzdev

Paquete de reglas preconfiguradas para stylelint (linter de CSS).

Este paquete se utiliza internamente en mkweb, pero se ha separado por si alguien quiere utilizarlo de forma sencilla: https://manz.dev/software/mkweb

Características destacables

  • ✨ Da error si añades propiedades, valores o reglas desconocidas. Ej: display: flox, backgrnd: red...
  • ✨ Máx. 1000 lineas por fichero .css: Obliga a separar en ficheros (en builds, vite crea un bundle CSS)
  • ✨ Revisa colores hexadecimales (avisa colores incorrectos, siempre a minúsculas...)
  • ✨ Adapta a formato adecuado lineas largas para facilitar lectura (por ejemplo, gradientes complejos)
  • ✨ Evita propiedades, reglas o valores con vendor prefixes -webkit-, -moz, etc. Usar [autoprefixer].
  • ✨ No permite varias líneas en blanco vacías consecutivas
  • ✨ Si indicas valores de cero con unidades 0px, se la retira (0 es lo mismo que 0px, 0rem...)
  • ✨ Selectores, funciones y valores de CSS deben estar en minúscula siempre.
  • ✨ Se prefiere porcentajes sobre decimales en los valores de los canales alfa de los colores.
  • ✨ La sintaxis de color se cambia automáticamente a la moderna. No usar rgba() ni hsla().
  • ✨ Usar la notación url() en los @import. Usar comillas.
  • ✨ Siempre indicar fuentes alternativas y una fuente segura en los font-family.
  • ✨ Los pseudoelementos deben utilizar la sintaxis doble de punto y coma: ::before en lugar de :before.
  • ✨ Elimina propiedades, valores o reglas redundantes o duplicadas.
  • ✨ Evita el uso de valores de :nth-child() que no son válidos.
  • ✨ Fuerza a utilizar espacios con los operadores en calc()
  • ✨ Avisa que los comentarios con doble barra no son válidos en CSS // no es un comentario.
  • ✨ Revisa unidades inválidas o desconocidas.

¡Y muchas otras!

autoprefixer

Instalación

  1. Instalar el linter y el paquete de configuración:
npm install -D stylelint stylelint-config-manzdev
  1. Crear un fichero de configuración .stylelintrc.json que lo utilice:
{
  extends: "stylelint-config-manzdev",
  rules: {
    /* ... */
  }
}

Si lo deseas, puedes modificar reglas a tu criterio en el apartado rules.

Corrección automágica en VSCode

Si quieres que Visual Code sea capaz de corregir los errores automáticamente, necesitarás lo siguiente:

  1. Instala la extensión oficial de Stylelint
  2. Crea una carpeta .vscode/ con un fichero settings.json en tu proyecto o pulsa F1 / Open User Settings (JSON) e incluye la siguiente configuración recomendada:
{
  /* Disable basic VSCode linters */
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  /* Activamos Stylelint */
  "stylelint.enable": true,
  /* Corregir automágicamente */
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
  },
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  /* ... */
}