Aller au contenu principal

Prettier 1.13 : À la conquête du web !

· 24 minutes de lecture
Lucas Duailibe
Lucas Duailibe
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 →

Cette version ajoute la prise en charge de plusieurs nouvelles fonctionnalités syntaxiques, des corrections de formatage et un support de première classe pour fonctionner dans le navigateur.

Principales fonctionnalités​

API/CLI​

Prettier fonctionne dans le navigateur !​

Cela faisait longtemps que l'équipe et nos utilisateurs le souhaitaient, et nous annonçons enfin que Prettier 1.13 offre un support de première classe pour l'exécution dans le navigateur. Autrefois, cela nécessitait plusieurs astuces, mais désormais vous pouvez simplement charger le bundle principal et les analyseurs syntaxiques que vous souhaitez utiliser.

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

Pour en savoir plus, consultez la documentation ou essayez-le sur ce JS Bin.

Ne plus utiliser par défaut l'analyseur JavaScript (#4528 par @duailibe)​

Dans Prettier 1.12 et les versions antérieures, lorsqu'on exécutait Prettier sur un fichier sans extension, Prettier supposait que le fichier contenait du JavaScript. Cela a conduit à quelques bugs déroutants, notamment :

  • Si vous exécutiez prettier sur votre répertoire .git, il reformatait les fichiers et cassait votre dépôt git.

  • Si vous tentiez d'exécuter prettier sur des fichiers HTML, il pouvait parfois générer une erreur, mais d'autres fois analyser le HTML comme du JSX et le formater comme s'il s'agissait de JSX (ce qui était souvent dangereux).

Dans Prettier 1.13, nous modifions ce comportement. Si Prettier ne peut pas déterminer le langage d'un fichier à partir de son extension, et que l'utilisateur n'a pas spécifié manuellement d'analyseur à utiliser, Prettier ignorera le fichier.

Si vous devez formater des fichiers avec des extensions non prises en charge ou non standard, vous pouvez utiliser l'option --parser pour spécifier quel analyseur utiliser. Si vous redirigez le contenu d'un fichier vers stdin, assurez-vous d'inclure --stdin-filepath afin que prettier puisse utiliser l'extension du fichier pour détecter le langage à analyser.

Lors de l'utilisation de l'API JavaScript, prettier.format et prettier.formatWithCursor lanceront désormais une erreur si vous n'incluez pas parser ou filepath dans les options passées. Une erreur sera également lancée si vous incluez filepath mais pas parser et que l'analyseur correct ne peut pas être déduit du chemin du fichier.

Méthode prettier.getFileInfo() et option CLI --file-info (#4341 par @kachkaev)​

Lors de l'appel de Prettier via l'API, il n'existait aucun moyen de savoir si un fichier devait être ignoré ou non (par .prettierignore), donc les plugins d'intégration d'éditeur devaient implémenter cette logique. De plus, il n'y avait aucun moyen de savoir si un fichier était pris en charge par Prettier, donc les utilisateurs devaient quand même appeler Prettier. Dans la version 1.13, il existe un moyen de vérifier si un analyseur sera inféré (et lequel) et si le fichier est ignoré ou non avant d'appeler format.

Vous pouvez en savoir plus à ce sujet dans la documentation.

Support pour Prettier global et les plugins (#4192 par @kachkaev)​

Lors de l'installation globale de Prettier et de plugins, Prettier ne pouvait pas charger automatiquement les plugins car il les recherchait dans le package.json le plus proche. Désormais, Prettier cherchera les plugins dans le répertoire node_modules où il est installé. De plus, pour les cas où Prettier ne trouve pas automatiquement les plugins (en raison d'autres configurations que nous ne prenons pas encore en charge), une nouvelle option --plugin-search-dir a été ajoutée pour que vous puissiez spécifier où Prettier doit chercher les plugins.

Vous pouvez en savoir plus à ce sujet dans la documentation des Plugins.

Amélioration du suivi du décalage du curseur (#4397 par @ds300)​

Prettier 1.13 améliore considérablement le suivi du décalage du curseur pour plusieurs cas où Prettier produisait une position incorrecte, ce qui amenait les intégrations d'éditeur à déplacer le curseur à un mauvais endroit.

JavaScript​

Insertion de plus de parenthèses dans les expressions mathématiques (#4413 et #4407 par @duailibe)​

Prettier ajoutera désormais des parenthèses autour des opérations modulo lorsqu'elles sont à l'intérieur d'une opération additive ou lors du mélange de deux opérations multiplicatives différentes, même si elles ne sont pas nécessaires. Cela permet de comprendre plus rapidement un extrait de code.

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

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

Mise en ligne des tests AngularJS utilisant inject (#4495 par @thorn0)​

Prettier conservera désormais les tests AngularJS avec injection de dépendance sur une seule ligne, comme il le fait pour nos autres tests.

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

Retour à la ligne plus élégant pour D3 (#4285 par @1wheel, #4505 par @duailibe)​

Dans Prettier 1.12 et les versions antérieures, les chaînes commençant par d3 et d'autres noms courts étaient coupées avant le premier .. Dans Prettier 1.13, nous n'ajouterons pas de nouvelle ligne après le nom s'il est plus court que la largeur de l'indentation.

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

Formatage du nouveau tableau describe.each dans Jest 23 (#4423 par @ikatyang)​

Jest 23 a introduit une nouvelle fonctionnalité appelée tests pilotés par les données où vous pouvez décrire des exemples à tester dans un tableau. Prettier 1.13 inclut la prise en charge de cette fonctionnalité et indentera automatiquement le tableau lors de l'utilisation de tests pilotés par les données.

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

Formatage plus élégant de la composition fonctionnelle (#4431 par @suchipi)​

L'un des changements les plus demandés dans Prettier était de mieux formater la composition de fonctions. Ce motif est assez courant dans les bibliothèques de programmation fonctionnelle comme RxJS, Redux, Lodash et Ramda. Dans la version 1.13, Prettier dispose désormais d'une heuristique pour détecter ce type de composition fonctionnelle et le formater de telle sorte que les fonctions composées soient chacune sur leur propre ligne. Cela améliore la lisibilité lors de l'utilisation de fonctions comme 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)
);

Conservation des parenthèses autour des expressions do si nécessaire et amélioration de leur formatage (#4479 par @existentialism)​

Dans Prettier 1.12 et les versions antérieures, il y avait des cas où Prettier supprimait les parenthèses autour des expressions do alors que ce n'était pas sûr, ce qui rendait le code invalide. Ces cas sont désormais corrigés dans la version 1.13. De plus, le formatage des expressions do a été amélioré en général avec cette version.

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

Impression correcte des mixins de classes et des implements (#4326 par @existentialism)​

Dans les versions 1.12 et antérieures, Prettier supprimait incorrectement mixins et implements des classes de libdef Flow, ce qui changeait le sens du code. Ce problème a été corrigé dans la version 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 {}

Ajout de la prise en charge de l'opérateur de coalescence des nuls et des séparateurs numériques littéraux (#4536 par @vjeux)​

Ces fonctionnalités JavaScript étaient déjà prises en charge avec l'analyseur Babylon par défaut, mais Prettier 1.13 ajoute leur prise en charge lors de l'utilisation de l'analyseur Flow.

Ajout de la prise en charge des nouvelles fonctionnalités syntaxiques de Flow (#4543, #4540 et #4551 par @existentialism)​

Les nouvelles fonctionnalités ajoutées à Flow sont désormais prises en charge par Prettier :

  • interfaces en ligne

    type A = interface { p: string};

  • arguments de type explicites

    fnCall<string>("name");

  • syntaxe de modificateur proto

    declare class A { proto: T }

TypeScript​

Ajout du support pour les types d'import TypeScript (#4429 et #4438 par @ikatyang)​

Une nouvelle fonctionnalité ajoutée dans TypeScript 2.9 pour décrire la structure d'un module importé dynamiquement.

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

Ajout du support pour les éléments JSX génériques en TypeScript (#4268 par @ikatyang)​

Autre nouveauté de TypeScript 2.9 : le support des génériques dans les éléments JSX, désormais formatables par Prettier 1.13.

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

Ajout du support pour les typeParameters des TaggedTemplateExpression (#4353 par @ikatyang)​

Également ajouté dans TypeScript 2.9, il est désormais possible de passer des paramètres de type aux tags d'expressions template.

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

Amélioration du formatage des casts de type avec génériques et unions (#4219 par @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​

Séparation des analyseurs JSON et JSON5 (#4367 et #4371 par @ikatyang, #4333 par @duailibe)​

JSON5 est un sur-ensemble de JSON qui prend en charge les commentaires, les virgules terminales et les clés non entre guillemets. Certains fichiers (comme .babelrc) utilisent JSON5, ce qui rend ces fonctionnalités autorisées. D'autres fichiers (comme package.json) n'utilisent pas JSON5, donc ces fonctionnalités restent interdites. Prettier avait précédemment un seul analyseur/imprimeur JSON pour les deux cas, mais cette cohabitation provoquait des bugs subtils, notamment autour de la détection et insertion du pragma /* @prettier */. En les séparant, ces bugs sont corrigés et Prettier gagne en robustesse.

Ajout de l'analyseur json-stringify pour un formatage style JSON.stringify (#4450 par @ikatyang)​

Une critique récurrente concernait le formatage différent de package.json et package-lock.json par Prettier comparé à npm et yarn. Lancer une commande npm ou yarn après Prettier pouvait générer des violations, et modifier package.json ajoutait parfois des sauts de ligne qui seraient ensuite supprimés lors de l'exécution suivante d'une commande npm ou yarn. Cela créait du bruit dans les diffs et une mauvaise expérience utilisateur. Prettier 1.13 introduit un nouvel analyseur/imprimeur json-stringify reproduisant le comportement de JSON.stringify, empêchant ces aller-retours entre Prettier et npm/yarn. De plus, il devient l'option par défaut pour package.json et package-lock.json, supprimant ces diffs indésirables sans configuration supplémentaire.

CSS/Less/SCSS​

Amélioration du formatage des maps SCSS (#4487 par @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
    )
  );
}

Amélioration du formatage de la règle @-at @support (#4372 par @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​

Changement du symbole des listes non-ordonnées pour un tiret (#4440 par @ikatyang)​

Lors du lancement du support Markdown dans Prettier, l'analyse des données GitHub BigQuery montrait un usage légèrement supérieur du * par rapport au - pour les listes. Suite à d'importants retours de la communauté, le - s'est révélé préféré. Prettier 1.13 formate désormais les listes non-ordonnées avec le symbole -.

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

Préservation du contenu des tags Liquid (#4484 par @duailibe)​

Liquid est un langage de templating populaire dans les générateurs de sites statiques comme Jekyll. Dans Prettier 1.12 et antérieur, les tags Liquid dans les fichiers Markdown n'étaient pas correctement traités car considérés comme du texte brut. Leur contenu était parfois altéré, modifiant leur signification. Prettier 1.13 reconnaît désormais les tags Liquid et préserve leur contenu intact.

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

Découper les définitions de liens sur plusieurs lignes si nécessaire (#3531 par @j-f1)​

Les définitions de liens seront découpées sur plusieurs lignes lorsqu'utilisées avec --prose-wrap always si elles dépassent la largeur d'impression.

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

Ajouter des lignes vides après les définitions de haut niveau uniquement si présentes dans le code source original (#4512 par @ad1992)​

Dans Prettier 1.12 et antérieur, nous insérions systématiquement une ligne vide entre les définitions de haut niveau. Dans la version 1.13, nous n'ajoutons une ligne vide que si elle était présente à l'origine. Ce comportement correspond à la façon dont Prettier formate le 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
}

Autres changements​

API/CLI​

Ne pas formater une plage si le pragma requis est absent du fichier (#3996 par @josephfrazier)​

Dans Prettier 1.12 et antérieur, si un fichier ne contenait pas le pragma /** @prettier */ et que Prettier était appelé pour formater uniquement une plage avec --require-pragma, il le formatait malgré tout. Désormais, Prettier vérifie la présence du pragma dans le fichier même lors du formatage partiel.

Amélioration de la résolution des plugins lorsque le chemin ne commence pas par ./ (#4451 par @kachkaev)​

Lorsqu'on passait --plugin=path/to/plugin, Prettier 1.12 et antérieur plantait car il cherchait un path/to/plugin dans le dossier node_modules. Prettier 1.13 recherche d'abord dans le répertoire courant, puis dans node_modules en cas d'échec.

Ajout d'une interface de plugin pour isBlockComment (#4347 par @mgrip)​

Un commentaire en bloc est un commentaire pouvant être imprimé en ligne (pour le JS, c'est /* comment */). Comme Prettier gère l'impression des commentaires, nous devions permettre aux plugins de déterminer si un commentaire est un bloc. Plus d'infos dans notre documentation.

JavaScript​

Appliquer les règles de déstructuration dans les fonctions aux paramètres de catch (#4385 par @duailibe)​

Dans la 1.12, nous traitions la déstructuration dans les arguments de catch comme une assignation, mais le rendu est meilleur en la traitant comme un paramètre de fonction. Ce changement est désormais effectif :

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

Échapper correctement les barres obliques inverses pour le Markdown en JS (#4381 par @ikatyang)​

Prettier 1.12 et antérieur supprimait incorrectement certaines barres obliques inverses dans les littéraux de modèle Markdown. Prettier 1.13 les imprime désormais correctement.

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

Prise en charge de Foo.extend.attrs()`` dans styled-components (#4434 par @duailibe)​

Dans Prettier 1.12.1, le littéral de modèle passé à la fonction styled-components Foo.extends.attrs() n'était pas détecté comme du CSS. En 1.13, Prettier prend désormais en charge cette syntaxe et formate son contenu en 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;
`;

Ajout de la prise en charge du tag de commentaire GraphQL (#4395 par @tjallingt)​

Nous formatons le GraphQL dans les littéraux de modèle étiquetés, mais certaines bibliothèques utilisent des littéraux non étiquetés. De nombreux plugins d'éditeur GraphQL utilisent le commentaire /* GraphQL */ pour les détecter. Prettier 1.13 reconnaît désormais ce commentaire et formate le code GraphQL.

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

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

Formatage des styles des composants Angular (#4361 par @JamesHenry)​

Prettier 1.13 formate désormais les styles inline des composants 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 {

Césure correcte des initialiseurs de propriétés de classe (#4442 par @nicolo-ribaudo)​

Prettier 1.12 n'indentait pas les lignes suivantes lors de la césure d'un initialiseur de propriété de classe. Ce problème est corrigé en 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;
}

Correction des méthodes à nom long dans les expressions de liaison (#4447 par @misoguy)​

Prettier 1.13 améliore le formatage des chaînes longues d'expressions de membre dans les expressions de liaison.

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

Arrêt de la suppression des parenthèses pour l'opérateur ?. (#4542 par @duailibe)​

Un cas limite dans la proposition de chaînage optionnel montre que l'ajout de parenthèses modifie le comportement à l'exécution. Prettier 1.12 et antérieur supprimait ces parenthèses, ce qui est corrigé dans la version 1.13.

// Input
(a?.b).c

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

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

Flow​

Ajout de parenthèses autour de ?() => T si nécessaire (#4475 par @nicolo-ribaudo)​

Prettier 1.12 et antérieur modifiait involontairement la sémantique des types lors de l'utilisation de l'opérateur nullable à cause de la précédence des opérateurs. Ce problème est résolu dans 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​

Préservation des propriétés de classe entre guillemets (#4517 par @ikatyang)​

Les vérifications strictes d'initialisation des propriétés ne s'appliquent pas aux propriétés de classe entre guillemets dans TypeScript. Dans Prettier 1.13, nous conservons les guillemets s'ils étaient présents initialement dans le code.

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

Suppression du saut de ligne dans les fichiers .md vides (#4388 par @huyvohcmc)​

Prettier 1.12.1 ajoutait un saut de ligne lors du formatage d'un fichier markdown vide. Ce comportement est corrigé dans la version 1.13.

Prévention de la fusion du texte CJK continu avec --prose-wrap preserve (#4504 par @ikatyang)​

Avec l'option --prose-wrap preserve, Prettier ne fusionne plus le texte CJK continu réparti sur plusieurs lignes.

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

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

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

CSS/SCSS/Less​

Ajout des virgules finales dans les listes et maps SCSS (#4317 par @ad1992)​

Prettier ajoute désormais des virgules finales dans les listes et maps SCSS si trailingComma n'est pas "none" et que la liste ou map s'étend sur plusieurs lignes.

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

Correction du front-matter vide (#4392 et #4457 par @eliasmeire)​

Prettier 1.12 prenait en charge les blocs front-matter dans les fichiers CSS/SCSS/Less mais supprimait les blocs vides (ou contenant uniquement des commentaires). Ce problème est résolu dans la version 1.13.

Non-formatage de l'interpolation de chaînes SCSS (#4490 par @evilebottnawi)​

Prettier cassait parfois le code SCSS lors du formatage de chaînes avec interpolation. Prettier 1.13 conserve désormais le code original dans ces cas.

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

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

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

Échappement correct des caractères (#4472 par @evilebottnawi)​

Prettier 1.12 n'échappait pas correctement certains caractères dans certaines situations.

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

Correction de l'interpolation SCSS dans les variables CSS (#4471 par @evilebottnawi)​

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

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

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

Correction des problèmes d'espacement dans les variables calculées PostCSS (#4408 par @ad1992)​

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

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

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