Saltar al contenido principal

Prettier 1.12: Correcciones, Funcionalidades y Formateo, ¡Oh Dios Mío!

· 18 min de lectura
Lily Skye
Lily Skye
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 →

¡Hola a todos y bienvenidos a Prettier 1.12.0! Esta versión incluye numerosas correcciones de errores, ajustes de formato, nuevas funcionalidades para nuestra API de plugins y mejoras para Markdown.

Destacados​

JavaScript​

Romper ternarios anidados (#4120 by @duailibe)​

Cuando los ternarios están anidados, dependiendo del ancho de impresión y nivel de indentación, a veces el ternario externo podía romperse en múltiples líneas mientras el interno permanecía en una sola línea:

// Input:
const platformString = Platform.OS == "ios" ? "iOS"
  : Platform.OS == "android" ? "Android" : "unknown";

// Formatted (Prettier 1.11.1):
const platformString =
  Platform.OS == "ios"
    ? "iOS"
    : Platform.OS == "android" ? "Android" : "unknown";

Esto resultaba un tanto extraño, así que para mejorar la legibilidad, ahora haremos que todos los ternarios anidados sean multilínea si alguno de ellos se convierte en multilínea:

// Formatted (Prettier 1.12.0):
const platformString =
  Platform.OS == "ios"
    ? "iOS"
    : Platform.OS == "android"
      ? "Android"
      : "unknown";

Manejar comentarios antes de else (#4264 by @duailibe)​

Un bug persistente trataba sobre el comportamiento al imprimir comentarios previos a else. Los comentarios anteriores a la palabra clave else se movían dentro del bloque else, lo cual podía confundir cuando el comentario explicaba la condición en lugar del bloque. Además, interfería al comentar porciones de una cadena if/else.

Entrada:​
if (obj.foo) {
  return foo;
}
// Use bar as a fallback
else if (obj.bar) {
  return bar;
}

if (a == 2) {
  console.log('2');
}
// else if (a == 3) {
//   console.log('3');
// }
else if (a == 4) {
  console.log('4');
}
Formateado (Prettier 1.11.1):​
if (obj.foo) {
  return foo;
} else if (obj.bar) {
  // Use bar as a fallback
  return bar;
}

if (a == 2) {
  console.log("2");
} else if (a == 4) {
  // else if (a == 3) {
  //   console.log('3');
  // }
  console.log("4");
}

Era molesto que estos comentarios se movieran, pero no estábamos seguros de cómo proceder porque queríamos formatear consistentemente los bloques else así: } else {.

Decidimos en esta versión hacer una excepción al formato normal y formatear else de manera diferente, pero solo si aparece un comentario entre else y la llave de apertura. Esta parece la mejor solución:

Formateado (Prettier 1.11.1):​
if (obj.foo) {
  return foo;
}
// Use bar as a fallback
else if (obj.bar) {
  return bar;
}

if (a == 2) {
  console.log("2");
}
// else if (a == 3) {
//   console.log('3');
// }
else if (a == 4) {
  console.log("4");
}

Integrar pruebas async de Angular y beforeEach, etc. (#4241 by @ad1992)​

En Prettier 1.11.1, las pruebas de Angular usando el helper async se formateaban con saltos de línea innecesarios. Hemos modificado el comportamiento para mantener las funciones envueltas con este helper en línea, evitando estos saltos innecesarios.

// Input:
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

// Formatted (Prettier 1.11.1):
import { TestBed, async } from "@angular/core/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [AppComponent]
      }).compileComponents();
    })
  );
  it(
    "should create the app",
    async(() => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    })
  );
});

// Formatted (Prettier 1.12.0):
import { TestBed, async } from "@angular/core/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it("should create the app", async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

Romper ObjectPattern con ObjectPattern anidados (#4267 by @duailibe)​

Recibimos amplios comentarios de la comunidad indicando que la sintaxis de desestructuración de objetos y arrays a veces no se formateaba correctamente. Como primer paso para mejorarlo, hemos implementado que cualquier patrón de objeto o array anidado no terminal en un patrón de desestructuración se convertirá en multilínea si alguno de sus padres lo hace:

// Input:
const {
  name: {
    first,
    last,
  },
  organisation: {
    address: {
      street: orgStreetAddress,
      postcode: orgPostcode,
    },
  },
} = user;

// Formatted (Prettier 1.11.1):
const {
  name: { first, last },
  organisation: { address: { street: orgStreetAddress, postcode: orgPostcode } }
} = user;

// Formatted (Prettier 1.12.0):
const {
  name: { first, last },
  organisation: {
    address: { street: orgStreetAddress, postcode: orgPostcode }
  }
} = user;

Markdown​

Soporte para hasPragma/insertPragma (#4275 by @ikatyang)​

Prettier 1.7.0 y 1.8.0 introdujeron dos nuevas opciones: --require-pragma y --insert-pragma. Sin embargo, estas opciones solo estaban disponibles en JavaScript. ¡Ahora también están disponibles en Markdown!

<!-- @prettier -->

# My Markdown Document

A long time ago, in my hometown of Ericsburgh...

Soporte para prettier-ignore-start/prettier-ignore-end de nivel superior (#4202 by @ikatyang)​

Al utilizar herramientas como all-contributors o markdown-toc, los usuarios se encontraban con situaciones donde contenido Markdown generado automáticamente se formateaba de manera extraña con Prettier, o el modo --list-different de Prettier marcaba contenido autogenerado cuyo formato no les importaba.

Para resolver estos problemas, hemos añadido un nuevo tipo de comentario de ignorar en Markdown, llamado Range Ignore:

<!-- prettier-ignore-start -->
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
| [<img src="https://avatars1.githubusercontent.com/u/12345?v=4" width="100px;"/><br /><sub><b>Alice</b></sub>](https://github.com/example-alice)<br /> [💻](https://github.com/my/repo/commits?author=example-alice "Code") [📖](https://github.com/my/repo/commits?author=example-alice "Documentation") [⚠️](https://github.com/my/repo/commits?author=example-alice "Tests") | [<img src="https://avatars3.githubusercontent.com/u/12346?v=4" width="100px;"/><br /><sub><b>Bob</b></sub>](https://github.com/example-bob)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-bob "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/123457?v=4" width="100px;"/><br /><sub><b>Jeffrey</b></sub>](https://github.com/example-jeffrey)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-jeffrey "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/123458?v=4" width="100px;"/><br /><sub><b>Sarah</b></sub>](https://github.com/example-sarah)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-sarah "Bug reports") |
| :---: | :---: | :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->
<!-- prettier-ignore-end -->

Puedes colocar comentarios prettier-ignore-start y prettier-ignore-end alrededor de contenido autogenerado, y Prettier ignorará todo lo que haya entre ellos. Ten en cuenta que esta característica actualmente solo está disponible en Markdown y solo puede usarse en el nivel superior.

GraphQL​

Permitir nuevo estilo de interfaces para GraphQL. (#4012 por @ruiaraujo)​

El lenguaje de definición de esquemas GraphQL recientemente cambió la sintaxis para interfaces con herencia múltiple, usando & en lugar de ,:

// Old style
type Foo implements Bar, Baz { field: Type }

// New style
type Foo implements Bar & Baz { field: Type }

Prettier 1.11.1 no podía analizar el nuevo estilo; ahora admitimos ambos estilos.

API de Plugins (Beta)​

Mover detección/inserción de pragmas a plugins (#3685 por @duailibe)​

Los plugins de Prettier ahora pueden incluir una función hasPragma en sus parsers y una función insertPragma en sus printers para habilitar soporte de --insert-pragma y --require-pragma. Estas son sus firmas:

function hasPragma(text: string): boolean;
function insertPragma(text: string): string;

Habilitar funcionalidad específica para comentarios en plugins (#4182 por @mgrip)​

Los plugins ahora pueden sobrescribir el algoritmo de impresión de comentarios de Prettier caso por caso para mejorar el formato de comentarios en su lenguaje. Esta API aún no está documentada, pero puedes ver cómo se usa en el reciente Plugin PHP para Prettier aquí y aquí.

Otros cambios​

JavaScript​

Actualizar flow a 0.69 y habilitar soporte para ?. (#4296 por @vjeux)​

El encadenamiento opcional (?.) ahora es compatible cuando se usa el parser flow:

const name = this.model?.user?.firstName || "No Name Set"

Dejar de marcar todos los comentarios en exportaciones nombradas como comentarios principales (#4292 por @duailibe)​

Este cambio corrige un error donde comentarios ignorados en exportaciones nombradas se duplicaban en cada formato:

// Input:

// prettier-ignore
export {
  foo, // comment
  bar, // comment
}

// Formatted (Prettier 1.11.1):

// prettier-ignore
// comment
// comment
export {
  foo, // comment
  bar, // comment
}

// Formatted (Prettier 1.12.0):

// prettier-ignore
export {
  foo, // comment
  bar, // comment
}

Manejar comentarios en ContinueStatement y BreakStatement (#4279 por @duailibe)​

Prettier no imprimía erróneamente algunos comentarios cerca de las palabras clave continue y break. Esto ha sido corregido:

// Input:
for (let i = 0; i < 5; i++) {
  continue /* Comment */;
}

for (let i = 0; i < 10; i++) {
  break /* Comment */;
}

// Output (Prettier 1.11.1):
/*
  Error: Comment "Comment" was not printed. Please report this error!
    at https://prettier.io/lib/index.js:2312:75
    at Array.forEach (<anonymous>)
    at ensureAllCommentsPrinted (https://prettier.io/lib/index.js:2312:22)
    at _formatWithCursor (https://prettier.io/lib/index.js:2313:949)
    at _format (https://prettier.io/lib/index.js:2314:239)
    at formatRange (https://prettier.io/lib/index.js:2331:215)
    at _formatWithCursor (https://prettier.io/lib/index.js:2313:288)
    at _format (https://prettier.io/lib/index.js:2314:239)
    at Object.format (https://prettier.io/lib/index.js:2333:277)
    at formatCode (https://prettier.io/worker.js:130:21)
    at self.onmessage (https://prettier.io/worker.js:80:19)
*/

// Formatted (Prettier 1.12.0):
for (let i = 0; i < 5; i++) {
  continue; /* Comment */
}

for (let i = 0; i < 10; i++) {
  break; /* Comment */
}

Corrección para GraphQL embebido en JS con backticks (#4265 por @duailibe, #4278 por @duailibe)​

En Prettier 1.11.1, un error causaba que el código GraphQL que contenía cadenas con backticks escapados no se formateara. Esto se ha corregido en Prettier 1.12.0:

// Input:
gql`
  "\`foo\` mutation payload."
  type FooPayload { bar: String
  }
`

// Formatted (Prettier 1.11.1):
gql`
  "\`foo\` mutation payload."
  type FooPayload { bar: String
  }
`;

// Formatted (Prettier 1.12.0):
gql`
  "\`foo\` mutation payload."
  type FooPayload {
    bar: String
  }
`;

No mezcles expresiones al usar prettier-ignore dentro de literales de plantilla (#4220 por @evilebottnawi)​

Un error en Prettier 1.11.1 provocaba que las expresiones anidadas en literales de plantilla se desplazaran cuando se usaban comentarios prettier-ignore dentro del literal, bajo ciertas condiciones:

// Input:
styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => props.small ? 'font-size: 0.8em;' : ''};
`

// Formatted (Prettier 1.11.1):
styled.div`
  color: ${props => (props.small ? "font-size: 0.8em;" : "")};
  /* prettier-ignore */
  ${props => props.theme.colors.paragraph};
`;

Observa que las dos funciones que reciben props han intercambiado su posición.

Este error se ha corregido en Prettier 1.12.0:

// Formatted (Prettier 1.12.0):
styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => (props.small ? "font-size: 0.8em;" : "")};
`;

Prevenir el "sobre-indentado" de valores de propiedades de clase (#4085 por @duailibe)​

En Prettier 1.11.1, existía un problema donde el nivel de indentación para expresiones binarias (como 2 + 2, 4 * 4, etc.) aumentaba con cada salto de línea en ciertas condiciones. Esto se ha corregido en Prettier 1.12.0:

// Input:
class EnterpriseQualityClass {
	foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
    // then add bar and multiply by 90 time foo plus 2
    (this.bar * 90) * (this.foo + 2)
}

// Formatted (Prettier 1.11.1):
class EnterpriseQualityClass {
  foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
      // then add bar and multiply by 90 time foo plus 2
      this.bar * 90 * (this.foo + 2);
}

// Formatted (Prettier 1.12.0):
class EnterpriseQualityClass {
  foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
    // then add bar and multiply by 90 time foo plus 2
    this.bar * 90 * (this.foo + 2);
}

Mejorar el formato de switch (#4165 por @evilebottnawi)​

Cuando el discriminante de una sentencia switch era muy largo, no se imprimía de forma óptima. El formato ha mejorado en Prettier 1.12.0:

// Input:
switch (longLongLongLongLongLongLongVariable &&
    longLongLongLongLongLongLongVariable) {
  case (1): {
    console.log("hi");
  }
}

// Formatted (Prettier 1.11.1):
switch (longLongLongLongLongLongLongVariable &&
  longLongLongLongLongLongLongVariable) {
  case 1: {
    console.log("hi");
  }
}

// Formatted (Prettier 1.12.0):
switch (
  longLongLongLongLongLongLongVariable && longLongLongLongLongLongLongVariable
) {
  case 1: {
    console.log("hi");
  }
}

TypeScript​

Nunca imprimir punto y coma después de export default interface Foo {} (#4128 por @j-f1)​

En Prettier 1.11.1, se imprimían puntos y coma erróneamente después de interfaces exportadas por defecto. Esto se ha resuelto en Prettier 1.12.0:

// Input:
export default interface Foo {
  readonly bar?: string;
}

// Formatted (Prettier 1.11.1):
export default interface Foo {
  readonly bar?: string;
};

// Formatted (Prettier 1.12.0):
export default interface Foo {
  readonly bar?: string;
}

Requerir paréntesis alrededor de "TSAsExpression" dentro de un "UpdateExpression" (#4183 por @UselessPickles)​

Prettier 1.11.1 eliminaba incorrectamente los paréntesis alrededor de expresiones de actualización con conversión de tipo, lo que causaba errores de sintaxis. Este problema se ha corregido en Prettier 1.12.0:

// Input:
(obj.value as any)++

// Formatted (Prettier 1.11.1):
obj.value as any++;

// Formatted (Prettier 1.12.0):
(obj.value as any)++;

Markdown​

Eliminar línea vacía innecesaria en el front matter (#4280 por @ikatyang)​

Prettier 1.11.1 imprimía una línea vacía innecesaria al formatear documentos Markdown con front-matter YAML/TOML vacío; esta línea ya no se imprime:

Entrada:​
---
---

Hello
Formateado (Prettier 1.11.1):​
---

---

Hello
Formateado (Prettier 1.11.1):​
---
---

Hello

Soporte para el lenguaje de bloque de código cercado seguido de atributos (#4153 por @ikatyang)​

Algunos documentos Markdown utilizan atributos listados después del lenguaje para propósitos especiales; por ejemplo, son utilizados por markdown-preview-enhanced para modificar opciones de visualización y especificar parámetros de ejecución de código.

Los atributos de lenguaje en bloques de código se ven así:

```js {cmd=node .line-numbers}
console.log("hello world");
```

Prettier no formateaba el contenido de estos bloques Markdown anteriormente, porque no podía detectar el lenguaje del bloque de código cuando estaban presentes atributos. Ahora, Prettier detecta correctamente el lenguaje.

Corregir sangría de HTML anidado (#4115 por @ikatyang)​

En Prettier 1.11.1, el HTML anidado bajo un elemento de lista no se formateaba correctamente; el nivel de sangría cambiaba cada vez que se reformateaba el código. Esto ahora está corregido.

<!-- Input: -->
1.  A list item

    <table class="table table-striped">
    <tr>
    <th>Test</th>
    <th>Table</th>
    </tr>
    <tbody>
        <tr>
        <td>Test</td>
        <td>Data</td>
        </tr>
    </tbody>
    </table>

<!-- Output (Prettier 1.11.1): -->
1.  A list item

    <table class="table table-striped">
<tr>
<th>Test</th>
<th>Table</th>
</tr>
<tbody>
    <tr>
    <td>Test</td>
    <td>Data</td>
    </tr>
</tbody>
</table>

<!-- Output (Prettier 1.12.0): -->
1.  A list item

    <table class="table table-striped">
    <tr>
    <th>Test</th>
    <th>Table</th>
    </tr>
    <tbody>
        <tr>
        <td>Test</td>
        <td>Data</td>
        </tr>
    </tbody>
    </table>

Imprimir literalline para nueva línea en lugar de hardline (#4083 por @ikatyang)​

En Prettier 1.11.1, al incrustar CSS o JSX en Markdown, existía un problema que causaba que el nivel de sangría de los comentarios en bloque se estableciera incorrectamente en algunas situaciones. Este problema se ha corregido en Prettier 1.12.0:

<!-- Input: -->
```pcss
.Avatar {
    @container (width > 100px) {
      /*
      Change some styles on the image element when the container is
      wider than 100px
      */
    }
}
```

<!-- Formatted (Prettier 1.11.1): -->
```pcss
.Avatar {
  @container (width > 100px) {
    /*
          Change some styles on the image element when the container is
          wider than 100px
          */
  }
}
```

<!-- Formatted (Prettier 1.12.0): -->
```pcss
.Avatar {
  @container (width > 100px) {
    /*
      Change some styles on the image element when the container is
      wider than 100px
      */
  }
}
```

CSS/SCSS/Less​

No convertir a minúsculas el nombre de variable en selectores personalizados #4254 (#4255 por @Coobaha)​

Prettier 1.11.1 cambiaba erróneamente el nombre de variable de los selectores personalizados a minúsculas. Este problema se ha corregido en Prettier 1.12.0:

/* Input: */
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
 color: red;
}

/* Formatted (Prettier 1.11.1): */
@custom-selector :--camelCase .my-css-selector;

:--camelcase {
  color: red;
}

/* Formatted (Prettier 1.12.0): */
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
  color: red;
}

No romper la propiedad value con URL en línea (#4236 por @evilebottnawi)​

En Prettier 1.11.1, existía un problema donde Prettier imprimía url() incorrectamente cuando aparecían en propiedades abreviadas. Esto se ha corregido en Prettier 1.12.0.

/* Input: */
.search-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K) center center no-repeat;
}

/* Formatted (Prettier 1.11.1): */
.search-icon {
  background: url(
      data:image/svg+xml;base64,
      PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K
    )
    center center no-repeat;
}

/* Formatted (Prettier 1.12.0): */
.search-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K)
    center center no-repeat;
}

Corregir comentarios en línea en listas y mapas (#4205 por @evilebottnawi)​

Prettier 1.11.0 rompía el código cuando aparecían comentarios en línea dentro de listas o mapas SCSS. Esto se ha corregido en Prettier 1.12.0. Nota: Este estilo de formato aún no es ideal, pero esta corrección evita que se rompa el código.

// Input:
$my-list:
  'foo', // Foo
  'bar'; // Bar

$my-map: (
  'foo': 1, // Foo
  'bar': 2, // Bar
);

// Formatted (Prettier 1.11.1):
$my-list: "foo", / / Foo "bar"; // Bar

$my-map: (
  "foo": 1,
  / / Foo "bar": 2,
  / / Bar
);

// Formatted (Prettier 1.12.0):
$my-list: "foo",
  // Foo
    "bar"; // Bar

$my-map: (
  "foo": 1,
  // Foo
    "bar": 2,
  // Bar
);

No convertir a minúsculas variables exportadas en módulos CSS (#4152 por @evilebottnawi)​

Prettier 1.11.1 convertía incorrectamente a minúsculas los nombres de variables CSS exportadas desde módulos CSS. Esto causaba problemas al intentar importar la variable desde el módulo en el lado de JavaScript.

/* Input: */
:export {
  myColor: red;
}

/* Formatted (Prettier 1.11.1): */
:export {
  mycolor: red;
}

Esto se ha corregido en Prettier 1.12.0:

/* Formatted (Prettier 1.12.0): */
:export {
  myColor: red;
}

Manejar unicode-range (#4117 por @evilebottnawi)​

Prettier 1.11.1 imprimía incorrectamente reglas unicode-range. Esto se ha corregido en Prettier 1.12.0.

/* Input: */
@font-face {
  unicode-range: U+00-FF;
}

/* Formatted (Prettier 1.11.1): */
@font-face {
  unicode-range: U + 00-FF;
}

/* Formatted (Prettier 1.12.0): */
@font-face {
  unicode-range: U+00-FF;
}

HTML/Handlebars/Vue​

Compatibilidad con comentarios en la parte superior de un documento HTML (#4141 by @evilebottnawi)​

El equipo de Prettier continúa trabajando en nuestro formateador HTML que aún no está listo para producción. Esta versión incluye una corrección donde un comentario en la parte superior de un documento (como un comentario de htmlhint) hacía que el documento no se formateara correctamente. Este problema ha sido solucionado.

Corrección de else if en Handlebars (#4256 by @n8n8baby)​

Nuestro formateador de Handlebars tampoco está listo para uso público, pero en este ciclo de lanzamiento se agregó una corrección para que los bloques else if se impriman correctamente. Prettier 1.11.1 los convertía erróneamente en ifs.

Corrección de etiquetas de estilo autocerradas en vue (#4108 by @duailibe)​

Prettier 1.11.1 no manejaba correctamente las etiquetas de estilo o script autocerradas en archivos vue; las imprimía de manera inesperada. Esto se ha solucionado en Prettier 1.12.0.

<!-- Input: -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

<!-- Formatted (Prettier 1.11.1): -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />
<template><span : class= "$style.root" ><slot / ></span> </template> <style src=
  "./style.css" module / >;
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

<!-- Formatted (Prettier 1.12.0): -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

Misceláneos​

Playground: Agregar compatibilidad con rangeStart y rangeEnd (#4216 by @JamesHenry)​

Ahora se pueden especificar --range-start y --range-end en el playground gracias al trabajo de @JamesHenry. Esto ayudará a la comunidad de Prettier, ya que agiliza el proceso de reporte de errores relacionados con formatear una selección en el editor.

Corrección de impresión de archivos ignorados con --debug-check (#4066 by @duailibe)​

Prettier 1.11.1 imprimía erróneamente el contenido de archivos ignorados cuando se usaba la bandera --debug-check. En Prettier 1.12.0, el contenido de archivos ignorados ya no se escribe en stdout.

A la increíble comunidad de usuarios, colaboradores y mantenedores de Prettier: ¡gracias! Esto es algo que solo podemos construir juntos ❤️