Saltar al contenido principal

Instalación

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Primero, instala Prettier localmente:

npm install --save-dev --save-exact prettier

Luego, crea un archivo de configuración vacío para indicar a editores y otras herramientas que estás usando Prettier:

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

A continuación, crea un archivo .prettierignore para indicar a la CLI de Prettier y a los editores qué archivos no formatear. Aquí tienes un ejemplo:

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
consejo

Prettier seguirá las reglas especificadas en .gitignore si existe en el mismo directorio desde donde se ejecuta. También puedes basar tu .prettierignore en .eslintignore (si tienes uno).

Otro consejo

Si tu proyecto aún no está listo para formatear, por ejemplo, archivos HTML, añade *.html.

Ahora, formatea todos los archivos con Prettier:

npx prettier . --write
información

What is that npx thing? npx ships with npm and lets you run locally installed tools. We’ll leave off the npx part for brevity throughout the rest of this file!

advertencia

If you forget to install Prettier first, npx will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your package.json. And it’s faster, too.

prettier --write . es ideal para formatear todo, pero en proyectos grandes puede tomar un tiempo. Puedes ejecutar prettier --write app/ para formatear un directorio específico, o prettier --write app/components/Button.js para un archivo concreto. También puedes usar un glob como prettier --write "app/**/*.test.js" para formatear todas las pruebas en un directorio (consulta fast-glob para la sintaxis de glob soportada).

Si tienes configurado CI, ejecuta lo siguiente como parte del proceso para asegurarte de que todos usen Prettier. ¡Esto evita conflictos de fusión y otros problemas de colaboración!

npx prettier . --check

--check es como --write, pero solo verifica que los archivos ya estén formateados, sin sobrescribirlos. prettier --write y prettier --check son las formas más comunes de ejecutar Prettier.

Configura tu editor​

Formatear desde la línea de comandos es un buen punto de partida, pero aprovecharás al máximo Prettier ejecutándolo desde tu editor, ya sea mediante un atajo de teclado o automáticamente al guardar un archivo. Cuando una línea se alargue tanto durante la codificación que no quepa en tu pantalla, ¡pulsa una tecla y mírala convertirse mágicamente en múltiples líneas! O cuando pegues código y la indentación se desordene, deja que Prettier lo arregle sin salir de tu editor.

Consulta Integración con editores para configurar tu editor. Si tu editor no soporta Prettier, puedes ejecutarlo con un observador de archivos.

nota

¡No omitas la instalación local habitual! Los plugins del editor detectarán tu versión local de Prettier, asegurando que uses la versión correcta en cada proyecto. (No querrás que tu editor cause cambios inesperados por usar una versión más nueva que la de tu proyecto).

Además, poder ejecutar Prettier desde la línea de comandos sigue siendo un buen respaldo y es necesario para configuraciones de CI.

ESLint (y otros linters)​

Si usas ESLint, instala eslint-config-prettier para que ESLint y Prettier funcionen bien juntos. Desactiva todas las reglas de ESLint innecesarias o que puedan entrar en conflicto con Prettier. Hay una configuración similar para Stylelint: stylelint-config-prettier

(Consulta Prettier vs. Linters para aprender sobre formateo vs. linting, Integración con linters para detalles avanzados sobre configuración, y Proyectos relacionados para más opciones de integración si es necesario.)

Hooks de Git​

Además de ejecutar Prettier desde la línea de comandos (prettier --write), verificar el formato en CI y usarlo desde tu editor, muchas personas también prefieren ejecutar Prettier como un hook pre-commit. Esto garantiza que todos tus commits estén formateados sin tener que esperar a que termine el proceso de CI.

Por ejemplo, puedes hacer lo siguiente para ejecutar Prettier antes de cada commit:

  1. Instala husky y lint-staged:
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
  1. Añade lo siguiente a tu package.json:
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
nota

Si usas ESLint, asegúrate de que lint-staged lo ejecute antes que Prettier, no después.

Consulta Pre-commit Hook para más información.

Resumen​

En resumen, hemos aprendido a:

  • Instalar una versión exacta de Prettier localmente en tu proyecto. Esto asegura que todos en el equipo usen exactamente la misma versión. Incluso una actualización de parche puede cambiar ligeramente el formato, por lo que no querrás que diferentes miembros usen versiones distintas y reformateen mutuamente sus cambios.

  • Añadir un .prettierrc para notificar a tu editor que estás usando Prettier.

  • Crear un .prettierignore para indicar a tu editor qué archivos no debe modificar, además de poder ejecutar prettier --write . y formatear todo el proyecto (sin alterar archivos que no deseas o bloquearse con archivos generados).

  • Ejecutar prettier --check . en CI para asegurar que tu proyecto mantenga el formato.

  • Usar Prettier desde tu editor para la mejor experiencia.

  • Utilizar eslint-config-prettier para que Prettier y ESLint funcionen en armonía.

  • Configurar un hook pre-commit para garantizar que cada commit esté formateado.