Seguro que es bueno tener una base de código completa que cumpla perfectamente con un conjunto de pautas de estilo de código. Todos los archivos usan la misma sangría, el mismo estilo de comillas, las mismas reglas de espaciado y salto de línea, diablos, pequeñas cosas como la forma en que se manejan los ceros en los valores y cómo se nombran los fotogramas clave.
Parece una tarea difícil, pero en estos días, es más fácil que nunca. Me parece que se ha convertido en un juego de dos herramientas:
- Una herramienta para solucionar automáticamente problemas fáciles de solucionar
- Una herramienta para advertir sobre problemas más difíciles de solucionar
La mitad de la batalla: más bonita
También conocido como “arréglame las cosas, por favor”.
Lo mejor que puedo decir es que Prettier es un proyecto bastante nuevo, que solo apareció en escena en enero de 2017. Ahora, en el último trimestre de 2017, parece que todos y su hermana lo están usando. Lo llaman un Formateador de código opinado.
La gran idea: al guardar un documento, todo tipo de formato de código ocurre automáticamente. Es algo glorioso de contemplar. Se corrige la sangría y el espaciado. Las cotizaciones son consistentes. Se añaden puntos y comas.
Ejecute Prettier sobre su base de código una vez y se acabaron las confirmaciones embarradas llenas de cruft de formato de código. (Puede considerar crear un usuario de git temporal para que no parezca que un usuario ha cometido un millón de líneas de código más que otro, si eso le importa). Eso solo es un gran beneficio. Hace que revisar los compromisos sea mucho más fácil y ahorra un montón de trabajo pesado.
Sin embargo, como sugiere esta publicación, Prettier es solo la mitad de la batalla. Notarás que Prettier solo admite un puñado de opciones. De hecho, estoy bastante seguro de que cuando se lanzó no tenía ninguna configuración. De hecho, opinado.
Lo que sí admite son cosas que son fáciles de arreglar y que no requieren capacidad intelectual humana. ¿Utiliza comillas dobles accidentalmente (memoria muscular uggkch) cuando su guía de estilo es comillas simples? Boom: cambiado al guardar.
Hay otros problemas potenciales que no son tan fáciles de solucionar. Por ejemplo, ha utilizado un código #HEX no válido. Probablemente no querrías que una computadora adivinara lo que quisiste decir allí. Es mejor marcarlo visualmente como un error para que lo arregles.
Ahí es donde entra la siguiente parte.
La otra mitad de la batalla: Stylelint
También conocido como “házmelo saber sobre el problema, para que pueda solucionarlo”.
Stylelint es exactamente eso. De hecho, en ese GIF de arriba, Prettier do it’s thing, viste algunos puntos rojos y contornos rojos en mi editor Sublime Text. Prettier no me mostró lo que iba a arreglar (Prettier no muestra errores, solo arregla lo que puede). Ese fue Stylelint ejecutando it’s linting y mostrándome esos errores.
Mientras que Prettier admite reglas 10ish, Stylelint admite 150ish. Hay una configuración estándar, pero también puede obtener la granularidad que desee y configurarla como desee. David Clark escribió sobre esto aquí en Programar Plusel año pasado.
Con estas advertencias tan claramente visibles, puede arreglarlas a mano rápidamente. Se convierte en una segunda naturaleza.
poniéndolo todo en marcha
Estas herramientas funcionan en una amplia variedad de editores de código.
Estas son las integraciones del editor Prettier. Entre todos estos, eso probablemente cubre el 96% de los webdevnerds.
es muy facil pensar “Simplemente instalaré esto en mi editor de código, ¡y funcionará!” Eso me atrapa cada vez. Hacer que estas herramientas funcionen es nuevamente un juego de dos partes.
- Instale el complemento del editor de código.
- Haga las cosas de instalación de npm / yarn. Estas son herramientas basadas en nodos. No significa que su proyecto deba tener algo que ver con el nodo en producción, esta es una dependencia de desarrollo local.
Estas son cosas intencionalmente separadas. La esencia de estas herramientas es el código que analiza su código y descubre los problemas que va a solucionar. Eso sucede a través de API a las que pueden llamar otras herramientas. Eso significa que estas herramientas no tienen que ser reescritas y adaptadas para que funcionen en un nuevo entorno; en cambio, ese nuevo entorno llama a las mismas API que todos los demás y hace lo que sea necesario con los resultados.
Arriba hay un proyecto básico en Sublime Text con Prettier y Stylelint instalados. Tenga en cuenta que `package.json` muestra que tenemos nuestras herramientas instaladas y estoy enumerando mis “paquetes” para que pueda ver que tengo instalado Sublime Text Plugin jsPrettier. También puede ver los archivos de puntos que configuran las reglas para ambas herramientas.
No dejes que la parte “js” te engañe. Puede usar esta configuración en el CSS de su sitio de WordPress. Realmente no importa cuál sea tu proyecto.
Cada vez más exótico
Ciertamente hay una nivelación que puede suceder aquí. Por ejemplo:
- Puede considerar configurar Stylelint para ignorar los problemas que soluciona Prettier. Se van a corregir de todos modos, entonces, ¿por qué molestarse en mirar los errores?
- Podría considerar actualizar su proceso de implementación para detenerlo si se encuentran problemas de Stylelint. A veces, Stylelint le muestra un error que literalmente causará un problema, por lo que realmente no debería pasar a producción.
- Hablamos principalmente de CSS aquí, pero se puede decir que JavaScript es aún más importante para lint (y también para los soportes de Prettier). ES Lint es probablemente el camino a seguir aquí. También hay herramientas como Rubocop para Ruby, y estoy seguro de que hay linters para casi todos los idiomas imaginables.
Relacionado
- El cocreador de Stylelint, David Clark, presenta Stylelint
- Ashley Nolan sobre Stylelint, con algo de historia y datos interesantes
- Stoyan Stefanov sobre la integración de Stylelint y TextMate
- Aplicación del estilo de sintaxis CSS
- Artem Sapegin sobre Por qué los robots deberían formatear nuestro código por nosotros
- El capítulo de SurviveJS sobre formato de código.
- Mrm: herramienta de línea de comandos para ayudarlo a mantener sincronizada la configuración de sus proyectos de código abierto