Opciones

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 →

Prettier incluye un conjunto limitado de opciones de formato.

Para entender la filosofía de Prettier sobre opciones – consulta la Filosofía de Opciones.

Si modificas alguna opción, se recomienda hacerlo mediante un archivo de configuración. Así la CLI de Prettier, las integraciones con editores y otras herramientas conocerán tus opciones.

Ternarios Experimentales

Prueba el nuevo formato de ternarios de Prettier antes de que sea el comportamiento predeterminado.

Opciones válidas:

• true - Usa ternarios curiosos, con el signo de interrogación tras la condición.

• false - Mantiene el comportamiento predeterminado de ternarios; conserva los signos de interrogación en la misma línea que el consecuente.

Default	CLI Override	API Override
false	--experimental-ternaries	experimentalTernaries: <bool>

Posición Experimental del Operador

Opciones válidas:

• "start" - Al dividir expresiones binarias en múltiples líneas, imprime operadores al inicio de nuevas líneas.

• "end" - Comportamiento predeterminado; al dividir expresiones binarias, imprime operadores al final de líneas anteriores.

Default	CLI Override	API Override
"end"	--experimental-operator-position <start|end>	experimentalOperatorPosition: "<start|end>"

Ancho de Impresión

Especifica la longitud de línea donde el formateador realizará saltos.

advertencia

Por legibilidad, desaconsejamos usar más de 80 caracteres:

En guías de estilo, los límites de longitud de línea suelen establecerse en 100 o 120 caracteres. Sin embargo, al escribir código manualmente, los desarrolladores no buscan alcanzar el máximo en cada línea. Normalmente usan espacios para dividir líneas largas y mejorar legibilidad, resultando en una longitud promedio muy inferior al máximo.

La opción printWidth de Prettier funciona distinto. No es un límite máximo estricto, sino una indicación aproximada de la longitud deseada. Prettier generará líneas más cortas y más largas, pero intentará aproximarse al printWidth especificado.

Recuerda: las computadoras son literales. Debes indicarles explícitamente qué hacer, mientras los humanos deciden implícitamente cuándo dividir líneas.

En resumen, no uses printWidth como el max-len de ESLint – son conceptos diferentes. max-len define solo el máximo permitido, mientras printWidth especifica la longitud preferida.

Default	CLI Override	API Override
80	--print-width <int>	printWidth: <int>

Configurar max_line_length en un archivo .editorconfig establecerá el ancho de impresión de Prettier, a menos que se sobrescriba.

(Si prefieres desactivar el ajuste de líneas en Markdown, configura la opción Prose Wrap).

Ancho de Tabulación

Especifica el número de espacios por nivel de indentación.

Default	CLI Override	API Override
2	--tab-width <int>	tabWidth: <int>

Configurar indent_size o tab_width en un archivo .editorconfig establecerá el ancho de tabulación de Prettier, a menos que se sobrescriba.

Tabuladores

Indenta líneas con tabuladores en lugar de espacios.

Default	CLI Override	API Override
false	--use-tabs	useTabs: <bool>

Configurar indent_style en un archivo .editorconfig definirá el uso de tabuladores en Prettier, a menos que se sobrescriba.

(Los tabuladores se usan para indentación, pero Prettier emplea espacios para alinear elementos (como en ternarios). Este comportamiento se conoce como SmartTabs.)

Punto y Coma

Imprime punto y coma al final de las sentencias.

Opciones válidas:

• true - Agrega punto y coma al final de cada sentencia.

• false - Solo agregar punto y coma al principio de líneas que pueden provocar fallos de ASI.

Default	CLI Override	API Override
true	--no-semi	semi: <bool>

Comillas

Utilizar comillas simples en lugar de comillas dobles.

Notas:

• Las comillas en JSX ignoran esta opción – consulta jsx-single-quote.

• Si un tipo de comillas supera en uso al otro, se usará la comilla menos frecuente para formatear la cadena. Ejemplo: "I'm double quoted" resulta en "I'm double quoted" y "This \"example\" is single quoted" resulta en 'This "example" is single quoted'.

Consulta la explicación sobre cadenas para más información.

Default	CLI Override	API Override
false	--single-quote	singleQuote: <bool>

Comillas en propiedades

Cambiar cuándo se colocan comillas en las propiedades de objetos.

Opciones válidas:

• "as-needed" - Agregar comillas alrededor de propiedades de objeto solo cuando sea necesario.

• "consistent" - Si al menos una propiedad en un objeto requiere comillas, colocar comillas en todas las propiedades.

• "preserve" - Respetar el uso de comillas en las propiedades de objeto del código original.

Default	CLI Override	API Override
"as-needed"	--quote-props <as-needed|consistent|preserve>	quoteProps: "<as-needed|consistent|preserve>"

Ten en cuenta que Prettier nunca quita las comillas de nombres de propiedades numéricas en expresiones Angular, TypeScript y Flow porque la distinción entre claves string y numéricas es significativa en estos lenguajes. Consulta: Angular, TypeScript, Flow. Tampoco quita comillas en propiedades numéricas para Vue (consulta este issue).

Comillas en JSX

Utilizar comillas simples en lugar de comillas dobles en JSX.

Default	CLI Override	API Override
false	--jsx-single-quote	jsxSingleQuote: <bool>

Comas finales

El valor predeterminado cambió de es5 a all en v3.0.0

Imprimir comas finales siempre que sea posible en estructuras sintácticas multilínea separadas por comas. (Un array de una sola línea, por ejemplo, nunca lleva comas finales).

Opciones válidas:

• "all" - Comas finales siempre que sea posible (incluyendo parámetros de funciones y llamadas). Requiere un motor que soporte ES2017 (Node.js 8+ o navegador moderno) o compilación downlevel. También habilita comas finales en parámetros de tipo TypeScript (soportado desde TypeScript 2.7 de enero 2018).

• "es5" - Comas finales donde son válidas en ES5 (objetos, arrays, etc.). Comas finales en parámetros de tipo TypeScript y Flow.

• "none" - Sin comas finales.

Default	CLI Override	API Override
"all"	--trailing-comma <all|es5|none>	trailingComma: "<all|es5|none>"

Espaciado entre corchetes

Imprimir espacios entre corchetes en literales de objeto.

Opciones válidas:

• true - Ejemplo: { foo: bar }.

• false - Ejemplo: {foo: bar}.

Default	CLI Override	API Override
true	--no-bracket-spacing	bracketSpacing: <bool>

Ajuste de objetos

Disponible por primera vez en v3.5.0

Configura cómo Prettier ajusta objetos literales cuando podrían caber en una línea o abarcar múltiples líneas.

Por defecto, Prettier formatea objetos como multi-línea si existe un salto de línea antes de la primera propiedad. Los autores pueden usar esta heurística para mejorar contextualmente la legibilidad, aunque tiene algunas desventajas. Consulta Objetos multi-línea.

Opciones válidas:

• "preserve" - Mantener como multi-línea si hay un salto de línea entre la llave de apertura y la primera propiedad.

• "collapse" - Ajustar a una sola línea cuando sea posible.

Default	CLI Override	API Override
"preserve"	--object-wrap <preserve|collapse>	objectWrap: "<preserve|collapse>"

Línea de corchetes

Coloca el > de elementos HTML multi-línea (HTML, JSX, Vue, Angular) al final de la última línea en lugar de estar solo en la siguiente línea (no aplica para elementos autocerrados).

Opciones válidas:

• true - Ejemplo:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

• false - Ejemplo:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

Default	CLI Override	API Override
false	--bracket-same-line	bracketSameLine: <bool>

[Obsoleto] Corchetes JSX

[Obsoleto] Corchetes JSX

Coloca el > de un elemento JSX multilínea al final de la última línea en lugar de dejarlo solo en la siguiente línea (no aplica para elementos autocerrados).

Opciones válidas:

• true - Ejemplo:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

• false - Ejemplo:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

Default	CLI Override	API Override
false	--jsx-bracket-same-line	jsxBracketSameLine: <bool>

Paréntesis en funciones flecha

Disponible por primera vez en v1.9.0, valor predeterminado cambiado de avoid a always en v2.0.0

Incluye paréntesis alrededor del único parámetro de una función flecha.

Opciones válidas:

• "always" - Incluir siempre paréntesis. Ejemplo: (x) => x

• "avoid" - Omitir paréntesis cuando sea posible. Ejemplo: x => x

Default	CLI Override	API Override
"always"	--arrow-parens <always|avoid>	arrowParens: "<always|avoid>"

A primera vista, omitir paréntesis puede parecer mejor por reducir ruido visual. Sin embargo, cuando Prettier elimina paréntesis, se dificulta añadir anotaciones de tipo, argumentos adicionales o valores predeterminados, así como realizar otros cambios. El uso consistente de paréntesis ofrece mejor experiencia de desarrollo al editar bases de código reales, justificando el valor predeterminado.

Rango

Formatear solo un segmento de archivo.

Estas opciones formatean código entre desplazamientos de caracteres (inclusivo/exclusivo respectivamente). El rango se extiende:

• Hacia atrás hasta el inicio de la primera línea que contiene la sentencia seleccionada.

• Hacia adelante hasta el final de la sentencia seleccionada.

Default	CLI Override	API Override
0	--range-start <int>	rangeStart: <int>
Infinity	--range-end <int>	rangeEnd: <int>

Analizador (Parser)

Especifica qué analizador usar.

Prettier infiere automáticamente el analizador desde la ruta del archivo, por lo que normalmente no necesitas cambiar este ajuste.

Tanto babel como flow admiten las mismas características JavaScript (incluyendo anotaciones Flow). Pueden diferir en casos límite, donde podrías probar flow en lugar de babel. Similar aplica para typescript y babel-ts. babel-ts podría admitir propuestas JavaScript no soportadas aún por TypeScript, pero es menos permisivo con código inválido y menos probado que el analizador typescript.

Opciones válidas:

• "babel" (mediante @babel/parser) Llamado "babylon" hasta v1.16.0

• "babel-flow" (igual que "babel" pero habilita explícitamente el análisis de Flow para evitar ambigüedades) Disponible por primera vez en v1.16.0

• "babel-ts" (similar a "typescript" pero utiliza Babel y su plugin de TypeScript) Disponible por primera vez en v2.0.0

• "flow" (mediante flow-parser)

• "typescript" (mediante @typescript-eslint/typescript-estree) Disponible por primera vez en v1.4.0

• "espree" (mediante espree) Disponible por primera vez en v2.2.0

• "meriyah" (mediante meriyah) Disponible por primera vez en v2.2.0

• "acorn" (mediante acorn) Disponible por primera vez en v2.6.0

• "css" (mediante postcss) Disponible por primera vez en v1.7.1

• "scss" (mediante postcss-scss) Disponible por primera vez en v1.7.1

• "less" (mediante postcss-less) Disponible por primera vez en v1.7.1

• "json" (mediante @babel/parser parseExpression) Disponible por primera vez en v1.5.0

• "json5" (mismo analizador que "json", pero genera salida en json5) Disponible por primera vez en v1.13.0

• "jsonc" (mismo analizador que "json", pero genera salida en "JSON con Comentarios") Disponible por primera vez en v3.2.0

• "json-stringify" (analiza como JSON.parse() pero con menos rigurosidad, y el espacio en blanco se asemeja a JSON.stringify()) Disponible desde la v1.13.0

• "graphql" (mediante graphql/language) Disponible por primera vez en v1.5.0

• "markdown" (mediante remark-parse) Disponible por primera vez en v1.8.0

• "mdx" (mediante remark-parse y @mdx-js/mdx) Disponible por primera vez en v1.15.0

• "html" (mediante angular-html-parser) Disponible por primera vez en 1.15.0

• "vue" (mismo analizador que "html", pero también formatea sintaxis específica de vue) Disponible por primera vez en 1.10.0

• "angular" (mismo analizador que "html", pero también formatea sintaxis específica de angular mediante angular-estree-parser) Disponible por primera vez en 1.15.0

• "lwc" (mismo analizador que "html", pero también formatea sintaxis específica de LWC para atributos de plantilla sin comillas) Disponible por primera vez en 1.17.0

• "mjml" (mismo analizador que "html", pero también da formato a la sintaxis específica de MJML) Disponible desde 3.6.0

• "yaml" (mediante yaml y yaml-unist-parser) Disponible desde 1.14.0

Default	CLI Override	API Override
None	--parser <string>	parser: "<string>"

Nota: el valor predeterminado era "babylon" hasta la versión 1.13.0.

Nota: la API de analizador personalizado se eliminó en la versión 3.0.0. Utiliza plugins en su lugar (cómo migrar).

Ruta del archivo

Especifica el nombre de archivo para inferir qué analizador usar.

Por ejemplo, lo siguiente usará el analizador CSS:

cat foo | prettier --stdin-filepath foo.css

Esta opción solo es útil en CLI y API. No tiene sentido usarla en un archivo de configuración.

Default	CLI Override	API Override
None	--stdin-filepath <string>	filepath: "<string>"

Requerir pragma

Disponible desde v1.7.0

Prettier puede limitarse a formatear solo archivos que contengan un comentario especial (pragma) al inicio del archivo. Es muy útil al migrar gradualmente bases de código grandes sin formato.

Un archivo con el siguiente comentario como primera línea será formateado al usar --require-pragma:

/**
 * @prettier
 */

o

/**
 * @format
 */

Default	CLI Override	API Override
false	--require-pragma	requirePragma: <bool>

Insertar pragma

Disponible desde v1.8.0

Prettier puede insertar un marcador @format especial al inicio de archivos, indicando que el archivo fue formateado con Prettier. Funciona bien junto con la opción --require-pragma. Si ya existe un docblock al inicio, esta opción agregará una nueva línea con el marcador @format.

Nota: "en tandem" no significa "al mismo tiempo". Cuando ambas opciones se usan simultáneamente, --require-pragma tiene prioridad e --insert-pragma se ignora. La idea es que durante una adopción incremental en grandes bases de código, los desarrolladores en transición usen --insert-pragma mientras el resto del equipo y herramientas automatizadas usen --require-pragma para procesar solo archivos ya migrados. Inspirado en la estrategia de adopción de Facebook.

Default	CLI Override	API Override
false	--insert-pragma	insertPragma: <bool>

Verificar pragma de ignorar

Disponible desde v3.6.0

Prettier permite que archivos individuales opten por no formatearse si contienen un comentario especial (pragma) al inicio.

Verificar estos marcadores implica un pequeño costo inicial durante el formateo, por lo que no está activado por defecto.

Un archivo con el siguiente comentario como primera línea no será formateado al usar --check-ignore-pragma:

/**
 * @noprettier
 */

o

/**
 * @noformat
 */

Default	CLI Override	API Override
false	--check-ignore-pragma	checkIgnorePragma: <bool>

Ajuste de texto en prosa

Disponible desde v1.8.2

Por defecto, Prettier no cambia el ajuste en texto Markdown porque algunos servicios usan renderizadores sensibles a saltos de línea (ej. comentarios de GitHub/BitBucket). Para ajustar la prosa al ancho de impresión, cambia esta opción a "always". Si prefieres bloques de prosa en una sola línea usando el ajuste suave del editor/visor, usa "never".

Opciones válidas:

• "always" - Ajusta la prosa si excede el ancho de impresión.

• "never" - Convierte cada bloque de prosa en una sola línea.

• "preserve" - No hacer nada, dejar la prosa tal cual. Primera disponibilidad en v1.9.0

Default	CLI Override	API Override
"preserve"	--prose-wrap <always|never|preserve>	proseWrap: "<always|never|preserve>"

Sensibilidad a espacios en blanco en HTML

Primera disponibilidad en v1.15.0. Primera disponibilidad para Handlebars en 2.3.0

Especifique la sensibilidad global a espacios en blanco para HTML, Vue, Angular y Handlebars. Consulte formateo sensible a espacios en blanco para más información.

Opciones válidas:

• "css" - Respetar el valor predeterminado de la propiedad CSS display. Para Handlebars se trata igual que strict.

• "strict" - Los espacios en blanco (o su ausencia) alrededor de todas las etiquetas se consideran significativos.

• "ignore" - Los espacios en blanco (o su ausencia) alrededor de todas las etiquetas se consideran insignificantes.

Default	CLI Override	API Override
"css"	--html-whitespace-sensitivity <css|strict|ignore>	htmlWhitespaceSensitivity: "<css|strict|ignore>"

Indentación de etiquetas script y style en archivos Vue

Primera disponibilidad en v1.19.0

Determina si se debe indentar el código dentro de las etiquetas <script> y <style> en archivos Vue.

Opciones válidas:

• false - No indentar etiquetas script y style en archivos Vue.

• true - Indentar etiquetas script y style en archivos Vue.

Default	CLI Override	API Override
false	--vue-indent-script-and-style	vueIndentScriptAndStyle: <bool>

Fin de línea

Primera disponibilidad en v1.15.0, valor predeterminado cambiado de auto a lf en v2.0.0

Por razones históricas, existen dos tipos comunes de finales de línea en archivos de texto: \n (o LF por Line Feed) y \r\n (o CRLF por Carriage Return + Line Feed). El primero es común en Linux y macOS, mientras que el segundo prevalece en Windows. Wikipedia explica detalles sobre esta distinción.

Cuando personas colaboran en un proyecto desde diferentes sistemas operativos, es fácil terminar con finales de línea mixtos en un repositorio git compartido. Los usuarios de Windows pueden cambiar accidentalmente finales de línea en archivos previamente confirmados de LF a CRLF, generando un git diff extenso y dificultando el análisis histórico línea por línea (git blame).

Para garantizar que todo su repositorio git contenga solo finales de línea estilo Linux en archivos cubiertos por Prettier:

1. Asegúrese que la opción endOfLine de Prettier esté en lf (valor predeterminado desde v2.0.0)

2. Configure un hook de pre-commit que ejecute Prettier

3. Configure Prettier en su pipeline de CI usando la bandera --check. Si usa Travis CI, establezca la opción autocrlf como input en .travis.yml.

4. Agregue * text=auto eol=lf al archivo .gitattributes del repositorio. Usuarios de Windows deberán re-clonar el repositorio después de este cambio para asegurar que git no convierta LF a CRLF durante el checkout.

Todos los editores de texto modernos en cualquier sistema operativo muestran correctamente finales de línea cuando se usa \n (LF). Sin embargo, versiones antiguas de Notepad para Windows comprimirán visualmente estas líneas al solo soportar \r\n (CRLF).

Opciones válidas:

• "lf" – Solo Line Feed (\n), común en Linux/macOS y dentro de repositorios git

• "crlf" - Caracteres de Retorno de Carro + Salto de Línea (\r\n), común en Windows

• "cr" - Solo carácter de Retorno de Carro (\r), usado muy raramente

• "auto" - Mantener los saltos de línea existentes (los valores mixtos en un archivo se normalizan según lo usado después de la primera línea)

Default	CLI Override	API Override
"lf"	--end-of-line <lf|crlf|cr|auto>	endOfLine: "<lf|crlf|cr|auto>"

Configurar end_of_line en un archivo .editorconfig establecerá el uso de saltos de línea en Prettier, a menos que se sobrescriba.

Formateo de Lenguajes Incrustados

Disponible desde v2.1.0

Controla si Prettier formatea código entrecomillado incrustado en el archivo.

Cuando Prettier identifica casos donde parece haber código que sabe formatear dentro de una cadena, como en plantillas etiquetadas de JavaScript con etiquetas como html o en bloques de código en Markdown, por defecto intentará formatear ese código.

A veces este comportamiento no es deseable, especialmente cuando no se pretendía que la cadena se interpretara como código. Esta opción permite cambiar entre el comportamiento predeterminado (auto) y desactivar completamente esta función (off).

Opciones válidas:

• "auto" – Formatear código incrustado si Prettier puede identificarlo automáticamente.

• "off" - Nunca formatear automáticamente código incrustado.

Default	CLI Override	API Override
"auto"	--embedded-language-formatting=<off|auto>	embeddedLanguageFormatting: "<off|auto>"

Un Atributo por Línea

Disponible desde v2.6.0

Impone un atributo por línea en HTML, Vue y JSX.

Opciones válidas:

• false - No imponer un atributo por línea.

• true - Imponer un atributo por línea.

Default	CLI Override	API Override
false	--single-attribute-per-line	singleAttributePerLine: <bool>