Prettier 1.18 : Nombreux correctifs et OpenCollective

6 juin 2019 · 11 minutes de lecture

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 n'inclut pas de nouvelles fonctionnalités spectaculaires, mais contient de nombreux correctifs pour JavaScript, notamment JSX et les littéraux de gabarit, TypeScript et Markdown.

C'est aussi l'occasion de rappeler que Prettier accepte désormais les dons ! Si vous appréciez Prettier et souhaitez soutenir notre travail, rendez-vous sur notre OpenCollective.

Principales fonctionnalités

JavaScript

Arrêt du découpage des littéraux de gabarit simples (#5979 par @jwbay)

C'est l'un des aspects de Prettier générant le plus de demandes de modification : le découpage des expressions simples dans les littéraux de gabarit. Auparavant, Prettier découpait les expressions sur plusieurs lignes si le littéral entier dépassait la largeur d'impression. Désormais, nous empêcherons ce découpage si l'expression est simple.

Il s'agit d'une amélioration par rapport à la version précédente, mais des travaux restent à faire dans ce domaine.

// Input
console.log(chalk.white(`Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${coverageSummary.total.lines.pct}%`))

// Output (Prettier stable)
console.log(
  chalk.white(
    `Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${
      coverageSummary.total.lines.pct
    }%`
  )
);

// Output (Prettier master)
console.log(
  chalk.white(
    `Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${coverageSummary.total.lines.pct}%`
  )
);

Arrêt de la conversion des éléments JSX vides en éléments auto-fermants (#6127 par @duailibe)

Prettier convertissait toujours les éléments JSX vides (<div></div>) en éléments auto-fermants (<div />) car ils sont équivalents.

Nous avons reçu des retours indiquant qu'en développement, on préfère saisir les balises ouvrantes et fermantes pour y ajouter ultérieurement des enfants, mais Prettier les convertissait en éléments auto-fermants, forçant les développeurs à les reconvertir manuellement. Ce comportement change avec cette version.

// Input
function Foo() {
  return <div></div>;
}

// Output (Prettier stable)
function Foo() {
  return <div />;
}

// Output (Prettier master)
function Foo() {
  return <div></div>;
}

Autres changements

JavaScript

Correction des conversions de type du compilateur Closure (#5947 par @jridgewell)

Si une parenthèse fermante suit une conversion de type dans une expression imbriquée, la conversion englobait tout jusqu'à cette parenthèse.

// Input
test(/** @type {!Array} */(arrOrString).length);
test(/** @type {!Array} */((arrOrString)).length + 1);
// Output (Prettier stable)
test(/** @type {!Array} */ (arrOrString.length));
test(/** @type {!Array} */ (arrOrString.length + 1));
// Output (Prettier master)
test(/** @type {!Array} */ (arrOrString).length);
test(/** @type {!Array} */ (arrOrString).length + 1);

Correction des conversions de type Closure sans espaces (#6116 par @jridgewell)

Auparavant, un espace était requis entre @type et l'accolade ouvrante { d'une conversion de type Closure, sans quoi les parenthèses environnantes étaient supprimées. Closure lui-même ne requiert pas cet espace.

// Input
const v = /** @type{string} */(value);

// Output (Prettier stable)
const v = /** @type{string} */ value;

// Output (prettier master)
const v = /** @type{string} */ (value);

Éviter l'ajout de guillemets avec `--quote-props=consistent` lorsque les objets contenaient des nombres ou expressions calculées comme clés (#6119 et #6138 par @duailibe)

Précédemment, Prettier ajoutait des guillemets superflus aux clés d'objet, ou aux propriétés et méthodes de classes, s'il existait au moins une clé calculée avec une expression "complexe" (ex. expression de membre) ou un littéral numérique.

// Input
const obj = {
  foo: "",
  [foo.bar]: "",
};

const other = {
  foo: "",
  1: ""
};

// Output (Prettier stable)
const obj = {
  "foo": "",
  [foo.bar]: "",
};

const other = {
  "foo": "",
  1: ""
};

// Output (Prettier master)
const obj = {
  foo: "",
  [foo.bar]: "",
};

const other = {
  foo: "",
  1: ""
};

Ajout de parenthèses dans les éléments d'étalement JSX avec expressions logiques (#6130 par @duailibe)

Précédemment, Prettier n'ajoutait pas de parenthèses dans les éléments d'étalement JSX car non nécessaires, mais par souci de cohérence avec l'opérateur d'étalement dans les objets et tableaux, nous les ajoutons désormais pour JSX.

// Input
<Component {...(props || {})} />;

// Output (Prettier stable)
<Component {...props || {}} />;

// Output (Prettier master)
<Component {...(props || {})} />;

Gestion correcte des commentaires dans les expressions de fonction fléchée vides (#6086 par @evilebottnawi)

// Input
const fn = (/*event, data*/) => doSomething(anything);

// Output (Prettier stable)
const fn = () => /*event, data*/ doSomething(anything);

// Output (Prettier master)
const fn = (/*event, data*/) => doSomething(anything);

Ne pas condenser les expressions séquentielles dans les propriétés d'objet (#6088 par @evilebottnawi)

// Input
const a = {
  someKey:
    (longLongLongLongLongLongLongLongLongLongLongLongLongLongName, shortName)
};

// Output (Prettier stable)
const a = {
  someKey: (longLongLongLongLongLongLongLongLongLongLongLongLongLongName,
  shortName)
};

// Output (Prettier master)
const a = {
  someKey:
    (longLongLongLongLongLongLongLongLongLongLongLongLongLongName, shortName)
};

Ajout du support pour les styles externes de styled-jsx (#6089 par @hongrich)

Ajout du support pour 2 tags de styles externes dans styled-jsx/css : css.global et css.resolve. https://github.com/zeit/styled-jsx/#external-css-and-styles-outside-of-the-component

Le tag de gabarit css est déjà supporté par Prettier.

// Input
const styles = css.resolve`
.box {background:black;
}`;

// Output (Prettier stable)
const styles = css.resolve`
.box {background:black;
}`;

// Output (prettier master)
const styles = css.resolve`
  .box {
    background: black;
  }
`;

Conservation des parenthèses autour des fonctions et classes dans les déclarations `export default` (#6133 par @duailibe)

Prettier supprimait les parenthèses de certaines expressions dans export default, mais si celles-ci sont des expressions complexes commençant par function ou class, les parenthèses sont requises.

Voir ci-dessous quelques exemples pratiques, dont un qui concerne TypeScript.

// Input
export default (function log() {}).toString();
export default (function log() {} as typeof console.log);

// Output (Prettier stable)
export default function log() {}.toString();
export default function log() {} as typeof console.log; // syntax error

// Output (Prettier master)
export default (function log() {}).toString();
export default (function log() {} as typeof console.log);

Corriger les bugs de parenthèses dans des cas limites avec call et `new` (#6148 par @bakkot)

Ajouter toutes les parenthèses nécessaires et seulement celles-ci lors du mélange de new avec des appels de fonction est délicat. Ce changement corrige deux problèmes où des parenthèses nécessaires étaient omises et un où des parenthèses redondantes étaient ajoutées.

// Input
new (x()``.y)();
new (x()!.y)();
new e[f().x].y()

// Output (Prettier stable)
new x()``.y();
new x()!.y();
new e[(f()).x].y();

// Output (Prettier master)
new (x())``.y();
new (x())!.y();
new e[f().x].y();

Corriger les embeds imbriqués (JS dans HTML dans JS) (#6038 par @thorn0)

Auparavant, si du code JS intégré dans du HTML (via <script>) lui-même intégré dans du JS (via un template literal) contenait des template literals, le JS interne n'était pas formaté.

// Input
const html = /* HTML */ `<script>var a=\`\`</script>`;

// Output (Prettier stable)
// SyntaxError: Expecting Unicode escape sequence \uXXXX (1:8)

// Output (Prettier master)
const html = /* HTML */ `
  <script>
    var a = \`\`;
  </script>
`;

Conserver les parenthèses nécessaires autour des expressions bind passées aux expressions `new` (#6152 par @sosukesuzuki)

Auparavant, Prettier supprimait les parenthèses nécessaires autour d'une expression bind si elle était passée à une expression new.

// Input
new (a::b)();

// Output (Prettier stable)
new a::b();

// Output (Prettier master)
new (a::b)();

Empêcher l'ajout de parenthèses inutiles autour des expressions bind dans les propriétés des expressions de membre (#6159 par @duailibe)

// Input
f[a::b];

// Output (Prettier stable)
f[(a::b)];

// Output (Prettier master);
f[a::b];

TypeScript

Conserver la virgule finale dans les paramètres de type TSX (#6115 par @sosukesuzuki)

Auparavant, une virgule finale après un paramètre de type unique dans une fonction fléchée était supprimée. Le résultat formaté était valide en TS, mais invalide en TSX. Ce problème est maintenant corrigé dans la 1.19.

// Input
type G<T> = any;
const myFunc = <T,>(arg1: G<T>) => false;

// Output (Prettier stable)
type G<T> = any;
const myFunc = <T>(arg1: G<T>) => false;

// Output (prettier master)
type G<T> = any;
const myFunc = <T,>(arg1: G<T>) => false;

Ne pas couper les expressions d'appel lorsque le dernier argument est une fonction fléchée avec un type de retour simple (#6106 par @brainkim)

Corrige un cas limite où nous coupions les expressions d'appel contenant des fonctions fléchées avec des types de retour simples.

app.get("/", (req, res): void => {
  res.send("Hello World!");
});

// Output (Prettier stable)
app.get(
  "/",
  (req, res): void => {
    res.send("Hello World!");
  },
);

// Output (Prettier master)
app.get("/", (req, res): void => {
  res.send("Hello World!");
});

Conserver une paire de parenthèses lorsqu'il y a des paires supplémentaires (#6131 par @sosukesuzuki)

Auparavant, Prettier supprimait des parenthèses nécessaires en essayant de supprimer des parenthèses inutiles, dans TypeScript.

// Input
type G = ((keyof T))[];

// Output (Prettier stable)
type G = keyof T[];

// Output (prettier master)
type G = (keyof T)[];

Conserver les parenthèses nécessaires autour des assertions non-null (#6136 par @sosukesuzuki, #6140 par @thorn0, #6148 par @bakkot)

Auparavant, Prettier supprimait les parenthèses nécessaires autour des assertions non-null si le résultat de l'expression d'assertion était appelé en tant que constructeur.

// Input
const b = new (c()!)();

// Output (Prettier stable)
const b = new c()!();

// Output (Prettier master)
const b = new (c())!();

Conserver les sauts de ligne dans les mapped types (#6146 par @sosukesuzuki)

Auparavant, Prettier supprimait les sauts de ligne dans les mapped types. Pour que cela soit similaire au traitement des object literals, nous conserverons les sauts de ligne s'ils existaient dans la source.

// Input
type A<T> = {
  readonly [P in keyof T]: T[P];
};

// Output (Prettier stable)
type A<T> = { readonly [P in keyof T]: T[P] };

// Output (Prettier master)
type A<T> = {
  readonly [P in keyof T]: T[P];
};

Ajouter une virgule finale sur les types tuple avec `--trailing-comma=all` (#6172 par @sosukesuzuki)

TypeScript prend en charge une virgule finale sur les types tuple depuis la version 3.3.

// Input
export type Foo = [
  number,
  number, // comment
];

// Output (Prettier stable)
export type Foo = [
  number,
  number // comment
];

// Output (Prettier master);
export type Foo = [
  number,
  number, // comment
];

Markdown

Déterminer correctement le nombre de backticks dans le code en ligne (#6110 par @belochub)

Selon la spécification CommonMark, il est requis de "choisir une chaîne de n caractères backtick comme délimiteurs, où le code ne contient aucune chaîne d'exactement n caractères backtick".

Cela modifie la méthode pour trouver le nombre requis de backticks : au lieu d'utiliser 2 backticks lorsqu'il y a une chaîne de backtick de longueur 1 à l'intérieur du bloc de code en ligne, et 1 backtick dans tous les autres cas, on recherche maintenant la chaîne de backticks de longueur minimale qui peut être utilisée comme délimiteur.

<!-- Input -->
``` 3 ``22`` `1` ```

`` 2 ```123``` `1` ``

<!-- Output (Prettier stable) -->
` 3 ``22`` `1` `

` 2 ```123``` `1` `

<!-- Output (Prettier master) -->
``` 3 ``22`` `1` ```

`` 2 ```123``` `1` ``

Handlebars

Bien que la prise en charge de Handlebars soit encore en bêta, @GavinJoyce publie quelques correctifs afin que nous puissions enfin arriver à une version stable !

Éviter d'ajouter un espace blanc non désiré après les composants (#6178 par @GavinJoyce)

Auparavant, Prettier ajoutait un espace avant /> et un saut de ligne après, même au début d'une ligne. Désormais, cet espace supplémentaire et ce saut de ligne ne sont plus présents.

// Input
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
  />
</div>

// Output (Prettier stable)
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
   />

</div>

// Output (Prettier master)
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
  />
</div>

API

Prettier fonctionne à nouveau dans Atom (#6129 par @duailibe)

Atom dispose d'une fonctionnalité de sécurité qui interdit l'exécution de code contenant eval. L'une des dépendances de Prettier utilise eval pour empêcher les bundlers d'inclure du code de débogage. Nous avons veillé à ce que cet eval ne soit pas présent dans le code publié sur npm, permettant ainsi à Prettier de fonctionner à nouveau correctement dans Atom.

Principales fonctionnalités​

JavaScript​

Arrêt du découpage des littéraux de gabarit simples (#5979 par @jwbay)​

Arrêt de la conversion des éléments JSX vides en éléments auto-fermants (#6127 par @duailibe)​

Autres changements​

JavaScript​

Correction des conversions de type du compilateur Closure (#5947 par @jridgewell)​

Correction des conversions de type Closure sans espaces (#6116 par @jridgewell)​

Éviter l'ajout de guillemets avec --quote-props=consistent lorsque les objets contenaient des nombres ou expressions calculées comme clés (#6119 et #6138 par @duailibe)​

Ajout de parenthèses dans les éléments d'étalement JSX avec expressions logiques (#6130 par @duailibe)​

Gestion correcte des commentaires dans les expressions de fonction fléchée vides (#6086 par @evilebottnawi)​

Ne pas condenser les expressions séquentielles dans les propriétés d'objet (#6088 par @evilebottnawi)​

Ajout du support pour les styles externes de styled-jsx (#6089 par @hongrich)​

Conservation des parenthèses autour des fonctions et classes dans les déclarations export default (#6133 par @duailibe)​

Corriger les bugs de parenthèses dans des cas limites avec call et new (#6148 par @bakkot)​

Corriger les embeds imbriqués (JS dans HTML dans JS) (#6038 par @thorn0)​

Conserver les parenthèses nécessaires autour des expressions bind passées aux expressions new (#6152 par @sosukesuzuki)​

Empêcher l'ajout de parenthèses inutiles autour des expressions bind dans les propriétés des expressions de membre (#6159 par @duailibe)​

TypeScript​

Conserver la virgule finale dans les paramètres de type TSX (#6115 par @sosukesuzuki)​

Ne pas couper les expressions d'appel lorsque le dernier argument est une fonction fléchée avec un type de retour simple (#6106 par @brainkim)​

Conserver une paire de parenthèses lorsqu'il y a des paires supplémentaires (#6131 par @sosukesuzuki)​

Conserver les parenthèses nécessaires autour des assertions non-null (#6136 par @sosukesuzuki, #6140 par @thorn0, #6148 par @bakkot)​

Conserver les sauts de ligne dans les mapped types (#6146 par @sosukesuzuki)​

Ajouter une virgule finale sur les types tuple avec --trailing-comma=all (#6172 par @sosukesuzuki)​

Markdown​

Déterminer correctement le nombre de backticks dans le code en ligne (#6110 par @belochub)​

Handlebars​

Éviter d'ajouter un espace blanc non désiré après les composants (#6178 par @GavinJoyce)​

API​

Prettier fonctionne à nouveau dans Atom (#6129 par @duailibe)​

Principales fonctionnalités

JavaScript

Arrêt du découpage des littéraux de gabarit simples (#5979 par @jwbay)

Arrêt de la conversion des éléments JSX vides en éléments auto-fermants (#6127 par @duailibe)

Autres changements

JavaScript

Correction des conversions de type du compilateur Closure (#5947 par @jridgewell)

Correction des conversions de type Closure sans espaces (#6116 par @jridgewell)

Éviter l'ajout de guillemets avec `--quote-props=consistent` lorsque les objets contenaient des nombres ou expressions calculées comme clés (#6119 et #6138 par @duailibe)

Ajout de parenthèses dans les éléments d'étalement JSX avec expressions logiques (#6130 par @duailibe)

Gestion correcte des commentaires dans les expressions de fonction fléchée vides (#6086 par @evilebottnawi)

Ne pas condenser les expressions séquentielles dans les propriétés d'objet (#6088 par @evilebottnawi)

Ajout du support pour les styles externes de styled-jsx (#6089 par @hongrich)

Conservation des parenthèses autour des fonctions et classes dans les déclarations `export default` (#6133 par @duailibe)

Corriger les bugs de parenthèses dans des cas limites avec call et `new` (#6148 par @bakkot)

Corriger les embeds imbriqués (JS dans HTML dans JS) (#6038 par @thorn0)

Conserver les parenthèses nécessaires autour des expressions bind passées aux expressions `new` (#6152 par @sosukesuzuki)

Empêcher l'ajout de parenthèses inutiles autour des expressions bind dans les propriétés des expressions de membre (#6159 par @duailibe)

TypeScript

Conserver la virgule finale dans les paramètres de type TSX (#6115 par @sosukesuzuki)

Ne pas couper les expressions d'appel lorsque le dernier argument est une fonction fléchée avec un type de retour simple (#6106 par @brainkim)

Conserver une paire de parenthèses lorsqu'il y a des paires supplémentaires (#6131 par @sosukesuzuki)

Conserver les parenthèses nécessaires autour des assertions non-null (#6136 par @sosukesuzuki, #6140 par @thorn0, #6148 par @bakkot)

Conserver les sauts de ligne dans les mapped types (#6146 par @sosukesuzuki)

Ajouter une virgule finale sur les types tuple avec `--trailing-comma=all` (#6172 par @sosukesuzuki)

Markdown

Déterminer correctement le nombre de backticks dans le code en ligne (#6110 par @belochub)

Handlebars

Éviter d'ajouter un espace blanc non désiré après les composants (#6178 par @GavinJoyce)

API

Prettier fonctionne à nouveau dans Atom (#6129 par @duailibe)