Prettier 2.0 «2020»

21 de marzo de 2020 · 38 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 →

Mejores valores predeterminados, una CLI mejorada y heurísticas más inteligentes. Ah, y soporte para TypeScript 3.8.

Tras una larga y cuidadosa consideración, decidimos cambiar los valores predeterminados para las opciones trailingComma, arrowParens y endOfLine. Hicimos la CLI más intuitiva. Y finalmente eliminamos el soporte para versiones de Node anteriores a la 10, que se habían convertido en una gran carga de mantenimiento y un obstáculo para los colaboradores. Lee los detalles a continuación.

Destacados

JavaScript

Heurística mejorada para ruptura de cadenas de métodos (#6685 por @mmkal)

Anteriormente, cualquier cadena de llamadas a métodos de tres o más elementos se rompía automáticamente en múltiples líneas. La nueva heurística se basa en la complejidad de los argumentos de las llamadas, no simplemente en la longitud de la cadena. Ahora, si las llamadas encadenadas tienen argumentos difíciles de entender de un vistazo (por ejemplo, funciones u objetos profundamente anidados), la cadena se rompe. De lo contrario, se permite que permanezcan en una sola línea. Consulta los issues anteriores #3197, #4765, #1565 y #4125 para contexto y ejemplos.

Para obtener los mejores resultados, asegúrate de que el valor de la opción printWidth no sea demasiado alto.

// Prettier 1.19
if (
  foo
    .one()
    .two()
    .three() ===
  bar
    .four()
    .five()
    .six()
) {
  // ...
}

// Prettier 2.0
if (foo.one().two().three() === bar.four().five().six()) {
  // ...
}

Solución definitiva para conversiones de tipo estilo Closure (#7791 por @thorn0, #7011 por @evilebottnawi)

Prettier ha intentado no corromper estas aserciones de tipo JSDoc desde la v1.6.0, con resultados variables. A medida que la verificación de tipos basada en JSDoc se vuelve más común, hemos recibido nuevos reportes de errores sobre esta sintaxis. Los errores eran complejos porque los paréntesis requeridos alrededor de la expresión no formaban parte del AST, por lo que Prettier no tenía una buena forma de detectar su presencia.

Finalmente, utilizamos la opción createParenthesizedExpressions del parser de Babel para representar paréntesis en el AST mediante nodos no estándar. Esto ayudó a corregir todos los errores reportados.

En consecuencia, Prettier no reconocerá las conversiones de tipo JSDoc si se usan los parsers flow o typescript, lo cual es razonable ya que esta sintaxis tiene poco sentido en archivos Flow y TypeScript.

// Input
const nestedAssertions = /** @type {MyType} */
  (/** @type {unknown} */
      (x));

// Prettier 1.19
const nestedAssertions /** @type {MyType} */ /** @type {unknown} */ = x;

// Prettier 2.0
const nestedAssertions = /** @type {MyType} */ (/** @type {unknown} */ (x));

Documentación de referencia para esta sintaxis: Closure Compiler, TypeScript (con --checkJs).

TypeScript

TypeScript 3.8 (#7631 por @thorn0, #7764 por @sosukesuzuki, #7804 por @sosukesuzuki)

Prettier ahora admite la nueva sintaxis añadida en TypeScript 3.8:

CLI

Verificar si los globs pasados son nombres de archivos existentes antes de tratarlos como globs (#7587 por @fisker)

Dado que los nombres de archivo en Linux pueden contener casi cualquier carácter, cadenas como foo*.js y [bar].css son nombres de archivo válidos. Anteriormente, si el usuario necesitaba formatear un archivo llamado [bar].css, debía usar sintaxis de escape para globs: prettier "\[bar].css" (que no funciona en Windows, donde las barras invertidas se tratan como separadores de ruta) o prettier "[[]bar].css". Por esto, casos de uso importantes fallaban. Por ejemplo, lint-staged pasa rutas absolutas y no conoce la sintaxis de escape. Ahora, cuando la CLI de Prettier recibe un glob, primero intenta resolverlo como un nombre de archivo literal.

Expandir directorios, incluyendo `.` (#7660 por @thorn0)

Finalmente es posible ejecutar prettier --write . para formatear todos los archivos compatibles en el directorio actual y sus subdirectorios. Los nombres de directorio pueden mezclarse con nombres de archivo y patrones glob (ej. prettier src "test/*.spec.js" foo.js).

También cambió el orden de procesamiento de archivos. Anteriormente, todos los archivos se ordenaban alfabéticamente antes del formateo. Ahora, su orden corresponde al de las rutas especificadas. Para cada ruta, la lista de archivos resueltos se ordena, pero ya no se realiza una clasificación completa de la lista combinada resultante.

También hay cambios en cómo la CLI de Prettier reporta errores cuando los patrones no coinciden con archivos. Anteriormente, la CLI imprimía un error "No matching files" si no encontraba ningún archivo para todos los patrones juntos. En Prettier 2.0, la CLI también imprime estos errores para patrones individuales.

Cambios importantes

API

Corregir coincidencia de patrones en sobreescrituras de configuración para incluir archivos punto (#5813 por @chrisblossom)

Anteriormente, las sobreescrituras de configuración no se aplicaban a archivos con nombre que comenzara con punto.

Abandonar soporte para versiones de Node anteriores a 10 (#6908 por @fisker)

La versión mínima requerida de Node ahora es 10.13.0. Para nuestros colaboradores, esto significa que ya no es necesario hacer malabarismos para que las pruebas pasen en Node 4.

Cambiar valor predeterminado para `trailingComma` a `es5` (#6963 por @fisker)

Antes de la versión 2.0, Prettier evitaba las comas finales por defecto siempre que era posible. Esto hacía que el JavaScript resultante fuera compatible con entornos ahora muy antiguos como IE8, pero implicaba algunas oportunidades perdidas.

Prettier ha incluido una opción para configurar las comas finales desde sus primeros días, y una iniciativa para cambiar el valor por defecto ha estado presente durante más de tres años. Finalmente, el valor por defecto pasa a ser es5 en lugar de none en Prettier v2.0.

Si aún prefieres el comportamiento anterior, configura Prettier con { "trailingComma": "none" }. Existe la posibilidad de que el valor por defecto cambie a all (lo que significa aún más comas finales) en una futura versión mayor de Prettier a medida que el ecosistema de JavaScript madure aún más.

API de plugins: cambios en `prettier.util` (#6993 por @fisker)

prettier.util.mapDoc ha sido eliminada.
Usa prettier.doc.utils.mapDoc en su lugar.
prettier.util.isNextLineEmpty ha sido actualizada.
Usa isNextLineEmpty(text, node, locEnd) en lugar de isNextLineEmpty(text, node, options).
prettier.util.isPreviousLineEmpty ha sido actualizada.
Usa isPreviousLineEmpty(text, node, locStart) en lugar de isPreviousLineEmpty(text, node, options).
prettier.util.getNextNonSpaceNonCommentCharacterIndex ha sido actualizada.
Usa getNextNonSpaceNonCommentCharacterIndex(text, node, locEnd) en lugar de getNextNonSpaceNonCommentCharacterIndex(text, node, options).

Cambio del valor por defecto de `arrowParens` a `always` (#7430 por @kachkaev)

Desde la versión 1.9, Prettier ha tenido una opción para envolver siempre los argumentos de las funciones flecha con paréntesis. En la versión 2.0, este comportamiento se ha convertido en el predeterminado.

// Input
const fn = (x) => y => x + y;

// Prettier 1.19
const fn = x => y => x + y;

// Prettier 2.0
const fn = (x) => (y) => x + y;

A primera vista, evitar los paréntesis en el ejemplo aislado anterior puede parecer mejor porque reduce el ruido visual. Sin embargo, cuando Prettier elimina los paréntesis, se dificulta añadir anotaciones de tipo, argumentos adicionales, valores predeterminados o una variedad de otras cosas. El uso consistente de paréntesis proporciona mejor experiencia de desarrollo al editar bases de código reales, lo que justifica el cambio.

Te recomendamos usar el nuevo valor predeterminado, pero si aún prefieres el comportamiento anterior, configura Prettier con { "arrowParens": "avoid" }.

Cambio del valor por defecto de `endOfLine` a `lf` (#7435 por @kachkaev)

Las primeras versiones de Prettier formateaban todos los archivos con el estilo *nix de saltos de línea (\n, también conocido como LF). Este comportamiento cambió en #472, lo que permitió preservar los saltos de línea de Windows (\r\n, también conocido como CRLF).

Desde la versión 1.15 de Prettier, el estilo de saltos de línea ha sido configurable mediante la opción endOfLine. El valor predeterminado se estableció en auto por compatibilidad con versiones anteriores, lo que significaba que Prettier preservaba cualquier estilo de saltos de línea presente en un archivo dado.

Esto implicaba que Prettier convertía saltos de línea mixtos dentro de un archivo al estilo encontrado al final de la primera línea. Sin embargo, los saltos de línea en archivos separados podían permanecer inconsistentes. Además, colaboradores en diferentes sistemas operativos podían cambiar accidentalmente los saltos de línea en archivos previamente confirmados, y Prettier lo permitía. Esto generaba un git diff extenso y dificultaba la exploración del historial línea por línea de un archivo (git blame).

Se recomienda utilizar el nuevo valor predeterminado para endOfLine, que ahora es lf. También vale la pena consultar la documentación de la opción para garantizar que tu repositorio esté configurado correctamente. Esto ayudará a evitar una mezcla de estilos de saltos de línea en el repositorio y un git blame afectado. Si aún prefieres el comportamiento anterior, configura Prettier con { "endOfLine": "auto" }.

Si usas Travis CI, ten en cuenta la opción autocrlf en .travis.yml.

Almacenamiento en caché de resultados de búsqueda de plugins (#7485 por @fisker)

Anteriormente, Prettier buscaba plugins en el sistema de archivos en cada llamada a prettier.format. Ahora, los resultados de búsqueda se almacenan en caché. La caché puede borrarse llamando a prettier.clearConfigCache().

Eliminación de opciones y valores de opciones obsoletos (#6993, #7511, #7533, #7535, #7536 por @fisker)

Opciones:
- useFlowParser (--flow-parser en CLI) ha estado obsoleto desde v0.0.10.
Valores de opciones:
- parser: babylon (renombrado a babel en v1.16.0), postcss (renombrado a css en v1.7.1), typescript-eslint (alias antiguo para typescript)
- proseWrap: true (renombrado a always en v1.9.0), false (renombrado a never en v1.9.0)
- trailingComma: true (renombrado a es5 en v0.19.0), false (renombrado a none en v0.19.0)

Eliminación del parámetro `version` en `prettier.getSupportInfo` (#7620 por @thorn0)

Desde Prettier 1.8.0, era posible pasar un número de versión a prettier.getSupportInfo para obtener información sobre los lenguajes, opciones, etc. compatibles con versiones anteriores. Esta API interesante pero aparentemente poco útil generaba constantes problemas de mantenimiento y ha sido eliminada en Prettier 2.0.0.

Otros cambios

JavaScript

Añadir siempre un espacio después de la palabra clave `function` (#3903 por @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 por @bakkot)

Anteriormente, se añadía un espacio después de la palabra clave function en declaraciones de funciones, pero no en expresiones de función. Ahora, para mayor coherencia, siempre se añade un espacio después de function. La única excepción son las declaraciones de generadores donde function* se trata como una palabra completa.

// Prettier 1.19
const identity = function(value) {
  return value;
};
function identity(value) {
  return value;
}
const f = function<T>(value: T) {};
const g = function*() {};

// Prettier 2.0
const identity = function (value) {
  return value;
};
function identity(value) {
  return value;
}
const f = function <T>(value: T) {};
const g = function* () {};

Corregir formato inestable en declaraciones etiquetadas con comentarios (#6984 por @clement26695)

// Input
loop1:
//test
const i = 3;

// Prettier 1.19 (first output)
loop1: //test
const i = 3;

// Prettier 1.19 (second output)
//test
loop1: const i = 3;

// Prettier 2.0 (first and second outputs)
//test
loop1: const i = 3;

Corregir formato de expresiones lógicas, binarias y de secuencia en literales de plantilla (#7010 por @evilebottnawi)

// Input
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo || bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo | bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo, bar)}`;

// Prettier 1.19
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo ||
  bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo |
  bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo,
bar)}`;

// Prettier 2.0
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  foo || bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  foo | bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  (foo, bar)
}`;

Corregir formato inestable en expresiones lógicas (#7026 por @thorn0)

// Input
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  (askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3);

// Prettier 1.19 (first output)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3;

// Prettier 1.19 (second output)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 ||
  glimseGlyphsHazardNoopsTieTie === 3;

// Prettier 2.0 (first and second outputs)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 ||
  glimseGlyphsHazardNoopsTieTie === 3;

Formatear `throw` como `return` (#7070 por @sosukesuzuki)

// Input
function foo() {
  throw this.hasPlugin("dynamicImports") && this.lookahead().type === tt.parenLeft.right;
}

// Prettier 1.19
function foo() {
  throw this.hasPlugin("dynamicImports") &&
    this.lookahead().type === tt.parenLeft.right;
}


// Prettier 2.0
function foo() {
  throw (
    this.hasPlugin("dynamicImports") &&
    this.lookahead().type === tt.parenLeft.right
  );
}

Corregir sangría en ternarios anidados dentro de condiciones de otros ternarios (#7087 por @thorn0)

// Input
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20) ?
kochabCooieGameOnOboleUnweave : annularCooeedSplicesWalksWayWay)
? anodyneCondosMalateOverateRetinol : averredBathersBoxroomBuggyNurl;

// Prettier 1.19
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
? kochabCooieGameOnOboleUnweave
: annularCooeedSplicesWalksWayWay)
  ? anodyneCondosMalateOverateRetinol
  : averredBathersBoxroomBuggyNurl;

// Prettier 2.0
const foo = (
  number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
    ? kochabCooieGameOnOboleUnweave
    : annularCooeedSplicesWalksWayWay
)
  ? anodyneCondosMalateOverateRetinol
  : averredBathersBoxroomBuggyNurl;

Ajustar lógica de composición de funciones para decoradores (#7138 por @brainkim)

Dado que los decoradores modifican la línea siguiente, dividir los argumentos de una llamada a decorador en múltiples líneas puede oscurecer la relación entre el decorador y su objetivo, produciendo código menos legible. Por lo tanto, la lógica de composición de funciones introducida en #6033 se ha modificado para excluir llamadas a decoradores.

// Input
export class Item {
  @OneToOne(() => Thing, x => x.item)
  thing!: Thing;
}

// Prettier 1.19
export class Item {
  @OneToOne(
    () => Thing,
    x => x.item,
  )
  thing!: Thing;
}

// Prettier 2.0
export class Item {
  @OneToOne(() => Thing, x => x.item)
  thing!: Thing;
}

Corregir ubicación de punto y coma en declaración `return` vacía con comentario (#7140 por @sosukesuzuki)

// Input
return // comment
;

// Prettier 1.19
return // comment;

// Prettier 2.0
return; // comment

Respetar importancia de espacios en blanco en literales de plantilla HTML (#7208 por @saschanaz)

Prettier solía añadir saltos de línea en cada cadena de plantilla HTML, lo que podía generar espacios en blanco inesperados en HTML renderizado. Esto ya no ocurre a menos que se proporcione la opción --html-whitespace-sensitivity ignore.

// Input
html`<div>`;
html`  <span>TEXT</span>  `;

// Prettier 1.19
html`
  <div></div>
`;
html`
  <span>TEXT</span>
`;

// Prettier 2.0
html`<div></div>`;
html` <span>TEXT</span> `;

Eliminar paréntesis innecesarios al usar yield con JSX (#7367 por @cola119)

// Input
function* f() {
  yield <div>generator</div>;
}

// Prettier 1.19
function* f() {
  yield (<div>generator</div>);
}

// Prettier 2.0
function* f() {
  yield <div>generator</div>;
}

Conservar paréntesis en expresiones con coma en declaraciones de exportación predeterminadas (#7491 por @fisker)

Omitir estos paréntesis hace que el código no sea válido.

// Input
export default (1, 2);

// Prettier 1.19
export default 1, 2;

// Prettier 2.0
export default (1, 2);

Corrección de casos extremos con paréntesis en el encadenamiento opcional (#7500 por @thorn0)

// Input
(foo?.bar)();
new (foo?.bar)();

// Prettier 1.19
foo?.bar();
new foo?.bar();

// Prettier 2.0
(foo?.bar)();
new (foo?.bar)();

No envolver `undefined` entre paréntesis en expresiones condicionales dentro de JSX (#7504 por @fisker)

Anteriormente, se añadían paréntesis alrededor de cualquier expresión excepto null. Ahora, undefined también está excluido.

// Input
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
undefined
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
null

// Prettier 1.19
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : (
  undefined
);
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : null;

// Prettier 2.0
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : undefined;
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : null;

Mantener la posición de comentarios en asignaciones/variables (#7709 por @sosukesuzuki)

// Input
const foo = /* comments */
  bar;

// Prettier 1.19
const foo /* comments */ = bar;

// Prettier 2.0
const foo = /* comments */ bar;

TypeScript

Babel como analizador alternativo para TypeScript (#6400 por @JounQin & @thorn0)

Se ha añadido un nuevo valor para la opción parser: babel-ts, que utiliza el plugin de TypeScript de Babel. El analizador babel-ts admite características de JavaScript aún no soportadas por TypeScript (propuestas de ECMAScript, ej. métodos y accesores privados), pero es menos tolerante en la recuperación de errores y menos probado en producción que el analizador typescript. Aunque el plugin de TypeScript de Babel es bastante maduro, los AST generados por ambos analizadores no son 100% compatibles. Intentamos considerar estas diferencias, pero es probable que aún existan casos donde el código se formatee de forma distinta o incluso incorrecta. Pedimos su ayuda para identificar estos casos. Si los detectan, por favor reporten incidencias. A largo plazo, esto ayudará a unificar el formato AST en futuras versiones de los analizadores, contribuyendo así a un ecosistema de analizadores JavaScript más sólido.

Corregir formato de tipos complejos en anotaciones de retorno de funciones flecha (#6901 por @sosukesuzuki)

// Input
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<
  Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};

// Prettier 1.19
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<Collections.Parts.PrintedCircuitBoardAssembly["attributes"] &
  undefined> => {};

// Prettier 2.0
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<
  Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};

Imprimir tipos exclusivos de JSDoc tal cual en lugar de generar errores (#7020 por @thorn0)

Otra corrección relacionada con la recuperación de errores. Será útil para quienes migran de Flow a TypeScript.

// Input
function fromFlow(arg: ?Maybe) {}

// Prettier 1.19
Error: unknown type: "TSJSDocNullableType"

// Prettier 2.0
function fromFlow(arg: ?Maybe) {}

No imprimir comas finales después de elementos rest en tuplas (#7075 por @thorn0)

Un elemento rest siempre es el último en un tipo tupla. No puede haber nada después.
Aunque TS acepta esta coma, Babel no la analiza
En parámetros de funciones y desestructuración de arrays, esta coma sería un error de sintaxis. Mantenerla en tuplas es inconsistente.

// Input
type ValidateArgs = [
	{
		[key: string]: any;
	},
	string,
	...string[],
];

// Prettier 1.19
type ValidateArgs = [
  {
    [key: string]: any;
  },
  string,
  ...string[],
];

// Prettier 2.0
type ValidateArgs = [
  {
    [key: string]: any;
  },
  string,
  ...string[]
];

Corregir indentación de funciones flecha en declaraciones de variables seguidas de comentarios (#7094 por @sosukesuzuki)

Esto podía ocurrir en código escrito sin punto y coma si la declaración posterior a la variable usaba un punto y coma inicial para evitar problemas de ASI.

// Input
const foo = () => {
  return
}

// foo
;[1,2,3].forEach(bar)

// Prettier 1.19
const foo = () => {
    return;
  };

  // foo
[1, 2, 3].forEach(bar);

// Prettier 2.0
const foo = () => {
  return;
};

// foo
[1, 2, 3].forEach(bar);

Corregir impresión de comentarios en tipos de función (#7104 por @thorn0)

// Input
type f1 = (
  currentRequest: {a: number},
  // TODO this is a very very very very long comment that makes it go > 80 columns
) => number;

// Prettier 1.19
type f1 = (currentRequest: {
  a: number;
}) => // TODO this is a very very very very long comment that makes it go > 80 columns
number;

// Prettier 2.0
type f1 = (
  currentRequest: { a: number }
  // TODO this is a very very very very long comment that makes it go > 80 columns
) => number;

Corrección del formato de comentarios en nodos tipo función (#7144 por @armano2)

// Input
interface foo1 {
  bar1/* foo */ (/* baz */) // bat
  bar2/* foo */ ? /* bar */ (/* baz */) /* bat */;
  bar3/* foo */ (/* baz */) /* bat */
  bar4/* foo */ ? /* bar */ (bar: /* baz */ string): /* bat */ string;
  /* foo */ (/* bar */): /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new /* bar */  (a: /* baz */ string): /* bat */ string
  /* foo */ new /* bar */ (/* baz */): /* bat */ string
}

type foo7 = /* foo */ (/* bar */) /* baz */ => void
type foo8 = /* foo */ (a: /* bar */ string) /* baz */ => void
let foo9: new /* foo */ (/* bar */) /* baz */ => string;
let foo10: new /* foo */ (a: /* bar */ string) /* baz */ => string;

// Prettier 1.19
interface foo1 {
  bar1 /* foo */ /* baz */(); // bat
  bar2 /* foo */ /* bar */ /* baz */ /* bat */?();
  bar3 /* foo */ /* baz */() /* bat */;
  bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
  /* foo */ (): /* bar */ /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
  /* foo */ new (): /* bar */ /* baz */ /* bat */ string;
}

type foo7 = /* foo */ () => /* bar */ /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new () => /* foo */ /* bar */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;

// Prettier 2.0
interface foo1 {
  bar1 /* foo */(/* baz */); // bat
  bar2 /* foo */ /* bar */?(/* baz */) /* bat */;
  bar3 /* foo */(/* baz */) /* bat */;
  bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
  /* foo */ (/* bar */): /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
  /* foo */ new (/* baz */): /* bar */ /* bat */ string;
}

type foo7 = /* foo */ (/* bar */) => /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new (/* bar */) => /* foo */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;

// Input
abstract class Test {
  abstract foo12 /* foo */ (a: /* bar */ string): /* baz */ void
  abstract foo13 /* foo */ (/* bar */) /* baz */
}

// Prettier 1.19
Error: Comment "foo" was not printed. Please report this error!

// Prettier 2.0
abstract class Test {
  abstract foo12 /* foo */(a: /* bar */ string): /* baz */ void;
  abstract foo13 /* foo */(/* bar */); /* baz */
}

Corrección de impresión en tipos mapeados cuando se omite el tipo plantilla (#7221 por @cola119)

// Input
type A = { [key in B] };

// Prettier 1.19
type A = { [key in B]: };

// Prettier 2.0
type A = { [key in B] };

Corrección de casos extremos en firmas de índices (#7228 por @cola119)

Aunque las firmas de índices sin anotaciones de tipo o con múltiples parámetros no son TypeScript válido, el parser de TypeScript soporta esta sintaxis. En línea con los esfuerzos previos de recuperación de errores, Prettier ahora garantiza que su salida siga siendo parseable en estos casos. Versiones anteriores producían código imposible de analizar.

// Input
type A = { [key: string] };
type B = { [a: string, b: string]: string; };

// Prettier 1.19
type A = { [key: string]:  };
type B = { [a: stringb: string]: string };

// Prettier 2.0
type A = { [key: string] };
type B = { [a: string, b: string]: string };

Corrección de impresión de comentarios en parámetros de tipo vacíos (#7729 por @sosukesuzuki)

// Input
const a: T</* comment */> = 1;

// Prettier 1.19
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.0
const a: T</* comment */> = 1;

Flow

Añadido soporte para `symbol` (#7472 por @fisker)

Se introdujo un nuevo tipo de nodo AST en flow@0.114.0, ahora está reconocido.

// Input
const x: symbol = Symbol();

// Prettier after updating Flow, but without this fix
Error: unknown type: "SymbolTypeAnnotation"

// Prettier 2.0
const x: symbol = Symbol();

Añadido soporte para decoradores (#7482 por @fisker)

// Input
/* @flow */
@decorator4
class Foo {
  @decorator1
  method1() {}

  @decorator2
  @decorator3
  method2() {}
}

// Prettier 1.19
SyntaxError: Unexpected token `@`, expected the token `class` (2:1)

// Prettier 2.0
/* @flow */
@decorator4
class Foo {
  @decorator1
  method1() {}

  @decorator2
  @decorator3
  method2() {}
}

Corrección de declaraciones de campos privados en clases (#7484 por @fisker)

// Input
class Foo {
  #privateProp: number;
}

// Prettier 1.19
class Foo {
  privateProp: number;
}

// Prettier 2.0
class Foo {
  #privateProp: number;
}

CSS

Evitar minúsculas en nombres de elementos en selectores CSS (#6947 por @ark120202)

Anteriormente, Prettier preservaba las mayúsculas/minúsculas en nombres de elementos desconocidos, pero convertía a minúsculas los nombres de elementos HTML. Esto causaba problemas cuando CSS se aplicaba a documentos sensibles a mayúsculas/minúsculas y existían elementos con nombres idénticos a HTML, como ocurre en NativeScript. Ahora Prettier siempre preserva las mayúsculas/minúsculas originales.

/* Input */
Label {
}

/* Prettier 1.19 */
label {
}

/* Prettier 2.0 */
Label {
}

SCSS

Evitar coma adicional tras el último comentario en mapas (#6918 por @fisker)

Anteriormente, cuando trailingComma estaba configurado como es5, se añadía una coma extra tras el último comentario en mapas SCSS.

// Input
$my-map: (
  'foo': 1, // Comment
  'bar': 2, // Comment
);

// Prettier 1.19
$my-map: (
  "foo": 1,
  // Comment
    "bar": 2,
  // Comment,
);

// Prettier 2.0
$my-map: (
  "foo": 1,
  // Comment
    "bar": 2,
  // Comment
);

Corrección de espacios en concatenación SCSS (#7211 por @sasurau4)

// Input
a {
  background-image: url($test-path + 'static/test.jpg');
}

// Prettier 1.19
a {
  background-image: url($test-path+"static/test.jpg");
}

// Prettier 2.0
a {
  background-image: url($test-path + "static/test.jpg");
}

Less

Corrección de múltiples problemas persistentes mediante actualización de `postcss-less` (#6981 por @fisker, #7021 por @evilebottnawi, @thorn0)

Ahora se admite each (#5653).
!important se estaba moviendo fuera de los parámetros de llamadas a mixins (#3544).
Los comentarios en conjuntos de reglas pasados a llamadas de mixins causaban punto y coma duplicados (#3096).
::before se rompía en parámetros de llamadas a mixins (#5791).

HTML

Los comentarios en etiquetas `pre` causaban formato incorrecto en la etiqueta de cierre siguiente (#5959 por @selvazhagan)

<!-- Input -->
<details>
<pre>
    <!-- TEST -->
  </pre></details>

<!-- Prettier 1.19 -->
<details>
  <pre>
    <!-- TEST -->
  </pre></details</details
>

<!-- Prettier 2.0 -->
<details>
  <pre>
    <!-- TEST -->
  </pre>
</details>

No tratar los dos puntos como delimitadores de prefijos de namespace en nombres de etiquetas (#7273 por @fisker)

En HTML5, los dos puntos no tienen significado especial en nombres de etiquetas. Anteriormente, Prettier los trataba al estilo XML como delimitadores de prefijos de namespace, pero ya no. En la práctica, esto significa que las etiquetas cuyos ancestros tienen dos puntos en sus nombres ahora se tratan como etiquetas HTML normales: si son etiquetas estándar conocidas, sus nombres pueden ponerse en minúsculas y se hacen suposiciones sobre su sensibilidad a espacios en blanco; los elementos personalizados con nombres desconocidos para Prettier conservan el uso de mayúsculas/minúsculas y, si --html-whitespace-sensitivity está configurado en css, se tratan como elementos en línea.

<!-- Input -->
<with:colon>
<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
<DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div><div> block </div>
<pre> pre pr
e</pre>
<textarea> pre-wrap pr
e-wrap </textarea>
<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
</with:colon>

<!-- Prettier 1.19 -->
<with:colon>
  <div>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
  </div>
  <DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div
  ><div> block </div>
  <pre> pre pr e</pre>
  <textarea> pre-wrap pr e-wrap </textarea>
  <span>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
  </span>
  <span> inline </span><span> inline </span> <span> inline </span
  ><span> inline </span>
</with:colon>

<!-- Prettier 2.0 -->
<with:colon>
  <div>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
  </div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <pre>
 pre pr
e</pre
  >
  <textarea>
 pre-wrap pr
e-wrap </textarea
  >
  <span>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
  </span>
  <span> inline </span><span> inline </span> <span> inline </span
  ><span> inline </span>
</with:colon>

No generar errores en HTML roto (#7293 por @fisker)

<!-- Input -->
<div><span>
<

<!-- Prettier 1.19 -->
TypeError: Cannot read property 'start' of null

<!-- Prettier 2.0 -->
<div><span> < </span></div>

Corregir error de análisis en srcset (#7295 por @fisker)

<!-- Input -->
<img

srcset="
             /media/examples/surfer-240-200.jpg
">

<!-- Prettier 1.19 -->
Error: Mixed descriptor in srcset is not supported

<!-- Prettier 2.0 -->
<img srcset="/media/examples/surfer-240-200.jpg" />

Corregir error al encontrar etiquetas no cerradas dentro de `pre` (#7392 por @fisker)

<!-- Input -->
<pre><br /></pre>
<pre><hr></pre>

<!-- Prettier 1.19 -->
TypeError: Cannot read property 'start' of null

<!-- Prettier 2.0 -->
<pre><br /></pre>
<pre><hr /></pre>

Corregir formato inconsistente en etiquetas de autocierre (#7395 por @fisker)

<!-- Input -->
<span><input type="checkbox"/> </span>
<span><span><input type="checkbox"/></span></span>
<span><input type="checkbox"/></span>

<!-- Prettier 1.19 -->
<span><input type="checkbox" /> </span>
<span
  ><span><input type="checkbox"/></span
></span>
<span><input type="checkbox"/></span>

<!-- Prettier 2.0 -->
<span><input type="checkbox" /> </span>
<span
  ><span><input type="checkbox" /></span
></span>
<span><input type="checkbox" /></span>

Corregir líneas vacías agregadas inesperadamente después de etiquetas `table` (#7461 por @ikatyang)

<!-- Input -->
<table><tr>
</tr>
</table><div>Should not insert empty line before this div</div>

<!-- Prettier 1.19 -->
<table>
  <tr></tr>
</table>

<div>Should not insert empty line before this div</div>

<!-- Prettier 2.0 -->
<table>
  <tr></tr>
</table>
<div>Should not insert empty line before this div</div>

Dar formato al valor del atributo HTML `class` (#7555 por @fisker)

<!-- Input -->
<div class="  foo
bar baz"></div>
<div class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"></div>

<!-- Prettier 1.19 -->
<div
  class="  foo
bar baz"
></div>
<div
  class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"
></div>

<!-- Prettier 2.0 -->
<div class="foo bar baz"></div>
<div
  class="another element with so many classes even can not fit one line really a lot and lot of classes"
></div>

Dar formato al valor del atributo HTML `style` (#7556 por @fisker)

<!-- Input -->
<div style="   color : red;
            display    :inline ">
  </div>
<div style="   color : red;
            display    :inline; height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; ">
  </div>

<!-- Prettier 1.19 -->
<div
  style="   color : red;
            display    :inline "
></div>
<div
  style="   color : red;
            display    :inline; height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; "
></div>


<!-- Prettier 2.0 -->
<div style="color: red; display: inline;"></div>
<div
  style="
    color: red;
    display: inline;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  "
></div>

Soporte para `` en texto (#7654 por @graemeworthy)

Anteriormente solo funcionaba para etiquetas. Útil para proteger macros y comandos de preprocesador de ser alterados por el formateo.

<!-- Input -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.

<!-- Prettier 1.19 -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably
generated by some script.

<!-- Prettier 2.0 -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.

<!-- Input -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
|    1 |    1 |       0 |    0 |    1 |    1 |         5 |        16 |    4 |      0 |

<!-- Prettier 1.19 -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats |
Tigers | | ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- |
---- | ------ | | 1 | 1 | 0 | 0 | 1 | 1 | 5 | 16 | 4 | 0 |

<!-- Prettier 2.0 -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
|    1 |    1 |       0 |    0 |    1 |    1 |         5 |        16 |    4 |      0 |

Vue

Dar formato a SFC de Vue que contienen scripts JSX (#7180 por @sosukesuzuki)

<!-- Input -->
<script lang="jsx">
export default {
  data: () => ({
    message: 'hello with jsx'
  }),
  render(h) {



    return <div>{this.message}</div>
  }
}
</script>

<!-- Prettier 1.19 -->
<script lang="jsx">
export default {
  data: () => ({
    message: 'hello with jsx'
  }),
  render(h) {



    return <div>{this.message}</div>
  }
}
</script>

<!-- Prettier 2.0 -->
<script lang="jsx">
export default {
  data: () => ({
    message: "hello with jsx"
  }),
  render(h) {
    return <div>{this.message}</div>;
  }
};
</script>

No imprimir literales de cadena únicos en atributos en una nueva línea (#7479 por @fisker)

<!-- Input -->
<template>
<MyComponent
  :attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
  :attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"/>
</template>

<!-- Prettier 1.19 -->
<template>
  <MyComponent
    :attr1="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`
    "
    :attr2="
      'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'
    "
  />
</template>

<!-- Prettier 2.0 -->
<template>
  <MyComponent
    :attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
    :attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"
  />
</template>

Corrección de indentación en expresiones Vue (#7781 por @fisker)

<!-- Input -->
<template>
<MyComponent v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>

<!-- Prettier 1.19 -->
<template>
  <MyComponent
    v-if="
      long_long_long_long_long_long_long_condition_1 &&
        long_long_long_long_long_long_long_condition_2 &&
        long_long_long_long_long_long_long_condition_3 &&
        long_long_long_long_long_long_long_condition_4
    "
    :attr="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
        `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
    "
  />
</template>

<!-- Prettier 2.0 -->
<template>
  <MyComponent
    v-if="
      long_long_long_long_long_long_long_condition_1 &&
      long_long_long_long_long_long_long_condition_2 &&
      long_long_long_long_long_long_long_condition_3 &&
      long_long_long_long_long_long_long_condition_4
    "
    :attr="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
    "
  />
</template>

Angular

Soporte rudimentario no oficial para algunas directivas más usadas de AngularJS 1.x (#6869 por @thorn0)

Aunque existen incompatibilidades sintácticas (bindings de un solo uso y precedencia de |) entre los lenguajes de expresión del antiguo AngularJS y el nuevo Angular, ambos son suficientemente compatibles para que proyectos heredados o híbridos basados en AngularJS puedan beneficiarse de Prettier. Anteriormente, al formatear plantillas AngularJS con el parser de Angular, solo se formateaban expresiones en interpolaciones. Ahora también se formatean algunas de las directivas AngularJS más utilizadas: ng-if, ng-show, ng-hide, ng-class, ng-style.

<!-- Input -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading  ">Warning!</div>

<!-- Prettier 1.19 -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading  ">Warning!</div>

<!-- Prettier 2.0 -->
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>

Corrección en formato de atributos i18n (#7371 por @thorn0)

Prettier 1.19 añadió soporte para formatear atributos i18n, pero colocar la comilla de cierre en una nueva línea rompía los IDs personalizados. Esto ya está corregido.

<!-- Input -->
<div i18n-prop="Special-property|This is a special property with much important information@@MyTextId"
prop="My Text"></div>

<!-- Prettier 1.19 -->
<div
  i18n-prop="
    Special-property|This is a special property with much important
    information@@MyTextId
  "
  prop="My Text"
></div>

<!-- Prettier 2.0 -->
<div
  i18n-prop="
    Special-property|This is a special property with much important
    information@@MyTextId"
  prop="My Text"
></div>

Handlebars (alfa)

Corrección de saltos de línea superfluos en `ConcatStatement` (#7051 por @dcyriller)

{{!-- Input --}}
<a href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars">Link</a>

{{!-- Prettier 1.19 --}}
<a
  href="a-very-long-href-from-a-third-party-marketing-platform
    {{id}}
    longer-than-eighty-chars"
>
  Link
</a>

{{!-- Prettier 2.0 --}}
<a
  href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars"
>
  Link
</a>

{{!-- Input --}}
<div class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if goodbye false}} {{if goodbye true}}">
  Hello
</div>

{{!-- Prettier 1.19 --}}
<div
  class="hello
    {{if goodbye true}}

    {{if goodbye false}}

    {{if goodbye true}}

    {{if goodbye false}}

    {{if goodbye true}}"
>
  Hello
</div>

{{!-- Prettier 2.0 --}}
<div
  class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if
      goodbye
      false
    }} {{if goodbye true}}"
>
  Hello
</div>

Corrección de problema en mustache (#7052 por @dcyriller)

{{!-- Input --}}
<GlimmerComponent @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}} />

{{!-- Prettier 1.19 --}}
<GlimmerComponent
  @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue
  }}
/>

{{!-- Prettier 2.0 --}}
<GlimmerComponent
  @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>

Mejora en impresión de `MustacheStatement` (#7157 por @dcyriller)

{{!-- Input --}}
<p>Hi here is your name, as it will be displayed  {{firstName}}  {{lastName}}   , welcome!</p>

{{!-- Prettier 1.19 --}}
<p>
  Hi here is your name, as it will be displayed {{firstName}} {{lastName
  }} , welcome!
</p>

{{!-- Prettier 2.0 --}}
<p>
  Hi here is your name, as it will be displayed {{firstName}} {{
    lastName
  }} , welcome!
</p>

Añadir soporte para `prettier-ignore` (#7275 por @chadian)

{{! Input }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This

      is="preserved"
    />
  {{/my-crazy-component}}
</div>

{{#a-normal-component    isRestoredTo   = "order"    }}
  <ThisWillBeNormal backTo    =   "normal" />
{{/a-normal-component}}

{{! Prettier 1.19 }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component "shall" be="preserved"}}
    <This is="preserved" />
  {{/my-crazy-component}}
</div>

{{#a-normal-component isRestoredTo="order"}}
  <ThisWillBeNormal backTo="normal" />
{{/a-normal-component}}

{{! Prettier 2.0 }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This

      is="preserved"
    />
  {{/my-crazy-component}}
</div>

{{#a-normal-component isRestoredTo='order'}}
  <ThisWillBeNormal backTo='normal' />
{{/a-normal-component}}

Soporte para imprimir Handlebars en línea en HTML (#7306 por @dcyriller)

<!-- Input -->
<script type="text/x-handlebars-template">
  {{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>

<!-- Prettier 1.19 -->
<script type="text/x-handlebars-template">
  {{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>

<!-- Prettier 2.0 -->
<script type="text/x-handlebars-template">
  {{component
    arg1='hey'
    arg2=(helper this.arg7 this.arg4)
    arg3=anotherone
    arg6=this.arg8
  }}
</script>

Corrección de valor eliminado de AttrNode (#7552 por @bantic)

{{!-- Input --}}
<ul class="abc
       def">
</ul>

{{!-- Prettier 1.19 --}}
<ul class></ul>

{{!-- Prettier 2.0 --}}
<ul class="abc
       def">
</ul>

Conservar caracteres de control de espacios en blanco (#7575 por @mahirshah)

{{!-- Input --}}
{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

{{!-- Prettier 1.19 --}}
{{#if bar}}
  if1
{{else}}
  else
{{/if}}

{{!-- Prettier 2.0 --}}
{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

GraphQL

Mejora en detección de separador entre interfaces (#7305 por @fisker)

Aunque usar coma para separar interfaces implementadas es sintaxis obsoleta, para soportar casos heredados, Prettier conserva el separador original y no reemplaza comas con ampersands deliberadamente. Sin embargo, esta lógica contenía un error que podía generar separadores incorrectos en la salida. Esto ya está corregido.

# Input
type Type1 implements A, B
# { &  <-- Removing this comment changes the separator in 1.19
{a: a}

type Type2 implements A, B & C{a: a}

# Prettier 1.19
type Type1 implements A & B {
  # { &  <-- Removing this comment changes the separator in 1.19
  a: a
}

type Type2 implements A & B & C {
  a: a
}

# Prettier 2.0
type Type1 implements A, B {
  # { &  <-- Removing this comment changes the separator in 1.19
  a: a
}

type Type2 implements A, B & C {
  a: a
}

Markdown

Manejo correcto de listas basadas en cero (#6852 por @evilebottnawi)

<!-- Input -->
List
List
List

<!-- Prettier 1.19 -->
List
List
List

<!-- Prettier 2.0 -->
List
List
List

Corrección del formato HTML que se rompía cuando la etiqueta de inicio comenzaba después de un elemento de lista (#7181 y #7220 por @sasurau4)

Anteriormente, cuando Prettier formateaba una etiqueta HTML colocada justo después de un elemento de lista, insertaba una sangría y rompía la relación entre las etiquetas de apertura y cierre. Ahora, Prettier ya no realiza ningún cambio.

<!-- Input -->
- A list item.
<details><summary>Summary</summary>
<p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

<!-- Prettier 1.19 -->
- A list item.

  <details><summary>Summary</summary>
  <p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

<!-- Prettier 2.0 -->
- A list item.
<details><summary>Summary</summary>
<p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

Corrección del formato de notas al pie de página multilínea (#7203 por @sasurau4)

<!-- Input -->
Here's a statement[^footnote].

[^footnote]:
    Here's a multi-line footnote walking back the above statement, and showing
    how it's all totally bollocks.

<!-- Prettier 1.19 -->
Here's a statement[^footnote].

[^footnote]:

  Here's a multi-line footnote walking back the above statement, and showing
  how it's all totally bollocks.

<!-- Prettier 2.0 -->
Here's a statement[^footnote].

[^footnote]:
  Here's a multi-line footnote walking back the above statement, and showing
  how it's all totally bollocks.

MDX

Añadir soporte para fragmentos JSX (#6398 por @JounQin)

<!-- Input -->
<>
    test   <World        />   test
</>       123

<!-- Prettier 1.19 -->
<>
test <World        /> test
</> 123

<!-- Prettier 2.0 -->
<>
  test <World /> test
</> 123

Corrección de errores de análisis JSX introducidos en Prettier 1.19 (#6949 por @Tigge & @thorn0)

El análisis MDX para JSX fallaba al encontrar elementos JSX que no eran analizables como HTML, como <Tag value={{a: 'b'}}>test</Tag>

<!-- Input -->

<Tag  value={ {a :  'b'   } }>test</ Tag>

<Foo bg={ 'red' } >
   <div  style={{   display:   'block'}   }>
      <Bar    >hi    </Bar>
       {  hello       }
         {     /* another comment */}
            </div>
</Foo>

<!-- Prettier 1.19 -->

SyntaxError: Unexpected closing tag "Tag". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (1:35)
> 1 | <Tag  value={ {a :  'b'   } }>test</ Tag>

<!-- Prettier 2.0 -->

<Tag value={{ a: "b" }}>test</Tag>

<Foo bg={"red"}>
  <div style={{ display: "block" }}>
    <Bar>hi </Bar>
    {hello}
    {/* another comment */}
  </div>
</Foo>

CLI

Soporte para extensiones de archivo `.cjs` y `.yaml.sed` (#7210 por @sosukesuzuki)

# Prettier 1.19
$ prettier test.cjs
test.cjs[error] No parser could be inferred for file: test.cjs

# Prettier 2.0
$ prettier test.cjs
"use strict";
console.log("Hello, World!");

Respetar `--ignore-path` cuando prettier se ejecuta desde un subdirectorio (#7588 por @heylookltsme)

Cambia el nombre de archivo utilizado al filtrar archivos ignorados para que sea relativo a la ruta de --ignore-path, si está presente, en lugar del directorio de trabajo actual.

Eliminación de `--stdin` (#7668 por @thorn0)

Este flag CLI, nunca documentado adecuadamente, se suponía que hacía que Prettier CLI leyera la entrada desde stdin, pero Prettier CLI ya lo hace cuando no se le proporcionan rutas de archivo ni patrones glob. Así que el flag era redundante. Ahora que se ha eliminado, si usas este flag en tus comandos, verás una advertencia: "Ignored unknown option". Esta advertencia es solo informativa. No impide que el comando haga lo que debe hacer y no afecta el código de salida.

Destacados​

JavaScript​

Heurística mejorada para ruptura de cadenas de métodos (#6685 por @mmkal)​

Solución definitiva para conversiones de tipo estilo Closure (#7791 por @thorn0, #7011 por @evilebottnawi)​

TypeScript​

TypeScript 3.8 (#7631 por @thorn0, #7764 por @sosukesuzuki, #7804 por @sosukesuzuki)​

CLI​

Verificar si los globs pasados son nombres de archivos existentes antes de tratarlos como globs (#7587 por @fisker)​

Expandir directorios, incluyendo . (#7660 por @thorn0)​

Cambios importantes​

API​

Corregir coincidencia de patrones en sobreescrituras de configuración para incluir archivos punto (#5813 por @chrisblossom)​

Abandonar soporte para versiones de Node anteriores a 10 (#6908 por @fisker)​

Cambiar valor predeterminado para trailingComma a es5 (#6963 por @fisker)​

API de plugins: cambios en prettier.util (#6993 por @fisker)​

Cambio del valor por defecto de arrowParens a always (#7430 por @kachkaev)​

Cambio del valor por defecto de endOfLine a lf (#7435 por @kachkaev)​

Almacenamiento en caché de resultados de búsqueda de plugins (#7485 por @fisker)​

Eliminación de opciones y valores de opciones obsoletos (#6993, #7511, #7533, #7535, #7536 por @fisker)​

Eliminación del parámetro version en prettier.getSupportInfo (#7620 por @thorn0)​

Otros cambios​

JavaScript​

Añadir siempre un espacio después de la palabra clave function (#3903 por @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 por @bakkot)​

Corregir formato inestable en declaraciones etiquetadas con comentarios (#6984 por @clement26695)​

Corregir formato de expresiones lógicas, binarias y de secuencia en literales de plantilla (#7010 por @evilebottnawi)​

Corregir formato inestable en expresiones lógicas (#7026 por @thorn0)​

Formatear throw como return (#7070 por @sosukesuzuki)​

Corregir sangría en ternarios anidados dentro de condiciones de otros ternarios (#7087 por @thorn0)​

Ajustar lógica de composición de funciones para decoradores (#7138 por @brainkim)​

Corregir ubicación de punto y coma en declaración return vacía con comentario (#7140 por @sosukesuzuki)​

Respetar importancia de espacios en blanco en literales de plantilla HTML (#7208 por @saschanaz)​

Eliminar paréntesis innecesarios al usar yield con JSX (#7367 por @cola119)​

Conservar paréntesis en expresiones con coma en declaraciones de exportación predeterminadas (#7491 por @fisker)​

Corrección de casos extremos con paréntesis en el encadenamiento opcional (#7500 por @thorn0)​

No envolver undefined entre paréntesis en expresiones condicionales dentro de JSX (#7504 por @fisker)​

Mantener la posición de comentarios en asignaciones/variables (#7709 por @sosukesuzuki)​

TypeScript​

Babel como analizador alternativo para TypeScript (#6400 por @JounQin & @thorn0)​

Corregir formato de tipos complejos en anotaciones de retorno de funciones flecha (#6901 por @sosukesuzuki)​

Imprimir tipos exclusivos de JSDoc tal cual en lugar de generar errores (#7020 por @thorn0)​

No imprimir comas finales después de elementos rest en tuplas (#7075 por @thorn0)​

Corregir indentación de funciones flecha en declaraciones de variables seguidas de comentarios (#7094 por @sosukesuzuki)​

Corregir impresión de comentarios en tipos de función (#7104 por @thorn0)​

Corrección del formato de comentarios en nodos tipo función (#7144 por @armano2)​

Corrección de impresión en tipos mapeados cuando se omite el tipo plantilla (#7221 por @cola119)​

Corrección de casos extremos en firmas de índices (#7228 por @cola119)​

Corrección de impresión de comentarios en parámetros de tipo vacíos (#7729 por @sosukesuzuki)​

Flow​

Añadido soporte para symbol (#7472 por @fisker)​

Añadido soporte para decoradores (#7482 por @fisker)​

Corrección de declaraciones de campos privados en clases (#7484 por @fisker)​

CSS​

Evitar minúsculas en nombres de elementos en selectores CSS (#6947 por @ark120202)​

SCSS​

Evitar coma adicional tras el último comentario en mapas (#6918 por @fisker)​

Corrección de espacios en concatenación SCSS (#7211 por @sasurau4)​

Less​

Corrección de múltiples problemas persistentes mediante actualización de postcss-less (#6981 por @fisker, #7021 por @evilebottnawi, @thorn0)​

HTML​

Los comentarios en etiquetas pre causaban formato incorrecto en la etiqueta de cierre siguiente (#5959 por @selvazhagan)​

No tratar los dos puntos como delimitadores de prefijos de namespace en nombres de etiquetas (#7273 por @fisker)​

No generar errores en HTML roto (#7293 por @fisker)​

Corregir error de análisis en srcset (#7295 por @fisker)​

Corregir error al encontrar etiquetas no cerradas dentro de pre (#7392 por @fisker)​

Corregir formato inconsistente en etiquetas de autocierre (#7395 por @fisker)​

Corregir líneas vacías agregadas inesperadamente después de etiquetas table (#7461 por @ikatyang)​

Dar formato al valor del atributo HTML class (#7555 por @fisker)​

Dar formato al valor del atributo HTML style (#7556 por @fisker)​

Soporte para  en texto (#7654 por @graemeworthy)​

Vue​

Dar formato a SFC de Vue que contienen scripts JSX (#7180 por @sosukesuzuki)​

No imprimir literales de cadena únicos en atributos en una nueva línea (#7479 por @fisker)​

Corrección de indentación en expresiones Vue (#7781 por @fisker)​

Angular​

Soporte rudimentario no oficial para algunas directivas más usadas de AngularJS 1.x (#6869 por @thorn0)​

Corrección en formato de atributos i18n (#7371 por @thorn0)​

Handlebars (alfa)​

Corrección de saltos de línea superfluos en ConcatStatement (#7051 por @dcyriller)​

Corrección de problema en mustache (#7052 por @dcyriller)​

Mejora en impresión de MustacheStatement (#7157 por @dcyriller)​

Destacados

JavaScript

Heurística mejorada para ruptura de cadenas de métodos (#6685 por @mmkal)

Solución definitiva para conversiones de tipo estilo Closure (#7791 por @thorn0, #7011 por @evilebottnawi)

TypeScript

TypeScript 3.8 (#7631 por @thorn0, #7764 por @sosukesuzuki, #7804 por @sosukesuzuki)

CLI

Verificar si los globs pasados son nombres de archivos existentes antes de tratarlos como globs (#7587 por @fisker)

Expandir directorios, incluyendo `.` (#7660 por @thorn0)

Cambios importantes

API

Corregir coincidencia de patrones en sobreescrituras de configuración para incluir archivos punto (#5813 por @chrisblossom)

Abandonar soporte para versiones de Node anteriores a 10 (#6908 por @fisker)

Cambiar valor predeterminado para `trailingComma` a `es5` (#6963 por @fisker)

API de plugins: cambios en `prettier.util` (#6993 por @fisker)

Cambio del valor por defecto de `arrowParens` a `always` (#7430 por @kachkaev)

Cambio del valor por defecto de `endOfLine` a `lf` (#7435 por @kachkaev)

Almacenamiento en caché de resultados de búsqueda de plugins (#7485 por @fisker)

Eliminación de opciones y valores de opciones obsoletos (#6993, #7511, #7533, #7535, #7536 por @fisker)

Eliminación del parámetro `version` en `prettier.getSupportInfo` (#7620 por @thorn0)

Otros cambios

JavaScript

Añadir siempre un espacio después de la palabra clave `function` (#3903 por @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 por @bakkot)

Corregir formato inestable en declaraciones etiquetadas con comentarios (#6984 por @clement26695)

Corregir formato de expresiones lógicas, binarias y de secuencia en literales de plantilla (#7010 por @evilebottnawi)

Corregir formato inestable en expresiones lógicas (#7026 por @thorn0)

Formatear `throw` como `return` (#7070 por @sosukesuzuki)

Corregir sangría en ternarios anidados dentro de condiciones de otros ternarios (#7087 por @thorn0)

Ajustar lógica de composición de funciones para decoradores (#7138 por @brainkim)

Corregir ubicación de punto y coma en declaración `return` vacía con comentario (#7140 por @sosukesuzuki)

Respetar importancia de espacios en blanco en literales de plantilla HTML (#7208 por @saschanaz)

Eliminar paréntesis innecesarios al usar yield con JSX (#7367 por @cola119)

Conservar paréntesis en expresiones con coma en declaraciones de exportación predeterminadas (#7491 por @fisker)

Corrección de casos extremos con paréntesis en el encadenamiento opcional (#7500 por @thorn0)

No envolver `undefined` entre paréntesis en expresiones condicionales dentro de JSX (#7504 por @fisker)

Mantener la posición de comentarios en asignaciones/variables (#7709 por @sosukesuzuki)

TypeScript

Babel como analizador alternativo para TypeScript (#6400 por @JounQin & @thorn0)

Corregir formato de tipos complejos en anotaciones de retorno de funciones flecha (#6901 por @sosukesuzuki)

Imprimir tipos exclusivos de JSDoc tal cual en lugar de generar errores (#7020 por @thorn0)

No imprimir comas finales después de elementos rest en tuplas (#7075 por @thorn0)

Corregir indentación de funciones flecha en declaraciones de variables seguidas de comentarios (#7094 por @sosukesuzuki)

Corregir impresión de comentarios en tipos de función (#7104 por @thorn0)

Corrección del formato de comentarios en nodos tipo función (#7144 por @armano2)

Corrección de impresión en tipos mapeados cuando se omite el tipo plantilla (#7221 por @cola119)

Corrección de casos extremos en firmas de índices (#7228 por @cola119)

Corrección de impresión de comentarios en parámetros de tipo vacíos (#7729 por @sosukesuzuki)

Flow

Añadido soporte para `symbol` (#7472 por @fisker)

Añadido soporte para decoradores (#7482 por @fisker)

Corrección de declaraciones de campos privados en clases (#7484 por @fisker)

CSS

Evitar minúsculas en nombres de elementos en selectores CSS (#6947 por @ark120202)

SCSS

Evitar coma adicional tras el último comentario en mapas (#6918 por @fisker)

Corrección de espacios en concatenación SCSS (#7211 por @sasurau4)

Less

Corrección de múltiples problemas persistentes mediante actualización de `postcss-less` (#6981 por @fisker, #7021 por @evilebottnawi, @thorn0)

HTML

Los comentarios en etiquetas `pre` causaban formato incorrecto en la etiqueta de cierre siguiente (#5959 por @selvazhagan)

No tratar los dos puntos como delimitadores de prefijos de namespace en nombres de etiquetas (#7273 por @fisker)

No generar errores en HTML roto (#7293 por @fisker)

Corregir error de análisis en srcset (#7295 por @fisker)

Corregir error al encontrar etiquetas no cerradas dentro de `pre` (#7392 por @fisker)

Corregir formato inconsistente en etiquetas de autocierre (#7395 por @fisker)

Corregir líneas vacías agregadas inesperadamente después de etiquetas `table` (#7461 por @ikatyang)

Dar formato al valor del atributo HTML `class` (#7555 por @fisker)

Dar formato al valor del atributo HTML `style` (#7556 por @fisker)

Soporte para `` en texto (#7654 por @graemeworthy)

Vue

Dar formato a SFC de Vue que contienen scripts JSX (#7180 por @sosukesuzuki)

No imprimir literales de cadena únicos en atributos en una nueva línea (#7479 por @fisker)

Corrección de indentación en expresiones Vue (#7781 por @fisker)

Angular

Soporte rudimentario no oficial para algunas directivas más usadas de AngularJS 1.x (#6869 por @thorn0)

Corrección en formato de atributos i18n (#7371 por @thorn0)

Handlebars (alfa)

Corrección de saltos de línea superfluos en `ConcatStatement` (#7051 por @dcyriller)

Corrección de problema en mustache (#7052 por @dcyriller)

Mejora en impresión de `MustacheStatement` (#7157 por @dcyriller)