Prettier 1.17 : Options supplémentaires pour les guillemets et prise en charge des configurations partagées

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 apporte une flexibilité longtemps demandée pour les guillemets autour des propriétés d'objet, permet de partager la configuration Prettier sous forme de packages, ajoute un analyseur LWC, prend en charge la nouvelle syntaxe GraphQL et corrige de nombreux bugs de formatage.

Principales fonctionnalités

JavaScript

Ajout d'une option pour modifier le comportement des guillemets sur les propriétés d'objet (#5934 par @azz)

--quote-props <as-needed|preserve|consistent>

as-needed (par défaut) - Ajoute des guillemets uniquement lorsque requis. Comportement actuel. preserve - Respecte le format d'origine. Utile pour les utilisateurs du Closure Compiler de Google en mode avancé, qui traite les propriétés entre guillemets différemment. consistent - Si au moins une propriété d'un objet nécessite des guillemets, toutes les propriétés sont entourées de guillemets - similaire à l'option consistent-as-needed d'ESLint.

// Input
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

// Output (Prettier 1.16 or --quote-props=as-needed)
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  origin: "prettier.io"
};

// Output (--quote-props=consistent)
const headers = {
  "accept": "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

// Output (--quote-props=preserve)
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

Configuration

Prise en charge des configurations partagées (#5963 par @azz)

Partager une configuration Prettier est simple : publiez un module exportant un objet de configuration, par exemple @company/prettier-config, et référencez-le dans votre package.json :

{
  "name": "my-cool-library",
  "version": "9000.0.1",
  "prettier": "@company/prettier-config"
}

Si vous ne souhaitez pas utiliser package.json, vous pouvez utiliser n'importe quelle extension supportée pour exporter une chaîne, par exemple via .prettierrc.json :

"@company/prettier-config"

@azz a créé un exemple de package de configuration. Vous pouvez consulter le code source sur GitHub ou l'installer via npm.

remarque

Cette méthode n'offre pas la possibilité d'étendre la configuration pour écraser certaines propriétés de la configuration partagée. Si vous avez besoin de cette fonctionnalité, importez le fichier dans un fichier .prettierrc.js et exportez les modifications, par exemple :

module.exports = {
  ...require("@company/prettier-config"),
  semi: false,
};

Modifications générales

JavaScript

Respecter les sauts de ligne entre les paramètres (#5836 par @evilebottnawi)

// Input
function foo(
  one,

  two,
  three,
  four,


  five,
  six,
  seven,
  eight,
  nine,
  ten,

  eleven

) {}

// Output (Prettier 1.16)
function foo(
  one,
  two,
  three,
  four,
  five,
  six,
  seven,
  eight,
  nine,
  ten,
  eleven
) {}

// Output (Prettier 1.17)
function foo(
  one,

  two,
  three,
  four,

  five,
  six,
  seven,
  eight,
  nine,
  ten,

  eleven
) {}

Corriger les commentaires dans les imports dynamiques multilignes (#6025 par @noahsug)

// Input
import(
  /* Hello */
  'something'
  /* Hello */
)
import(
  'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'
)

// Output (Prettier stable)
import(/* Hello */
"something");
/* Hello */
import('myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename');

// Output (Prettier master)
import(
  /* Hello */
  'something'
  /* Hello */
)
import(
  'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'
);

Ajouter des parenthèses pour les fonctions et classes immédiatement construites (#5996 par @bakkot)

// Input
new class {};
new function() {}

// Output (Prettier stable)
new class {}();
new function() {}();

// Output (Prettier master)
new (class {})();
new (function() {})();

Corriger la logique des parenthèses pour les expressions à chaînage optionnel et les casts de type Closure (#5843 par @yangsu)

La logique introduite dans #4542 imprimait des parenthèses aux mauvais endroits et produisait du code invalide pour les expressions à chaînage optionnel (avec plus de 2 nœuds) ou les casts de type Closure se terminant par des appels de fonction.

// Input
(a?.b[c]).c();
let value = /** @type {string} */ (this.members[0]).functionCall();

// Output (Prettier stable)
a(?.b[c]).c();
let value = /** @type {string} */ this(.members[0]).functionCall();

// Output (Prettier master)
(a?.b[c]).c();
let value = /** @type {string} */ (this.members[0]).functionCall();

Markdown

Ne pas aligner le contenu des tableaux si cela dépasse la largeur d'impression et que --prose-wrap never est activé (#5701 par @chenshuai2144)

Les tableaux alignés sont moins lisibles que les versions compactes lorsqu'ils sont particulièrement longs et que le retour à la ligne n'est pas activé dans l'éditeur. Ils sont désormais imprimés sous forme compacte dans ces situations.

<!-- Input -->
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |

<!-- Output (Prettier stable, --prose-wrap never) -->
| Property   | Description                                                                                                           | Type    | Default |
| ---------- | --------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| bordered   | Toggles rendering of the border around the list                                                                       | boolean | false   |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string  | -       |

<!-- Output (Prettier master, --prose-wrap never) -->
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |

TypeScript

Prise en charge de l'opérateur readonly (#6027 par @ikatyang)

// Input
declare const array: readonly number[];

// Output (Prettier stable)
// SyntaxError: ',' expected.

// Output (Prettier master)
declare const array: readonly number[];

HTML

Ajout du support pour Lightning Web Components (#5800 par @ntotten)

Prise en charge du format de template Lightning Web Components (LWC) pour les attributs HTML via un nouvel analyseur nommé lwc.

// Input
<my-element data-for={value}></my-element>

// Output (Prettier stable)
<my-element data-for="{value}"></my-element>

// Output (Prettier master)
<my-element data-for={value}></my-element>

Angular : Ne pas ajouter de parenthèses superflues aux pipes (#5929 par @voithos)

Dans certains cas, des parenthèses étaient ajoutées inutilement autour de certains pipes dans les attributs, mais elles ne sont plus ajoutées lorsqu'elles n'affectent pas le résultat de l'expression.

// Input
<div *ngIf="isRendered | async"></div>

// Output (Prettier stable)
<div *ngIf="(isRendered | async)"></div>

// Output (Prettier master)
<div *ngIf="isRendered | async"></div>

GraphQL

Prise en charge des directives de variables (#6020 par @adek05)

Prettier prend désormais en charge le formatage des directives de variables.

// Input
query Q($variable: Int   @directive) {node}

// Output (Prettier stable)
query Q($variable: Int) {
  node
}

// Output (Prettier master)
query Q($variable: Int @directive) {
  node
}

Prise en charge des variables de fragment GraphQL (#6016 par @adek05)

Prettier prend désormais en charge le formatage des variables de fragment.

// Input
fragment F($var: Int) on Type { node }

// Output (Prettier stable)
// Fails to parse

// Output (Prettier master)
fragment F($var: Int) on Type {
   node
}

CLI

Découverte automatique des plugins scopés (#5945 par @Kocal)

Prettier prend désormais en charge le chargement automatique des plugins scopés nommés @scope-name/prettier-plugin-*.