Aller au contenu principal

Prettier 2.4 : nouvelle option bracketSameLine et prise en charge de TypeScript 4.4 !

· 5 minutes de lecture
Sosuke Suzuki
Sosuke Suzuki
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 renomme l'option jsxBracketSameLine en bracketSameLine, qui prend désormais en charge HTML, Vue et Angular en plus de JSX. L'ancien nom est désormais déprécié.

Nous avons également ajouté la prise en charge de TypeScript 4.4, incluant de nouvelles fonctionnalités syntaxiques comme les blocs static dans les classes.

Si vous appréciez Prettier et souhaitez soutenir notre travail, envisagez de nous sponsoriser directement via notre OpenCollective ou en sponsorisant les projets dont nous dépendons, notamment typescript-eslint, remark et Babel.

Principales fonctionnalités​

TypeScript​

Prise en charge de TypeScript 4.4 (#11426 par @sosukesuzuki)​

Prise en charge de TypeScript 4.4 !

Blocs static dans les classes​

La syntaxe des blocs statiques de classe est une proposition ECMAScript de stade 4. Consultez https://github.com/tc39/proposal-class-static-block pour plus de détails.

// Input
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

// Prettier 2.3
SyntaxError: Declaration expected. (5:9)
  3 |
  4 |   // This is a static block:
> 5 |   static {
    |         ^
  6 |     if (someCondition()) {
  7 |       Foo.count++;
  8 |     }

// Prettier 2.4
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

HTML​

Remplacement de l'option jsxBracketSameLine par bracketSameLine (#11006 par @kurtztech)​

L'option jsxBracketSameLine est dépréciée au profit de la nouvelle option bracketSameLine qui fonctionnera pour HTML, Angular, Vue et JSX.

<!-- Input -->
<div id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">lorem ipsum dolor sit amet</div>

<!-- Prettier 2.3 -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz"
>
  lorem ipsum dolor sit amet
</div>

<!-- Prettier 2.4 -->
<!-- Options: `{bracketSameLine: true}` -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">
  lorem ipsum dolor sit amet
</div>

Autres changements​

JavaScript​

Prise en charge des littéraux de modèle étiquetés parenthésés pour les composants stylisés (#11246 par @sosukesuzuki)​

// Input
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.3
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.4
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position: fixed;
    color: red;
  `;

Comptage correct des littéraux regex dans les arguments des chaînes de méthodes (#11299 par @sosukesuzuki)​

// Input
foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.3
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.4
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/)
  .foo2(bar)
  .foo3(baz);

Prise en charge de la proposition de pipeline de style Hack (#11335 par @sosukesuzuki)​

La syntaxe de pipeline de style Hack proposée est désormais prise en charge par Prettier. Nous utilisons % comme jeton thématique, conformément à l'explication officielle — bien que cela puisse changer dans les futures versions au fur et à mesure de l'avancement de la proposition.

Dans le cadre de ce changement, la prise en charge de la syntaxe de pipeline « smart » a été supprimée. Consultez notre politique sur les syntaxes non standardisées pour comprendre la logique de cette décision.

// Input
const foo = fn() |> fn1(%) |> fn2(%);

// Prettier 2.3
SyntaxError: Unexpected token (1:25)
> 1 | const foo = fn() |> fn1(%) |> fn2(%);
    |                         ^
  2 |

// Prettier 2.4
const foo = fn() |> fn1(%) |> fn(%);

TypeScript​

Correction du formatage des types d'intersection incluant des types mappés (#11247 par @sosukesuzuki)​

// Input
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

// Prettier 2.3
type Example = {
  [A in B]: T;
} &
  {
    [A in B]: T;
  };

// Prettier 2.4
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

Flow​

Toujours ajouter un point-virgule avant les indicateurs de variance Flow (#11398 par @noppa)​

// Input
class A {
  +one = function() {};
  -two = val();
  +#privOne = val();
  static +#privTwo = val();
}
// Prettier 2.3
class A {
  +one = function() {}
  -two = val()
  +#privOne = val()
  static +#privTwo = val()
}
// Prettier 2.4
class A {
  +one = function() {};
  -two = val();
  +#privOne = val()
  static +#privTwo = val()
}

SCSS​

Utiliser systématiquement des guillemets pour les chaînes de modules Sass (#11461 par @niksy)​

// Input
@use "sass:math";
@forward "list";

// Prettier 2.3
@use "sass:math";
@forward "list";

// Prettier 2.4
@use 'sass:math';
@forward 'list';

CLI​

Inférer le parser pour .stylelintrc (#10924 par @SevenOutman)​

Un fichier .stylelintrc (sans extension) est traité en utilisant les parsers json et yaml.