Saltar al contenido principal

Prettier 1.19: Opción largamente esperada para Vue, TypeScript 3.7 y nuevas características de JavaScript

· 26 min de lectura
Simon Lydell
Simon Lydell
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Esta versión incluye la tan esperada opción --vue-indent-script-and-style, soporte para TypeScript 3.7 y sintaxis JavaScript de vanguardia. ¡Sin mencionar un montón de correcciones de errores y mejoras!

Destacados​

Vue​

Añadir --vue-indent-script-and-style (#6157 por @kamilic)​

La nueva opción --vue-indent-script-and-style controla si se aplica sangría al código dentro de las etiquetas <script> y <style> en archivos Vue. Algunos desarrolladores (como el creador de Vue) prefieren no sangrar para ahorrar un nivel de indentación, pero esto puede afectar el plegado de código en tu editor. ¡Esto cierra nuestro issue más comentado hasta ahora y mejorará la experiencia de edición para muchos desarrolladores Vue!

TypeScript​

Soporte para TypeScript 3.7 (#6657 por @cryrivers)​

Prettier 1.19 añade soporte para las características de TypeScript 3.7 que introducen nueva sintaxis:

(Nota: La actualización de dependencias para TypeScript 3.7 eliminó el soporte para Node.js 6 en instalaciones directas desde GitHub. Prettier instalado desde npm mantiene compatibilidad con Node.js 4.)

Optional Chaining​
// Input
const longChain = obj?.a?.b?.c?.d?.e?.f?.g;
const longChainCallExpression = obj.a?.(a,b,c).b?.(a,b,c).c?.(a,b,c).d?.(a,b,c).e?.(a,b,c).f?.(a,b,c)

// Prettier 1.19
const longChain = obj?.a?.b?.c?.d?.e?.f?.g;
const longChainCallExpression = obj
  .a?.(a, b, c)
  .b?.(a, b, c)
  .c?.(a, b, c)
  .d?.(a, b, c)
  .e?.(a, b, c)
  .f?.(a, b, c);
Nullish Coalescing​
// Input
const cond = null;
const result = cond??'a';
const longChain = cond??cond??cond??'b';

// Prettier 1.19
const cond = null;
const result = cond ?? "a";
const longChain = cond ?? cond ?? cond ?? "b";
Assertion Functions​
// Input
function assertsString(x: any): asserts x {console.assert(typeof x === 'string');}
function assertsStringWithGuard(x: any): asserts x is string {console.assert(typeof x === 'string');}

// Prettier 1.19
function assertsString(x: any): asserts x {
  console.assert(typeof x === "string");
}
function assertsStringWithGuard(x: any): asserts x is string {
  console.assert(typeof x === "string");
}
declare Modifier on Class Fields​
// Input
class B {p: number;}
class C extends B {declare p: 256 | 1000;}

// Prettier 1.19
class B {
  p: number;
}
class C extends B {
  declare p: 256 | 1000;
}

JavaScript​

Añadir soporte para sintaxis de aplicación parcial (#6397 por @JounQin)​

// Input
const addOne = add(1, ?); // apply from the left
addOne(2); // 3

const addTen = add(?, 10); // apply from the right
addTen(2); // 12

// with pipeline
let newScore = player.score
  |> add(7, ?)
  |> clamp(0, 100, ?); // shallow stack, the pipe to `clamp` is the same frame as the pipe to `add`.

// Prettier 1.18
SyntaxError: Unexpected token (1:23)
> 1 | const addOne = add(1, ?); // apply from the left
    |                       ^
  2 | addOne(2); // 3
  3 |
  4 | const addTen = add(?, 10); // apply from the right

// Prettier 1.19
const addOne = add(1, ?); // apply from the left
addOne(2); // 3

const addTen = add(?, 10); // apply from the right
addTen(2); // 12

// with pipeline
let newScore = player.score |> add(7, ?) |> clamp(0, 100, ?); // shallow stack, the pipe to \`clamp\` is the same frame as the pipe to \`add\`.

Usar literales de función en argumentos para detectar composición funcional (#6033 por @brainkim)​

Anteriormente usábamos nombres predefinidos relacionados con programación funcional (compose, flow, pipe, etc.) para detectar patrones de composición y encadenamiento. Esto evitaba que Prettier pusiera en una sola línea llamadas como esta a pipe, incluso si cabían dentro del límite de columnas:

source$
  .pipe(
    filter(x => x % 2 === 0),
    map(x => x + x),
    scan((acc, x) => acc + x, 0),
  )
  .subscribe(x => console.log(x));

Sin embargo, esta heurística generó quejas por falsos positivos: llamadas a funciones con nombres coincidentes siempre se dividían en múltiples líneas, incluso sin argumentos funcionales (#5769, #5969). Para muchos, esta decisión generalizada de dividir funciones por nombre resultó sorprendente y subóptima.

Ahora usamos una heurística refinada que detecta composición funcional mediante la presencia de literales de función. Esto preserva el comportamiento anterior de división de líneas y elimina la mayoría (si no todos) los falsos positivos de la heurística anterior.

¡Pruébalo y comparte tus comentarios!

// Input
eventStore.update(id, _.flow(updater, incrementVersion));

// Prettier 1.18
eventStore.update(
  id,
  _.flow(
    updater,
    incrementVersion
  )
);

// Prettier 1.19
eventStore.update(id, _.flow(updater, incrementVersion));

Habilitar formateo incluso con errores de análisis en ciertos casos (#6816 por @thorn0 y el equipo de Babel)​

Actualizamos el parser de Babel a la última versión y obtuvimos una característica impresionante sin costo adicional. Prettier ahora puede formatear tu código incluso si es inválido en algunos casos, lo que hará tu experiencia de codificación más fluida. Esto mejorará con el tiempo a medida que Babel perfeccione su modo de recuperación de errores de parsing. ¡Lee más en la publicación del blog de Babel 7.7.0!

// Input
let a = {
  __proto__ : x,
  __proto__ : y
}
let a = 2

// Prettier 1.18
SyntaxError: Redefinition of __proto__ property (3:3)
  1 | let a = {
  2 |   __proto__ : x,
> 3 |   __proto__ : y
    |   ^
  4 | }
  5 | let a = 2

// Prettier 1.19
let a = {
  __proto__: x,
  __proto__: y
};
let a = 2;

Otros cambios​

TypeScript​

Corrección de campos y métodos de clase computados opcionales (#6657 por @cryrivers, #6673 por @thorn0)​

Esto aún está roto si la clave es una expresión compleja, pero se ha solucionado en estos casos:

// Input
class Foo {
  [bar]?: number;
  protected [s]?() {}
}

// Prettier 1.18
class Foo {
  [bar]: number;
  protected [s?]() {};
}

// Prettier 1.19
class Foo {
  [bar]?: number;
  protected [s]?() {}
}

Se perdían comentarios después de nombres de elementos JSX con argumentos de tipo (#6209 por @duailibe)​

// Input
const comp = (
  <Foo<number>
    // This comment goes missing
    value={4}
  >
    Test
  </Foo>
);

// Prettier 1.18
const comp = <Foo<number> value={4}>Test</Foo>;

// Prettier 1.19
const comp = (
  <Foo<number>
    // This comment goes missing
    value={4}
  >
    Test
  </Foo>
);

Corrección de caídas al usar // en textos JSX (#6289 por @duailibe)​

Esta versión actualiza el parser de TypeScript para manejar correctamente textos JSX con dobles barras (//). En versiones anteriores, esto hacía que Prettier fallara.

Formateo correcto de tipos mapeados largos de una línea en una sola pasada (#6420 por @sosukesuzuki)​

Anteriormente, cuando Prettier formateaba tipos mapeados largos de una línea, rompía la línea pero no añadía punto y coma hasta ejecutar Prettier nuevamente, lo que rompía la regla de idempotencia. Ahora Prettier añade el punto y coma en la primera ejecución.

// Input
type FooBar<T> = { [P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P] }

// Prettier 1.18
type FooBar<T> = {
  [P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P]
};

// Prettier 1.19
type FooBar<T> = {
  [P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P];
};

Mantener parámetros de tipo en línea para anotaciones de tipo en declaraciones de variables (#6467 por @sosukesuzuki)​

// Input
const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();

// Prettier 1.18
const fooooooooooooooo: SomeThing<
  boolean
> = looooooooooooooooooooooooooooooongNameFunc();

// Prettier 1.19
const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();

A veces se eliminaban incorrectamente dobles paréntesis alrededor de tipos (#6604 por @sosukesuzuki)​

// Input
type A = 0 extends ((1 extends 2  ? 3 : 4)) ? 5 : 6;
type B = ((0 extends 1 ? 2 : 3)) extends 4 ? 5 : 6;
type C = ((number | string))["toString"];
type D = ((keyof T1))["foo"];

// Prettier 1.18
type A = 0 extends 1 extends 2 ? 3 : 4 ? 5 : 6;
type B = 0 extends 1 ? 2 : 3 extends 4 ? 5 : 6;
type C = number | string["toString"];
type D = keyof T1["foo"];

// Prettier 1.19
type A = 0 extends (1 extends 2 ? 3 : 4) ? 5 : 6;
type B = (0 extends 1 ? 2 : 3) extends 4 ? 5 : 6;
type C = (number | string)["toString"];
type D = (keyof T1)["foo"];

Conservar paréntesis alrededor de JSX cuando sea necesario para evitar errores de sintaxis (#6640 por @sosukesuzuki)​

// Input
(<a />).toString();

// Prettier 1.18
<a />.toString():

// Prettier 1.19
(<a />).toString();

Mantener punto y coma para propiedad de clase antes de firma de índice cuando no-semi está habilitado (#6728 por @sosukesuzuki)​

Intentar formatear nuevamente la salida de Prettier solía producir un error de sintaxis.

// Input
export class User {
  id: number = 2;
  [key: string]: any
}

// Prettier 1.18
export class User {
  id: number = 2
  [key: string]: any
}

// Prettier 1.19
export class User {
  id: number = 2;
  [key: string]: any
}

Mejora en la expansión de argumentos con expresiones de tipo as (#6471 por @mattleff)​

Anteriormente, al formatear una expresión de llamada que contenía una expresión de tipo as o una aserción de tipo, Prettier rompía la línea. Ahora usa la expresión contenida por el tipo as o la aserción de tipo para determinar saltos de línea.

// Input
const bar = [1,2,3].reduce((carry, value) => {
  return [...carry, value];
}, ([] as unknown) as number[]);

// Prettier 1.18
const bar = [1, 2, 3].reduce(
  (carry, value) => {
    return [...carry, value];
  },
  ([] as unknown) as number[]
);

// Prettier 1.19
const bar = [1,2,3].reduce((carry, value) => {
  return [...carry, value];
}, ([] as unknown) as number[]);

TypeScript/Flow​

Corrección de sangría para tipos unión dentro de tuplas (#6381 por @squidfunk, #6605 por @thorn0)​

// Input
type A = [
  | AAAAAAAAAAAAAAAAAAAAAA
  | BBBBBBBBBBBBBBBBBBBBBB
  | CCCCCCCCCCCCCCCCCCCCCC
  | DDDDDDDDDDDDDDDDDDDDDD
]

type B = [
  | AAAAAAAAAAAAAAAAAAAAAA
  | BBBBBBBBBBBBBBBBBBBBBB
  | CCCCCCCCCCCCCCCCCCCCCC
  | DDDDDDDDDDDDDDDDDDDDDD,
  | AAAAAAAAAAAAAAAAAAAAAA
  | BBBBBBBBBBBBBBBBBBBBBB
  | CCCCCCCCCCCCCCCCCCCCCC
  | DDDDDDDDDDDDDDDDDDDDDD
]

type C = [
  | [AAAAAAAAAAAAAAAAAAAAAA | BBBBBBBBBBBBBBBBBBBBBB | CCCCCCCCCCCCCCCCCCCCCC | DDDDDDDDDDDDDDDDDDDDDD]
  | [AAAAAAAAAAAAAAAAAAAAAA | BBBBBBBBBBBBBBBBBBBBBB | CCCCCCCCCCCCCCCCCCCCCC | DDDDDDDDDDDDDDDDDDDDDD]
]

// Prettier 1.18
type A = [

    | AAAAAAAAAAAAAAAAAAAAAA
    | BBBBBBBBBBBBBBBBBBBBBB
    | CCCCCCCCCCCCCCCCCCCCCC
    | DDDDDDDDDDDDDDDDDDDDDD
];

type B = [

    | AAAAAAAAAAAAAAAAAAAAAA
    | BBBBBBBBBBBBBBBBBBBBBB
    | CCCCCCCCCCCCCCCCCCCCCC
    | DDDDDDDDDDDDDDDDDDDDDD,

    | AAAAAAAAAAAAAAAAAAAAAA
    | BBBBBBBBBBBBBBBBBBBBBB
    | CCCCCCCCCCCCCCCCCCCCCC
    | DDDDDDDDDDDDDDDDDDDDDD
];

type C = [

    | [

          | AAAAAAAAAAAAAAAAAAAAAA
          | BBBBBBBBBBBBBBBBBBBBBB
          | CCCCCCCCCCCCCCCCCCCCCC
          | DDDDDDDDDDDDDDDDDDDDDD
      ]
    | [

          | AAAAAAAAAAAAAAAAAAAAAA
          | BBBBBBBBBBBBBBBBBBBBBB
          | CCCCCCCCCCCCCCCCCCCCCC
          | DDDDDDDDDDDDDDDDDDDDDD
      ]
];

// Prettier 1.19
type A = [
  | AAAAAAAAAAAAAAAAAAAAAA
  | BBBBBBBBBBBBBBBBBBBBBB
  | CCCCCCCCCCCCCCCCCCCCCC
  | DDDDDDDDDDDDDDDDDDDDDD
];

type B = [
  (
    | AAAAAAAAAAAAAAAAAAAAAA
    | BBBBBBBBBBBBBBBBBBBBBB
    | CCCCCCCCCCCCCCCCCCCCCC
    | DDDDDDDDDDDDDDDDDDDDDD
  ),
  (
    | AAAAAAAAAAAAAAAAAAAAAA
    | BBBBBBBBBBBBBBBBBBBBBB
    | CCCCCCCCCCCCCCCCCCCCCC
    | DDDDDDDDDDDDDDDDDDDDDD
  )
];

type C = [
  | [
      | AAAAAAAAAAAAAAAAAAAAAA
      | BBBBBBBBBBBBBBBBBBBBBB
      | CCCCCCCCCCCCCCCCCCCCCC
      | DDDDDDDDDDDDDDDDDDDDDD
    ]
  | [
      | AAAAAAAAAAAAAAAAAAAAAA
      | BBBBBBBBBBBBBBBBBBBBBB
      | CCCCCCCCCCCCCCCCCCCCCC
      | DDDDDDDDDDDDDDDDDDDDDD
    ]
];

Corrección al mover comentarios en llamadas a funciones como useEffect (#6270 por @sosukesuzuki)​

Soluciona un bug que afectaba llamadas a funciones con una función flecha como primer argumento y una expresión de array como segundo, como useEffect de React. Si un comentario estaba en la línea anterior al segundo argumento, Prettier lo movía arriba y corrompía la sangría.

El bug solo ocurría con los parsers de Flow y TypeScript.

// Input
useEffect(
  () => {
    console.log("some code", props.foo);
  },

  // eslint-disable-line react-hooks/exhaustive-deps
  []
);

// Prettier 1.18
useEffect(() => {
  console.log("some code", props.foo);
}, // eslint-disable-line react-hooks/exhaustive-deps
[]);

// Prettier 1.19
useEffect(
  () => {
    console.log("some code", props.foo);
  },

  // eslint-disable-line react-hooks/exhaustive-deps
  []
);

Colocar paréntesis de cierre en nueva línea después de tipos unión (#6307 por @sosukesuzuki)​

// Input
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
  | string
  | undefined
)[];

// Prettier 1.18
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
  | string
  | undefined)[];

// Prettier 1.19
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
  | string
  | undefined
)[];

Flow​

Añadir soporte para enums (#6833 por @gkz)​

// Input
enum E of string {
  A = "a",
  B = "b",
}

// Prettier 1.19
enum E of string {
  A = "a",
  B = "b",
}

Paréntesis alrededor de tipos de retorno de funciones flecha que tienen FunctionTypeAnnotation anidado en ObjectTypeAnnotation (#6717 por @sosukesuzuki)​

Esta es una solución temporal para un bug en el parser de Flow. Sin los paréntesis, el parser lanza un error.

// Input
const example1 = (): { p: (string => string) } => (0: any);

// Prettier 1.18
const example1 = (): { p: string => string } => (0: any);

// Prettier 1.19
const example1 = (): ({ p: string => string }) => (0: any);

JavaScript​

Dividir arrays de arrays/objetos si cada elemento tiene más de un elemento/propiedad (#6694 por @sosukesuzuki)​

Esto debería formatear tus llamadas new Map y test.each de Jest de manera más agradable.

// Input
test.each([
  { a: "1", b: 1 },
  { a: "2", b: 2 },
  { a: "3", b: 3 }
])("test", ({ a, b }) => {
  expect(Number(a)).toBe(b);
});
[[0, 1, 2], [0, 1, 2]];
new Map([
  [A, B],
  [C, D],
  [E, F],
  [G, H],
  [I, J],
  [K, L],
  [M, N]
]);

// Prettier 1.18
test.each([{ a: "1", b: 1 }, { a: "2", b: 2 }, { a: "3", b: 3 }])(
  "test",
  ({ a, b }) => {
    expect(Number(a)).toBe(b);
  }
);
[[0, 1, 2], [0, 1, 2]]
new Map([[A, B], [C, D], [E, F], [G, H], [I, J], [K, L], [M, N]]);

// Prettier 1.19
test.each([
  { a: "1", b: 1 },
  { a: "2", b: 2 },
  { a: "3", b: 3 }
])("test", ({ a, b }) => {
  expect(Number(a)).toBe(b);
});
[
  [0, 1, 2],
  [0, 1, 2]
];
new Map([
  [A, B],
  [C, D],
  [E, F],
  [G, H],
  [I, J],
  [K, L],
  [M, N]
]);

Actualizar precedencia de ?? para coincidir con propuesta etapa 3 (#6404 por @vjeux, #6863 por @jridgewell)​

Hemos actualizado el soporte de Prettier para el operador de coalescencia nula para que coincida con una actualización de especificación que ya no permite que contenga inmediatamente, o esté contenido dentro de una operación && o ||.

// Input
(foo ?? bar) || baz;
(foo || bar) ?? baz;

// Prettier 1.18
foo ?? bar || baz;
foo || bar ?? baz;

// Prettier 1.19
(foo ?? bar) || baz;
(foo || bar) ?? baz;

Ten en cuenta que como hemos actualizado nuestros parsers con versiones que soportan esta actualización de especificación, el código sin paréntesis lanzará un error de análisis.

No requerir paréntesis para expresiones lógicas con el mismo operador (#6864 por @jridgewell)​

// Input
foo && (bar && baz);
foo || (bar || baz);
foo ?? (bar ?? baz);

// Prettier 1.18
foo && (bar && baz);
foo || (bar || baz);
foo ?? (bar ?? baz);

// Prettier 1.19
foo && bar && baz;
foo || bar || baz;
foo ?? bar ?? baz;

Paréntesis más legibles para llamadas new (#6412 por @bakkot)​

// Input
var a = new (x().y)();
var a = new (x().y.z)();
var a = new (x().y().z)();

// Prettier 1.18
var a = new (x()).y();
var a = new (x()).y.z();
var a = new (x().y()).z();

// Prettier 1.19
var a = new (x().y)();
var a = new (x().y.z)();
var a = new (x().y().z)();

Mantener paréntesis con comentarios en expresiones unarias (#6217 por @sosukesuzuki)​

// Input
!(
  /* foo */
  foo
);
!(
  foo // foo
);

// Prettier 1.18
!/* foo */
foo;
!foo; // foo

// Prettier 1.19
!(/* foo */ foo);
!(
  foo // foo
);

Dejar de mover comentarios dentro de literales de plantilla etiquetados (#6236 por @sosukesuzuki)​

// Input
foo //comment
`
`;

// Prettier 1.18
foo` // comment
`;

// Prettier 1.19
foo // comment
`
`;

Líneas vacías en parámetros de funciones flecha con destructuración podían romper la indentación y la idempotencia (#6301 & #6382 por @sosukesuzuki)​

Anteriormente, Prettier indentaba el código de forma extraña cuando una función flecha cuyos parámetros incluían un patrón de objeto se pasaba como argumento a una llamada de función. Además, rompía la idempotencia. Consulta #6294 para más detalles.

// Input
foo(
  ({
    a,

    b
  }) => {}
);

// Prettier 1.18
foo(({ a,
  b }) => {});

// Prettier 1.19
foo(
  ({
    a,

    b
  }) => {}
);

Corregir formato de destructuración de objetos con decoradores de parámetros (#6411 por @sosukesuzuki)​

// Input
class Class {
  method(
    @decorator
     { foo }
  ) {}
}

// Prettier 1.18
class Class {
  method(@decorator
  {
    foo
  }) {}
}

// Prettier 1.19
class Class {
  method(
    @decorator
    { foo }
  ) {}
}

Manejar patrones de objetos vacíos con anotaciones de tipo en parámetros de función (#6438 por @bakkot)​

// Input
const f = ({}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({}: Foo) {}

// Prettier 1.18
const f = ({
  ,
}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({  }: Foo) {}

// Prettier 1.19
const f = ({}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({}: Foo) {}

Colocar paréntesis de cierre en nueva línea después de expresiones binarias dentro de llamadas a función (#6441 por @sosukesuzuki)​

// Input
(
  aaaaaaaaaaaaaaaaaaaaaaaaa &&
  bbbbbbbbbbbbbbbbbbbbbbbbb &&
  ccccccccccccccccccccccccc &&
  ddddddddddddddddddddddddd &&
  eeeeeeeeeeeeeeeeeeeeeeeee
)();

// Prettier 1.18
(aaaaaaaaaaaaaaaaaaaaaaaaa &&
  bbbbbbbbbbbbbbbbbbbbbbbbb &&
  ccccccccccccccccccccccccc &&
  ddddddddddddddddddddddddd &&
  eeeeeeeeeeeeeeeeeeeeeeeee)();

// Prettier 1.19
(
  aaaaaaaaaaaaaaaaaaaaaaaaa &&
  bbbbbbbbbbbbbbbbbbbbbbbbb &&
  ccccccccccccccccccccccccc &&
  ddddddddddddddddddddddddd &&
  eeeeeeeeeeeeeeeeeeeeeeeee
)();

Corregir formato de exportaciones con nombre largas (#6446 por @sosukesuzuki)​

Ahora Prettier formatea las exportaciones con nombre de la misma manera que las importaciones con nombre.

// Input
export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo";

// Prettier 1.18
export {
  fooooooooooooooooooooooooooooooooooooooooooooooooo
} from "fooooooooooooooooooooooooooooo";

// Prettier 1.19
export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo";

Corregir formato incorrecto para encadenamiento opcional multilínea con comentario (#6506 por @sosukesuzuki)​

// Input
return a
  .b()
  .c()
  // Comment
  ?.d()

// Prettier 1.18
return a
  .b()
  .c()
  ?.// Comment
  d();

// Prettier 1.19
return (
  a
    .b()
    .c()
    // Comment
    ?.d()
);

Corregir indentación inconsistente en declaraciones switch (#6514 por @sosukesuzuki)​

// Input
switch ($veryLongAndVeryVerboseVariableName && $anotherVeryLongAndVeryVerboseVariableName) {
}

switch ($longButSlightlyShorterVariableName && $anotherSlightlyShorterVariableName) {
}

// Prettier 1.18
switch (
  $veryLongAndVeryVerboseVariableName &&
    $anotherVeryLongAndVeryVerboseVariableName
) {
}

switch (
  $longButSlightlyShorterVariableName && $anotherSlightlyShorterVariableName
) {
}

// Prettier 1.19
switch (
  $veryLongAndVeryVerboseVariableName &&
  $anotherVeryLongAndVeryVerboseVariableName
) {
}

switch (
  $longButSlightlyShorterVariableName &&
  $anotherSlightlyShorterVariableName
) {
}

Soporte para formatear código con intrínsecos V8 (#6496 por @rreverser)​

// Input
function doSmth()     {
            %DebugPrint
        (
                foo )
  }

// Prettier 1.18
SyntaxError: Unexpected token (2:13)
  1 | function doSmth()     {
> 2 |             %DebugPrint
    |             ^

// Prettier 1.19
function doSmth() {
  %DebugPrint(foo);
}

La destructuración de objetos en parámetros de métodos siempre se dividía en múltiples líneas (#6646 por @ericsakmar)​

// Input
const obj = {
  func(id, { blog: { title } }) {
    return id + title;
  },
};

class A {
  func(id, { blog: { title } }) {
    return id + title;
  }
  #func(id, { blog: { title } }) {
    return id + title;
  }
}

// Prettier 1.18
const obj = {
  func(
    id,
    {
      blog: { title }
    }
  ) {
    return id + title;
  }
};

class A {
  func(
    id,
    {
      blog: { title }
    }
  ) {
    return id + title;
  }
  #func(
    id,
    {
      blog: { title }
    }
  ) {
    return id + title;
  }
}

// Prettier 1.19
const obj = {
  func(id, { blog: { title } }) {
    return id + title;
  },
};

class A {
  func(id, { blog: { title } }) {
    return id + title;
  }
  #func(id, { blog: { title } }) {
    return id + title;
  }
}

Se eliminaban separadores numéricos de literales BigInt (#6796 por @thorn0)​

// Input
const bigints = [200_000n, 0x0000_000An, 0b0111_1111n];

// Prettier 1.18
const bigints = [200000n, 0x0000000an, 0b01111111n];

// Prettier 1.19
const bigints = [200_000n, 0x0000_000an, 0b0111_1111n];

Mejor formato para expresiones await anidadas en llamadas (#6856 por @thorn0)​

// Input
async function f() {
  const admins = (await(db.select('*').from('admins').leftJoin('bla').where('id', 'in', [1,2,3,4]))).map(({id, name})=>({id, name}))
}

// Prettier 1.18
async function f() {
  const admins = (await db
    .select("*")
    .from("admins")
    .leftJoin("bla")
    .where("id", "in", [1, 2, 3, 4])).map(({ id, name }) => ({ id, name }));
}

// Prettier 1.19
async function f() {
  const admins = (
    await db
      .select("*")
      .from("admins")
      .leftJoin("bla")
      .where("id", "in", [1, 2, 3, 4])
  ).map(({ id, name }) => ({ id, name }));
}

HTML​

No envolver elementos template en líneas más cortas que printWidth (#6284 por @sosukesuzuki)​

Anteriormente, incluso si la longitud de línea era menor que printWidth, Prettier rompía la línea con un elemento template.

<!-- Input -->
<template>
  <template>foo</template>
</template>

<!-- Prettier 1.18 -->
<template>
  <template
    >foo</template
  >
</template>

<!-- Prettier 1.19 -->
<template>
  <template>foo</template>
</template>

Las etiquetas script ahora se tratan como bloques para fines de formato (#6423 por @thorn0)​

Anteriormente, en el modo sensible a espacios en blanco, se formateaban como si fueran en línea.

<!-- Input -->
<script
  async
  src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script><script></script>

<!-- Prettier 1.18 -->
<script
  async
  src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script
><script></script>

<!-- Prettier 1.19 -->
<script
  async
  src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script>
<script></script>

Agregar soporte para &excl; y otras entidades (#6785 por @lydell y @ikatyang)​

Anteriormente, Prettier solo admitía las entidades HTML más comunes, como &nbsp; y &quot;. Ahora, Prettier admite todas las entidades HTML de la especificación HTML, como &excl; y &pitchfork;.

<!-- Input -->
<p>Hi&excl;</p>

<!-- Prettier 1.18
[error] stdin: SyntaxError: Unknown entity "excl" - use the "&#;" or  "&#x<hex>;" syntax (1:6)
[error] > 1 | <p>Hi&excl;</p>
[error]     |      ^
[error]   2 |
-->

<!-- Prettier 1.19 -->
<p>Hi&excl;</p>

Agregar tipos de script JSON (#6293 por @ascorbic)​

<!-- Input -->
<script type="application/json">
  {   "json":true  }
</script>
<script type="importmap">
  {   "json":true  }
  {   "json":true  }
</script>
</script>
<script type="systemjs-importmap">
  {   "json":true  }
</script>

<!-- Prettier 1.18 -->
<script type="application/json">
  {   "json":true  }
</script>
<script type="importmap">
  {   "json":true  }
  {   "json":true  }
</script>
</script>
<script type="systemjs-importmap">
  {   "json":true  }
</script>

<!-- Prettier 1.19 -->
<script type="application/json">
  { "json": true }
</script>
<script type="importmap">
  { "json": true }
</script>
<script type="systemjs-importmap">
  { "json": true }
</script>

Angular​

Colocar paréntesis de cierre en nueva línea después de ternarios pasados a pipes (#5682 por @selvazhagan)​

<!-- Input -->
{{ (isCustomDiscount ? 'DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT' : 'DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT') | translate }}

<!-- Prettier 1.18 -->
{{
  (isCustomDiscount
    ? "DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT"
    : "DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT") | translate
}}

<!-- Prettier 1.19 -->
{{
  (isCustomDiscount
    ? "DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT"
    : "DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT"
  ) | translate
}}

Agregar formato para atributos i18n (#6695 por @voithos)​

Prettier envolverá automáticamente los contenidos de los atributos i18n cuando excedan el largo de línea.

<!-- Input -->
<h1 i18n="This is a very long internationalization description text, exceeding the configured print width">
  Hello!
</h1>

<!-- Prettier 1.18 -->
<h1
  i18n="This is a very long internationalization description text, exceeding the configured print width"
>
  Hello!
</h1>

<!-- Prettier 1.19 -->
<h1
  i18n="
    This is a very long internationalization description text, exceeding the
    configured print width
  "
>
  Hello!
</h1>

Handlebars​

Corregir manejo de espacios y saltos de línea (#6354 por @chadian)​

Esto soluciona varios casos de uso de espacios y saltos de línea en plantillas Handlebars y Glimmer.

<!-- Input -->
<SomeComponent />{{name}}

Some sentence with  {{dynamic}}  expressions.



sometimes{{nogaps}}areimportant<Hello></Hello>
{{name}}  is your name

<!-- Prettier 1.18 -->
<SomeComponent />
{{name}}
Some sentence with
{{dynamic}}
expressions.



sometimes
{{nogaps}}
areimportant
<Hello />
{{name}}
is your name

<!-- Prettier 1.19 -->
<SomeComponent />{{name}}

Some sentence with {{dynamic}} expressions.



sometimes{{nogaps}}areimportant
<Hello />
{{name}} is your name

Evitar agregar saltos de línea no deseados entre texto y mustaches (#6186 por @gavinjoyce)​

Anteriormente, Prettier agregaba saltos de línea entre texto y mustaches, lo que resultaba en espacios no deseados en la salida renderizada.

<!-- Input -->
<p>Your username is @{{name}}</p>
<p>Hi {{firstName}} {{lastName}}</p>

<!-- Prettier 1.18 -->
<p>
  Your username is @
  {{name}}
</p>
<p>
  Hi
  {{firstName}}
  {{lastName}}
</p>

<!-- Prettier 1.19 -->
<p>
  Your username is @{{name}}
</p>
<p>
  Hi {{firstName}} {{lastName}}
</p>

Mejorar formato de comentarios (#6206 por @gavinjoyce)​

<!-- Input -->
<div>
  {{! Foo }}
  {{#if @foo}}
    Foo
  {{/if}}

  {{! Bar }}
  {{#if @bar}}
    Bar
  {{/if}}
</div>

<!-- Prettier 1.18 -->
<div>
  {{! Foo }}
  {{#if @foo}}
    Foo
  {{/if}}{{! Bar }}{{#if @bar}}
    Bar
  {{/if}}
</div>

<!-- Prettier 1.19 -->
<div>
  {{! Foo }}
  {{#if @foo}}
    Foo
  {{/if}}
  {{! Bar }}
  {{#if @bar}}
    Bar
  {{/if}}
</div>

Preservar entidades HTML (#6234 por @gavinjoyce)​

<!-- Input -->
<p>
  Some escaped characters: &lt; &gt; &amp;
</p>

<!-- Prettier 1.18 -->
<p>
  Some escaped characters: < > &
</p>

<!-- Prettier 1.19 -->
<p>
  Some escaped characters: &lt; &gt; &amp;
</p>

Corregir opción --single-quote en atributos HTML (#6377 por @dcyriller)​

Anteriormente, la opción no se aplicaba en atributos HTML.

<!-- Input -->
<div class="a-class-name"></div>

<!-- Prettier 1.18, with the option --single-quote -->
<div class="a-class-name"></div>

<!-- Prettier 1.19, with the option --single-quote -->
<div class='a-class-name'></div>

Romper interpolaciones largas (#6249 por @jjaffeux)​

<!-- Input -->
{{my-component  foo="bar"  bar="baz" action=(action "almostTheMaximumLengthxxxx")
}}

<!-- Prettier 1.18 -->
{{my-component  foo="bar"  bar="baz" action=(action "almostTheMaximumLengthxxxx")
}}

<!-- Prettier 1.19 -->
{{my-component
  foo="bar"
  bar="baz"
  action=(action "almostTheMaximumLengthxxxx")
}}

MDX​

El texto posterior a JSX se recortaba incorrectamente (#6340 por @JounQin)​

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

<!-- Prettier 1.18 -->
<Hello>
  test <World /> test
</Hello>123

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

Elementos JSX adyacentes ahora están permitidos (#6332 por @JounQin)​

// Input
<Hello>
    test   <World />   test
</Hello>123

// Prettier 1.18
SyntaxError: Unexpected token (3:9)
  1 | <Hello>
  2 |     test   <World />   test
> 3 | </Hello>123
    |         ^

// Prettier 1.19
<Hello>
  test <World /> test
</Hello>123


// Input
<Hello>
    test   <World />   test
</Hello>
<Hello>
    test   <World />   test
</Hello>123

// Prettier 1.18
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (4:1)
  2 |     test   <World />   test
  3 | </Hello>
> 4 | <Hello>
    | ^
  5 |     test   <World />   test
  6 | </Hello>123

// Prettier 1.19
<Hello>
  test <World /> test
</Hello>
<Hello>
  test <World /> test
</Hello>123

Vue​

Dar formato a style[lang="css"] (#6875 por @fisker)​

Anteriormente, los elementos <style> con lang="css" no se formateaban, mientras que omitir el atributo o establecer otros valores sí funcionaba. Esta omisión ha sido corregida.

<!-- Input -->
<style lang="css">
    a {
color: #F00
}</style>

<!-- Output (Prettier stable) -->
<style lang="css">
    a {
color: #F00
}
</style>

<!-- Output (Prettier master) -->
<style lang="css">
  a {
    color: #f00;
  }
</style>

Less​

No convertir a minúsculas nombres de variables y eliminar espacios entre variable y dos puntos (#6778 por @fisker)​

// Input
@FoO : bar;

// Prettier 1.18
@foo : bar;

// Prettier 1.19
@FoO: bar;

API​

Agregar opción resolveConfig a getFileInfo() (#6666 por @kaicataldo)​

Agrega una opción resolveConfig: boolean a prettier.getFileInfo() que, cuando es true, resolverá la configuración para la ruta de archivo dada. Esto permite considerar parsers sobrescritos.

CLI​

Manejar errores al leer stdin (#6708 por @andersk y @lydell)​

Si había errores en tu .prettierrc, Prettier solía fallar al formatear stdin. Ahora esos errores se manejan correctamente.

# Prettier 1.18
$ prettier --parser babel < test.js
(node:21531) UnhandledPromiseRejectionWarning: Error: Invalid printWidth value. Expected an integer, but received "nope".
    at _loop (/home/you/project/node_modules/prettier/bin-prettier.js:7887:63)
    at Normalizer._applyNormalization (/home/you/project/node_modules/prettier/bin-prettier.js:8000:13)
    at applyNormalization (/home/you/project/node_modules/prettier/bin-prettier.js:7817:49)
    at Normalizer.normalize (/home/you/project/node_modules/prettier/bin-prettier.js:7823:9)
    at normalizeOptions$1 (/home/you/project/node_modules/prettier/bin-prettier.js:8760:31)
    at Object.normalizeApiOptions (/home/you/project/node_modules/prettier/bin-prettier.js:8918:10)
    at getOptionsForFile (/home/you/project/node_modules/prettier/bin-prettier.js:44160:69)
    at /home/you/project/node_modules/prettier/bin-prettier.js:44214:22
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:21531) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:21531) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

# Prettier 1.19
$ prettier --parser babel < test.js
[error] Invalid printWidth value. Expected an integer, but received "nope".

Manejar elegantemente rutas inexistentes pasadas a --stdin-filepath (#6687 por @voithos y @lydell)​

Anteriormente, si pasabas un subdirectorio inexistente a --stdin-filepath, Prettier arrojaba un error. Ahora lo maneja con elegancia.

# Prettier 1.18
$ prettier --stdin-filepath does/not/exist.js < test.js
[error] Invalid configuration file: ENOENT: no such file or directory, scandir '/home/you/project/does/not'

# Prettier 1.19
$ prettier --stdin-filepath does/not/exist.js < test.js
test;

La configuración no debe evaluarse para archivos ignorados (#6233 por @jamesreggio)​

Antes de este cambio, el CLI resolvía la configuración antes de verificar si el archivo estaba ignorado. Si la configuración era inválida, el CLI reportaba un fallo.

Este cambio pospone la resolución de configuración hasta confirmar que el archivo no está ignorado.

Mostrar nombre de archivo de configuración inválido en mensajes de error (#6865 por @fisker)​

# Input
$ prettier filename.js --config .invalid-config

# Prettier 1.18
Invalid configuration file: ...

# Prettier 1.19
Invalid configuration file `.invalid-config`: ...

Otros​

¡Gracias a @fisker por actualizar numerosas dependencias de Prettier!

VS Code: agregar soporte para archivos .mongo (#6848 por @aymericbouzy)​

Al usar la extensión Azure Cosmos DB para VS Code, puedes crear archivos .mongo para escribir consultas de MongoDB, que utilizan sintaxis JavaScript. Este cambio permite que VS Code formatee tus archivos usando Prettier.

db.users.find({ someField: { $exists: true } });