stylelint-config-duduar v2.0.4

stylelint-config-duduar

Configuración de Stylelint para ordenar tu código CSS y SCSS.

Instalación 🔧

Primero agrega las dependencias:

npm i -D stylelint stylelint-config-duduar

Luego crea un archivo .stylelintrc.json en la ruta principal de tu proyecto con lo siguiente:

{
	"extends": "stylelint-config-duduar"
}

Ahora dispones de dos caminos: puedes configurar VSCode y automatizar un poco la tarea, pero también puedes hacer pruebas por comandos si no usas VSCode o no quieres hacer configuraciones adicionales.

Configurar editor de código 🖱️

Para hacer que VSCode corrija automáticamente la sitaxis de tu código CSS y SCSS basta con copiar la carpeta .vscode de este repositorio en la carpeta raíz de tu proyecto.

Esta carpeta contiene la configuración necesaria y la extensión recomendada para trabajar, la cual te debería solicitar el editor que instales una vez abras tu proyecto. En caso contrario también podrás encontrarla en el apartado de extensiones si colocas @recommended en la caja de búsqueda.

Si no quieres copiar la carpeta .vscode en cada proyecto que realices, también puedes copiar el contenido del archivo de configuración settings.json en el archivo de configuración de VSCode. Para abrir dicho archivo basta con presionar F1 y colocar Prefereces: Open User Settings (JSON), pega ahí el contenido y guarda para aplicar. Finalmente la extensión requerida la puedes encontrar aquí, pero cada integrante del equipo con acceso al proyecto deberá instalar dicha extensión.

Listo!, ya puedes empezar a codear 😁.

Pruebas de estilo de codificación ⌨️

Otra manera de revisar la sintaxis de tu código es mediante comandos, para ello agrega lo siguiente a tus scripts en tu archivo package.json:

"scripts": {
  "stylelint:test": "stylelint **/*.{css,scss}",
  "stylelint:fix": "npm run stylelint:test --fix"
}

Con esto podrás ejecutar npm run stylelint:test para revisar si hay algún error de acuerdo a las reglas del paquete. Si hubiera algún error bastaría con ejecutar npm run stylelint:fix para solucionar esos errores y mantener correctamente el código.

Este camino te evita configuraciones adicionales, sobre todo el tener una carpeta adicional en tu proyecto sabiendo que no todos los desarrolladores que trabajan en él usan VSCode, pero puede ser más complicado el estar ejecutando pruebas de manera manual. Elige la mejor opción para ti 😎.

Construido con 🛠️

• stylelint-config-standard-scss - Preconfiguración para archivos SCSS
• stylelint-order - Plugin de reglas de linting relacionadas con el orden para Stylelint

Licencia 📄

Este proyecto está bajo la Licencia MIT, mira el archivo LICENSE.md para más detalles.