Hacer que su código se vea bonito

Cuando eres nuevo en la programación, te enfocas en hacer que tu código funcione, no en hacer que se vea bonito. Si presta mucha atención al código de otras personas, como proyectos de código abierto y fragmentos de ejemplo en libros o blogs, notará algunas cosas:

• las líneas están sangradas

• los espacios y las nuevas líneas se utilizan de manera consistente

• las líneas se ajustan si superan algún umbral

  
  

Muchos proyectos tienen incluso guías de estilo formales, que explican cómo se deben hacer esas cosas en el proyecto.

¡Veamos cómo hacer que su código esté a la altura de los estándares de belleza en línea!

¿No es un poco mezquino?

¡Gran pregunta! ¿No estamos escribiendo código para máquinas y no les importa la apariencia? Sí, a las máquinas no les importa, pero los humanos también consumen mucho código, y para ellos, esos pequeños detalles pueden marcar una gran diferencia.

La consistencia importa

Si pasa 5 horas al día leyendo código, quiere que la experiencia sea lo más fluida posible. Las elecciones de estilo inesperadas llaman la atención sobre cosas que no importan, molestando al lector sin motivo alguno. Algunos lenguajes de programación, como Python, hicieron de la sangría una parte importante de la sintaxis del lenguaje para imponer una sangría razonable. Un enfoque similar se introdujo en el mundo de JS con CoffeeScript; en un punto, un lenguaje bastante popular compilado en JS.

diferencias significativas

Es tan doloroso revisar ramas que combinan:

• cambios de código significativos y
• cambios de estilo sin sentido

Solo eche un vistazo a la captura de pantalla de GitHub Pull Requests:

contra

En ambos casos, la parte significativa del cambio es la misma: sourceMap: true .

Encontrar qué cambió puede ser difícil en una diferencia ruidosa, y mucho menos evaluar su impacto. Imagine revisar tal cambio en un archivo que tiene 1000 líneas en lugar de 10.

Instrumentos

Por suerte, ya no tenemos que estudiar las guías de estilo; tenemos herramientas que las aplican automáticamente a nuestro código base. Muchas de esas herramientas son obstinadas : dejan opciones de configuración muy limitadas, por lo que debe aceptar las opiniones de sus autores.

Frontend: más bonito

Prettier es un formateador de código orientado a la interfaz. Es compatible con:

• código: JS, TS, JSX;
• estilos: CSS, Menos, SCSS;
• vistas: plantillas HTML, Vue, Ember y Angular, Markdown
• archivos de configuración: JSON, YAML

Y algunos más con complementos.

Prettier se compromete a poner fin a los debates sobre la guía de estilo. Por lo tanto, las opciones de configuración son limitadas: hay algunas cosas que puede modificar, pero al usar Prettier, en su mayoría subcontrata las decisiones de la guía de estilo a su autor. Prettier está muy extendido en la comunidad de JS: lo utilizan los equipos centrales de React, Vue y Angular. Diseñar su proyecto con él hará que su código se vea como el de todos los demás, lo cual es bueno, ya que mantiene la coherencia en muchos proyectos en los que trabaja la gente.

pitón: negro

Algo similar para el código de Python. Lo usé algunas veces mientras ayudaba con un proyecto de Python. Me complació tener una herramienta que mantiene el formato por mí; no tenía interés en aprender mucho sobre Python, pero me preocupo lo suficiente por la consistencia para asegurarme de que mis cambios estén en línea con la guía de estilo de código que usa el proyecto. Gracias a Black, mantuve mi código ordenado, sin pensar dos veces en cuáles son las convenciones en la comunidad de Python.

Otros idiomas

No conozco herramientas similares en otros idiomas, pero seguiría esas pautas si estuviera buscando alguna herramienta:

1. Independientemente del editor de texto, generalmente un entorno de desarrollo integrado (IDE) puede diseñar su código, pero no muchos desarrolladores aceptarían cambiar su favorito para usar la misma herramienta de diseño. Sin que todos usen la misma herramienta, habrá ruido de estilo en los cambios de código, algo que queremos evitar.
2. Interfaz de línea de comandos (CLI), para que pueda integrarla fácilmente con:
3. su editor de texto preferido,
4. git commit ganchos, o
5. integración continua (CI)
6. Opinión: hay muchas cosas mejores que hacer que debatir el estilo del código. La mayoría de los desarrolladores son lo suficientemente perezosos como para renunciar a su preferencia de estilo a cambio de un estilo automatizado.

¿Cómo diseñas tu código?

¿Qué herramientas utiliza para dar formato a su código, en JavaScript u otros lenguajes?

También publicado aquí .