Question 1

¿Qué es Prettier Config Generator?

Accepted Answer

Prettier Config Generator es una herramienta web interactiva gratuita que te permite configurar visualmente cada opción de Prettier y copiar al instante el archivo .prettierrc resultante. No se requiere edición manual.

Question 2

¿Qué es Prettier y por qué debería usarlo?

Accepted Answer

Prettier es un formateador de código obstinado que aplica un estilo consistente en todo tu proyecto, eliminando debates sobre el estilo del código en las revisiones.

Question 3

¿Qué es un archivo .prettierrc?

Accepted Answer

Un archivo .prettierrc es un archivo de configuración en la raíz de tu proyecto que le dice a Prettier cómo formatear el código, controlando opciones como sangría, estilo de comillas y ancho de línea.

Question 4

¿Cómo uso esta herramienta para generar mi configuración?

Accepted Answer

Selecciona las opciones de Prettier en la página principal. La configuración se actualiza en tiempo real en la barra lateral. Haz clic en "Copiar configuración" y pega el JSON en un archivo .prettierrc en la raíz de tu proyecto.

Question 5

¿Es gratuito Prettier Config Generator?

Accepted Answer

Sí, completamente gratuito. Sin registro ni cuenta requerida, sin límites de uso. La herramienta también es de código abierto en GitHub.

Question 6

¿Esta herramienta cubre todas las opciones de Prettier?

Accepted Answer

Sí. Incluye cada opción de Prettier con soporte oficial, con descripciones y valores predeterminados para cada una.

Question 7

¿Cómo copio y uso la configuración generada?

Accepted Answer

Haz clic en el botón "Copiar configuración" en la barra lateral (escritorio) o en el botón flotante (móvil). Pega el JSON en un nuevo archivo llamado .prettierrc en la raíz del proyecto.

Question 8

¿Cuál es la diferencia entre .prettierrc, prettier.config.js y la clave prettier en package.json?

Accepted Answer

Las tres son formas válidas de configurar Prettier. .prettierrc admite JSON o YAML, prettier.config.js es un módulo JavaScript, y la clave prettier en package.json mantiene todo en un solo archivo. La funcionalidad es idéntica.

Question 9

¿Prettier funciona con TypeScript, React y Vue?

Accepted Answer

Sí. Prettier tiene soporte integrado para TypeScript, JSX/TSX, componentes de archivo único de Vue y muchos otros formatos.

Question 10

¿Cómo integro Prettier con VS Code?

Accepted Answer

Instala la extensión "Prettier - Code formatter" y agrega "editor.defaultFormatter": "esbenp.prettier-vscode" y "editor.formatOnSave": true en la configuración de VS Code.

Question 11

¿Cómo ejecuto Prettier en todo mi proyecto?

Accepted Answer

Ejecuta npx prettier --write . en la raíz del proyecto. Esto formatea todos los archivos compatibles.

Question 12

¿Qué lenguajes y tipos de archivo admite Prettier?

Accepted Answer

Prettier admite JavaScript, TypeScript, JSX, CSS, SCSS, HTML, Vue, JSON, YAML, Markdown y más.

Question 13

¿Cómo ignoro archivos del formato de Prettier?

Accepted Answer

Crea un archivo .prettierignore en la raíz del proyecto con la misma sintaxis que .gitignore.

Question 14

¿Puedo usar Prettier junto con ESLint?

Accepted Answer

Sí. Instala eslint-config-prettier para deshabilitar las reglas de formato de ESLint que entran en conflicto con Prettier.

Question 15

¿Qué hace la opción printWidth?

Accepted Answer

printWidth le dice a Prettier el ancho de línea objetivo. Por defecto es 80. Es un objetivo flexible.

Question 16

¿Cuál es la diferencia entre singleQuote y jsxSingleQuote?

Accepted Answer

singleQuote controla las comillas en JavaScript/TypeScript. jsxSingleQuote controla los atributos JSX. Puedes configurarlos de forma independiente.

Question 17

¿Cómo uso la función de búsqueda en este sitio?

Accepted Answer

Usa la barra de búsqueda en la parte superior para filtrar opciones de Prettier por nombre o descripción.

Question 18

¿Este sitio tiene modo oscuro?

Accepted Answer

Sí. Haz clic en el botón de tema en el encabezado para cambiar entre modo claro, oscuro y preferencia del sistema.

Question 19

¿Cuál es la configuración predeterminada de Prettier?

Accepted Answer

Los valores predeterminados incluyen: printWidth: 80, tabWidth: 2, semi: true, singleQuote: false, trailingComma: "all".

Question 20

¿Cómo reporto un error o contribuyo al proyecto?

Accepted Answer

Abre un issue o pull request en el repositorio de GitHub. El proyecto acepta contribuciones de todo tipo.

Question 21

¿Qué versiones de Prettier admite esta herramienta?

Accepted Answer

Puedes elegir cualquier versión 3.x de Prettier desde el menú desplegable — desde 3.0 hasta 3.6 más "latest". El paquete de la versión seleccionada se carga bajo demanda desde jsDelivr, por lo que la lista de opciones siempre coincide con el esquema real de esa versión.

Question 22

¿Qué lenguajes puedo formatear en la pestaña Tu código?

Accepted Answer

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, plantillas de Angular, JSON, JSON5, JSON con comentarios, Markdown, MDX, YAML y GraphQL. El parser se detecta automáticamente a partir de la entrada, pero puedes anularlo con el menú desplegable.

Question 23

¿Cómo funciona la URL para compartir?

Accepted Answer

Haz clic en el botón de compartir y la versión actual de Prettier, las opciones seleccionadas, el código y la anulación del parser se comprimen con LZ en el hash de la URL y se copian al portapapeles. Abrir ese enlace restaura exactamente la misma configuración. Nada se envía a un servidor — todo permanece en el navegador.

Question 24

¿Qué significa el conteo de tokens junto al diff?

Accepted Answer

Muestra cuántos tokens de IA costarían tu entrada y salida bajo el modelo seleccionado. GPT-4o / GPT-4 / GPT-3.5 usan los tokenizadores BPE oficiales para un conteo exacto; Claude, Gemini, Llama y Mistral usan una aproximación basada en caracteres con el prefijo "~".

Question 25

¿Mi trabajo sobrevive a una actualización de página?

Accepted Answer

Sí. Tu versión de Prettier, las selecciones de opciones y las preferencias de vista dividida / tokenizador se guardan en localStorage, por lo que una recarga restaura todo. El hash de URL para compartir tiene prioridad si está presente cuando abres la página.

Question 26

¿Por qué aparece a veces la franja de error de formato?

Accepted Answer

Cuando el parser de Prettier no puede analizar tu entrada — generalmente porque el parser elegido no coincide con el código (por ejemplo, se eligió CSS pero pegaste JSX) — el mensaje de error aparece en una franja roja sobre el diff. Cambia el parser para que coincida con tu código y el error desaparecerá.

Question 27

¿Puedo previsualizar mi configuración con lenguajes distintos de JavaScript?

Accepted Answer

Sí. La pestaña Preview tiene su propio dropdown de parser junto al toggle del diff, y cada parser viene con una muestra creada a medida — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL, además de TypeScript / JS. Cambiar de parser re-formatea la muestra correspondiente con tus opciones actuales, así opciones específicas del lenguaje como proseWrap, htmlWhitespaceSensitivity y vueIndentScriptAndStyle tienen un lugar donde demostrar su efecto. Tu elección persiste entre recargas.

Preguntas Frecuentes