Aller au contenu principal

Prettier 1.12 : Corrections, Fonctionnalités et Formatage, Oh Mon Dieu !

· 18 minutes de lecture
Lily Skye
Lily Skye
Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Bonjour à tous et bienvenue dans Prettier 1.12.0 ! Cette version contient de nombreuses corrections de bugs, des ajustements de formatage, de nouvelles fonctionnalités pour notre API de plugins et des améliorations pour le Markdown.

Principales fonctionnalités​

JavaScript​

Casse des ternaires imbriqués (#4120 par @duailibe)​

Lorsque des ternaires sont imbriqués, selon la largeur d'impression et le niveau d'indentation, le ternaire externe pouvait parfois être réparti sur plusieurs lignes tandis que le ternaire interne restait sur une seule ligne :

// 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";

Cela paraissait un peu étrange. Pour améliorer la lisibilité, nous allons désormais forcer tous les ternaires imbriqués à être multilignes si l'un d'eux le devient :

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

Gestion des commentaires avant else (#4264 par @duailibe)​

Un bug persistant concernait le comportement d'impression des commentaires précédant else. Les commentaires précédant le mot-clé else étaient déplacés à l'intérieur du bloc else, ce qui pouvait prêter à confusion lorsque le commentaire expliquait la condition plutôt que le bloc. Cela posait également problème lorsqu'on commentait une portion d'une chaîne if/else.

Entrée :​
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');
}
Formaté (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");
}

Ce déplacement de commentaires était gênant, mais nous hésitions sur la solution car nous voulions conserver un formatage cohérent des blocs else sous cette forme : } else {.

Nous avons décidé dans cette version de faire une exception au formatage normal et de formater else différemment, mais uniquement si un commentaire apparaît entre else et l'accolade ouvrante. Cette solution semble optimale :

Formaté (Prettier 1.12.0) :​
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");
}

Alignement des tests Angular async et beforeEach, etc. (#4241 par @ad1992)​

Dans Prettier 1.11.1, les tests Angular utilisant l'utilitaire async étaient formatés avec trop de sauts de ligne inutiles. Nous avons modifié le comportement pour conserver les fonctions encapsulées avec cet utilitaire sur une seule ligne, éliminant ainsi ces sauts de ligne superflus.

// 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();
  }));
});

Casse des ObjectPatterns avec des ObjectPatterns imbriqués (#4267 par @duailibe)​

Nous avons reçu de nombreux retours indiquant que la syntaxe de déstructuration d'objets et de tableaux était parfois mal formatée. Pour commencer à améliorer ce point, nous avons modifié le comportement : tout motif d'objet ou de tableau imbriqué non terminal dans un motif de déstructuration sera multiligne si l'un de ses parents l'est :

// 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​

Support de hasPragma/insertPragma (#4275 par @ikatyang)​

Prettier 1.7.0 et 1.8.0 ont introduit deux nouvelles options : --require-pragma et --insert-pragma. Cependant, ces options n'étaient disponibles qu'en JavaScript. Elles sont désormais également supportées en Markdown !

<!-- @prettier -->

# My Markdown Document

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

Support des prettier-ignore-start/prettier-ignore-end au niveau racine (#4202 par @ikatyang)​

Lors de l'utilisation d'outils comme all-contributors ou markdown-toc, les utilisateurs rencontraient des situations où le contenu Markdown généré automatiquement était formaté étrangement par Prettier, ou où le mode --list-different de Prettier signalait du contenu généré automatique dont l'utilisateur ne se souciait pas du formatage.

Pour résoudre ces problèmes, nous avons ajouté un nouveau type de commentaire d'ignorance dans Markdown, appelé 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 -->

Vous pouvez placer les commentaires prettier-ignore-start et prettier-ignore-end autour du contenu généré automatiquement, et Prettier ignorera tout ce qui se trouve entre eux. Veuillez noter que cette fonctionnalité n'est actuellement disponible que dans Markdown et ne peut être utilisée qu'au niveau supérieur.

GraphQL​

Autoriser le nouveau style d'interface pour GraphQL (#4012 par @ruiaraujo)​

Le langage de définition de schéma GraphQL a récemment modifié la syntaxe pour les interfaces héritées multiples pour utiliser & au lieu de , :

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

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

Prettier 1.11.1 ne parvenait pas à analyser le nouveau style ; nous prenons désormais en charge les deux styles.

API de plugin (Bêta)​

Déplacer la détection/insertion du pragma vers les plugins (#3685 par @duailibe)​

Les plugins Prettier peuvent désormais inclure une fonction hasPragma dans leur parser et une fonction insertPragma dans leur printer pour activer la prise en charge de --insert-pragma et --require-pragma. Voici leurs signatures :

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

Activer la fonctionnalité de commentaires spécifique aux plugins (#4182 par @mgrip)​

Les plugins peuvent désormais remplacer l'algorithme d'impression de commentaires intégré de Prettier au cas par cas afin de mieux prendre en charge le formatage des commentaires pour leur langage. Cette API n'est pas encore documentée, mais vous pouvez voir comment cette fonctionnalité est utilisée dans le Prettier PHP Plugin récemment publié ici et ici.

Autres changements​

JavaScript​

Mettre à jour flow vers la version 0.69 et activer la prise en charge de ?. (#4296 par @vjeux)​

Le chaînage optionnel (?.) est désormais pris en charge lors de l'utilisation du parser flow :

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

Cesser de marquer tous les commentaires dans les exports nommés comme commentaires précédents (#4292 par @duailibe)​

Ce changement corrige un bogue où les commentaires ignorés dans les exports nommés étaient dupliqués à chaque formatage :

// 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
}

Gérer les commentaires de ContinueStatement et BreakStatement (#4279 par @duailibe)​

Prettier ne parvenait pas à imprimer certains commentaires près des mots-clés continue et break. Ce problème a été corrigé :

// 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 */
}

Correction du GraphQL incorporé dans JS avec des backticks (#4265 par @duailibe, #4278 par @duailibe)​

Dans Prettier 1.11.1, un bug empêchait le formatage du GraphQL contenant des chaînes échappées avec des backticks. Ce problème est corrigé dans 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
  }
`;

Éviter de mélanger les expressions avec prettier-ignore dans les littéraux de gabarit (#4220 par @evilebottnawi)​

Un bug dans Prettier 1.11.1 déplaçait les expressions imbriquées dans les littéraux de gabarit lors de l'utilisation de commentaires prettier-ignore, dans certaines conditions :

// 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};
`;

Notez que les deux fonctions recevant props ont échangé leur place.

Ce bug est corrigé dans 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;" : "")};
`;

Empêcher le "sur-indentation" des valeurs des propriétés de classe (#4085 par @duailibe)​

Dans Prettier 1.11.1, le niveau d'indentation des expressions binaires (comme 2 + 2, 4 * 4, etc.) augmentait à chaque saut de ligne dans certains cas. Ce comportement est corrigé dans 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);
}

Amélioration du formatage des switch (#4165 par @evilebottnawi)​

Lorsque le discriminant d'une instruction switch était très long, le formatage n'était pas optimal. Ce comportement est amélioré dans 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​

Ne plus ajouter de point-virgule après export default interface Foo {} (#4128 par @j-f1)​

Dans Prettier 1.11.1, un point-virgule était incorrectement ajouté après les interfaces exportées par défaut. Ce problème est résolu dans 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;
}

Exiger des parenthèses autour des "TSAsExpression" dans une "UpdateExpression" (#4183 par @UselessPickles)​

Prettier 1.11.1 supprimait incorrectement les parenthèses autour des expressions de mise à jour avec typecast, causant une erreur syntaxique. Ce problème est corrigé dans 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​

Supprimer les lignes vides inutiles dans le front matter (#4280 par @ikatyang)​

Prettier 1.11.1 ajoutait une ligne vide superflue lors du formatage des documents Markdown contenant un front-matter yaml/toml vide ; cette ligne n'est plus ajoutée :

Entrée :​
---
---

Hello
Formaté (Prettier 1.11.1) :​
---

---

Hello
Formaté (Prettier 1.12.0) :​
---
---

Hello

Prise en charge des attributs après le langage dans les blocs de code délimités (#4153 par @ikatyang)​

Certains documents Markdown utilisent des attributs listés après le langage à des fins spécifiques ; par exemple, ils sont employés par markdown-preview-enhanced pour modifier les options d'affichage et spécifier des paramètres d'exécution de code.

Les attributs de langage des blocs de code se présentent ainsi :

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

Auparavant, Prettier ne formatait pas le contenu de ces blocs Markdown car il ne pouvait plus détecter le langage lorsque des attributs étaient présents. Désormais, Prettier identifie correctement le langage.

Correction de l'indentation HTML imbriqué (#4115 par @ikatyang)​

Dans Prettier 1.11.1, le HTML imbriqué sous un élément de liste n'était pas correctement formaté : le niveau d'indentation changeait à chaque reformatage. Ce problème est maintenant résolu.

<!-- 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>

Utilisation de literalline pour les sauts de ligne au lieu de hardline (#4083 par @ikatyang)​

Dans Prettier 1.11.1, lors de l'intégration de CSS ou JSX dans Markdown, un problème affectait parfois le niveau d'indentation des commentaires de bloc. Ce problème est corrigé dans 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​

Ne pas mettre en minuscule le nom de variable des sélecteurs personnalisés #4254 (#4255 par @Coobaha)​

Prettier 1.11.1 modifiait par erreur les noms de variables des sélecteurs personnalisés en minuscules. Ce problème est corrigé dans 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;
}

Ne pas couper la propriété value avec une URL intégrée (#4236 par @evilebottnawi)​

Dans Prettier 1.11.1, les url() étaient parfois mal formatées lorsqu'elles apparaissaient dans des propriétés raccourcies. Ce problème est résolu dans 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;
}

Correction des commentaires en ligne dans les listes et maps (#4205 par @evilebottnawi)​

Prettier 1.11.0 cassait le code lorsque des commentaires en ligne apparaissaient dans des listes ou maps SCSS. Ce problème est corrigé dans Prettier 1.12.0. Remarque : Ce style de formatage n'est pas encore idéal, mais la rupture de code est évitée.

// 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
);

Ne pas mettre en minuscule les variables exportées dans les modules CSS (#4152 par @evilebottnawi)​

Prettier 1.11.1 mettait incorrectement en minuscule les noms des variables CSS exportées via des modules CSS, ce qui posait problème lors de leur import côté JavaScript.

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

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

Ce problème est résolu dans Prettier 1.12.0 :

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

Prise en charge de unicode-range (#4117 par @evilebottnawi)​

Prettier 1.11.1 formatait incorrectement les règles unicode-range. Ce problème est corrigé dans 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​

Prise en charge des commentaires en haut des documents HTML (#4141 par @evilebottnawi)​

L'équipe Prettier continue d'améliorer notre formateur HTML qui n'est pas encore prêt pour la production. Cette version corrige un problème où un commentaire placé en haut d'un document (comme un commentaire htmlhint) empêchait le formatage correct du document. Ce problème est désormais résolu.

Correction des else if dans Handlebars (#4256 par @n8n8baby)​

Notre formateur Handlebars n'est pas non plus prêt pour une utilisation publique, mais une correction a été ajoutée durant ce cycle de publication pour que les blocs else if soient correctement imprimés. Prettier 1.11.1 les convertissait par erreur en simples if.

Correction des balises auto-fermantes style dans vue (#4108 par @duailibe)​

Prettier 1.11.1 ne gérait pas correctement les balises auto-fermantes style ou script dans les fichiers vue ; leur formatage produisait un résultat inattendu. Ce comportement est corrigé dans 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 />

Divers​

Playground : Ajout du support pour rangeStart et rangeEnd (#4216 par @JamesHenry)​

--range-start et --range-end peuvent désormais être spécifiés dans le playground grâce au travail de @JamesHenry. Cela aidera la communauté Prettier en simplifiant le signalement des bugs liés au formatage de sélections dans l'éditeur.

Correction de l'impression des fichiers ignorés avec --debug-check (#4066 par @duailibe)​

Prettier 1.11.1 affichait par erreur le contenu des fichiers ignorés lorsque l'option --debug-check était utilisée. Dans Prettier 1.12.0, le contenu de ces fichiers n'est plus écrit sur stdout.

À l'incroyable communauté d'utilisateurs, contributeurs et mainteneurs de Prettier, merci ! C'est un projet que nous ne pouvons construire qu'ensemble ❤️