0.0.18 • Published 3 months ago
stylelint-config-manzdev v0.0.18
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 que0px
,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()
nihsla()
. - ✨ 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!
Instalación
- Instalar el linter y el paquete de configuración:
npm install -D stylelint stylelint-config-manzdev
- 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:
- Instala la extensión oficial de Stylelint
- Crea una carpeta
.vscode/
con un ficherosettings.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"
},
/* ... */
}
0.0.18
3 months ago
0.0.15
5 months ago
0.0.16
5 months ago
0.0.17
5 months ago
0.0.14
5 months ago
0.0.13
5 months ago
0.0.12
7 months ago
0.0.11
8 months ago
0.0.10
10 months ago
0.0.9
10 months ago
0.0.8
11 months ago
0.0.7
11 months ago
0.0.6
11 months ago
0.0.5
11 months ago
0.0.4
11 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.1
11 months ago