Mantener su código limpio con más bonito

El formato de código parece un tema trivial, pero es algo que puede afectar la calidad y corrección de su código, cómo se controla la versión y cómo colabora con otros. Sin embargo, si no quiere atascarse en los detalles de dónde va cada llave, intente subcontratar el problema a la herramienta de código abierto, Prettier.

Asuntos de formato

Los equipos de desarrollo de software han desperdiciado innumerables horas a lo largo de la historia discutiendo sobre la longitud máxima de la línea o en qué línea debería ir una llave. Independientemente de lo que diga la preferencia personal, la mayoría de las personas están de acuerdo en al menos una cosa: el formato del código debe ser coherente en todo el proyecto.

Prettier es una herramienta diseñada para lograrlo. Déle algo de código y le devolverá el mismo código, formateado de manera consistente. Prettier tiene integración de editor de texto, una herramienta de línea de comandos y una demostración en línea.

Hablar el idioma correcto

En primer lugar, querrá saber si Prettier es compatible con el idioma o los idiomas con los que normalmente trabaja. Prettier se centra actualmente en un conjunto básico de lenguajes dedicados principalmente al desarrollo web front-end, que incluyen:

• JavaScript
• HTML
• CSS
• Hablar con descaro a
• Reducción
• YAML

También hay soporte ilimitado para idiomas adicionales a través de complementos.

Pruébelo más bonito usando el patio de juegos en línea

Antes incluso de intentar instalar Prettier, es posible que desee visitar el patio de recreo . Usando una interfaz web, puede pegar un código de ejemplo y observar cómo Prettier lo transformará. Esta es una excelente manera de tener una idea de lo que realmente hace la herramienta, pero también puede actuar como su método principal para usar Prettier, si sus requisitos son más ligeros.

De forma predeterminada, el patio de juegos debe verse como dos paneles de edición de texto básicos, uno a la izquierda para su entrada y otro a la derecha que muestra la salida de Prettier. Verá un código de muestra inicialmente, pero simplemente puede eliminar todo esto y pegar el suyo.

Por ejemplo, intente ingresar el siguiente JavaScript:

 (function ()
 {
 window.alert('ok')
 }())

Más bonito debería convertirlo en:

 (function () {
 window.alert("ok");
 })();

Observe que, de forma predeterminada, los cambios que realiza Prettier incluyen:

• Conversión de cadenas entre comillas simples en comillas dobles
• Agregar punto y coma
• Convertir sangrías en dos espacios

En la parte inferior izquierda hay un botón que le permite ver opciones. Con el ejemplo anterior, intente ajustar el ancho de la pestaña, alternando la marca –single-quote en Común , o alternando la marca –no-semi en JavaScript .

Configurando opciones

Prettier se describe a sí mismo como "obstinado", una elección de diseño deliberada que significa que el control de los detalles se sacrifica por simplicidad y coherencia. Está diseñado para que lo configure y luego se olvide, en lugar de preocuparse por cada último detalle de formato de su código. (Para una alternativa con un control mucho más detallado sobre cada último detalle de formato, pruebe eslint ).

Sin embargo, los autores también reconocen que algunas decisiones tienen un impacto funcional más allá de la apariencia del código. Algunas opciones, incluidas algunas para fines heredados, permanecen, por lo que al menos debe comprender lo que hacen, incluso si usa Prettier en su estado predeterminado.

La mejor forma de administrar las opciones de Prettier es guardarlas en un archivo de configuración. Hay muchas formas de organizar esto, pero comience creando un archivo llamado .prettierrc.json en el directorio de su proyecto local. Puede contener cualquiera de las opciones admitidas en un objeto JSON estándar, p. Ej.

 {
 "tabWidth": 8
 }

Prettier leerá el mismo archivo de configuración, ya sea que lo esté ejecutando a través de la línea de comandos o un editor de texto compatible.

Instalación básica y la herramienta de línea de comandos

Con hilo o npm, la instalación debería ser sencilla. Para hilo:

 $ yarn global add prettier

Y para npm:

 $ npm install --global prettier

Una vez que haya instalado Prettier a nivel mundial, debería poder escribir:

 $ prettier

De forma predeterminada, aparecerá una pantalla de texto de ayuda que confirmará que la herramienta está instalada y funcionando correctamente.

Limpiar un archivo

Para reformatear un archivo, use un comando similar a:

 $ prettier --write filename.js

Esto sobrescribirá el archivo original, que suele ser el método más conveniente. Alternativamente, es posible que desee que más bonito actúe en cada archivo de un proyecto:

 $ prettier --write .

Prettier se ejecutará en todos los archivos del directorio actual, formateando todos los que reconoce.

También puede imprimir el resultado en una salida estándar, en lugar de alterar el archivo original, lo que le permite guardar la salida en un archivo diferente o redirigirlo a otro lugar:

 $ prettier test.js > test2.js

Comprobación de un archivo

Para que Prettier informe sobre la limpieza de su código sin hacer ningún cambio, use la marca –check con un solo nombre de archivo o con muchos:

 $ prettier --check .

Obtendrá una línea de salida para cada archivo que no coincide con el formato esperado, de acuerdo con la configuración de Prettier:

 Checking formatting...
 [warn] .prettierrc
 [warn] .prettierrc.json
 [warn] Code style issues found in the above file(s). Forgot to run Prettier?

Opciones de línea de comando

Las opciones estándar de Prettier están disponibles como opciones de línea de comando, si las necesita. Aquí hay un ejemplo de cómo la marca –single-quote afecta la salida:

 $ prettier tmp.js
 function example() {
 console.log("hello, world");
 }
 $ prettier --single-quote tmp.js
 function example() {
 console.log('hello, world');
 }

Obteniendo ayuda

La herramienta Línea de comandos proporciona ayuda informativa sobre cualquier opción a través del indicador –help :

 $ prettier --help trailing-comma
 --trailing-comma <es5|none|all>
 Print trailing commas wherever possible when multi-line.
 Valid options:
 es5 Trailing commas where valid in ES5 (objects, arrays, etc.)
 none No trailing commas.
 all Trailing commas wherever possible (including function arguments).
 Default: es5

Usando un editor de texto

Una vez que haya instalado Prettier, puede usarlo en una variedad de escenarios, dependiendo del conjunto de herramientas que ya esté usando. Lo más probable es que uses un editor de texto. Prettier tiene enlaces para la mayoría de los más populares, así que aquí se explica cómo configurar tres de ellos:

Texto sublime

JsPrettier es un complemento de Sublime Text que hace que Prettier esté disponible en el editor. Aunque hay varias formas diferentes de instalar JsPrettier, recomendamos utilizar el método Package Control. Deberá haber instalado Prettier ya, luego abra la paleta de comandos de Sublime Text y seleccione "Control de paquete: Instalar paquete":

Luego busque "jsprettier" y haga clic para instalarlo:

Una vez que JsPrettier esté instalado, puede hacer clic con el botón derecho en cualquier archivo abierto para formatearlo. También puede establecer el valor de auto_format_on_save en verdadero en la configuración de JsPrettier, lo que dará como resultado que JsPrettier limpie automáticamente cualquier archivo compatible cuando los guarde en Sublime Text.

Átomo

La instalación de Atom es muy similar a Sublime Text: simplemente use el administrador de paquetes integrado del editor para instalar prettier-atom :

Una vez instalado, el uso es familiar: un acceso directo o elemento de menú le permite formatear un archivo a pedido, mientras que una configuración de Atom le permite ejecutar Prettier automáticamente cada vez que se guarda un archivo.

Empuje

Vim es un editor de línea de comandos muy poderoso que no es adecuado para principiantes. Hacer que Prettier trabaje con vim es apropiadamente complicado, pero aún son solo unos pocos pasos:

 mkdir -p ~/.vim/pack/plugins/start
 git clone https://github.com/prettier/vim-prettier 
 ~/.vim/pack/plugins/start/vim-prettier

Git es probablemente la forma más fácil de descargar los archivos necesarios, pero cualquier medio de colocar vim-más bonito en ese directorio de inicio debería hacer el trabajo.

Una vez instalado, Prettier se ejecutará automáticamente cuando se guarde un archivo en vi. También se puede ejecutar manualmente en cualquier momento mediante el comando Prettier :

Lo que debería resultar en un archivo limpio:

Integre más bonito en su proyecto

El uso de un formateador de código como Prettier puede ayudar a mantener una base de código más fácil de leer. También puede ayudar a eludir los debates sobre qué estilo particular usar al codificar, ¡simplemente delegue esas decisiones a Prettier!

Finalmente, se puede configurar un gancho de git para garantizar que el código siempre se limpie cuando esté comprometido con el repositorio de su proyecto. Los desarrolladores individuales pueden tener la libertad de formatear su código como lo deseen, pero la copia central siempre será limpia y coherente.