Cómo configurar Prettier en Visual Studio Code

Escribir código limpio y legible es esencial, ya sea que trabaje solo o con un equipo de desarrolladores. Si bien muchos factores contribuyen a la legibilidad del código, uno de los más importantes es el formato de código coherente.

Pero aquí está el problema: el formateo manual del código puede ser un dolor absoluto y muy propenso a errores. Herramientas como Prettier hacen que formatear HTML, CSS, JavaScript y otros lenguajes sea mucho más fácil. Descubra cómo instalar y usar la extensión Prettier para formatear código, así como algunos ajustes de configuración avanzados.

Instalación más bonita

Antes de continuar, asegúrese de tener Node.js instalado en su computadora. Puede instalar la última versión desde el página oficial de descargas de Node.js. viene con el administrador de paquetes de nodos (npm) incorporado, que usará para administrar sus paquetes de Node.js.

Después de confirmar que Node.js está instalado localmente, comience creando un directorio vacío para su proyecto. Puede nombrar el directorio más bonita-demostración.

Luego, ingrese a ese directorio usando una línea de comando, luego ejecute el siguiente comando para inicializar un proyecto de Node.js:

npm inicializar -y

Este comando genera un archivo package.json que contiene la configuración predeterminada.

Para instalar la extensión Prettier, ejecute este comando de terminal:

npm i --save-dev más bonito

El --save-dev flag se instala más bonito como una dependencia de desarrollo, lo que significa que solo se usa durante el desarrollo.

Ahora que lo tiene instalado, puede comenzar a explorar cómo funciona Prettier usándolo en la línea de comandos.

Uso de Prettier a través de la línea de comandos

Comience por crear un guión.js archivo y rellenándolo con el siguiente código:

funciónsuma(un, b) { devolver a + b }
constante usuario = { nombre: "kyle", edad: 27,
 esProgramador: verdadero,
 clave larga: "Valor",
 másDatos: 3
}

Para formatear el código en este archivo script.js a través de la línea de comando, ejecute el siguiente comando:

npx más bonito --escribir script.js

El comando reformatea el código JavaScript en script.js al estándar predeterminado de Prettier. Este va a ser el resultado:

funciónsuma(un, b) {
devolver a + b;
}
constante usuario = {
 nombre: "kyle",
 edad: 27,
 esProgramador: verdadero,
 clave larga: "Valor",
 másDatos: 3,
};

También puede formatear el marcado HTML desde la línea de comandos. Crear un índice.html archivo en el mismo directorio que guión.js. Luego pegue el siguiente HTML mal formateado en el archivo:

"" alt=""clase="icono del tiempo grande">

clase="currentHeaderTemp"><durar>21durar></div>
</div>
 </header>

Para formatear el HTML, ejecute este comando:

npx más bonito --escribir index.html

Este comando reformatea el HTML al estándar predeterminado de Prettier, lo que da como resultado el siguiente código:

<encabezamiento>
<división>
<imagenorigen=""alternativa=""clase="icono del tiempo grande" />
<divisiónclase="currentHeaderTemp"><durar>21durar>división>
división>
encabezamiento>

También puede utilizar el --controlar bandera para comprobar si el código se ajusta a los estándares de Prettier. El siguiente ejemplo comprueba guión.js:

npx más bonito --verificar script.js

Esto es útil si desea un gancho de confirmación previa para asegurarse de que las personas usen Prettier y formatee los archivos antes de enviarlos a Git. Esto funciona bien cuando contribuyendo al código abierto.

Integrando Prettier en Visual Studio Code

Usar Prettier a través de la línea de comandos puede ser una molestia. En lugar de ejecutar manualmente un comando cada vez que desee formatear el código, puede configurarlo para formatear automáticamente cuando cambie un archivo. Afortunadamente, Visual Studio Code (VS Code) tiene una forma integrada de hacer esto por usted.

Ve a la Extensiones pestaña en VS Code y busque más bonita. Haga clic en Prettier - Formateador de código, instálelo y actívelo.

Vaya a la configuración de VS Code navegando a Archivo > Preferencias > Configuración. En el cuadro de búsqueda, busca más bonita. Encontrarás un montón de opciones para ayudarte a configurar la extensión Prettier.

Por lo general, puede arreglárselas con la configuración predeterminada. Lo único que podría considerar cambiar son los puntos y comas (puede eliminarlos si lo desea). De lo contrario, todo está configurado de forma predeterminada, pero puede cambiarlo como desee.

Asegúrese de habilitar el formatonsalvar opción para que el código en cada archivo se formatee automáticamente cuando guarde ese archivo. Para habilitarlo, simplemente busque formatonsalvar y marque la casilla.

Si no está utilizando VSCode o la extensión no funciona por algún motivo, puede descargar la biblioteca onchange. Esto ejecuta el comando para formatear el código cada vez que cambia el archivo.

Cómo ignorar archivos al formatear con Prettier

Si fueras a correr el más bonito --escribir comando en toda su carpeta, pasaría por cada uno de sus módulos de nodo. ¡Pero no debería perder el tiempo formateando el código de otras personas!

Para solucionar este problema, cree un .prettierignorar archivar e incluir el término node_modules en el archivo. Si tuviera que ejecutar el --escribir comando en toda la carpeta, reformatearía todos los archivos excepto los del node_modules carpeta.

También puede ignorar archivos con una extensión específica. Por ejemplo, si desea ignorar todos los archivos HTML, simplemente agregue *.html a .prettierignorar.

Cómo configurar más bonito

Puede configurar cómo desea que funcione Prettier con diferentes opciones. Una forma es agregar un más bonita clave para tu paquete.json archivo. El valor será un objeto que contenga todas las opciones de configuración:

{
 ...
"guiones": {
"prueba": "echo \"Error: no se especificó ninguna prueba\" && exit 1"
 },
 más bonita: {
// las opciones van aqui
 }
}

La segunda opción (que recomendamos) es crear un .prettierrc archivo. Este archivo le permitirá hacer todo tipo de personalizaciones.

Digamos que no te gustan los puntos y comas. Puede eliminarlos colocando el siguiente objeto en el archivo:

{
"semi": verdadero,
"anula": [
 {
"archivos": ".ts",
"opciones": {
"semi": FALSO
 }
 }
 ]
}

El anula La propiedad le permite definir anulaciones personalizadas para ciertos archivos o extensiones de archivo. En este caso, decimos que todos los archivos que terminan en .ts (es decir, archivos mecanografiados) no deben tener punto y coma.

Uso de Prettier con ESLint

ESLint es una herramienta de pelusa para detectar errores en el código JavaScript y formatearlo. Si está usando Prettier, probablemente no querrá usar ESLint para formatear también. Para usarlos juntos, deberá instalar y configurar eslint-config-prettier. Esta herramienta desactiva todas las configuraciones de ESLint para cosas que Prettier ya maneja.

Primero, necesitas instalarlo:

npm i --save-dev eslint-config-prettier

A continuación, agréguelo a la lista de extensiones en el .eslintrc archivo (asegúrese de que sea lo último en la lista):

{
"extiende": [
"alguna-otra-configuración-que-usar",
"más bonito"
 ],
"normas": {
"sangrar": "error"
 }
}

Ahora ESLint deshabilitará todas las reglas que Prettier ya está cuidando para evitar conflictos.

Limpie su base de código con Prettier y ESLint

Prettier es una herramienta ideal para limpiar su código y aplicar un formato consistente dentro de un proyecto. Configurarlo para que funcione con VS Code significa que siempre está al alcance.

ESLint es una herramienta JavaScript imprescindible que va de la mano con Prettier. Proporciona un montón de funciones y opciones de personalización que van más allá del formato básico. Aprenda a usar ESLint con JavaScript si quiere ser un desarrollador más productivo.