Prettier 3.5: ¡Nueva opción objectWrap, opción experimentalOperatorPosition y soporte para archivos de configuración de TS!

9 de febrero de 2025 · 9 min de lectura

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 →

Esta versión incluye muchas correcciones de errores y las siguientes nuevas características:

Soporte para la nueva opción objectWrap
Soporte para la nueva opción experimental experimentalOperatorPosition
Soporte para archivos de configuración de TypeScript

Consulta cada sección para más detalles.

Si aprecias Prettier y deseas apoyar nuestro trabajo, considera patrocinarnos directamente a través de nuestro OpenCollective o patrocinando los proyectos de los que dependemos, como typescript-eslint, remark y Babel. ¡Gracias por tu continuo apoyo!

Por qué añadimos dos nuevas opciones

Esta versión introduce dos nuevas opciones. Si estás familiarizado con la Filosofía de Opciones de Prettier, quizás te preguntes: "¿Por qué añadir nuevas opciones?" Ten la seguridad de que no son opciones típicas ni violan nuestra filosofía.

Como su nombre indica, experimentalOperatorPosition es experimental. Tenemos una política para opciones experimentales, lo que significa que eventualmente se eliminará. En el futuro, el nuevo comportamiento podría convertirse en el predeterminado o esta opción podría eliminarse por completo. Si has seguido Prettier durante un tiempo, recordarás que una vez añadimos una opción experimentalTernaries, y esto sigue el mismo enfoque.

objectWrap es un caso especial. Durante mucho tiempo, hemos lidiado con cómo imprimir objetos multilínea. Aún no hemos encontrado la solución perfecta, por lo que recurrimos a un enfoque semimanual. Para más detalles, consulta nuestra Fundamentación. El comportamiento actual no es ideal porque el resultado final puede variar según cómo el usuario escriba su código. Para ofrecer un formato más consistente, decidimos introducir la opción objectWrap.

Aunque esta versión incluye dos nuevas opciones, queremos enfatizar que no hemos olvidado la filosofía de opciones de Prettier. Estas opciones abordan desafíos de formato específicos y de larga data sin comprometer nuestra filosofía.

Destacados

JavaScript

Añadir opción experimental para romper líneas antes de operadores binarios (#7111 por @btmills)

Esto se implementa mediante la bandera --experimental-operator-position <start|end>.

Cuando las expresiones binarias rompen líneas, start imprime los operadores al inicio de nuevas líneas. Colocar operadores binarios al principio de líneas partidas puede hacerlos más prominentes y más fáciles de escanear.

// Input
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;

// `experimentalOperatorPosition: end` (default behavior)
var a =
  Math.random() * (yRange * (1 - minVerticalFraction)) +
  minVerticalFraction * yRange -
  offset;

// `experimentalOperatorPosition: start`
var a =
  Math.random() * (yRange * (1 - minVerticalFraction))
  + minVerticalFraction * yRange
  - offset;

Implementar opción de configuración `objectWrap` (#16163 por @pauldraper, @sosukesuzuki)

Históricamente, Prettier ha realizado un formato semimanual de literales de objetos JavaScript multilínea.

Es decir, un objeto se mantiene en múltiples líneas si hay un salto de línea antes de la primera propiedad, incluso si podría caber en una sola línea. Consulta Objetos multilínea para más detalles.

Mientras este comportamiento sigue siendo el predeterminado, --object-wrap=collapse ignora los espacios en blanco al formatear literales de objeto.

// Input
const obj1 = {
  name1: "value1", name2: "value2",
};

const obj2 = { name1: "value1",
  name2: "value2",
};

// Prettier 3.4
const obj1 = {
  name1: "value1",
  name2: "value2",
};

const obj2 = { name1: "value1", name2: "value2" };

// Prettier 3.5 (with `--object-wrapping=collapse`)
const obj1 = { name1: "value1", name2: "value2" };

const obj2 = { name1: "value1", name2: "value2" };

API

Agregado soporte para archivos de configuración de TypeScript (#16828 por @itsyoboieltr & @fisker)

Se añadieron nuevos formatos de archivos de configuración:

.prettierrc.ts
.prettierrc.mts
.prettierrc.cts
prettier.config.ts
prettier.config.mts
prettier.config.cts

Nota:

Actualmente el soporte para TypeScript en Node.js es experimental.

Para que funcionen los archivos de configuración TypeScript, se requiere Node.js>=22.6.0 y Node.js v22 necesita --experimental-strip-types.

Puedes ejecutar Prettier con

node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write

NODE_OPTIONS="--experimental-strip-types" prettier . --write

Otros cargadores de TS también deberían funcionar, pero no están probados; úsalos bajo tu propio riesgo.

Por ejemplo, con tsx, puedes

node --import tsx node_modules/prettier/bin/prettier.cjs . --write

tsx node_modules/prettier/bin/prettier.cjs . --write

Otros cambios

JavaScript

Mejora de casos extremos en ajuste de palabras en JSX (#16700 por @seiyab)

// Input
br_triggers_expression_break =
  <div><br />
  text text text text text text text text text text text {this.props.type} </div>

// Prettier 3.4
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text {
      this.props.type
    }{" "}
  </div>
);

// Prettier 3.5
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text{" "}
    {this.props.type}{" "}
  </div>
);

Flow

Soporte para parámetros de tipo `const` en Flow (#16947 por @gkz)

function f<const T>(): void {}

// Prettier 3.4
// Parse error

// Prettier 3.5
function f<const T>(): void {}

CSS

Saltos antes de comas que separan valores (#16907 por @seiyab)

/* Input */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

/* Prettier 3.4 */
a {
  background-image: linear-gradient(
      to bottom,
      rgb(255 255 0 / 50%),
      rgb(0 0 255 / 50%)
    ),
    url("catfront.png");
}

/* Prettier 3.5 */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

Vue

Soporte para la forma abreviada `.prop` (#16920 por @fisker)

.foo es la forma abreviada de v-bind:foo.prop. Consulta la directiva incorporada v-bind para más detalles.

<!-- Input -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.4 -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.5 -->
<template>
  <button .disabled="a && b">Click!</button>
</template>

Angular

Mejora de saltos de línea dentro de bloques ICU (#16922 por @fisker)

<!-- Input -->
<span>The author is {gender, select, male {male} female {female} other {other}}</span>
<span>The author is <span>male consectetur adipiscing elit, sed do eiusmod</span></span>

<!-- Prettier 3.4 -->
<span
  >The author is {gender, select, male {male} female {female} other {other}
}</span>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

<!-- Prettier 3.5 -->
<span
  >The author is
  {gender, select, male {male} female {female} other {other}}</span
>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

Corrección de línea nueva adicional dentro de bloques ICU (#16922 por @fisker)

<!-- Input -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

<!-- Prettier 3.4 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
}

<!-- Prettier 3.5 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

Ember / Handlebars

Manejo de etiquetas `<style>` y `<pre>` en Handlebars/Glimmer (#15087 por @jurgenwerk)

{{!-- Input --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red { color: red }
  .blue {
    color: red
  }
</style>

{{!-- Prettier 3.4 --}}
<pre>
  cd ~ ls echo "hey"
</pre>
<style>
  .red { color: red } .blue { color: blue }
</style>

{{!-- Prettier 3.5 --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red {
    color: red;
  }
  .blue {
    color: red;
  }
</style>

Markdown

Uso de U+FF5E como puntuación CJK (#16832 por @tats-u)

El carácter U+FF5E TILDE DE ANCHO COMPLETO (～) se usa comúnmente como sustituto de U+301C GUIÓN ONDULADO (〜) en Windows para japonés. Los caracteres alfanuméricos de ancho completo se usan menos en documentos Markdown en comparación con otros tipos de documentos (por ejemplo, documentos de Microsoft Office), y la tilde de ancho completo es mucho menos común para este propósito que los caracteres alfanuméricos y dígitos de ancho completo. Por lo tanto, podemos asumir que la tilde de ancho completo en documentos Markdown en entornos reales es una forma alternativa del guión ondulado y parte de la puntuación CJK.

<!-- Input (--prose-wrap=never) -->
a 字 a 字 a 字
60～
100点
60〜
100点

<!-- Prettier 3.4 -->
a 字 a 字 a 字 60～ 100点 60〜10点


<!-- Prettier 3.5 -->
a 字 a 字 a 字 60～10点 60〜100点

El primer símbolo entre 60 y 100 en el ejemplo anterior es U+FF5E TILDE DE ANCHO COMPLETO (～) y el segundo es U+301C GUIÓN ONDULADO (〜).

API

Soporte para leer configuración desde `package.json` con sintaxis JSONC en Bun (#17041 por @fisker)

Bun 1.2 agregó soporte JSONC en package.json. En versiones anteriores de Prettier, se ignoraba la configuración de prettier allí. A partir de Prettier 3.5, podemos leer la configuración de prettier sin errores.

Sin embargo, como es una característica específica de Bun y no está soportada por Node.js, solo funciona al ejecutar Prettier con Bun.

Nota importante: Prettier usa el parser json-stringify por defecto para formatear archivos package.json. Para soportar archivos package.json con sintaxis JSONC, debes anular la opción del parser.

export default {
  overrides: [
    {
      files: ["package.json"],
      options: {
        parser: "jsonc",
      },
    },
  ],
};

Si no puedes actualizar Prettier por algún motivo, aún puedes usar sintaxis JSONC en package.json, pero no coloques tu configuración de prettier allí. Deberás usar otro archivo de configuración.

Varios

Usar punto de entrada ESM para `require(ESM)` (#16958 por @tats-u)

información

Este cambio fue revertido en v3.5.2, consulta #17139 para más detalles.

Node.js 22.12 o posterior puede (experimentalmente) cargar módulos ESM con la función require sin flags de tiempo de ejecución. Este cambio permite que require cargue Prettier sin el punto de entrada CommonJS, utilizando principalmente la capacidad de importar el punto de entrada ESM.

La función para cargar módulos ES con require no es completamente estable, pero puede usarse sin ExperimentalWarning a partir de Node 22.13.

Por qué añadimos dos nuevas opciones​

Destacados​

JavaScript​

Añadir opción experimental para romper líneas antes de operadores binarios (#7111 por @btmills)​

Implementar opción de configuración objectWrap (#16163 por @pauldraper, @sosukesuzuki)​

API​

Agregado soporte para archivos de configuración de TypeScript (#16828 por @itsyoboieltr & @fisker)​

Otros cambios​

JavaScript​

Mejora de casos extremos en ajuste de palabras en JSX (#16700 por @seiyab)​

Flow​

Soporte para parámetros de tipo const en Flow (#16947 por @gkz)​

CSS​

Saltos antes de comas que separan valores (#16907 por @seiyab)​

Vue​

Soporte para la forma abreviada .prop (#16920 por @fisker)​

Angular​

Mejora de saltos de línea dentro de bloques ICU (#16922 por @fisker)​

Corrección de línea nueva adicional dentro de bloques ICU (#16922 por @fisker)​

Ember / Handlebars​

Manejo de etiquetas <style> y <pre> en Handlebars/Glimmer (#15087 por @jurgenwerk)​

Markdown​

Uso de U+FF5E como puntuación CJK (#16832 por @tats-u)​

API​

Soporte para leer configuración desde package.json con sintaxis JSONC en Bun (#17041 por @fisker)​

Varios​

Usar punto de entrada ESM para require(ESM) (#16958 por @tats-u)​

Por qué añadimos dos nuevas opciones

Destacados

JavaScript

Añadir opción experimental para romper líneas antes de operadores binarios (#7111 por @btmills)

Implementar opción de configuración `objectWrap` (#16163 por @pauldraper, @sosukesuzuki)

API

Agregado soporte para archivos de configuración de TypeScript (#16828 por @itsyoboieltr & @fisker)

Otros cambios

JavaScript

Mejora de casos extremos en ajuste de palabras en JSX (#16700 por @seiyab)

Flow

Soporte para parámetros de tipo `const` en Flow (#16947 por @gkz)

CSS

Saltos antes de comas que separan valores (#16907 por @seiyab)

Vue

Soporte para la forma abreviada `.prop` (#16920 por @fisker)

Angular

Mejora de saltos de línea dentro de bloques ICU (#16922 por @fisker)

Corrección de línea nueva adicional dentro de bloques ICU (#16922 por @fisker)

Ember / Handlebars

Manejo de etiquetas `<style>` y `<pre>` en Handlebars/Glimmer (#15087 por @jurgenwerk)

Markdown

Uso de U+FF5E como puntuación CJK (#16832 por @tats-u)

API

Soporte para leer configuración desde `package.json` con sintaxis JSONC en Bun (#17041 por @fisker)

Varios

Usar punto de entrada ESM para `require(ESM)` (#16958 por @tats-u)