Hoy lanzamos una nueva versión de la extensión Tailwind CSS IntelliSense para Visual Studio Code que añade linting específico de Tailwind tanto a tu CSS como a tu marcado.
Detectando errores en tu CSS
Tailwind ya detecta errores CSS, por ejemplo cuando escribes mal el nombre de una pantalla en la directiva @screen. La función de linting para Tailwind CSS IntelliSense muestra estos errores y los presenta en contexto, directamente dentro de tu editor. El linter validará tus directivas @tailwind, @screen, @variants y @apply, así como cualquier llamada a la función theme:
Detectando conflictos en tu HTML
Hay una regla de lint más que analiza las listas de clases en tus archivos de plantilla y resalta cualquier instancia donde las utilidades parezcan estar en conflicto. Por ejemplo, ¡probablemente no tenías la intención de tener mt-4 y mt-6 en la misma lista de clases!
Correcciones rápidas incluidas
Para que sea lo más fácil posible corregir cualquier problema, todas las reglas de lint tienen sus propias "correcciones rápidas" que se pueden activar directamente dentro de Visual Studio Code. Si accidentalmente escribiste @screen small en lugar de @screen sm, ¡el editor puede reemplazar automáticamente small por sm por ti!
Además de los reemplazos de texto simples, también hay algunas correcciones rápidas más interesantes para las reglas de lint más complejas. Echa un vistazo a cómo la extensión puede refactorizar automáticamente una directiva @apply inválida:
Configuración
Creemos que te encantará la nueva función de lint, pero si no es así, o simplemente quieres ajustar algún comportamiento, te tenemos cubierto. Puedes decidir cómo se trata cada violación de regla: ¿es un error, o solo una warning, o quieres ignore la regla por completo? Si realmente quieres, puedes deshabilitar el linting por completo usando la nueva configuración tailwindCSS.validate.
Consulta el readme de la extensión para obtener más detalles sobre cómo configurar las reglas de lint para que se ajusten a tu flujo de trabajo.
Conclusión
¡El linting ya está disponible en v0.4.0 de Tailwind CSS IntelliSense! Si ya tienes la extensión, es posible que necesites recargar Visual Studio Code para obtener la actualización, y si no la tienes, puedes instalarla a través del marketplace de extensiones.
Esta es la primera iteración de esta función, ¡y nos encantaría conocer tu opinión! ¿Tienes alguna idea para una nueva regla de lint? ¡Cuéntanos!
¿Quieres hablar sobre esta publicación? Discútelo en GitHub →