Prettier 3.0: ¡Hola, Módulos ECMAScript!

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 →

¡Nos complace anunciar el lanzamiento de la nueva versión de Prettier!

Hemos migrado al uso de Módulos ECMAScript para todo nuestro código fuente. Este cambio ha mejorado significativamente la experiencia de desarrollo para el equipo de Prettier. Pueden estar seguros de que al usar Prettier como biblioteca, también pueden utilizarlo como CommonJS.

Esta actualización incluye varios cambios importantes. Un ejemplo destacable es la modificación en el formato de markdown: ya no se insertan espacios entre caracteres latinos y caracteres chinos o japoneses. Queremos expresar nuestro agradecimiento a Tatsunori Uchino, quien ha realizado contribuciones significativas a Prettier durante el último año, especialmente con esta funcionalidad. Adicionalmente, el valor predeterminado de trailingComma ha cambiado a "all".

Otro cambio relevante en esta versión es la importante renovación de la interfaz de plugins. Prettier ahora admite plugins escritos con Módulos ECMAScript y parsers asíncronos. Si desarrollas plugins, por favor procede con precaución al actualizar. Puedes encontrar la guía de migración aquí. Como siempre, agradecemos reportes de errores y comentarios.

Este lanzamiento también incluye numerosas mejoras de formato y correcciones de errores.

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!

Destacados

Markdown

Mejora del manejo de espacios en blanco para chino, japonés y coreano (#11597 por @tats-u)

Dejar de insertar espacios entre caracteres chinos/japoneses y occidentales

Anteriormente, Prettier insertaba espacios entre caracteres chinos/japoneses y occidentales (letras y dígitos). Aunque algunos prefieren este estilo, no es estándar y de hecho contradice pautas oficiales. Consulta aquí para más detalles. Decidimos que no es responsabilidad de Prettier imponer un estilo particular en este caso, por lo que ya no se insertan espacios, manteniendo los existentes. Si necesitas una herramienta para aplicar estilos de espaciado, considera textlint-ja o lint-md (reglas space-round-alphabet y space-round-number).

La parte compleja de este cambio fueron los saltos de línea ambiguos entre caracteres chinos/japoneses y occidentales. Cuando Prettier elimina saltos de línea, debe decidir si simplemente eliminarlo o reemplazarlo con un espacio. Para esto, Prettier examina el texto circundante e infiere el estilo preferido.

<!-- Input -->
漢字
Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 2.8 -->
漢字 Alphabets ひらがな 12345 カタカナ 67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

<!-- Prettier 3.0 -->
漢字Alphabetsひらがな12345カタカナ67890

漢字 Alphabets ひらがな 12345 カタカナ 67890

Cumplir con reglas de salto de línea en chino y japonés

Existen reglas que prohíben ciertos caracteres al inicio o final de línea en chino y japonés. Por ejemplo, los puntos finales 。, ． y . no deben iniciar línea, mientras que （ no debe terminarla. Prettier ahora sigue estas reglas al ajustar texto, es decir, cuando proseWrap está configurado como always.

<!-- Input -->
HTCPCPのエラー418は、ティーポットにコーヒーを淹（い）れさせようとしたときに返されるステータスコードだ。

<!-- Prettier 2.8 with --prose-wrap always --print-width 8 -->
HTCPCP の
エラー
418 は、
ティーポ
ットにコ
ーヒーを
淹（い）
れさせよ
うとした
ときに返
されるス
テータス
コードだ
。

<!-- Prettier 3.0 with the same options -->
HTCPCPの
エラー
418は、
ティー
ポットに
コーヒー
を淹
（い）れ
させよう
としたと
きに返さ
れるス
テータス
コード
だ。

No romper líneas dentro de palabras coreanas

El coreano utiliza espacios para dividir palabras, y una división inapropiada puede cambiar el significado de una oración:

• 노래를 못해요.: No soy bueno cantando.

• 노래를 못 해요.: No puedo cantar (por alguna razón).

Anteriormente, cuando proseWrap estaba configurado como always, los caracteres Hangul consecutivos podían dividirse con un salto de línea, lo que luego podría convertirse en un espacio al editar y reformatear el documento. Esto ya no sucede. Ahora el texto coreano se ajusta como el inglés.

<!-- Input -->
노래를 못해요.

<!-- Prettier 2.8 with --prose-wrap always --print-width 9 -->
노래를 못
해요.

<!-- Prettier 2.8, subsequent reformat with --prose-wrap always --print-width 80 -->
노래를 못 해요.

<!-- Prettier 3.0 with --prose-wrap always --print-width 9 -->
노래를
못해요.

<!-- Prettier 3.0, subsequent reformat with --prose-wrap always --print-width 80 -->
노래를 못해요.

Un salto de línea entre letras/dígitos Hangul y no Hangul se convierte en un espacio cuando Prettier elimina los saltos. Considera este ejemplo:

3분 기다려 주지.

En esta oración, si rompes la línea entre "3" y "분", se insertará un espacio allí cuando el texto pierda los saltos.

API

Soporte para plugins con parsers asíncronos (#12748 por @fisker, #13211 por @thorn0 y @fisker)

La función parse en un plugin ahora puede devolver una Promise.

Para admitir parsers asíncronos en lenguajes incrustados, tuvimos que introducir un cambio importante en la API de plugins. Específicamente, el método embed de un printer ahora debe coincidir con una firma completamente nueva, incompatible con versiones anteriores. Si eres autor de plugins y tus plugins no definen embed, no tienes de qué preocuparte; de lo contrario, consulta la documentación para más detalles.

Además, el método preprocess de un printer ahora también puede devolver una promesa.

Soporte para archivos de configuración en ESM (#13130 por @fisker)

Ahora se admiten archivos de configuración en ESM, con los siguientes nombres compatibles:

• prettier.config.js (con {"type": "module"} en package.json)

• .prettierrc.js (igual que arriba)

• prettier.config.mjs

• .prettierrc.mjs.

export default {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

Los paquetes de configuración compartibles también pueden ser paquetes ESM puros.

Cambios importantes

JavaScript

Cambio del valor predeterminado de trailingComma a all (#11479 por @fisker, #13143 por @sosukesuzuki)

Desde la versión 2.0, habíamos cambiado el valor predeterminado de trailingComma a es5.

Internet Explorer, el último navegador que no permitía comas finales en llamadas de funciones, dejó de tener soporte el 15 de junio de 2022. En consecuencia, cambiamos el valor predeterminado de trailingComma a all.

Si aún prefiere el comportamiento anterior, configure Prettier con { "trailingComma": "es5" }.

Eliminar soporte para sintaxis Flow del analizador babel (#14314 por @fisker, @thorn0)

Por razones históricas, Prettier solía reconocer sintaxis Flow en archivos JS cuando la opción parser estaba configurada como babel, incluso si el archivo no incluía la pragma @flow. Este soporte era limitado y perjudicial para el rendimiento, por lo que se ha eliminado en Prettier 3.0. Prettier con el analizador babel aún cambia automáticamente a la sintaxis Flow si encuentra la pragma @flow o el archivo tiene extensión .js.flow.

Flow

Eliminar soporte para comentarios Flow (#13687, #13703 por @thorn0)

Al ser una especie de preprocesador, los comentarios Flow (también conocidos como tipos en comentarios) se procesan a nivel de token y no pueden representarse en un AST en el caso general. Flow construye el AST como si estos tokens especiales de comentario no existieran. Ejemplo:

/*:: if */ (x) + y;

Esto se analiza como if (x) +y; por Flow y como x + y; por analizadores JS que no soportan Flow.

Anteriormente, para algunos casos especiales, Prettier intentaba detectar que se usaba esta sintaxis y preservarla. Como intento de resolver un problema irresoluble, este soporte limitado era frágil y plagado de errores, por lo que se ha eliminado. Ahora si la opción parser está configurada como flow o babel-flow, los comentarios Flow se analizarán y reimprimirán como código normal. Si se usa un analizador que no soporta Flow, se tratarán como comentarios habituales.

// Input
let a /*: foo */ = b;

// Prettier 2.8
let a /*: foo */ = b;

// Prettier 3.0 with --parser flow
let a: foo = b;

// Prettier 3.0 with --parser babel
let a /*: foo */ = b;

Imprimir coma final en parámetros de tipo y tipos tupla cuando --trailing-comma=es5 (#14086, #14085 por @fisker)

// Input
type Foo =  [
  {
    from: string,
    to: string,
  }, // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType }, // <- 2
>;

// Prettier 2.8
type Foo = [
  {
    from: string,
    to: string,
  } // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType } // <- 2
>;

// Prettier 3.0
type Foo = [
  {
    from: string,
    to: string,
  }, // <- 1
];
type Foo = Promise<
  | { ok: true, bar: string, baz: SomeOtherLongType }
  | { ok: false, bar: SomeOtherLongType }, // <- 2
>;

CSS

Agregar el analizador puro css (#7933, #9092, #9093 por @fisker)

Anteriormente, cuando se pasaba --parser=css, Prettier intentaba analizar el contenido usando postcss-scss y postcss-less. Esto causaba confusión y dificultaba detectar errores de sintaxis. Ahora --parser=css funciona solo con sintaxis CSS estándar.

Si usa parser="css" para sus archivos .less/.scss, actualícelo al analizador correcto o elimine la opción parser para permitir que Prettier detecte automáticamente el analizador por extensión de archivo.

/* Input */
/* Less Syntax with `--parser=css` */
a {.bordered();}

/* Prettier 2.8 */
/* Less Syntax with `--parser=css` */
a {
  .bordered();
}

/* Prettier 3.0 */
SyntaxError: (postcss) CssSyntaxError Unknown word (2:4)
  1 | /* Less Syntax with `--parser=css` */
> 2 | a {.bordered();}

/* Input */
/* Scss Syntax with `--parser=css` */
::before {content: #{$foo}}

/* Prettier 2.8 */
/* Scss Syntax with `--parser=css` */
::before {
  content: #{$foo};
}

/* Prettier 3.0 */
SyntaxError: (postcss) CssSyntaxError Unknown word (2:22)
  1 | /* Scss Syntax with `--parser=css` */
> 2 | ::before {content: #{$foo}}

GraphQL

Eliminar soporte para sintaxis de "interfaces separadas por comas" (#12835 por @fisker)

# Input
type Type1 implements A, B {a: a}

# Prettier 2.8
type Type1 implements A, B {
  a: a
}

# Prettier 3.0
SyntaxError: Syntax Error: Unexpected Name "B". (1:26)
> 1 | type Type1 implements A, B {a: a}

API

Eliminación del soporte para Node.js 10 y 12 (#11830 by @fisker, #13118 by @sosukesuzuki)

La versión mínima requerida de Node.js es la v14

Cambio de las APIs públicas a asíncronas (#12574, #12788, #12790, #13265 by @fisker)

• prettier.format() devuelve Promise<string>

• prettier.formatWithCursor() devuelve Promise<{formatted: string, cursorOffset: number}>

• prettier.formatAST() devuelve Promise<string>

• prettier.check() devuelve Promise<boolean>

• prettier.getSupportInfo() devuelve Promise

• prettier.clearConfigCache() devuelve Promise<void>

• prettier.resolveConfig.sync ha sido eliminado

• prettier.resolveConfigFile.sync ha sido eliminado

• prettier.getFileInfo.sync ha sido eliminado

Si aún necesitas APIs síncronas, puedes probar @prettier/sync

Cambios en la estructura de archivos del paquete npm (#12740 by @fisker, #13530 by @fisker, #14570 by @fisker)

Cambios en la estructura de archivos:

• bin-prettier.js -> bin/prettier.cjs

• esm/standalone.mjs -> standalone.mjs

• esm/parser-angular.mjs -> plugins/angular.mjs

• parser-angular.js -> plugins/angular.js

• esm/parser-babel.mjs -> plugins/babel.mjs

• parser-babel.js -> plugins/babel.js

• esm/parser-espree.mjs -> plugins/acorn-and-espree.mjs

• parser-espree.js -> plugins/acorn.js
  el objeto global renombrado prettierPlugins.espree -> prettierPlugins.acorn

• esm/parser-flow.mjs -> plugins/flow.mjs

• parser-flow.js -> plugins/flow.js

• esm/parser-glimmer.mjs -> plugins/glimmer.mjs

• parser-glimmer.js -> plugins/glimmer.js

• esm/parser-graphql.mjs -> plugins/graphql.mjs

• parser-graphql.js -> plugins/graphql.js

• esm/parser-html.mjs -> plugins/html.mjs

• parser-html.js -> plugins/html.js

• esm/parser-markdown.mjs -> plugins/markdown.mjs

• parser-markdown.js -> plugins/markdown.js

• esm/parser-meriyah.mjs -> plugins/meriyah.mjs

• parser-meriyah.js -> plugins/meriyah.js

• esm/parser-postcss.mjs -> plugins/postcss.mjs

• parser-postcss.js -> plugins/postcss.js

• esm/parser-typescript.mjs -> plugins/typescript.mjs

• parser-typescript.js -> plugins/typescript.js

• esm/parser-yaml.mjs -> plugins/yaml.mjs

• parser-yaml.js -> plugins/yaml.js

Consulta la lista completa en https://unpkg.com/browse/prettier@3.0.0/.

Se ha añadido un nuevo plugin:

• plugins/estree.mjs (versión ESM)

• plugins/estree.js (versión UMD)

Si usas la versión standalone, este plugin debe cargarse al formatear JavaScript, TypeScript, Flow o JSON.

import { format } from "prettier/standalone";
- import prettierPluginBabel from "prettier/parser-babel";
+ import * as prettierPluginBabel from "prettier/plugins/babel";
+ import * as prettierPluginEstree from "prettier/plugins/estree";

console.log(
-  format(code, {
+  await format(code, {
      parser: "babel",
-     plugins: [prettierPluginBabel],
+     plugins: [prettierPluginBabel, prettierPluginEstree],
   })
);

- node ./node_modules/prettier/bin-prettier.js . --write
+ node ./node_modules/prettier/bin/prettier.cjs . --write

Soporte para plugins en ESM (#13201 por @fisker)

Desde la v3.0.0, cargamos los plugins mediante import() en lugar de require(), por lo que ahora pueden ser módulos ESM.

Si usas --plugin con rutas de directorio o archivos sin extensión, el plugin podría no cargarse correctamente.

- prettier . --plugin=path/to/my-plugin-directory
+ prettier . --plugin=path/to/my-plugin-directory/index.js

- prettier . --plugin=path/to/my-plugin-file
+ prettier . --plugin=path/to/my-plugin-file.js

Actualización de prettier.doc (#13203, #14456 por @fisker)

prettier.doc.builders.concat fue marcado como obsoleto en la v2.3.0, y ahora ha sido eliminado.

Las siguientes APIs nunca fueron documentadas y estaban destinadas únicamente para uso interno. Ahora se han eliminado:

• prettier.doc.utils.getDocParts

• prettier.doc.utils.propagateBreaks

• prettier.doc.utils.cleanDoc

• prettier.doc.utils.getDocType

• prettier.doc.debug.printDocToDebug

textToDoc elimina líneas duras finales (#13220 por @fisker)

Anteriormente, en todos los lenguajes principales, después de que el código embebido generaba el Doc, llamábamos a prettier.doc.utils.stripTrailingHardline() para eliminar las líneas duras finales.

Consideramos que hacer que textToDoc devuelva documentos sin líneas duras finales facilita la implementación de embed en los plugins.

Eliminado el soporte para la API de parser personalizado (#13250 por @fisker y @thorn0)

Antes de que existieran los plugins, Prettier tenía una característica similar pero más limitada llamada analizadores personalizados. Se eliminó en la versión 3.0.0 porque su funcionalidad era un subconjunto de lo que ofrecía la API de plugins. Si la usabas, consulta cómo migrar.

Se eliminó el segundo argumento parsers pasado a parsers.parse (#13268 por @fisker)

La firma de la función print del plugin cambió de

function parse(text: string, parsers: object, options: object): AST;

para

function parse(text: string, options: object): Promise<AST> | AST;

Se eliminó el segundo argumento parsers. Si aún necesitas otro analizador durante el proceso de análisis, puedes:

1. Importar el plugin manualmente (recomendado)

   import * as prettierPluginBabel from "prettier/plugins/babel";
   
   const myCustomPlugin = {
     parsers: {
       "my-custom-parser": {
         async parse(text) {
           const ast = await prettierPluginBabel.parsers.babel.parse(text);
           ast.program.body[0].expression.callee.name = "_";
           return ast;
         },
         astFormat: "estree",
       },
     },
   };

2. Obtener el analizador desde el argumento options

   function getParserFromOptions(options, parserName) {
     const parserOrParserInitFunction = options.plugins.find(
       (plugin) => plugin.parsers && Object.hasOwn(plugin.parsers, parserName),
     )?.parsers[parserName];
     return typeof parserOrParserInitFunction === "function"
       ? parserOrParserInitFunction()
       : parserOrParserInitFunction;
   }
   
   const myCustomPlugin = {
     parsers: {
       "my-custom-parser": {
         async parse(text, options) {
           const babelParser = await getParserFromOptions(options, "babel");
           const ast = await babelParser.parse(text);
           ast.program.body[0].expression.callee.name = "_";
           return ast;
         },
         astFormat: "estree",
       },
     },
   };

undefined y null no se pasan a la función print del plugin (#13397 por @fisker)

Si tu plugin usaba print para procesarlos, verifícalos en el nodo padre en su lugar.

function print(path, print) {
-  const value = path.getValue();
-  if (!value?.type) {
-    return String(value);
-  }

-  return path.map(print, "values");

+  return path.map(({node}) => (node?.type ? print() : String(node)), "values");
}

Permitir valores arbitrarios truthy para label en documentos (#13532 por @thorn0)

Se modificó el constructor de documentos label. Consulta la documentación.

getFileInfo() resuelve config por defecto (#14108 por @fisker)

options.resolveConfig ahora tiene true como valor predeterminado. Consulta la documentación.

Se eliminó la búsqueda automática de plugins (#14759 por @fisker)

La búsqueda automática de plugins no funcionaba bien con pnpm y causaba lentitud.

Los flags CLI --plugin-search-dir, --no-plugin-search y la opción API pluginSearchDirs se eliminaron en Prettier 3.0.

En su lugar, usa el flag --plugin o la opción plugins. Consulta la documentación.

CLI

Ignorar archivos ignorados por .gitignore por defecto (#14731 por @fisker)

Prettier ignora por defecto los archivos ignorados por .gitignore. Si deseas el comportamiento anterior (solo ignorar archivos ignorados por .prettierignore), utiliza

prettier . --write --ignore-path=.prettierignore

Otros cambios

JavaScript

Admitir el patrón de "función decorada" (#10714 por @thorn0)

En este caso, el desarrollador suele estar dispuesto a sacrificar la legibilidad de la firma de la función flecha para reducir la indentación en su cuerpo. Prettier ahora reconoce este patrón y mantiene la función flecha compacta incluso si la firma se extiende.

// Prettier 2.8
const Counter = decorator("my-counter")(
  (props: { initialCount?: number; label?: string }) => {
    // ...
  }
);

// Prettier 3.0
const Counter = decorator("my-counter")((props: {
  initialCount?: number;
  label?: string;
}) => {
  // ...
});

Corregir la posición del cursor en archivos con emojis (#13340 por @fisker)

$ cat test.js
const { formatWithCursor } = await import("prettier");
const code = "'😀😀😀😀'";
await formatWithCursor(code, {parser: "babel", cursorOffset: 9})

# Prettier 2.8
$ node test.js
{ formatted: '"😀😀😀😀";\n', cursorOffset: 5, comments: [] }

# Prettier 3.0
$ node test.js
{ formatted: '"😀😀😀😀";\n', cursorOffset: 9, comments: [] }

Corregir casos extremos de expansión del primer argumento en llamadas (#13341 por @thorn0)

// Input
export default whatever(function (a: {
  aaaaaaaaa: string;
  bbbbbbbbb: string;
  ccccccccc: string;
}) {
  return null;
}, "xyz");

call(
    function() {
        return 1;
    },
    $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? $var ?? 'test'
);

// Prettier 2.8
export default whatever(function (a: {
  aaaaaaaaa: string;
  bbbbbbbbb: string;
  ccccccccc: string;
}) {
  return null;
},
"xyz");

call(function () {
  return 1;
}, $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  $var ??
  "test");

// Prettier 3.0
export default whatever(function (a: {
  aaaaaaaaa: string,
  bbbbbbbbb: string,
  ccccccccc: string,
}) {
  return null;
}, "xyz");

call(
  function () {
    return 1;
  },
  $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    $var ??
    "test",
);

Corregir la indentación de cadenas de funciones flecha en argumentos de llamada y expresiones binarias (#13391 por @thorn0)

La motivación del formato elegido es clarificar cuántos argumentos tiene la llamada. Sin embargo, existía un error en la indentación de la primera firma en la cadena cuando esa firma no cabía en una línea.

// Prettier 2.8
askTrovenaBeenaDependsRowans(
  glimseGlyphsHazardNoopsTieTie,
  (
      averredBathersBoxroomBuggyNurl,
      anodyneCondosMalateOverateRetinol = "default"
    ) =>
    (annularCooeedSplicesWalksWayWay) =>
    (kochabCooieGameOnOboleUnweave) =>
      abugidicRomanocastorProvider,
  weaponizedStellatedOctahedron
);

// Prettier 3.0
askTrovenaBeenaDependsRowans(
  glimseGlyphsHazardNoopsTieTie,
  (
    averredBathersBoxroomBuggyNurl,
    anodyneCondosMalateOverateRetinol = "default",
  ) =>
    (annularCooeedSplicesWalksWayWay) =>
    (kochabCooieGameOnOboleUnweave) =>
      abugidicRomanocastorProvider,
  weaponizedStellatedOctahedron,
);

No romper la firma de expresiones de función compactas cuando los parámetros son identificadores sin tipos (#13410 por @thorn0)

// Prettier 2.8
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
  props,
  ref
) {
  return <ThemeUILink ref={ref} variant="default" {...props} />;
});

// Prettier 3.0
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  function Link(props, ref) {
    return <ThemeUILink ref={ref} variant="default" {...props} />;
  },
);

Corregir comentarios intercalados (#13438 por @thorn0)

// Input
function x() {
} // first
; // second

// Prettier 2.8
function x() {} // first // second

// Prettier 3.0
function x() {} // first
// second

Admitir comentarios JSDoc anidados (#13445 por @thorn0)

Este tipo de comentarios se usa para documentar funciones sobrecargadas (ver https://github.com/jsdoc/jsdoc/issues/1017).

// Input
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 *//**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

// Prettier 2.8
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 */ /**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

// Prettier 3.0
/**
 * @template T
 * @param {Type} type
 * @param {T} value
 * @return {Value}
 *//**
 * @param {Type} type
 * @return {Value}
 */
function value(type, value) {
  if (arguments.length === 2) {
    return new ConcreteValue(type, value);
  } else {
    return new Value(type);
  }
}

Corregir literales de plantilla inestables con lenguajes incrustados (#13532 por @thorn0)

Si un literal de plantilla con sintaxis incrustada es el único argumento de una llamada o el cuerpo de una función flecha y tiene espacios en blanco al inicio y final, no se imprimirá en una nueva línea.

// Input
foo(/* HTML */ ` <!-- bar1 --> bar <!-- bar2 --> `);

// Prettier 2.8 (first output)
foo(
  /* HTML */ `
    <!-- bar1 -->
    bar
    <!-- bar2 -->
  `
);

// Prettier 2.8 (second output)
foo(/* HTML */ `
  <!-- bar1 -->
  bar
  <!-- bar2 -->
`);

// Prettier 3.0 (first output)
foo(/* HTML */ `
  <!-- bar1 -->
  bar
  <!-- bar2 -->
`);

Corregir la indentación de expresiones en literales de plantilla (#13621 por @fisker)

// Input
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow"
              )}" button, type "${chalk.yellow.underline(
                version
              )}", hit the "${chalk.bgGreen("Run workflow")}" button.
`

// Prettier 2.8
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow"
              )}" button, type "${chalk.yellow.underline(
  version
)}", hit the "${chalk.bgGreen("Run workflow")}" button.
`;

// Prettier 3.0
`
              1. Go to ${chalk.green.underline(FOO_LINK)}
              2. Click "${chalk.green(
                "Run workflow",
              )}" button, type "${chalk.yellow.underline(
                version,
              )}", hit the "${chalk.bgGreen("Run workflow")}" button.
`;

Añadir soporte para la propuesta "Gestión Explícita de Recursos" (#13752 por @fisker, #14862 por @sosukesuzuki)

La propuesta en Etapa 2 "Gestión Explícita de Recursos" ahora es compatible mediante Babel 7.20.0 y 7.22.0.

También ten en cuenta nuestra política sobre sintaxis no estandarizada antes de usar esta característica de sintaxis propuesta con Prettier.

// Examples
{
  using obj = g(); // block-scoped declaration
  const r = obj.next();
} // calls finally blocks in `g`

{
  await using obj = g(); // block-scoped declaration
  const r = obj.next();
} // calls finally blocks in `g`

Agrega soporte para la propuesta "Import Reflection" (#13771 por @fisker)

La propuesta en Etapa 2 "Import Reflection" ahora es compatible mediante Babel 7.20.0. También ten en cuenta nuestra política sobre sintaxis no estandarizada antes de usar esta característica de sintaxis propuesta con Prettier.

// Examples
import module x from "<specifier>";

Corrige inconsistencia entre array/tupla y objeto/registro (#14065 por @fisker)

// Input
foo.a().b().c([n, o])
foo.a().b().c(#[n, o])
foo.a().b().c({n, o})
foo.a().b().c(#{n, o})

// Prettier 2.8
foo.a().b().c([n, o]);
foo
  .a()
  .b()
  .c(#[n, o]);
foo.a().b().c({ n, o });
foo
  .a()
  .b()
  .c(#{ n, o });

// Prettier 3.0
foo.a().b().c([n, o]);
foo.a().b().c(#[n, o]);
foo.a().b().c({ n, o });
foo.a().b().c(#{ n, o });

Corrige seguimiento del cursor dentro de texto JSX (#14163 por @fisker)

// Prettier 2.8
formatWithCursor(
  ["<>a", "  <div>hi</div>", "</>"].join("\n"),
  { cursorOffset: 3, parser: "babel" }
).cursorOffset;
// -> 2

// Prettier 3.0
(await formatWithCursor(
  ["<>a", "  <div>hi</div>", "</>"].join("\n"),
  { cursorOffset: 3, parser: "babel" }
)).cursorOffset;
// -> 6

Evita indentar innecesariamente expresiones await anidadas (#14192 por @thorn0)

Un refinamiento de este cambio en v2.3. A veces no es necesario forzar la indentación de expresiones await anidadas.

// Prettier 2.8
await Promise.all(
  (
    await readdir("src")
  ).map((path) => {
    import(`./${path}`);
  })
);

// Prettier 3.0
await Promise.all(
  (await readdir("src")).map((path) => {
    import(`./${path}`);
  }),
);

Soporte para propuesta de modificadores regexp (#14391 por @fisker)

Consulta Regular Expression Pattern Modifiers for ECMAScript.

Corrige paréntesis y puntos y coma faltantes alrededor de nodos con prettier-ignore (#14406 por @fisker)

// Input
async function request(url) {
  return (
    // prettier-ignore
    await fetch(url)
  ).json()
}

// Prettier 2.8
async function request(url) {
  return (
    // prettier-ignore
    await fetch(url).json()
  );
}

// Prettier 3.0
async function request(url) {
  return (
    // prettier-ignore
    (await fetch(url)).json()
  );
}

// Input
foo();
// prettier-ignore
[bar, baz].forEach(console.log)

// Prettier 2.8 (--no-semi)
foo()
// prettier-ignore
[bar, baz].forEach(console.log)

// Prettier 3.0
foo()
// prettier-ignore
;[bar, baz].forEach(console.log)

Elimina paréntesis innecesarios alrededor de expresiones de clase (#14409 por @fisker)

// Input
call(
  @dec class {}
);

// Prettier 2.8
call(
  (
    @dec
    class {}
  )
);

// Prettier 3.0
call(
  @dec
  class {},
);

Agrega paréntesis a la cabeza de ExpressionStatement en lugar de a toda la declaración (#14599 por @fisker)

// Input
const isArray = (object) => ({}).toString.call(foo) === "[object Array]";

// Prettier 2.8
const isArray = (object) => ({}.toString.call(foo) === "[object Array]");

// Prettier 3.0
const isArray = (object) => ({}).toString.call(foo) === "[object Array]";

Mejora consistencia entre funciones flecha currificadas y no currificadas (#14633 por @seiyab, @fisker)

// Input
Y(() => a ? b : c);
Y(() => () => a ? b : c);

// Prettier 2.8
Y(() => (a ? b : c));
Y(() => () => a ? b : c);

// Prettier 3.0
Y(() => (a ? b : c));
Y(() => () => (a ? b : c));

Corrige verificación de líneas vacías entre elementos de array (#14736 por @solarized-fox)

// Input
[
  (a = b),

  c // comment
]

// Prettier 2.8
[
  (a = b),
  c, // comment
];

// Prettier 3.0
[
  (a = b),

  c, // comment
];

Soporta comentarios finales en parámetros de función para todos los tipos de parámetros (#14835 por @pieterv)

Soporta comentarios finales en parámetros de función para tipos de nodos parámetro RestElement, ArrayPattern y ObjectPattern.

// Input
function Foo(
  ...bar
  // Trailing comment
) {}

// Prettier 2.8
function Foo(...bar) // Trailing comment
{}

// Prettier 3.0
function Foo(
  ...bar
  // Trailing comment
) {}

Soporte para Import Attributes (#14861, #14863 por @sosukesuzuki)

Soporte para la propuesta de Import Attributes.

import json from "./foo.json" with { type: "json" };
import("./foo.json", { with: { type: "json" } });

TypeScript

Corregir comentarios iniciales en tipos mapeados con readonly (#13427 por @thorn0, @sosukesuzuki)

// Input
type Type = {
  // comment
  readonly [key in Foo];
};

// Prettier 2.8
type Type = {
  readonly // comment
  [key in Foo];
};

// Prettier 3.0
type Type = {
  // comment
  readonly [key in Foo];
};

Formato consistente de comentarios colgantes para tipos tupla y arreglos (#13608 por @sosukesuzuki)

// Input
type Foo = [
   // comment
];
const bar = [
   // comment
];

// Prettier 2.8
type Foo = [// comment];
const bar = [
   // comment
];

// Prettier 3.0
type Foo = [
   // comment
];
const bar = [
   // comment
];

Corregir que el tipo unión debe imprimirse en variante multilínea cuando hay comentarios (#13860 por @PerfectPan)

// Input
type FooBar =
  | Number // this documents the first option
  | void // this documents the second option
  ;

// Prettier 2.8
type FooBar = Number | void; // this documents the first option // this documents the second option

// Prettier 3.0
type FooBar =
  | Number // this documents the first option
  | void; // this documents the second option

Mejorar impresión de comentarios y seguimiento de cursor alrededor de anotaciones de tipo (#14171 por @fisker)

// Input
let foo /* comment */ : number;

// Prettier 2.8
let foo: /* comment */ number;

// Prettier 3.0
<Same as input>

// Prettier 2.8
prettier.formatWithCursor("let foo: number", {
  cursorOffset: 7,
  parser: "babel",
}).cursorOffset;

// -> 9

// Prettier 3.0
(
  await prettier.formatWithCursor("let foo: number", {
    cursorOffset: 7,
    parser: "babel",
  })
).cursorOffset;

// -> 7

Saltar línea en propiedades de parámetros TypeScript (#14402 por @seiyab)

// Input
class MyClass {
  constructor(
    protected x: number,
    private y: string
  ) {}
}

// Prettier 2.8
class MyClass {
  constructor(protected x: number, private y: string) {}
}

// Prettier 3.0
class MyClass {
  constructor(
    protected x: number,
    private y: string,
  ) {}
}

Corregir formato de tipo unión con un solo tipo (#14654 por @fisker y @auvred)

// Input
type T =
  | (
    | {
        value: number
      }
    | {
        value: string
      }
  )

// Prettier 2.8
type T =
  |
      | {
          value: number;
        }
      | {
          value: string;
        };

// Prettier 3.0
type T =
  | {
      value: number;
    }
  | {
      value: string;
    };

Mejorar detección de nuevas líneas en tipos mapeados (#14659 por @fisker)

// Input
type A1 = { [A in B]:
T}
type A2 = {
  [A in B]:T}

// Prettier 2.8
type A1 = {
  [A in B]: T;
};
type A2 = {
  [A in B]: T;
};

// Prettier 3.0
type A1 = { [A in B]: T };
type A2 = {
  [A in B]: T;
};

Salto de línea después de extends en parámetros de tipo (#14672, #14858 por @sosukesuzuki)

// Input
export type OuterType2<
  LongerLongerLongerLongerInnerType extends LongerLongerLongerLongerLongerLongerLongerLongerOtherType
> = { a: 1 };

// Prettier 2.8
export type OuterType2<
  LongerLongerLongerLongerInnerType extends LongerLongerLongerLongerLongerLongerLongerLongerOtherType
> = { a: 1 };

// Prettier 3.0
export type OuterType2<
  LongerLongerLongerLongerInnerType extends
    LongerLongerLongerLongerLongerLongerLongerLongerOtherType,
> = { a: 1 };

Corregir coma requerida faltante en parámetros de tipo (#14688 por @fisker, @sosukesuzuki)

Anteriormente, solo imprimíamos la coma final cuando la extensión del archivo era .tsx, pero resulta que los archivos .mts y .cts también la requieren para el análisis.

// Input
export const unsafeCoerce = <T,>(u: unknown): T => u as T

// Prettier 2.8
export const unsafeCoerce = <T>(u: unknown): T => u as T;

// Prettier 3.0
export const unsafeCoerce = <T,>(u: unknown): T => u as T;

Conservar paréntesis alrededor de TSInstantiationExpression seguido de acceso a propiedad (#14701 por @morsko1)

// Input
(Array<string>).a;
(Array<string>)?.a;
(Array<string>)[a];
(Array<string>)?.[a];

// Prettier 2.8
Array<string>.a;
Array<string>?.a;
Array<string>[a];
Array<string>?.[a];

// Prettier 3.0
(Array<string>).a;
(Array<string>)?.a;
(Array<string>)[a];
(Array<string>)?.[a];

Corregir problema de doble punto y coma causado por // prettier-ignore en línea de firma de llamada (#14830 por @ot07)

// Input
type Foo = {
  (): void; // prettier-ignore
  second: string;
};

// Prettier 2.8
type Foo = {
  (): void;; // prettier-ignore
  second: string;
};

// Prettier 3.0
type Foo = {
  (): void; // prettier-ignore
  second: string;
};

Flow

Los tipos objeto en firmas declare function ahora saltan línea antes del tipo de retorno (#13396 por @thorn0)

Este comportamiento se ha unificado con el formato de TypeScript.

// Input
declare function bla (props: { a: boolean, b: string, c: number }): Promise<Array<foo>>

// Prettier 2.8
declare function bla(props: { a: boolean, b: string, c: number }): Promise<
  Array<foo>
>;

// Prettier 3.0
declare function bla(props: {
  a: boolean;
  b: string;
  c: number;
}): Promise<Array<foo>>;

Soporte para tipos condicionales e inferencia de tipos (#14573 por @SamChou19815)

// Input
type TestReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

// Prettier 2.8
// Does not parse

// Prettier 3.0
type TestReturnType<T extends (...args: any[]) => any> = T extends (
  ...args: any[]
) => infer R
  ? R
  : any;

Soporte para Tipos Mapeados y keyof (#14619 por @jbrown215)

// Input
type Mapped = { [key in keyof O]: number };

// Prettier 2.8
// Does not parse

// Prettier 3.0
type Mapped = { [key in keyof O]: number };

Soporte para guardias de tipo (#14767 por @panagosg7)

// Input
function isString (x: mixed): x is string { return typeof x === "string"; }

// Prettier 2.8
// Does not parse

// Prettier 3.0
function isString(x: mixed): x is string {
  return typeof x === 'string';
}

CSS

Mejorar el formato de propiedades personalizadas (#9209 por @fisker)

Gracias a PostCSS 8.0, ahora podemos manejar estos casos extremos en propiedades personalizadas.

/* Input */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a":1}}, [4]];
  --javascript: function(rule) { console.log(rule) };
}

@supports (--element(".minwidth", { "minWidth": 300 })) {
  [--self] {
    background: greenyellow;
  }
}

/* Prettier 2.8 */
SyntaxError: (postcss) CssSyntaxError Missed semicolon (3:20)
  1 | :root {
  2 |   --empty: ;
> 3 |   --JSON: [1, "2", {"three": {"a":1}}, [4]];
    |                    ^
  4 |   --javascript: function(rule) { console.log(rule) };
  5 | }
  6 |

/* Prettier 3.0 */
:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a": 1}}, [4]];
  --javascript: function(rule) {console.log(rule)};
}

@supports (--element(".minwidth", {"minWidth": 300})) {
  [--self] {
    background: greenyellow;
  }
}

Conservar coma final en la función var (#13402 por @sosukesuzuki)

/* Input */
.foo {
  --bar: var(--baz,);
}

/* Prettier 2.8 */
.foo {
  --bar: var(--baz);
}

/* Prettier 3.0 */
.foo {
  --bar: var(--baz,);
}

Corregir salto de línea en declaraciones CSS con coma (#14208 por @mvorisek)

// Input
.myclass {
  box-shadow:
    inset 0 0 10px #555,
    0 0 20px black;
}

// Prettier 2.8
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

// Prettier 3.0
.myclass {
  box-shadow:
    inset 0 0 10px #555,
    0 0 20px black;
}

Corregir URL que contienen coma (#14476 por @seiyab)

/* Input */
@font-face {
  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}

/* Prettier 2.8 */
@font-face {
  src: url(RobotoFlex-VariableFont_GRADXTRAYOPQYTASYTDEYTFIYTLCYTUCopszslntwdthwght.ttf);
}

/* Prettier 3.0 */
@font-face {
  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}

SCSS

Corregir formato de valores de cadena que incluyen escape \ (#13487 por @sosukesuzuki)

/* Input */
$description: "Lorem ipsum dolor sit \"amet\", consectetur adipiscing elit, " +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

/* Prettier 2.8 */
$description: 'Lorem ipsum dolor sit "amet", consectetur adipiscing elit, '+ "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

/* Prettier 3.0 */
$description: 'Lorem ipsum dolor sit "amet", consectetur adipiscing elit, ' +
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

Less

Corregir error de análisis en interpolaciones (#11343 por @fisker)

// Input
@{selector}-title{ @{prop}-size: @{color} }

// Prettier 2.8
SyntaxError: CssSyntaxError: Unknown word (1:20)
> 1 | @{selector}-title{ @{prop}-size: @{color} }

// Prettier 3.0
@{selector}-title {
  @{prop}-size: @{color};
}

Mantener código JavaScript en línea tal cual (#14109 por @fisker)

// Input
.calcPxMixin() {
  @functions: ~`(function() {
    const designWidth = 3840
    const actualWidth = 5760
    this.calcPx = function(_) {
      return _ * actualWidth / designWidth + 'px'
    }
  })()`;
}

// Prettier 2.8
.calcPxMixin() {
  @functions: ~`(
      function() {const designWidth = 3840 const actualWidth = 5760 this.calcPx =
        function(_) {return _ * actualWidth / designWidth + "px"}}
    )
    () `;
}

// Prettier 3.0
<Same as input>

HTML

Imprimir doctype de HTML5 en minúsculas (#7391 por @fisker)

<!-- Input -->
<!DocType html>
<html><head></head><body></body></html>

<!-- Prettier 2.8 -->
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

<!-- Prettier 3.0 -->
<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Actualizar angular-html-parser (#13578 por @thorn0)

El fork de Prettier del analizador HTML de Angular se ha sincronizado con el repositorio principal.

Dar formato a <script> dentro de SVG (#14400 por @fisker)

<!-- Input -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
  const element = document.getElementById('foo')
   if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
</svg>

<!-- Prettier 2.8 -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <script>
    document.addEventListener( 'DOMContentLoaded', () => { const element =
    document.getElementById('foo') if (element) { element.fillStyle =
    'currentColor' } });
  </script>
</svg>

<!-- Prettier 3.0 -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const element = document.getElementById("foo");
      if (element) {
        element.fillStyle = "currentColor";
      }
    });
  </script>
</svg>

Reconocer elemento <search> (#14615 por @fisker)

La especificación HTML añadió el elemento <search>.

<!-- Input -->
<SEARCH title="Website">
  ...
</SEARCH>

<!-- Prettier 2.8 -->
<SEARCH title="Website"> ... </SEARCH>

<!-- Prettier 3.0 -->
<search title="Website">...</search>

Vue

Ignorar htmlWhitespaceSensitivity al formatear bloques raíz de Vue SFC (#14401 por @fisker)

<!-- Input -->
<docs lang=unknown></docs><docs lang=unknown></docs><!-- display: inline --><docs lang=unknown></docs><docs lang=unknown style="display: inline"></docs>

<!-- Prettier 2.8 (--html-whitespace-sensitivity=strict) -->
<docs lang="unknown"></docs>><docs lang="unknown"></docs
><!-- display: inline --><docs lang="unknown"></docs
>><docs lang="unknown" style="display: inline"></docs>

<!-- Prettier 3.0 -->
<docs lang="unknown"></docs>
<docs lang="unknown"></docs>
<!-- display: inline -->
<docs lang="unknown"></docs>
<docs lang="unknown" style="display: inline"></docs>

Dar formato a expresiones TypeScript en enlaces de atributos (#14506 por @seiyab)

<!-- Input -->
<script lang="ts"></script>
<template>
  <comp :foo="   (a:string)=>1"/>
</template>

<!-- Prettier 2.8 -->
<script lang="ts"></script>
<template>
  <comp :foo="   (a:string)=>1" />
</template>

<!-- Prettier 3.0 -->
<script lang="ts"></script>
<template>
  <comp :foo="(a: string) => 1" />
</template>

Corregir detección de filtros en Vue (#14542 por @fisker)

<!-- Input -->
<template>
  <div>
    {{
      fn(
        bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
      )
      | filter1
      | filter2
      | filter3
      | filter4
    }}
  </div>
</template>

<!-- Prettier 2.8 -->
<template>
  <div>
    {{
      fn(
        bitwise
          | or
          | operator
          | a_long_long_long_long_long_long_long_long_long_long_variable
      )
        | filter1
        | filter2
        | filter3
        | filter4
    }}
  </div>
</template>

<!-- Prettier 3.0 -->
<template>
  <div>
    {{
      fn(
        bitwise |
          or |
          operator |
          a_long_long_long_long_long_long_long_long_long_long_variable,
      )
        | filter1
        | filter2
        | filter3
        | filter4
    }}
  </div>
</template>

Evitar punto y coma inicial innecesario (#14557 por @fisker)

<!-- Input -->
<template>
  <div @click="[foo, bar].forEach(fn => void fn())"></div>
</template>

<!-- Prettier 2.8 (With `--no-semi` option) -->
<template>
  <div @click=";[foo, bar].forEach((fn) => void fn())"></div>
</template>

<!-- Prettier 3.0 -->
<template>
  <div @click="[foo, bar].forEach((fn) => void fn())"></div>
</template>

Dar formato a expresiones TS cuando cualquier etiqueta script tenga lang="ts" (#14587 por @seiyab)

<!-- Input -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.8 -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 3.0 -->
<script></script>
<script setup lang="ts"></script>
<template>
  {{ (x as number).toFixed(2) }}
</template>

Angular

Actualizar @angular/compiler a v14 (#13609 por @fisker)

• Soporte para objetos abreviados

• Eliminar soporte para expresiones entre comillas

<!-- Input -->
<div [input]="{a, b   :   2 }"></div>

<!-- Prettier 2.8 -->
Error: Cannot find front char /:/ from index 0 in "{a, b   :   2 }"

<!-- Prettier 3.0 -->
<div [input]="{ a, b: 2 }"></div>

<!-- Input -->
<a [href]="http://google.com">Click me</a>

<!-- Prettier 2.8 -->
<a [href]="http:  //google.com">Click me</a>

<!-- Prettier 3.0 -->
<a [href]="http://google.com">Click me</a>

Corregir paréntesis con operador de coalescencia nula (#14216 por @thron0)

<!-- Input -->
<img [src]="(x && y) ?? z" />

<!-- Prettier 2.8 -->
<img [src]="x && y ?? z" />

<!-- Prettier 3.0 -->
<img [src]="(x && y) ?? z" />

Soporte para encadenamiento opcional computado (#14658 por @fisker)

<!-- Input -->
<img [src]="   a?.[0]" />

<!-- Prettier 2.8 -->
<img [src]="   a?.[0]" />

<!-- Prettier 3.0 -->
<img [src]="a?.[0]" />

Eliminar espacio después del nombre de pipe (#14961 por @waterplea)

Introdujimos un nuevo formato para pipes en Prettier 2.8, pero no fue aceptado por la comunidad.

Por lo tanto, estamos introduciendo un nuevo formato que refleja los comentarios de la comunidad.

Para más información sobre la discusión, consulta https://github.com/prettier/prettier/issues/13887.

<!-- Input -->
<my-component
  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
></my-component>

<!-- Prettier 2.8 -->
<my-component
  [value]="value | transform : arg1 : arg2 | format : arg3 : arg4"
></my-component>

<!-- Prettier 3.0 -->
<my-component
  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
></my-component>

Markdown

Preservar múltiples espacios en código en línea (#13590 por @kachkaev y @thorn0)

Anteriormente, múltiples caracteres de espacio en blanco en código en línea se colapsaban en un solo espacio. Esto ya no ocurre para cumplir con la especificación CommonMark.

<!-- Input -->
`   foo   bar   baz   `

<!-- Prettier 2.8 -->
` foo bar baz `

<!-- Prettier 3.0 -->
`   foo   bar   baz   `

API

Agregar archivos .d.ts (#14212 por @sosukesuzuki, @fisker)

Se agregaron archivos de definición de tipos requeridos para usar la API JavaScript de Prettier desde TypeScript. Esto elimina la necesidad de que los usuarios instalen @types/prettier.

Actualizar prettier.util (#14317, #14320 por @fisker)

• Se agregó prettier.util.getNextNonSpaceNonCommentCharacter

• Se cambió prettier.util.getNextNonSpaceNonCommentCharacter

  La firma cambió de

  function getNextNonSpaceNonCommentCharacterIndex<N>(
    text: string,
    node: N,
    locEnd: (node: N) => number,
  ): number | false;

  a

  function getNextNonSpaceNonCommentCharacterIndex(
    text: string,
    startIndex: number,
  ): number | false;

• Se cambió prettier.util.isPreviousLineEmpty

  La firma cambió de

  function isPreviousLineEmpty<N>(
    text: string,
    node: N,
    locStart: (node: N) => number,
  ): boolean;

  a

  function isPreviousLineEmpty(text: string, startIndex: number): boolean;

• Cambiado prettier.util.isNextLineEmpty

  La firma cambió de

  function isNextLineEmpty<N>(
    text: string,
    node: N,
    locEnd: (node: N) => number,
  ): boolean;

  a

  function isNextLineEmpty(text: string, startIndex: number): boolean;

• Obsoleto prettier.util.isNextLineEmptyAfterIndex

  Usa prettier.util.isNextLineEmpty en su lugar.

Consulta la documentación para más detalles.

Corrección de caché de carga de plugins (#14576 por @fisker)

Las instancias de plugins se memorizaban incorrectamente. Consulta este issue para más detalles.

Dejar de formatear código desconocido con el parser babel (#14718 por @fisker)

await prettier.format("foo")

// Prettier 2.8
No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
'foo;\n'

// Prettier 3.0
UndefinedParserError: No parser and no file path given, couldn't infer a parser.

CLI

Mensaje de error actualizado para ser más informativo (#11369 por @webark)

Se actualizó el mensaje "¿Olvidaste ejecutar Prettier?" a "Ejecuta Prettier con --write para corregir".

Esto mantiene el espíritu del mensaje original, pero es menos probable que se malinterprete ya que es un mensaje más formal en lugar de tener un tono algo familiar.

Cambiar --loglevel a --log-level (#13204 por @sosukesuzuki)

# Prettier 2.8
prettier test.js --loglevel=debug

# Prettier 3.0
prettier test.js --log-level=debug

Aceptar múltiples --ignore-path (#14332 por @fisker)

Ahora puedes pasar múltiples rutas con --ignore-path.

prettier . --ignore-path=.prettier-ignore --ignore-path=.eslintignore

Mostrar rutas en formato posix en Windows (#14333 por @fisker)

Alineado con otras herramientas como ESLint y Stylelint.

// Prettier 2.8
Checking formatting...
[warn] src\utilities\create-get-visitor-keys.js
[warn] src\utilities\unexpected-node-error.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

// Prettier 3.0
Checking formatting...
[warn] src/utilities/create-get-visitor-keys.js
[warn] src/utilities/unexpected-node-error.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

No expandir globs mediante enlaces simbólicos (#14627 por @andersk)

Prettier ya no sigue enlaces simbólicos al expandir argumentos de línea de comandos. Esto evita problemas en escenarios comunes como enlaces simbólicos fuera del árbol de fuentes, enlaces a archivos ignorados y ciclos de enlaces simbólicos.

Añadir salto de línea después de rutas con errores (#14788 por @sosukesuzuki)

Anteriormente solo la opción --write imprimía un salto de línea antes del error, pero ahora otras opciones y la ausencia de opciones también lo hacen.

# Input
prettier ./test.js

# Prettier 2.8
test.js[error] test.js: SyntaxError: Unexpected token: ')' (1:6)
[error] > 1 | 1 (+-) hoge
[error]     |      ^

# Prettier 3.0
test.js
[error] test.js: SyntaxError: Unexpected token: ')' (1:6)
[error] > 1 | 1 (+-) hoge
[error]     |

Limpiar nombre de archivo antes de mostrar código de archivo ignorado (#14794 por @fisker)

# Input
echo test.js > .prettierignore
echo code > test.js
prettier ./test.js

# Prettier 2.8
test.jscode

# Prettier 3.0
code