Generador de configuración de Prettier
Elige tus opciones de Prettier con interruptores y menús, observa el efecto en código real mientras las cambias y copia un .prettierrc listo para confirmar en tu repositorio. Solo se escriben las opciones que cambias, así que el archivo queda corto y legible.
Última actualización:
Las opciones y los valores predeterminados coinciden con Prettier 3.x.
Opciones
Archivo de configuración
Vista previa en directo
Editar el código de entrada
npm install --save-dev --save-exact prettiernpx prettier . --writeCómo usar Generador de configuración de Prettier
- Empieza con un ajuste predefinido o mantén los valores predeterminados de Prettier.
- Cambia las opciones que te interesen, como semi, singleQuote, printWidth o trailingComma. Las opciones cambiadas se resaltan.
- Mira la vista previa: el código de ejemplo se reformatea al instante. Elige otro lenguaje o pega tu propio código.
- Elige el formato del archivo (.prettierrc JSON es el más común) y cópialo o descárgalo.
- Guárdalo en la raíz de tu proyecto, instala Prettier y ejecuta
npx prettier . --write.
Qué hacen las opciones que más se cambian
| Opción | Resultado predeterminado | Resultado cambiado |
|---|---|---|
semi: false | const a = 1; | const a = 1 |
singleQuote: true | import x from "x"; | import x from 'x'; |
trailingComma: "es5" | comas después del último elemento de arrays, objetos y parámetros en varias líneas | sin coma después del último parámetro o argumento de una función |
bracketSpacing: false | { a: 1 } | {a: 1} |
arrowParens: "avoid" | (x) => x * 2 | x => x * 2 |
quoteProps: "consistent" | { name: 1, "max-retries": 3 } | { "name": 1, "max-retries": 3 } |
bracketSameLine: true | el > de cierre de una etiqueta JSX larga en su propia línea | > al final de la línea del último atributo |
objectWrap: "collapse" | un objeto se mantiene expandido si pones un salto de línea después de { | el objeto se une en una sola línea siempre que quepa |
Consejos para añadir Prettier a un proyecto
- Fija la versión con
npm install --save-dev --save-exact prettier; distintas versiones pueden formatear el código de forma ligeramente diferente, lo que genera diffs con ruido. - Añade un .prettierignore para la salida de compilación y los archivos generados, como
dist/,coverage/y los archivos de bloqueo. Prettier también respeta .gitignore por defecto. - Usa overrides para los tipos de archivo que necesiten otros ajustes, por ejemplo
"overrides": [{ "files": "*.md", "options": { "proseWrap": "always" } }]. - Mantén los editores sincronizados: Prettier lee la sangría, los finales de línea y max_line_length de .editorconfig cuando su propia configuración no los define. Crea uno con el Generador de EditorConfig.
- Combínalo con un linter: el Generador de configuración de ESLint puede añadir eslint-config-prettier para que las dos herramientas nunca choquen.
Preguntas frecuentes
¿Dónde pongo el archivo de configuración de Prettier?
Guárdalo en la raíz de tu proyecto, junto a package.json. Prettier busca hacia arriba desde cada archivo que formatea y usa la primera configuración que encuentra: una clave "prettier" en package.json, .prettierrc (JSON o YAML), .prettierrc.json, .prettierrc.yaml, .prettierrc.toml o prettier.config.js / .mjs / .cjs.
¿Cuáles son las opciones predeterminadas de Prettier?
printWidth 80, tabWidth 2, useTabs false, semi true, singleQuote false, quoteProps as-needed, jsxSingleQuote false, trailingComma all, bracketSpacing true, objectWrap preserve, bracketSameLine false, arrowParens always, proseWrap preserve, htmlWhitespaceSensitivity css, endOfLine lf y embeddedLanguageFormatting auto.
¿Por qué cambiaron mis comas finales al actualizar a Prettier 3?
Prettier 3.0 cambió el valor predeterminado de trailingComma de es5 a all, así que ahora también se añaden comas después del último parámetro y argumento de una función cuando se dividen en varias líneas. Pon trailingComma en es5 para mantener el comportamiento anterior.
¿Debo incluir los valores predeterminados en mi configuración?
No es necesario. Escribir solo las opciones que cambias mantiene el archivo corto y permite que tu proyecto adopte los valores predeterminados mejorados de futuras versiones. Desmarca Solo opciones distintas de las predeterminadas si tu equipo prefiere escribir todos los valores.
¿printWidth obliga a que todas las líneas tengan esa longitud o menos?
No. printWidth es un objetivo, no un límite estricto. Prettier intenta que el código quepa en ese ancho, pero las cadenas largas, las URL o las expresiones muy anidadas pueden superarlo, y el código corto nunca se estira para llenar la línea.
¿Cómo funcionan juntos Prettier y ESLint?
Usa Prettier para el formato y ESLint para la calidad del código. Instala eslint-config-prettier y añádelo al final de tu configuración de ESLint para desactivar las reglas de ESLint que entrarían en conflicto con el formato de Prettier.
¿Se sube mi código?
No. La configuración se genera en tu navegador y la vista previa ejecuta la biblioteca de Prettier localmente en la página. Si la biblioteca no se puede descargar, se muestra en su lugar una vista previa integrada del código de ejemplo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.