Saltar al contenido principal

Prettier 1.13: ¡Conquistando la web!

· 23 min de lectura
Lucas Duailibe
Lucas Duailibe
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 añade soporte para varias nuevas características de sintaxis, correcciones de formato y soporte de primera clase para trabajar en el navegador.

Destacados​

API/CLI​

¡Prettier funciona en el navegador!​

El equipo y nuestros usuarios llevaban mucho tiempo deseando esta funcionalidad, y finalmente anunciamos que Prettier 1.13 tiene soporte de primera clase para ejecutarse en el navegador. Antes requería varios trucos, pero a partir de ahora puedes simplemente cargar el paquete principal y los analizadores que necesites.

<script src="https://unpkg.com/prettier@1.13.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@1.13.0/parser-babylon.js"></script>
<script src="https://unpkg.com/prettier@1.13.0/parser-graphql.js"></script>
<script type="text/javascript">
var formatButton = document.querySelector("#format");
var textInput = document.querySelector("#input");
formatButton.addEventListener("click", function() {
  var value = textInput.value;
  textInput.value = prettier.format(value, {
    parser: "babylon",
    plugins: prettierPlugins
  });
});</script>

Lee más sobre esto en la documentación o pruébalo en este JS Bin.

No establecer el analizador de JavaScript como predeterminado (#4528 por @duailibe)​

En Prettier 1.12 y versiones anteriores, al ejecutar Prettier en un archivo sin extensión, asumía automáticamente que contenía JavaScript. Esto causaba algunos errores confusos:

  • Si ejecutabas Prettier en tu directorio .git, reformateaba archivos y rompía tu repositorio git.

  • Al intentar formatear archivos HTML, a veces fallaba, pero otras veces analizaba el HTML como JSX y lo formateaba como tal (lo cual solía ser inseguro).

En Prettier 1.13, cambiamos este comportamiento. Si Prettier no puede determinar el lenguaje de un archivo por su extensión y el usuario no especifica manualmente un analizador, omitirá el archivo.

Para formatear archivos con extensiones no soportadas o no estándar, usa la opción --parser para especificar qué analizador emplear. Si canalizas contenido a través de stdin, incluye --stdin-filepath para que Prettier use la extensión del archivo y detecte el lenguaje a analizar.

Al usar la API de JavaScript, prettier.format y prettier.formatWithCursor ahora lanzarán un error si no incluyes parser o filepath en las opciones. También fallará si incluyes filepath sin parser y no se puede inferir el analizador correcto de la ruta.

Método prettier.getFileInfo() y opción CLI --file-info (#4341 por @kachkaev)​

Al invocar Prettier desde la API, no había forma de determinar si un archivo debía ignorarse (por .prettierignore), así que los plugins de editores implementaban esta lógica. Tampoco había forma de verificar si Prettier soportaba un archivo, forzando a llamar a Prettier de todos modos. En la versión 1.13, puedes verificar qué analizador se inferirá y si el archivo se ignora antes de llamar a format.

Puedes leer más sobre esto en la documentación.

Soporte para Prettier global y plugins (#4192 por @kachkaev)​

Al instalar Prettier y plugins globalmente, Prettier no podía cargarlos automáticamente porque los buscaba en el package.json más cercano. Ahora buscará plugins en el directorio node_modules donde está instalado. Además, para configuraciones no soportadas, se añadió la opción --plugin-search-dir para especificar dónde buscar plugins.

Puedes leer más sobre esto en la documentación de Plugins.

Mejoras en el seguimiento de posición del cursor (#4397 por @ds300)​

Prettier 1.13 mejora significativamente el seguimiento del desplazamiento del cursor en varios casos donde antes Prettier calculaba mal la ubicación, lo que hacía que las integraciones en editores movieran el cursor a una posición incorrecta.

JavaScript​

Inserta más paréntesis en expresiones matemáticas (#4413 y #4407 por @duailibe)​

Prettier ahora agregará paréntesis alrededor de operaciones módulo cuando estén dentro de una operación aditiva o al mezclar dos operaciones multiplicativas diferentes, aunque no sean necesarios. Esto ayuda a comprender más rápidamente fragmentos de código.

// Input
a % 10 - 5;
2 / 3 * 10 / 2 + 2;

// Output with Prettier 1.13
(a % 10) - 5;
((2 / 3) * 10) / 2 + 2;

Mantiene en una línea las pruebas de AngularJS que usan inject (#4495 por @thorn0)​

Prettier ahora mantendrá en una sola línea las pruebas de AngularJS con inyección de dependencias, como lo hace con otras pruebas.

// Input:
it("has calculated the answer correctly", inject(function(DeepThought) {
  expect(DeepThought.answer).toBe(42);
}));

// Output with Prettier 1.12.1:
it(
  "has calculated the answer correctly",
  inject(function(DeepThought) {
    expect(DeepThought.answer).toBe(42);
  })
);

// Output with Prettier 1.13:
it("has calculated the answer correctly", inject(function(DeepThought) {
  expect(DeepThought.answer).toBe(42);
}));

Ajuste de líneas más elegante para D3 (#4285 por @1wheel, #4505 por @duailibe)​

En Prettier 1.12 y anteriores, las cadenas que comenzaban con d3 y otros nombres cortos se rompían antes del primer .. En Prettier 1.13, no agregaremos un salto de línea después del nombre si es más corto que el ancho de la indentación.

// Input
d3.select('body')
  .append('circle')
  .at({ width: 30, fill: '#f0f' })
  .st({ fontWeight: 600 })

// Output with Prettier 1.12.1:
d3
  .select("body")
  .append("circle")
  .at({ width: 30, fill: "#f0f" })
  .st({ fontWeight: 600 });

// Output with Prettier 1.13:
d3.select("body")
  .append("circle")
  .at({ width: 30, fill: "#f0f" })
  .st({ fontWeight: 600 });

Formatea la nueva tabla describe.each en Jest 23 (#4423 por @ikatyang)​

Jest 23 introdujo una nueva funcionalidad llamada pruebas basadas en datos donde puedes describir ejemplos a probar en una tabla. Prettier 1.13 incluye soporte para esta característica e indentará automáticamente la tabla al usar pruebas basadas en datos.

// Input
describe.each`
a|b|expected
${11   } | ${  1  }|${222}
${1-1}|${2+2}|${ 3333}
${2+1+2}|${1111}|${3}
`('$a + $b', ({a, b, expected}) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

// Output with Prettier 1.13
describe.each`
  a            | b        | expected
  ${11}        | ${1}     | ${222}
  ${1 - 1}     | ${2 + 2} | ${3333}
  ${2 + 1 + 2} | ${1111}  | ${3}
`("$a + $b", ({ a, b, expected }) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

Formatea la composición funcional de manera más agradable (#4431 por @suchipi)​

Uno de los cambios más solicitados en Prettier era formatear mejor la composición de funciones. Este patrón es común en bibliotecas de programación funcional como RxJS, Redux, Lodash y Ramda. En la versión 1.13, Prettier incluye una heurística para detectar este tipo de composición funcional y formatearla de modo que cada función compuesta esté en su propia línea. Esto mejora la legibilidad al usar funciones como pipe, compose, flowRight, etc.

// Input
compose(
  sortBy(x => x),
  flatten,
  map(x => [x, x * 2])
);

pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
);

// Output with Prettier 1.12.1
compose(sortBy(x => x), flatten, map(x => [x, x * 2]));

pipe(filter(x => x % 2 === 0), map(x => x + x), scan((acc, x) => acc + x, 0));

// Output with Prettier 1.13
compose(
  sortBy(x => x),
  flatten,
  map(x => [x, x * 2])
);

pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
);

Conserva los paréntesis alrededor de expresiones do cuando es necesario y mejora su formato (#4479 por @existentialism)​

En Prettier 1.12 y anteriores, había casos donde Prettier eliminaba paréntesis alrededor de expresiones do de forma insegura, lo que invalidaba el código. Esos casos están corregidos en 1.13. Además, el formato de las expresiones do ha mejorado en general con esta versión.

// Input
(do {});
(do {} + 1);
(1 + do {});

() => do {
  var obj = { foo: "bar", bar: "foo" };
  for (var key in obj) {
    obj[key];
  }
};

// Output with Prettier 1.12
do {
};
do {
} + 1;
1 +
  do {
  };

() =>
  do {
    var obj = { foo: "bar", bar: "foo" };
    for (var key in obj) {
      obj[key];
    }
  };

// Output with Prettier 1.13
(do {});
(do {} + 1);
1 + do {};

() => do {
  var obj = { foo: "bar", bar: "foo" };
  for (var key in obj) {
    obj[key];
  }
};

Flow​

Imprime correctamente mixins e implements en clases (#4326 por @existentialism)​

En versiones 1.12 y anteriores, Prettier eliminaba incorrectamente mixins e implements de clases en definiciones de biblioteca de Flow, alterando el significado del código. Esto se ha corregido en 1.13.

// Input
declare class A implements B {}
declare class C mixins D {}

// Output with Prettier 1.12
declare class A {}
declare class C {}

// Output with Prettier 1.13
declare class A implements B {}
declare class C mixins D {}

Agregado soporte para el operador de fusión nula y separadores numéricos literales (#4536 por @vjeux)​

Estas características de JS ya estaban soportadas con el parser Babylon por defecto, pero Prettier 1.13 agrega soporte para ellas al usar el parser de Flow.

Agregado soporte para nuevas características de sintaxis en Flow (#4543, #4540 y #4551 por @existentialism)​

Nuevas características añadidas a Flow ahora son soportadas por Prettier:

  • interfaces en línea

    type A = interface { p: string};

  • argumentos de tipo explícitos

    fnCall<string>("name");

  • sintaxis de modificador proto

    declare class A { proto: T }

TypeScript​

Se agregó soporte para tipos de importación de TypeScript (#4429 y #4438 por @ikatyang)​

Una nueva característica añadida en TypeScript 2.9 para describir la estructura de un módulo importado dinámicamente.

// Input
export const x: import("./foo") = { x: 0, y: 0 };

export let y: import("./foo2").Bar.I = { a: "", b: 0 };

export let shim: typeof import("./foo2") = { Bar: Bar2 };

// Output with Prettier 1.13
export const x: import("./foo") = { x: 0, y: 0 };

export let y: import("./foo2").Bar.I = { a: "", b: 0 };

export let shim: import("./foo2") = { Bar: Bar2 };

Se agregó soporte para elementos JSX genéricos en TypeScript (#4268 por @ikatyang)​

Otra característica añadida en TypeScript 2.9 es el soporte para genéricos en elementos JSX, y Prettier 1.13 ahora puede formatearlos.

// Example:
<MyComponent<number> data={12} />

Se agregó soporte para typeParameters en TaggedTemplateExpression (#4353 por @ikatyang)​

También añadido en TypeScript 2.9, ahora es posible pasar parámetros de tipo a etiquetas de expresiones de plantilla.

// Example:
export const RedBox = styled.div<{ foo: string }>`
  background: red;
  ${props => props.foo};
`;

Se mejoró el formato de conversiones de tipo con genéricos y uniones (#4219 por @kpdonn)​

// Input
const finalConfiguration =
  <Immutable.Map<string, any>>someExistingConfigMap.mergeDeep(fallbackOpts);

// Output with Prettier 1.12
const finalConfiguration = <Immutable.Map<
  string,
  any
>>someExistingConfigMap.mergeDeep(fallbackOpts);

// Output with Prettier 1.13
const finalConfiguration = <Immutable.Map<string, any>>(
  someExistingConfigMap.mergeDeep(fallbackOpts)
);

JSON​

Separación de los parsers JSON y JSON5 (#4367 y #4371 por @ikatyang, #4333 por @duailibe)​

JSON5 es un superconjunto de JSON que admite comentarios, comas finales y claves de propiedades sin comillas. Algunos archivos (como .babelrc) usan JSON5, por lo que en ellos se permiten comentarios, comas finales y claves sin comillas. Otros archivos (como package.json) no usan JSON5, por lo que no admiten comentarios, comas finales ni claves sin comillas. Prettier tenía anteriormente un único parser y printer llamado JSON que se usaba para ambos, pero mantener ambos juntos generaba errores sutiles, especialmente con la detección e inserción del comentario pragma /* @prettier */. Al separarlos, estos errores se solucionan y Prettier es más robusto.

Se agregó el parser json-stringify para formateo al estilo JSON.stringify (#4450 por @ikatyang)​

Una queja común con prettier era que formateaba package.json y package-lock.json de forma diferente a npm y yarn, por lo que al ejecutar comandos de npm o yarn, podían introducirse violaciones de prettier. Además, editar package.json podía agregar saltos de línea que luego serían eliminados al ejecutar nuevamente npm o yarn. Esto generaba ruido innecesario en los diffs y mala experiencia de usuario. En Prettier 1.13, se agregó un nuevo parser/printer llamado json-stringify que se comporta igual que JSON.stringify, evitando cambios que oscilen entre herramientas. Este es ahora el parser/printer predeterminado para package.json y package-lock.json, por lo que al actualizar a prettier, estos ruidosos diffs desaparecerán sin cambios de configuración.

CSS/Less/SCSS​

Se mejoró el formato para mapas de SCSS (#4487 por @evilebottnawi)​

/* Output with Prettier 1.12 */
a {
  @include section-type-1(
    $header: (margin: 0 0 $margin-base, text-align: left),
    $decoration:
      (
        type: base,
        margin: 0 auto -1px 0,
        primary-color: $brand-primary,
        secondary-color: $gray-light
      ),
    $title:
      (
        margin: 0 0 $margin-small,
        color: false,
        font-size: $font-size-h3,
        font-weight: false,
        line-height: $line-height-h3
      )
  );
}

/* Output with Prettier 1.13 */
a {
  @include section-type-1(
    $header: (
      margin: 0 0 $margin-base,
      text-align: left
    ),
    $decoration: (
      type: base,
      margin: 0 auto -1px 0,
      primary-color: $brand-primary,
      secondary-color: $gray-light
    ),
    $title: (
      margin: 0 0 $margin-small,
      color: false,
      font-size: $font-size-h3,
      font-weight: false,
      line-height: $line-height-h3
    )
  );
}

Se mejoró el formato para la regla @support (#4372 por @evilebottnawi)​

/* Input */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

/* Output with Prettier 1.12 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

/* Output with Prettier 1.13 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
  (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

Markdown​

Cambio del símbolo de lista desordenada a un guion (#4440 por @ikatyang)​

Al lanzar el soporte para Markdown en Prettier, usamos datos de GitHub BigQuery y descubrimos que el símbolo * se usaba marginalmente más que - en listas desordenadas. Desde entonces, recibimos amplio feedback de la comunidad indicando que - es preferido. Prettier 1.13 ahora formatea listas desordenadas usando -.

<!-- Input -->
* Top level list item 1
* Top level list item 2
  * Nested List item 1
  * Nested List item 2
    * Sub-Nested List item 1
    * Sub-Nested List item 2

<!-- Output with Prettier 1.12.1 -->
* Top level list item 1
* Top level list item 2
  * Nested List item 1
  * Nested List item 2
    * Sub-Nested List item 1
    * Sub-Nested List item 2

<!-- Output with Prettier 1.13 -->
- Top level list item 1
- Top level list item 2
  - Nested List item 1
  - Nested List item 2
    - Sub-Nested List item 1
    - Sub-Nested List item 2

Se preserva el contenido de las etiquetas Liquid (#4484 por @duailibe)​

Liquid es un lenguaje de plantillas popular en generadores de sitios estáticos como Jekyll. En Prettier 1.12 y anteriores, las etiquetas Liquid en archivos markdown no se manejaban correctamente, ya que Prettier las consideraba texto plano. Esto alteraba su contenido y significado. Ahora Prettier 1.13 entiende las etiquetas Liquid y no modifica su contenido.

<!-- Input -->
{% include_relative _installations/tarball.md %}

{% cloudinary nice_prefix_-_for_the_filename.jpg %}

<!-- Output with Prettier 1.12 -->
{% include_relative \_installations/tarball.md %}

{% cloudinary nice*prefix*-\_for_the_filename.jpg %}

<!-- Output with Prettier 1.13 -->
{% include_relative _installations/tarball.md %}

{% cloudinary nice_prefix_-_for_the_filename.jpg %}

Dividir definiciones de enlaces en múltiples líneas cuando sea necesario (#3531 por @j-f1)​

Las definiciones de enlaces se dividirán en múltiples líneas cuando se usen con --prose-wrap always si superan el ancho de impresión.

<!-- Input -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]: https://example.com "a long, long title. It's really really long. Here have words."

[long]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx "look a title!"

<!-- Output with Prettier 1.12 -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]: https://example.com "a long, long title. It's really really long. Here have words."
[long]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx "look a title!"

<!-- Output with Prettier 1.13 -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]:
  https://example.com
  "a long, long title. It's really really long. Here have words."
[long]:
  https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]:
  https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
  "look a title!"

GraphQL​

Agregar líneas en blanco después de definiciones de nivel superior solo si estaban en el código fuente original (#4512 por @ad1992)​

En Prettier 1.12 y versiones anteriores, siempre imprimíamos una línea en blanco entre definiciones de nivel superior. En la 1.13, solo generaremos una línea en blanco si estaba presente originalmente. Este comportamiento es similar a cómo Prettier formatea JavaScript.

# Input
type TypeA {
  fieldA: string
}
type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

# Output with Prettier 1.12.1
type TypeA {
  fieldA: string
}

type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

# Output with Prettier 1.13
type TypeA {
  fieldA: string
}
type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

Otros cambios​

API/CLI​

No formatear rangos si falta la directiva requerida en el archivo (#3996 por @josephfrazier)​

En Prettier 1.12 y anteriores, si un archivo no tenía la directiva /** @prettier */ y Prettier se llamaba solo para un rango con --require-pragma, lo formateaba de todos modos. Ahora Prettier verificará si el archivo tiene la directiva incluso al formatear solo un rango.

Mejorar la resolución de plugins cuando la ruta no comienza con ./ (#4451 por @kachkaev)​

Al pasar --plugin=path/to/plugin, Prettier 1.12 y anteriores fallaba porque buscaba path/to/plugin en la carpeta node_modules. Prettier 1.13 buscará primero en el directorio actual y, si no lo encuentra, buscará en node_modules.

Añadir interfaz de plugin para isBlockComment (#4347 por @mgrip)​

Un comentario de bloque es un comentario que puede imprimirse en línea con el código (para JS, es /* comment */). Dado que Prettier se encarga de imprimir comentarios, necesitábamos permitir que los plugins determinen si un comentario es de bloque. Más información en nuestra documentación.

JavaScript​

Aplicar reglas de desestructuración en funciones al parámetro catch (#4385 por @duailibe)​

En la 1.12 formateábamos la desestructuración en argumentos de catch como en asignaciones, pero el código se ve mejor si lo tratamos como desestructuración en parámetros de función, así que implementamos ese cambio.

// Input
try {
  doSomething();
} catch ({data: {message}}) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({data: {message: {errors}}}) {
  handleError(errors);
}

// Output with Prettier 1.12.1
try {
  doSomething();
} catch ({
  data: { message }
}) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({
  data: {
    message: { errors }
  }
}) {
  handleError(errors);
}

// Output with Prettier 1.13
try {
  doSomething();
} catch ({ data: { message } }) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({
  data: {
    message: { errors }
  }
}) {
  handleError(errors);
}

Escapar barras invertidas correctamente para Markdown en JS (#4381 por @ikatyang)​

Prettier 1.12 y anteriores eliminaba incorrectamente barras invertidas en literales de plantilla de Markdown en algunos casos. Prettier 1.13 las imprimirá correctamente.

// Input
markdown`
  const cssString = css\`
    background-color: \$\{color('base')\}
  \`;
`
// Output with Prettier 1.12.1
markdown`
  const cssString = css\`background-color: ${color('base')}\`;
`;

// Output with Prettier 1.13
markdown`
  const cssString = css\`background-color: \$\{color('base')\}\`;
`;

Compatibilidad con Foo.extend.attrs()`` de styled-components (#4434 por @duailibe)​

En Prettier 1.12.1, no detectaba que el literal de plantilla pasado a la función Foo.extends.attrs() de styled-components era CSS. En la 1.13, ahora admite esta sintaxis y formateará el contenido del literal de plantilla como CSS.

// Input
Button.extend.attrs({})`
border-color : black;
`;

// Output with Prettier 1.12
Button.extend.attrs({})`
border-color : black;
`;

// Output with Prettier 1.13
Button.extend.attrs({})`
  border-color: black;
`;

Añadida compatibilidad con la etiqueta de comentario GraphQL (#4395 por @tjallingt)​

Formateamos GraphQL en literales de plantilla etiquetados, pero existen bibliotecas GraphQL que usan literales sin etiqueta. Muchos plugins de editores GraphQL usan el comentario /* GraphQL */ antes de un literal sin etiqueta para detectar GraphQL. En la 1.13, Prettier también detecta ese comentario y formatea el código GraphQL.

// Input
const query = /* GraphQL */`
      {
    user(   id :   5  )  {
      firstName
      lastName
    }
  }
`;

// Output with Prettier 1.13
const query = /* GraphQL */ `
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`;

Formatear estilos de componentes Angular (#4361 por @JamesHenry)​

Prettier 1.13 formatea los estilos en línea de componentes Angular.

// Input
@Component({
       selector: 'app-test',
  styles: [   `

 :host {
   color: red;
 }
 div { background: blue
 }
`

]
})
class     TestComponent {}

// Output with Prettier 1.13
@Component({
  selector: "app-test",
  styles: [
    `
      :host {
        color: red;
      }
      div {
        background: blue;
      }
    `,
  ],
})
class TestComponent {

Dividir correctamente los inicializadores de propiedades de clase (#4442 por @nicolo-ribaudo)​

Prettier 1.12 no indentaba las líneas siguientes al dividir un inicializador de propiedad de clase. Esto está corregido en la 1.13.

// Input
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  	this.props.barbarbarbar;
}

// Output with Prettier 1.12
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  this.props.barbarbarbar;
}

// Output with Prettier 1.13
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  	this.props.barbarbarbar;
}

Corrección de métodos con nombres largos en expresiones bind (#4447 por @misoguy)​

Prettier 1.13 mejora el formato de cadenas largas de expresiones de miembros en expresiones bind.

// Input
function Foo() {
	const longVariableName = ::veryLongObjectName.veryLongObjectChain.veryLongObjectProperty;
}

// Output with Prettier 1.12
function Foo() {
  const longVariableName = ::veryLongObjectName.veryLongObjectChain
    .veryLongObjectProperty;
}

// Output with Prettier 1.13
function Foo() {
  const longVariableName =
    ::veryLongObjectName.veryLongObjectChain.veryLongObjectProperty;
}

Dejar de eliminar paréntesis para el operador ?. (#4542 por @duailibe)​

Existe un caso extremo en la propuesta de encadenamiento opcional donde envolver entre paréntesis altera el comportamiento en tiempo de ejecución. Prettier 1.12 y versiones anteriores eliminaban estos paréntesis, lo cual se ha corregido en la versión 1.13.

// Input
(a?.b).c

// Output with Prettier 1.12
a?.b.c

// Output with Prettier 1.13
(a?.b).c

Flow​

Envolver ?() => T entre paréntesis cuando sea necesario (#4475 por @nicolo-ribaudo)​

Prettier 1.12 y anteriores cambiaban involuntariamente el significado de tipos al usar operadores nullable debido a la precedencia de operadores. Esto se ha corregido en Prettier 1.13.

// Input
type Foo = { arg: ?(() => void) | string };

// Output with Prettier 1.12
type Foo = { arg: ?() => void | string };
// which is equivalent to:
type Foo = { arg: ?() => (void | string) };

// Output with Prettier 1.13
type Foo = { arg: ?(() => void) | string };

TypeScript​

Conservar propiedades de clase entrecomilladas (#4517 por @ikatyang)​

Las comprobaciones estrictas de inicialización de propiedades no se aplican a propiedades de clase entrecomilladas en TypeScript. En Prettier 1.13 conservaremos las comillas si estaban originalmente en el código.

// Input
class Username {
  age: number;
  "username": string;
}

// Output with Prettier 1.12
class Username {
  age: number;
  username: string;
}

// Output with Prettier 1.13
class Username {
  age: number;
  "username": string;
}

Markdown​

Eliminar saltos de línea en archivos .md vacíos (#4388 por @huyvohcmc)​

En Prettier 1.12.1 se imprimía un salto de línea al formatear archivos markdown vacíos. Esto se ha corregido en la versión 1.13.

Evitar fusionar texto CJK continuo con --prose-wrap preserve (#4504 por @ikatyang)​

Al usar --prose-wrap preserve, Prettier ya no fusionará texto CJK continuo dividido en múltiples líneas.

<!-- Input -->
::: warning 注意
该网站在国外无法访问，故以下演示无效
:::

<!-- Output with Prettier 1.12 -->
::: warning 注意该网站在国外无法访问，故以下演示无效
:::

<!-- Output with Prettier 1.13 -->
::: warning 注意
该网站在国外无法访问，故以下演示无效
:::

CSS/SCSS/Less​

Imprimir comas finales en listas y mapas de SCSS (#4317 por @ad1992)​

Prettier ahora imprime comas finales en listas y mapas de SCSS cuando trailingComma no es "none" y la lista o mapa se divide en múltiples líneas.

/* Input */
$list: (a);
$colors: (
  "red",
  "blue"
);
$map: (
  'medium': (min-width: 800px),
  'large': (min-width: 1000px),
  'huge': (min-width: 1200px),
);

/* Output with Prettier 1.13 */
$list: (a);
$colors: (
  "red",
  "blue",
);
$map: (
  "medium": (min-width: 800px),
  "large": (min-width: 1000px),
  "huge": (min-width: 1200px),
);

Corregir front-matter vacío (#4392 y #4457 por @eliasmeire)​

Prettier 1.12 incluía soporte para bloques front-matter en archivos CSS/SCSS/Less, pero eliminaba bloques vacíos (o con solo comentarios). Esto se ha corregido en la versión 1.13.

No formatear interpolación de cadenas en SCSS (#4490 por @evilebottnawi)​

Prettier rompía código SCSS al formatear cadenas con interpolación en ciertos casos. Prettier 1.13 imprimirá el código original.

/* Input
a {
 content: "#{my-fn("_")}";
}

/* Output with Prettier 1.12 */
a {
 content: "#{my-fn(" _ ")}";
}

/* Output with Prettier 1.13 */
a {
 content: "#{my-fn("_")}";
}

Escapar caracteres correctamente (#4472 por @evilebottnawi)​

Prettier 1.12 no escapaba caracteres correctamente en algunos casos.

/* Input */
@media only screen and (max-width: 767px) {
    @include widths(2 3 4, \@small);
}

$widths-breakpoint-separator: \@small;

/* Output with Prettier 1.12 */
@media only screen and (max-width: 767px) {
  @include widths(2 3 4, \ @small);
}

$widths-breakpoint-separator: \ @small;

/* Output with Prettier 1.13 */
@media only screen and (max-width: 767px) {
    @include widths(2 3 4, \@small);
}

$widths-breakpoint-separator: \@small;

Corregir interpolación SCSS en variables CSS (#4471 por @evilebottnawi)​

/* Input */
a {
  --bg: var(--#{$type});
}

/* Output with Prettier 1.12 */
a {
  --bg: var(-- #{$type});
}

/* Output with Prettier 1.13 */
a {
  --bg: var(--#{$type});
}

Corregir problema de espaciado en variables calculadas de PostCSS (#4408 por @ad1992)​

/* Input */
background-color: $$(style)Color;

/* Output with Prettier 1.12 */
background-color: $$(style) Color;

/* Output with Prettier 1.13 */
background-color: $$(style)Color;