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 hasta el último aparato, 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 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 trabaja habitualmente. 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 consultar El patio de la escuela. Usando una interfaz web, puede pegar algún 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. Inicialmente verá un código de muestra, pero simplemente puede eliminar todo esto y pegar el suyo.

Por ejemplo, intente ingresar el siguiente JavaScript:

(función ()
{
window.alert ('ok')
}())

Más bonito debería convertirlo en:

(función () {
window.alert ("ok");
})();

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

• Conversión de cadenas de comillas simples en cadenas de 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 las opciones. Con el ejemplo anterior, intente ajustar el ancho de la pestaña, alternando el --una frase bandera bajo Común, o alternando el --no-semi bandera bajo 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 la simplicidad y la coherencia. Está diseñado para que lo configure y luego se olvide, en lugar de permanecer preocupado por cada último detalle de formato de su código. (Para obtener una alternativa con un control mucho más detallado sobre hasta el último detalle de formato, intente 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 gestionar Opciones más bonitas es guardarlos 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.

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

$ yarn global agregar más bonito

Y para npm:

$ npm install --global más bonito

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

$ más bonita

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:

$ más bonito --escribir nombre de archivo.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:

$ más bonita --escribe.

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 modificar el archivo original, lo que le permite guardar la salida en un archivo diferente o redirigirlo a otro lugar:

$ más bonito test.js> test2.js

Comprobación de un archivo

Para que Prettier informe sobre la limpieza de su código sin realizar ningún cambio, use el --controlar bandera con un solo nombre de archivo o muchos:

$ más bonita - cheque.

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

Comprobando formato ...
[advertir] .prettierrc
[advertir] .prettierrc.json
[advertir] Problemas de estilo de código encontrados en los archivos anteriores. ¿Olvidaste ejecutar 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. A continuación, se muestra un ejemplo de cómo --una frase bandera afecta la salida:

$ tmp.js más bonito
ejemplo de función () {
console.log ("hola, mundo");
}
$ más bonito - comillas simples tmp.js
ejemplo de función () {
console.log ('hola, mundo');
}

Obteniendo ayuda

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

$ más bonito --help trailing-coma
--trailing-coma 
Imprima comas finales siempre que sea posible cuando sea de varias líneas.
Opciones válidas:
es5 Comas finales donde sean válidas en ES5 (objetos, matrices, etc.)
ninguno Sin comas finales.
todas las comas finales siempre que sea posible (incluidos los argumentos de función).
Predeterminado: 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 a cierto 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 átomo más bonito:

Una vez instalado, el uso es familiar: un atajo 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
clon de git 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 poner 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 a través del Más bonita mando:

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!

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

nano vs. Vim: los mejores editores de texto de terminal, comparados

¿Busca un editor de texto de terminal para Linux? ¡La elección principal es entre Vim y nano! Así es como se comparan.

Sobre el Autor