Preguntas Frecuentes

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.

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.

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.

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.

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

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

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.

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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.

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.

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.

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 "~".

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.

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á.

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.