Generador de configuración de Prettier
Elige cómo debe verse el código —ancho de línea, sangría, comillas, punto y coma, comas finales— y copia un .prettierrc. Por defecto solo se escriben las opciones que cambias, así que el archivo queda corto y fácil de leer.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Ajusta el ancho de línea y la sangría.
- Elige comillas, punto y coma y comas finales, las opciones que más cambian el aspecto del código.
- Ajusta el resto si lo necesitas, por ejemplo fin de línea de Windows o el ajuste de Markdown.
- Copia el resultado en
.prettierrc en la raíz del proyecto y ejecuta npx prettier . --write.
Cómo funciona
Cada control es una opción de Prettier; su nombre va entre paréntesis en la etiqueta. El resultado es JSON. Con «solo las opciones distintas» marcado, se omite todo valor igual al de Prettier 3, de modo que un cambio futuro de los valores por defecto solo afecta a lo que no elegiste a propósito.
| Opción |
Por defecto |
Efecto |
| printWidth |
80 |
Ancho al que Prettier parte las líneas |
| tabWidth / useTabs |
2 / false |
Sangría |
| semi |
true |
Punto y coma al final de las sentencias |
| singleQuote |
false |
’ en lugar de “ en JavaScript |
| trailingComma |
all |
Coma tras el último elemento de las listas |
| arrowParens |
always |
(x) => x o x => x |
Ejemplo
El formulario empieza con ancho de línea 100 y comillas simples, y lo demás por defecto. El resultado es:
{
"printWidth": 100,
"singleQuote": true
}
Desmarca la última opción y el archivo listará las 13 opciones con sus valores.
Consejos
- Sube
.prettierrc al repositorio y añade un .prettierignore para los archivos generados.
- Activa «formatear al guardar» en tu editor para que los archivos se formateen mientras trabajas.
- Con ESLint, añade eslint-config-prettier para que ESLint no marque el formato del que se encarga Prettier.
Preguntas frecuentes
¿Por qué faltan opciones en el archivo?
Con la última opción marcada solo se escriben los ajustes distintos de los valores por defecto de Prettier. Desmárcala para listar todas las opciones, por ejemplo para dejar la elección explícita para el equipo.
¿Cuáles son los valores por defecto de Prettier?
En Prettier 3: printWidth 80, tabWidth 2, sin tabulaciones, con punto y coma, comillas dobles, quoteProps as-needed, trailingComma all, bracketSpacing activado, bracketSameLine desactivado, arrowParens always, endOfLine lf y proseWrap preserve. Prettier 3 cambió el valor por defecto de trailingComma de es5 a all.
¿printWidth es un límite estricto?
No. Es el ancho al que Prettier intenta ajustarse. Las cadenas largas, las URL o el código muy anidado pueden seguir dando líneas más largas.
¿.prettierrc también puede ser YAML?
Sí, Prettier lee .prettierrc como JSON o como YAML. La herramienta escribe JSON, que vale en ambos casos.
¿Conviene usar Prettier junto con EditorConfig?
Se complementan. La línea de comandos de Prettier también toma de .editorconfig el estilo y el tamaño de la sangría, el ancho de línea y el fin de línea cuando .prettierrc no los fija.