Prettier 2.1 : nouvelle option --embedded-language-formatting et nouvelles fonctionnalités JavaScript/TypeScript !

24 août 2020 · 36 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 ajoute une nouvelle option --embedded-language-formatting, prend en charge de nouvelles fonctionnalités JavaScript/TypeScript, et inclut de nombreuses corrections de bugs et améliorations !

Principales fonctionnalités

API

Ajout de l'option --embedded-language-formatting={auto,off} (#7875 par @bakkot, #8825 par @fisker)

Lorsque Prettier identifie des cas où il semble que vous ayez placé du code qu'il sait formater dans une chaîne d'un autre fichier, comme dans un template tagué en JavaScript avec un tag nommé html ou dans des blocs de code en Markdown, il essaiera par défaut de formater ce code.

Parfois, ce comportement n'est pas souhaitable, car il peut modifier le comportement de votre code. Cette option vous permet de basculer entre le comportement par défaut (auto) et la désactivation complète de cette fonctionnalité (off). Elle s'applique à tous les langages où Prettier reconnaît du code embarqué, pas seulement JavaScript.

// Input
html`
<p>
I am expecting this to come out exactly like it went in.
`;

// using --embedded-language-formatting=auto (or omitting this option)
html`
  <p>
    I am expecting this to come out exactly like it went in.
  </p>
`;

// using --embedded-language-formatting=off
html`
<p>
I am expecting this to come out exactly like it went in.
`;

TypeScript

Prise en charge de TypeScript 4.0

Éléments de tuple étiquetés (#8885 par @fisker, #8982 par @sosukesuzuki)

// Input
type Range = [start: number, end: number];

// Prettier 2.0
SyntaxError: Unexpected token, expected "," (1:20)
> 1 | type Range = [start: number, end: number];

// Prettier 2.1
type Range = [start: number, end: number];

Opérateurs d'assignation à court-circuit (#8982 par @sosukesuzuki)

// Input
a ||= b;

// Prettier 2.0
SyntaxError: Expression expected. (1:5)
> 1 | a ||= b;

// Prettier 2.1
a ||= b;

Annotations de type sur les clauses catch (#8805 par @fisker)

// Input
try {} catch (e: any) {}

// Prettier 2.0
try {
} catch (e) {}

// Prettier 2.1
try {
} catch (e: any) {}

Autres changements

JavaScript

Prise en charge des propositions d'opérateur pipeline F# et Smart (#6319 par @sosukesuzuki, @thorn0, #7979 par @sosukesuzuki)

Pipeline de style F# :

// Input
promises |> await;

// Output (Prettier 2.0)
SyntaxError: Unexpected token (1:18)
> 1 | promises |> await;
    |                  ^

// Output (Prettier 2.1)
promises |> await;

Pipeline intelligent :

// Input
5 |> # * 2

// Output (Prettier 2.0)
SyntaxError: Unexpected character '#' (1:6)
> 1 | 5 |> # * 2
    |      ^

// Output (Prettier 2.1)
5 |> # * 2

Correction des commentaires de fin de ligne s'ils sont suivis d'espaces blancs (#8069 par @shisama)

Si une ligne de commentaire contenait des espaces blancs en fin de ligne, les commentaires n'étaient pas détectés comme étant en fin de ligne.

// Input
var a = { /* extra whitespace --> */
    b };

var a = { /* no whitespace --> */
    b };

// Prettier 2.0
var a = {
  /* extra whitespace --> */

  b,
};

var a = {
  /* no whitespace --> */ b,
};

// Prettier 2.1
var a = {
  /* extra whitespace --> */ b,
};

var a = {
  /* no whitespace --> */ b,
};

Correction de l'analyse incohérente des expressions injectées dans les littéraux de modèle styled-components (#8097 par @thecodrr)

// Input
const SingleConcat = styled.div`
  ${something()}
  & > ${Child}:not(:first-child) {
margin-left:5px;
}
`

const MultiConcats = styled.div`
  ${something()}
  & > ${Child}${Child2}:not(:first-child) {
margin-left:5px;
}
`

const SeparatedConcats = styled.div`
font-family: "${a}", "${b}";
`

// Prettier 2.0 -- same as input

// Prettier 2.1
const SingleConcat = styled.div`
  ${something()}
  & > ${Child}:not(:first-child) {
    margin-left: 5px;
  }
`;

const MultiConcats = styled.div`
  ${something()}
  & > ${Child}${Child2}:not(:first-child) {
    margin-left: 5px;
  }
`;

const SeparatedConcats = styled.div`
  font-family: "${a}", "${b}";
`;

Correction des virgules finales dans les objets lorsque la dernière propriété est ignorée (#8111 par @fisker)

// Input
const foo = {
  // prettier-ignore
  bar: "baz"
}

// Prettier 2.0
const foo = {
  // prettier-ignore
  bar: "baz"
};

// Prettier 2.1
const foo = {
  // prettier-ignore
  bar: "baz",
};

Conservation des clés d'objet avec séquence d'échappement telles quelles (#8160 par @fisker)

// Input
const a = {
  "\u2139": 'why "\\u2139" converted to "i"?',
};

// Prettier 2.0
const a = {
  ℹ: 'why "\\u2139" converted to "i"?',
};


// Prettier 2.1
const a = {
  "\u2139": 'why "\\u2139" is converted to "i"?',
};

Correction de l'espace supplémentaire après le signe moins dans le CSS-in-JS (#8255 par @thorn0)

// Input
css`
color: var(--global--color--${props.color});
`

// Prettier 2.0
css`
  color: var(--global--color-- ${props.color});
`;

// Prettier 2.1
css`
  color: var(--global--color--${props.color});
`;

Correction des commentaires dans la partie `extends` des déclarations/expressions de classe (#8312 par @thorn0)

// Input
class a extends a // comment
{
  constructor() {}
}

// Prettier 2.0
class a extends a // comment {
  constructor() {}
}

// Prettier 2.1
class a extends a { // comment
  constructor() {}
}

Ne pas encapsuler les tableaux dans les chaînes de modèle `test.each` de Jest (#8354 par @yogmel)

// Input
test.each`
a | b | c
${1} | ${[{ start: 1, end: 3 },{ start: 15, end: 20 },]} | ${[]}
`("example test", ({a, b, c}) => {})

// Prettier 2.0
test.each`
  a | b | c
  ${1} | ${[
  { start: 1, end: 3 },
  { start: 15, end: 20 }
]} | ${[]}
`("example test", ({ a, b, c }) => {});

// Prettier 2.1
test.each`
  a    | b                                                 | c
  ${1} | ${[{ start: 1, end: 3 }, { start: 15, end: 20 }]} | ${[]}
`("example test", ({ a, b, c }) => {});

Prise en charge de `insertPragma` et `requirePragma` dans les fichiers avec shebang (#8376 par @fisker)

// `--insert-pragma`
// Input
#!/usr/bin/env node
hello
  .world();

// Prettier 2.0
SyntaxError: Unexpected token (3:1)
  1 | /** @format */
  2 |
> 3 | #!/usr/bin/env node
    | ^
  4 | hello
  5 |   .world();

// Prettier 2.1
#!/usr/bin/env node
/** @format */

hello.world();

// `--require-pragma`
// Input
#!/usr/bin/env node
/**
 * @format
 */
hello
  .world();

// Prettier 2.0
#!/usr/bin/env node
/**
 * @format
 */
hello
  .world();

// Prettier 2.1
#!/usr/bin/env node
/**
 * @format
 */
hello.world();

Correction de l'indentation dans le formatage par plage (#8410 par @thorn0)

> echo -e "export default class Foo{\n/**/\n}" | prettier --range-start 16 --range-end 31 --parser babel

// Prettier 2.0
export default class Foo {
                 /**/
               }

// Prettier 2.1
export default class Foo {
  /**/
}

Amélioration de la détection des éléments sources pour le formatage par plage (#8419 par @thorn0)

Tous les types d'instructions n'étaient pas détectés (lisez ici comment fonctionne le formatage par plage dans Prettier).

// Input
for   (const  element of list) { /* ... */ }
//     ^^^^^^^^^^^^^^^^^^^^^^ ← range

// Prettier 2.0
for   (const  element of list) { /* ... */ }

// Prettier 2.1
for (const element of list) {
  /* ... */
}

Prise en charge des champs privés dans `in` (#8431 par @sosukesuzuki)

Prise en charge de la proposition Stage-2 Private Fields in in.

// Input
#prop in obj;

// Prettier 2.0
SyntaxError: Unexpected token (1:1)
> 1 | #prop in obj;
    | ^
  2 |

// Prettier 2.1
#prop in obj;

Prise en charge des attributs de module ES et des modules JSON (#8436 par @fisker)

Prise en charge de la proposition Stage-2 ES Module Attributes and JSON modules.

// Input
import foo from "foo.json" with type: "json";

// Prettier 2.0
SyntaxError: Unexpected token, expected ";" (1:28)
> 1 | import foo from "foo.json" with type: "json";
    |                            ^

// Prettier 2.1
import foo from "foo.json" with type: "json";

Prise en charge de la syntaxe des enregistrements et des tuples (#8453 par @fisker)

Prise en charge de la proposition Stage-2 JavaScript Records & Tuples Proposal.

Seule la syntaxe #[]/#{} est prise en charge, pas {| |} / [| |].

Tuples

// Input
#[1, 2, 3]

// Prettier 2.0
SyntaxError: Unexpected token (1:1)
> 1 | #[1, 2, 3]
    | ^


// Prettier 2.1
#[1, 2, 3];

Enregistrements

// Input
#{
  a: 1,
  b: 2,
  c: 3,
}

// Prettier 2.0
SyntaxError: Unexpected token (1:1)
> 1 | #{
    | ^
  2 |   a: 1,
  3 |   b: 2,
  4 |   c: 3,


// Prettier 2.1
#{
  a: 1,
  b: 2,
  c: 3,
};

Encapsulation des éléments JSX à gauche de "<" avec des parenthèses (#8461 par @sosukesuzuki)

// Input
(<div/>) < 5;

// Prettier 2.0
<div/> < 5;

// Prettier 2.0 second output
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (1:9)
> 1 | <div /> < 5;
    |         ^
  2 |

// Prettier 2.1
(<div />) < 5;

Correction de l'indentation pour les expressions binaires avec commentaires de fin (#8476 par @sosukesuzuki)

// Input
a +
  a + // comment
  a;

// Prettier 2.0
a +
a + // comment
  a;

// Prettier 2.1
a +
  a + // comment
  a;

Correction des commentaires instables dans les expressions binaires (#8491 par @thorn0)

// Input
Math.min(
  (
    /* foo */
    document.body.scrollHeight -
    (window.scrollY + window.innerHeight)
  ) - devsite_footer_height,
  0,
)

// Prettier 2.0 (first output)
Math.min(
  /* foo */
  document.body.scrollHeight -
  (window.scrollY + window.innerHeight) -
    devsite_footer_height,
  0
);

// Prettier 2.0 (second output)
Math.min(
  /* foo */
  document.body.scrollHeight -
    (window.scrollY + window.innerHeight) -
    devsite_footer_height,
  0
);

// Prettier 2.1 (first and second outputs)
Math.min(
  /* foo */
  document.body.scrollHeight -
    (window.scrollY + window.innerHeight) -
    devsite_footer_height,
  0
);

// Input
const topOfDescriptionBox =
      Layout.window.width +          // Images are 1:1 aspect ratio, full screen width
      Layout.headerHeight;

// Prettier 2.0 (first output)
const topOfDescriptionBox =
  Layout.window.width + Layout.headerHeight; // Images are 1:1 aspect ratio, full screen width

// Prettier 2.0 (second output)
const topOfDescriptionBox = Layout.window.width + Layout.headerHeight; // Images are 1:1 aspect ratio, full screen width

// Prettier 2.1 (first and second outputs)
const topOfDescriptionBox =
  Layout.window.width + // Images are 1:1 aspect ratio, full screen width
  Layout.headerHeight;

Ajout/retrait des guillemets sur les clés numériques (#8508 par @lydell)

Prettier supprime les guillemets des clés d'objet lorsqu'elles sont des identifiants valides. Désormais, Prettier retire aussi les guillemets des clés numériques.

Avec l'option quoteProps: "consistent", Prettier peut également ajouter des guillemets aux clés numériques pour que toutes les propriétés soient entre guillemets.

// Input
x = {
  "a": null,
  "1": null,
};

// Prettier 2.0
x = {
  a: null,
  "1": null,
};

// Prettier 2.1
x = {
  a: null,
  1: null,
};

Prettier n'intervient que sur les nombres "simples" comme 1 ou 123.5. Il n'effectuera pas les transformations suivantes, jugées inattendues :

1e2 -> "100"
0b10 -> "10"
1_000 -> "1000"
1.0 -> "1"
0.99999999999999999 -> "1"
999999999999999999999 -> "1e+21"
2n -> "2"

"1e+100" -> 1e100

(Merci de ne pas utiliser de notations numériques ambiguës comme clés d'objet !)

Notez que Prettier ne supprime les guillemets des nombres qu'avec le parser "babel". Cette opération n'est pas totalement sûre en TypeScript.

Privilégier le commentaire initial lorsqu'un commentaire suit le "?" dans les types conditionnels (#8557 par @sosukesuzuki)

// Input
type A = B extends T
  ? // comment
    foo
  : bar;

// Prettier 2.0
type A = B extends T // comment
  ? foo
  : bar;

// Prettier 2.1
type A = B extends T
  ? // comment
    foo
  : bar;

Casser les expressions ternaires contenant un commentaire multiligne (#8592 par @sosukesuzuki)

// Input
test
  ? /* comment
       comment
    */
    foo
  : bar;

// Prettier 2.0
test ? /* comment
       comment
    */ foo : bar;

// Prettier 2.1
test
  ? /* comment
       comment
    */
    foo
  : bar;

Correction des paires de commentaires instables entre méthodes de classe (#8731 par @fisker)

// Input
class C {
    ma() {} /* D */ /* E */
    mb() {}
}

// Prettier 2.0
class C {
  ma() {} /* E */ /* D */
  mb() {}
}

// Prettier 2.0 (Second format)
class C {
  ma() {} /* D */ /* E */
  mb() {}
}

// Prettier 2.1
class C {
  ma() {} /* D */ /* E */
  mb() {}
}

Correction des commentaires `prettier-ignore` dupliqués (#8742 par @fisker)

// Input
a = <div {.../* prettier-ignore */{}}/>
a = <div {...{}/* prettier-ignore */}/>

// Prettier 2.0
a = <div {/* prettier-ignore */ .../* prettier-ignore */ {}} />;
a = <div {...{} /* prettier-ignore */ /* prettier-ignore */} />;

// Prettier 2.1
a = <div {.../* prettier-ignore */ {}} />;
a = <div {...{} /* prettier-ignore */} />;

Prise en charge de la proposition Decimal (#8901 par @fisker)

Prise en charge de la proposition de Stage-1 Decimal Proposal.

// Input
0.3m;

// Prettier 2.0
SyntaxError: Identifier directly after number (1:4)
> 1 | 0.3m;

// Prettier 2.1
0.3m;

Ajout de parenthèses lors du rendu de JSX avec yield (#9011 par @fisker)

Dans la v2.0.0, nous avions supprimé les parenthèses lors du rendu JSX avec yield. Bien que cela fonctionne avec la plupart des parsers, ESLint génère une erreur lors de l'analyse voir issue associée.

// Input
function* f() {
  yield <div>generator</div>
}

// Prettier 2.0
function* f() {
  yield <div>generator</div>
}

// Prettier 2.1
function* f() {
  yield (<div>generator</div>);
}

TypeScript

Correction du parser `babel-ts` pour générer une erreur syntaxique appropriée sur `(a:b)` (#8046 par @thorn0)

Auparavant, ce code était parsé sans erreur mais provoquait une erreur à l'impression, affichée de manière peu claire avec une stack trace. Désormais, le parser génère une erreur syntaxique appropriée.

// Input
(a:b)

// Prettier 2.0
[error] test.ts: Error: unknown type: "TSTypeCastExpression"
[error] ... [a long stack trace here] ...

// Prettier 2.1
[error] test.ts: SyntaxError: Did not expect a type annotation here. (1:2)
[error] > 1 | (a:b)
[error]     |  ^
[error]   2 |

Parenthéser les littéraux de chaîne pour éviter leur interprétation comme directives (#8422 par @thorn0)

Prettier place entre parenthèses tout littéral de chaîne de caractères en position d'instruction, car sinon ces chaînes seraient interprétées comme des directives si elles apparaissaient en haut d'une fonction ou d'un programme, ce qui pourrait modifier le comportement du programme. Techniquement, ce n'est pas nécessaire pour les chaînes qui ne sont pas sur la première ligne d'une fonction ou d'un programme. Mais le faire quand même garantit plus de cohérence et peut révéler des bugs. Voir par exemple ce fil Twitter.

Auparavant, cela ne fonctionnait pas systématiquement pour le parser typescript. Seules les chaînes déjà entourées de parenthèses les conservaient.

// Input
f();
'use foo';
('use bar');

// Prettier 2.0
f();
"use foo";
("use bar");

// Prettier 2.1
f();
("use foo");
("use bar");

Prise en charge du changement cassant de TypeScript 3.9 pour le chaînage optionnel et les assertions de non-nullité (#8450 par @sosukesuzuki)

Voir https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#breaking-changes

// Input
(a?.b)!.c;

// Prettier 2.0
a?.b!.c;

// Prettier 2.1
(a?.b)!.c;

Flow

Correction du paramètre de type de fonction contenant un paramètre nullable (#8365 par @fisker)

// Input
let f: <A>(
  ((?A) => B),
) => B;

// Prettier 2.0
let f: <A>((?A) => B) => B;

// Prettier 2.0 (Second format)
SyntaxError: Unexpected token (1:12)
> 1 | let f: <A>((?A) => B) => B;

// Prettier 2.1
let f: <A>(((?A) => B)) => B;

Correction de l'export par défaut des Flow Enum (#8768 par @gkz)

Ne pas ajouter de point-virgule final lors de l'export par défaut d'une Flow Enum.

// Input
export default enum B {}

// Prettier 2.0
export default enum B {};

// Prettier 2.1
export default enum B {}

CSS

Ne pas casser le code avec un commentaire à la fin d'une règle @ (#7009 par @evilebottnawi)

/* Input */
@at-root .foo
// .bar
{

}

/* Prettier 2.0 */
@at-root .foo
// .bar {
}

/* Prettier 2.1 */
@at-root .foo
// .bar
{
}

Correction de la manipulation du contenu non cité dans url() (#7592 par @mattiacci)

Amélioration de la gestion du contenu d'URL non cité dans CSS/SCSS/Less. Cela ne résout pas les problèmes d'analyse sous-jacents, mais garantit au moins que Prettier ne modifie pas les URL.

/* Input */
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
@import url(//fonts.googleapis.com/css?family=#{ get-font-family('Roboto') }:100,300,500,700,900&display=swap);
.validUnquotedUrls{
  background: url(data/+0ThisShouldNotBeLowerCased);
  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
}

/* Prettier 2.0 */
@import url(
  https://fonts.googleapis.com/css?family=Roboto:100,
  300,
  400,
  500,
  700,
  900&display=swap
);
@import url(
  //fonts.googleapis.com/css?family=#{get-font-family("Roboto")}:100,
  300,
  500,
  700,
  900&display=swap
);
.validUnquotedUrls {
  background: url(data/+0thisshouldnotbelowercased);
  background: url(https://foo/A*3i8osy6akrmaaaaaaaaaaabkarqnaq);
  background: url(https://example.com/some/quite, long, url, with, commas.jpg);
}


/* Prettier 2.1 */
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
@import url(//fonts.googleapis.com/css?family=#{ get-font-family('Roboto') }:100,300,500,700,900&display=swap);
.validUnquotedUrls{
  background: url(data/+0ThisShouldNotBeLowerCased);
  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
}

Espace incorrect ajouté après un deux-points échappé dans un nom de ligne de grille CSS (#8535 par @boyenn)

/* Input */
.grid {
  grid-template-rows:
    [row-1-00\:00] auto;
}

/* Prettier 2.0 */
.grid {
  grid-template-rows: [row-1-00\: 00] auto;
}

/* Prettier 2.1 */
.grid {
  grid-template-rows: [row-1-00\:00] auto;
}

Ajout de la prise en charge de @supports selector(<custom-selector>) (#8545 par @boyenn)

/* Input */
@supports selector(:focus-visible) {
  button:focus {
    outline: none;
  }

  button:focus-visible {
    outline: 2px solid orange;
  }
}

/* Prettier 2.0 */
@supports selector(: focus-visible) {
  button:focus {
    outline: none;
  }

  button:focus-visible {
    outline: 2px solid orange;
  }
}

/* Prettier 2.1 */
@supports selector(:focus-visible) {
  button:focus {
    outline: none;
  }

  button:focus-visible {
    outline: 2px solid orange;
  }
}

Amélioration de la gestion des arguments arbitraires par Prettier (#8567, #8566 par @boyenn)

Prettier n'ajoute plus inopinément d'espace supplémentaire après une fonction lors du passage d'arguments arbitraires. Prettier ne casse plus le code lorsque des listes numériques en ligne sont utilisées comme arguments arbitraires.

/* Input */
body {
  test: function($list...);
  foo: bar(returns-list($list)...);
  background-color: rgba(50 50 50 50...);
}

/* Prettier 2.0 */
body {
  test: function($list...);
  foo: bar(returns-list($list) ...);
  background-color: rgba(50 50 50 50..);
}

/* Prettier 2.1 */
body {
  test: function($list...);
  foo: bar(returns-list($list)...);
  background-color: rgba(50 50 50 50...);
}

SCSS

Correction de l'indentation supplémentaire des lignes suivant des commentaires en SCSS (#7844 par @boyenn)

Auparavant, Prettier ajoutait une indentation supplémentaire aux lignes suivant des commentaires dans les maps SCSS. Prettier ne place plus désormais ces indentations.

/* Input */
$my-map: (
  'foo': 1, // Foo
  'bar': 2, // Bar
);

/* Prettier 2.0 */
$my-map: (
  "foo": 1,
  // Foo
    "bar": 2,
  // Bar
);

/* Prettier 2.1 */
$my-map: (
  "foo": 1,
  // Foo
  "bar": 2,
  // Bar
);

Correction des commentaires en ligne entre propriété et valeur (#8366 par @fisker)

// Input
a {
  color: // comment
         red;
}

// Prettier 2.0
a {
  color: // comment red;
}

// Prettier 2.1
a {
  color: // comment
    red;
}

Les commentaires en fin de fichier étaient perdus si le point-virgule final était omis (#8675 par @fisker)

// Input
@mixin foo() {
  a {
    color: #f99;
  }
}

@include foo() /* comment*/

// Prettier 2.0
@mixin foo() {
  a {
    color: #f99;
  }
}

@include foo();

// Prettier 2.1
@mixin foo() {
  a {
    color: #f99;
  }
}

@include foo(); /* comment*/

Less

Correctif pour la pseudo-classe `:extend` (#8178 par @fisker)

Le sélecteur était précédemment analysé comme valeur, il est désormais reconnu comme sélecteur.

// Input
.hello {
  &:extend(.input[type="checkbox"]:checked ~ label)}

// Prettier 2.0
.hello {
  &:extend(.input[type= "checkbox" ]: checked ~label);
}

// Prettier 2.1
.hello {
  &:extend(.input[type="checkbox"]:checked ~ label);
}

Correction des commentaires en ligne contenant `/*` (#8360 par @fisker)

Lorsque des commentaires en ligne contiennent /*, certains autres commentaires n'étaient pas correctement imprimés.

// Input
@import "a";

// '/*' <-- this breaks formatting

@import 'b';
/* block */
/*no-space block*/

// Prettier 2.0
@import "a";

// '/*' <-- this breaks formatting

@import "b";

@import 'b
@import 'b';
/* bl

// Prettier 2.1
@import "a";

// '/*' <-- this breaks formatting

@import "b";
/* block */
/*no-space block*/

HTML

Omission du point-virgule final dans les attributs style sur une seule ligne (#8013 par @bschlenk)

<!-- Input -->
<div style="margin: 0; padding: 20px"></div>
<div style="margin: 0; padding: 20px; position: relative; display: inline-block; color: blue"></div>

<!-- Prettier 2.0 -->
<div style="margin: 0; padding: 20px;"></div>
<div
  style="
    margin: 0;
    padding: 20px;
    position: relative;
    display: inline-block;
    color: blue;
  "
></div>

<!-- Prettier 2.1 -->
<div style="margin: 0; padding: 20px"></div>
<div
  style="
    margin: 0;
    padding: 20px;
    position: relative;
    display: inline-block;
    color: blue;
  "
></div>

Préservation des caractères d'espacement non-ASCII dans le HTML (#8137 par @fisker)

Les caractères d'espacement non-ASCII comme U+00A0 U+2005 etc. ne sont pas considérés comme des espaces en HTML, ils ne doivent pas être supprimés.

// Prettier 2.0
[...require("prettier").format("<i> \u2005 </i>", { parser: "html" })]
  .slice(3, -5)
  .map((c) => c.charCodeAt(0).toString(16));

// -> [ '20' ]
// `U+2005` is removed

// Prettier 2.1
[...require("prettier").format("<i> \u2005 </i>", { parser: "html" })]
  .slice(3, -5)
  .map((c) => c.charCodeAt(0).toString(16));

// -> [ '20', '2005', '20' ]

Prise en charge des commentaires de type HTML dans les blocs script (#8173 par @fisker, #8394 par @fisker)

Précédemment, nous analysions les blocs <script> HTML comme "module" (grammaire ECMAScript Module), ce qui empêchait de traiter les commentaires commençant par <!-- (dits commentaires de type HTML). Désormais, nous analysons les blocs <script> comme "script", sauf si ce <script>

type="module"
type="text/babel" et data-type="module", introduit dans babel@v7.10.0

<!-- Input -->
<SCRIPT>
<!--
alert("hello" +    ' world!')
//--></SCRIPT>

<!-- Prettier 2.0 -->
SyntaxError: Unexpected token (2:1)
  1 |
> 2 | <!--
    | ^
  3 | alert("hello" +    ' world!')
  4 | //-->

<!-- Prettier 2.1 -->
<script>
  <!--
  alert("hello" + " world!");
  //-->
</script>

Traitement de `<select>` comme inline-block et `<optgroup>`/`<option>` comme block (#8275 par @thorn0, #8620 par @fisker)

Prettier sait désormais qu'il est possible d'ajouter des espaces à l'intérieur des balises select, option et optgroup.

<!-- Input -->
<select><option>Blue</option><option>Green</option><optgroup label="Darker"><option>Dark Blue</option><option>Dark Green</option></optgroup></select>

<!-- Prettier 2.0 -->
<select
  ><option>Blue</option
  ><option>Green</option
  ><optgroup label="Darker"
    ><option>Dark Blue</option><option>Dark Green</option></optgroup
  ></select
>

<!-- Prettier 2.1 -->
<select>
  <option>Blue</option>
  <option>Green</option>
  <optgroup label="Darker">
    <option>Dark Blue</option>
    <option>Dark Green</option>
  </optgroup>
</select>

Correction des URL avec virgules dans srcset (#8359 par @fisker)

<!-- Input -->
<img
srcset="
_20200401_145009_szrhju_c_scale,w_200.jpg 200w,
_20200401_145009_szrhju_c_scale,w_1400.jpg 1400w"
src="_20200401_145009_szrhju_c_scale,w_1400.jpg"
>

<!-- Prettier 2.0 -->
<img
  srcset="
    _20200401_145009_szrhju_c_scale,
    w_200.jpg                        200w,
    _20200401_145009_szrhju_c_scale,
    w_1400.jpg                      1400w
  "
  src="_20200401_145009_szrhju_c_scale,w_1400.jpg"
/>

<!-- Prettier 2.1 -->
<img
  srcset="
    _20200401_145009_szrhju_c_scale,w_200.jpg   200w,
    _20200401_145009_szrhju_c_scale,w_1400.jpg 1400w
  "
  src="_20200401_145009_szrhju_c_scale,w_1400.jpg"
/>

Prise en charge de `<script type="text/html>` (#8371 par @sosukesuzuki)

<!-- Input -->
<script type="text/html">
<div>
<p>foo</p>
</div>
</script>

<!-- Prettier 2.0 -->
<script type="text/html">
  <div>
  <p>foo</p>
  </div>
</script>

<!-- Prettier 2.1 -->
<script type="text/html">
  <div>
    <p>foo</p>
  </div>
</script>

Support du front matter avec langage dynamique (#8381 par @fisker)

Prise en charge de la détection dynamique de langage dans le front matter, également disponible pour les analyseurs css, less, scss, et markdown.

<!-- Input -->
---my-awsome-language
title: Title
description: Description
---
  <h1>
    prettier</h1>

<!-- Prettier 2.0 -->
---my-awsome-language title: Title description: Description ---

<h1>
  prettier
</h1>

<!-- Prettier 2.1 -->
---my-awsome-language
title: Title
description: Description
---

<h1>
  prettier
</h1>

Non-préservation des sauts de ligne autour du contenu textuel uniquement (#8614 par @fisker)

Auparavant, Prettier conservait toujours les sauts de ligne autour des nœuds inline (éléments inline, texte, interpolations). En général, Prettier évite autant que possible de s'appuyer sur la mise en forme originale, mais deux cas où le regroupement des nœuds inline sur une seule ligne est indésirable ont été identifiés : le contenu de type liste et les constructions conditionnelles (comme v-if/v-else dans Vue). Une méthode fiable pour détecter ces cas n'ayant pas été trouvée, ce compromis avait été adopté. Il s'est avéré que pour le contenu purement textuel, cet assouplissement était inutile et ne menait qu'à une mise en forme incohérente et déroutante.

<!-- Input -->
<div>
  Hello, world!
</div>
<div>
  Hello, {{ username }}!
</div>

<!-- Prettier 2.0 -->
<div>
  Hello, world!
</div>
<div>Hello, {{ username }}!</div>

<!-- Prettier 2.1 -->
<div>Hello, world!</div>
<div>Hello, {{ username }}!</div>

Reconnaissance des balises HTML connues (#8621 par @fisker)

<!-- Input -->
<div>before<details><summary>summary long long long long </summary>details</details>after</div>
<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>

<!-- Prettier 2.0 -->
<div>
  before<details><summary>summary long long long long </summary>details</details
  >after
</div>
<div>
  before<dialog open>dialog long long long long long long long long </dialog
  >after
</div>
<div>
  before<object data="horse.wav"
    ><param name="autoplay" value="true" /><param
      name="autoplay"
      value="true" /></object
  >after
</div>

<!-- Prettier 2.1 -->
<div>
  before
  <details>
    <summary>summary long long long long</summary>
    details
  </details>
  after
</div>
<div>
  before
  <dialog open>dialog long long long long long long long long</dialog>
  after
</div>
<div>
  before<object data="horse.wav">
    <param name="autoplay" value="true" />
    <param name="autoplay" value="true" /></object
  >after
</div>

Correction du formatage des éléments avec un élément vide comme dernier enfant (#8643 par @ikatyang)

<!-- Input -->
<video controls width="250">
    <source src="/media/examples/flower.webm"
            type="video/webm">
    <source src="/media/examples/flower.mp4"
            type="video/mp4"
></video>text after

<!-- Prettier 2.0 -->
<video controls width="250">
  <source src="/media/examples/flower.webm" type="video/webm" />
  <source src="/media/examples/flower.mp4" type="video/mp4" /></video

>text after

<!-- Prettier 2.1 -->
<video controls width="250">
  <source src="/media/examples/flower.webm" type="video/webm" />
  <source src="/media/examples/flower.mp4" type="video/mp4" /></video
>text after

Vue

Amélioration du formatage des blocs racines des SFC Vue (#8023 par @sosukesuzuki, #8465 par @fisker)

Prise en charge du formatage de tous les blocs de langage (y compris les blocs personnalisés avec attribut lang) avec les parseurs natifs et les plugins.

<!-- Input -->
<template lang="pug">
div.text( color =   "primary",  disabled  ="true"  )
</template>
<i18n lang="json">
{
"hello": 'prettier',}
</i18n>

<!-- Prettier 2.0 -->
<template lang="pug">
div.text( color =   "primary",  disabled  ="true"  )
</template>
<i18n lang="json">
{
"hello": 'prettier',}
</i18n>

<!-- Prettier 2.1 -->
<template lang="pug">
.text(color="primary", disabled="true")
</template>
<i18n lang="json">
{
  "hello": "prettier"
}
</i18n>

@prettier/plugin-pug est requis pour cet exemple.

Amélioration de l'analyse des blocs personnalisés (#8153 par @sosukesuzuki)

<!-- Input -->
<custom lang="javascript">
const foo =    "</";
</custom>

<!-- Prettier 2.0 -->
SyntaxError: Unexpected character """ (2:19)
[error]   1 | <custom lang="javascript">
[error] > 2 | const foo =    "</";
[error]     |                   ^
[error]   3 | </custom>

<!-- Prettier 2.1 -->
<custom lang="javascript">
const foo = "</";
</custom>

Correction du formatage cassé avec les balises HTML en majuscules (#8280 par @fisker)

<!-- Input -->
<!doctype html><HTML></HTML>

<!-- Prettier 2.0 -->
<!DOCTYPE html>><HTML></HTML>

<!-- Prettier 2.1 -->
<!DOCTYPE html><HTML></HTML>

Correction du formatage inélégant pour les `template` sur une ligne dans les SFC Vue (#8325 par @sosukesuzuki)

<!-- Input -->
<template><p>foo</p><div>foo</div></template>

<!-- Prettier 2.0 -->
<template
  ><p>foo</p>
  <div>foo</div></template
>

<!-- Prettier 2.1 -->
<template>
  <p>foo</p>
  <div>foo</div>
</template>

Prise en charge des templates DOM Vue (#8326 par @sosukesuzuki)

Lors de l'utilisation du parseur Vue pour HTML, le template est analysé comme du HTML.

<!-- Input -->
<!DOCTYPE html>
<html>
  <body STYLE="color: #333">
    <DIV id="app">
      <DIV>First Line</DIV><DIV>Second Line</DIV>
    </DIV>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {}
        },
      });
    </script>
  </body>
</html>

<!-- Prettier 2.0 -->
<!DOCTYPE html>
<html>
  <body STYLE="color: #333">
    <DIV id="app"> <DIV>First Line</DIV><DIV>Second Line</DIV> </DIV>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>

<!-- Prettier 2.1 -->
<!DOCTYPE html>
<html>
  <body style="color: #333">
    <div id="app">
      <div>First Line</div>
      <div>Second Line</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>

Amélioration du formatage des balises HTML en majuscules dans les templates DOM (#8337 par @sosukesuzuki)

<!-- Input -->
<!DOCTYPE html><HTML>
  <body>
    <div v-if="foo ===    'foo'">

</div>
    <script>
new Vue({el: '#app'})
    </script>
  </body>
</HTML>

<!-- Prettier 2.0 -->
<!DOCTYPE html>
<HTML>
  <body>
    <div v-if="foo ===    'foo'">

</div>
    <script>
new Vue({el: '#app'})
    </script>
  </body>
</HTML>

<!-- Prettier 2.1 -->
<!DOCTYPE html>
<HTML>
  <body>
    <div v-if="foo === 'foo'"></div>
    <script>
      new Vue({ el: "#app" });
    </script>
  </body>
</HTML>

Correction du formatage des interpolations entre parenthèses (#8747 par @fisker)

<!-- Input -->
<template>
<span>{{(a||          b)}} {{z&&(a&&b)}}</span>
</template>

<!-- Prettier 2.0 -->
<template>
  <span>{{(a||          b)}} {{z&&(a&&b)}}</span>
</template>

<!-- Prettier 2.1 -->
<template>
  <span>{{ a || b }} {{ z && a && b }}</span>
</template>

Correction du formatage des valeurs raccourcies des slots nommés (#8839 par @wenfangdu)

<!-- Input -->
<template>
  <div #default="{foo:{bar:{baz}}}"></div>
</template>

<!-- Prettier 2.0 -->
<template>
  <div #default="{foo:{bar:{baz}}}"></div>
</template>

<!-- Prettier 2.1 -->
<template>
  <div #default="{ foo: { bar: { baz } } }"></div>
</template>

Angular

Correction du chaînage optionnel avec les propriétés calculées et gestion de `this` (#8253 par @thorn0, #7942 par @fisker, corrections dans `angular-estree-parser` par @ikatyang)

<!-- Input -->
{{ a?.b[c] }}
{{ a  ( this )}}

<!-- Prettier 2.0 -->
{{ (a?.b)[c] }}
{{ a  ( this )}}

<!-- Prettier 2.1 -->
{{ a?.b[c] }}
{{ a(this) }}

Préservation des parenthèses autour des pipes dans les littéraux d'objet pour la compatibilité avec AngularJS 1.x (#8254 par @thorn0)

<!-- Input -->
<div ng-style="{ 'color': ('#222' | darken)}"></div>

<!-- Prettier 2.0 -->
<div ng-style="{ color: '#222' | darken }"></div>

<!-- Prettier 2.1 -->
<div ng-style="{ 'color': ('#222' | darken)}"></div>

Handlebars (alpha)

Respect de l'option singleQuote autour des valeurs d'attribut plus complexes qu'un simple texte (#8375 par @dcyriller)

{{!-- Input --}}
<a href='/{{url}}'></a>
<a href="/{{url}}"></a>

<a href='url'></a>
<a href="url"></a>

{{!-- Prettier 2.0 --}}
<a href="/{{url}}"></a>
<a href="/{{url}}"></a>

<a href='url'></a>
<a href='url'></a>

{{!-- Prettier 2.1 --}}
<a href='/{{url}}'></a>
<a href='/{{url}}'></a>

<a href='url'></a>
<a href='url'></a>

Correction du formatage des composants classiques à l'intérieur d'un élément (#8593 par @mikoscz)

{{!-- Input --}}
<div>
  {{classic-component-with-many-properties
    class="hello"
    param=this.someValue
    secondParam=this.someValue
    thirdParam=this.someValue
  }}
</div>

{{!-- Prettier 2.0 --}}
<div>
  {{
    classic-component-with-many-properties
    class="hello"
    param=this.someValue
    secondParam=this.someValue
    thirdParam=this.someValue
  }}
</div>

{{!-- Prettier 2.1 --}}
<div>
  {{classic-component-with-many-properties
    class="hello"
    param=this.someValue
    secondParam=this.someValue
    thirdParam=this.someValue
  }}
</div>

Prise en charge de l'échappement d'une accolade avec une barre oblique inversée (#8634 par @dcyriller)

{{!-- Input --}}
\{{mustache}}
\\{{mustache}}
\\\{{mustache}}

{{!-- Prettier 2.0 --}}
{{mustache}}
\{{mustache}}
\\{{mustache}}

{{!-- Prettier 2.1 --}}
\{{mustache}}
\\{{mustache}}
\\\{{mustache}}

Formatage uniquement des noms de classe dans les attributs (#8677 par @dcyriller)

{{!-- Input --}}
<div class=' class '></div>
<div title=' other attribute '></div>

{{!-- Prettier 2.0 --}}
<div class="class"></div>
<div title="other attribute"></div>

{{!-- Prettier 2.1 --}}
<div class="class"></div>
<div title=" other attribute "></div>

GraphQL

Amélioration du retour à la ligne des directives de fragment GraphQL (#7721 par @sasurau4)

# Input
fragment TodoList_list on TodoList @argumentDefinitions(
  count: {type: "Int", defaultValue: 10},
) {
  title
}

# Prettier 2.0
fragment TodoList_list on TodoList
  @argumentDefinitions(count: { type: "Int", defaultValue: 10 }) {
  title
}

# Prettier 2.1
fragment TodoList_list on TodoList
@argumentDefinitions(count: { type: "Int", defaultValue: 10 }) {
  title
}

Correction des commentaires entre les interfaces (#8006 par @fisker)

# Input
type Type1 implements
    A  &
# comment 1
    B
# comment 2
 &  C {a: a}

# Prettier 2.0
type Type1 implements A & # comment 1
B & # comment 2
C {
  a: a
}

# Prettier 2.0 (Second format)
type Type1 implements A & B & C { # comment 1 # comment 2
  a: a
}

# Prettier 2.1
type Type1 implements A &
# comment 1
B &
# comment 2
C {
  a: a
}

Autorisation des interfaces à implémenter d'autres interfaces (#8007 par @fisker)

Voir "RFC: Allow interfaces to implement other interfaces"

# Input
interface Resource implements Node {
  id: ID!
  url: String
}

# Prettier 2.0
interface Resource {
  id: ID!
  url: String
}

# Prettier 2.1
interface Resource implements Node {
  id: ID!
  url: String
}

Markdown

Mise à jour de `remark-parse` vers la v8 (#8140 par @saramarcondes, @fisker, @thorn0)

remark, l'analyseur Markdown utilisé par Prettier, a reçu une mise à jour attendue depuis longtemps (5.0.0 → 8.0.2, voir le changelog de remark). Cela a corrigé de nombreux bugs anciens, notamment liés à l'analyse des éléments de liste indentés avec des tabulations.

Notez que la nouvelle version est plus stricte dans l'analyse des notes de bas de page, une extension syntaxique non définie dans aucune spécification. Auparavant, Prettier analysait (et produisait, selon l'option --tab-width) les notes de bas de page multilignes indentées avec n'importe quel nombre d'espaces. La nouvelle version ne reconnaît que les notes de bas de page multilignes indentées avec 4 espaces. Ce changement n'est pas considéré comme cassant car la syntaxe n'est pas standard, mais si vous l'utilisez, avant de mettre à jour Prettier, vous pourriez utiliser son ancienne version avec --tab-width=4 pour rendre les notes de bas de page de vos fichiers compatibles avec la nouvelle version.

Formatage correct des phrases CJK avec sélecteur de variation (#8511 par @ne-sachirou)

<!-- Input -->
麻󠄁羽󠄀‼️

<!-- Prettier 2.0 -->
麻 󠄁 羽 󠄀 ‼️

<!-- Prettier 2.1 -->
麻󠄁羽󠄀‼️

YAML

Correction du formatage instable avec `prettier-ignore` (#8355 par @fisker)

# Input
# prettier-ignore
---
prettier: true
...
hello: world

# Prettier 2.0
# prettier-ignore
---
prettier: true
---
hello: world

# Prettier 2.0 (Second format)
# prettier-ignore
---
prettier: true

---
hello: world

# Prettier 2.1
# prettier-ignore
---
prettier: true
---
hello: world

Préservation des lignes vides dans les commentaires (#8356 par @fisker)

# Input
a:
  - a: a

  # - b: b

  # - c: c

  - d: d


b:
  - a: a

  # - b: b

  # - c: c

# Prettier 2.0
a:
  - a: a

  # - b: b

  # - c: c

  - d: d

b:
  - a: a
  # - b: b
  # - c: c

# Prettier 2.1
a:
  - a: a

  # - b: b

  # - c: c

  - d: d

b:
  - a: a

  # - b: b

  # - c: c

Mise à jour de `yaml` et `yaml-unist-parser` (#8386 par @fisker, corrections dans `yaml-unist-parser` par @ikatyang)

# Input
# --- comments ---

# Prettier 2.0
--- # --- comments ---

# Prettier 2.1
# --- comments ---

# Input
empty block scalar: >

 # comment

# Prettier 2.0
empty block scalar: >

# comment

# Prettier 2.1
SyntaxError: Block scalars with more-indented leading empty lines must use an explicit indentation indicator (1:21)
> 1 | empty block scalar: >
    |                     ^
> 2 |
    | ^^
> 3 |  # comment
    | ^^^^^^^^^^^

Correction d'une erreur sur la syntaxe YAML Inline Extend (#8888 par @fisker, @evilebottnawi, corrections dans `yaml-unist-parser` par @ikatyang)

# Input
foo:
 <<: &anchor
   K1: "One"
 K2: "Two"

bar:
 <<: *anchor
 K3: "Three"

# Prettier 2.0
SyntaxError: Merge nodes can only have Alias nodes as values (2:2)
  1 | foo:
> 2 |  <<: &anchor
    |  ^^^^^^^^^^^
> 3 |    K1: "One"
    | ^^^^^^^^^^^^
> 4 |  K2: "Two"
    | ^^^^^^^^^^^^
> 5 |
    | ^
  6 | bar:
  7 |  <<: *anchor
  8 |  K3: "Three"

# Prettier 2.1
foo:
  <<: &anchor
    K1: "One"
  K2: "Two"

bar:
  <<: *anchor
  K3: "Three"

API

Ajout des analyseurs des plugins à l'option `parser` (#8390 par @thorn0)

Lorsqu'un plugin définit un langage, les analyseurs spécifiés pour ce langage sont désormais automatiquement ajoutés à la liste des valeurs valides de l'option parser. Cela peut être utile pour les intégrations d'éditeur ou d'autres applications nécessitant une liste des analyseurs disponibles.

npm install --save-dev --save-exact prettier @prettier/plugin-php

const hasPhpParser = prettier
  .getSupportInfo()
  .options.find((option) => option.name === "parser")
  .choices.map((choice) => choice.value)
  .includes("php"); // false in Prettier 2.0, true in Prettier 2.1

Correction de `prettier.getFileInfo()` (#8548, #8551, #8585 par @fisker)

Lors du passage de {resolveConfig: true}, inferredParser doit être l'analyseur résolu depuis le fichier de configuration. Les versions précédentes pouvaient retourner un résultat incorrect pour les fichiers pris en charge par les analyseurs intégrés.
Lors du passage de {resolveConfig: true} et {ignorePath: "a/file/in/different/dir"}, le résultat de inferredParser pouvait être incorrect.
Si le filePath donné est ignoré, inferredParser est désormais toujours null.

$ echo {"parser":"flow"}>.prettierrc
$ node -p "require('prettier').getFileInfo.sync('./foo.js', {resolveConfig: true})"

# Prettier 2.0
# { ignored: false, inferredParser: 'babel' }

# Prettier 2.1
# { ignored: false, inferredParser: 'flow' }

$ echo ignored.js>>.prettierignore
$ node -p "require('prettier').getFileInfo.sync('./ignored.js')"

# Prettier 2.0
# { ignored: true, inferredParser: 'babel' }

# Prettier 2.1
# { ignored: true, inferredParser: null }

Correction de la résolution editorConfig pour les fichiers dans des répertoires profonds (#8591 par @fisker)

Les versions précédentes ne trouvaient pas .editorconfig pour les fichiers dans des répertoires profonds (profondeur supérieure à 9 par rapport à la racine du projet, voir #5705).

Prise en charge des fichiers de configuration `.cjs` et `.json5` (#8890, #8957 par @fisker)

Ajout de nouveaux formats de fichiers de configuration :

.prettierrc.json5
.prettierrc.cjs
prettier.config.cjs

Correction du formatage incorrect des plages dans les fichiers avec BOM (#8936 par @fisker)

Dans les fichiers contenant un BOM, la version précédente calculait incorrectement la plage réelle.

const text = "\uFEFF" + "foo = 1.0000;bar = 1.0000;";
//                       ^^^^^^^^^^^^^ Range
const result = require("prettier")
  .format(text, {
    parser: "babel",
    rangeStart: 1,
    rangeEnd: 13,
  })
  // Visualize BOM
  .replace("\uFEFF", "<<BOM>>")
  // Visualize EOL
  .replace("\n", "<<EOL>>");

console.log(result);

// Prettier 2.0
// -> <<BOM>>foo = 1.0;<<EOL>>bar = 1.0;
//                            ^^^^^^^^^ This part should not be formatted

// Prettier 2.1
// -> <<BOM>>foo = 1.0;bar = 1.0000;

CLI

Correction de l'ignorance incorrecte des noms de fichiers contenant des caractères CJK ou emoji (#8098 par @fisker)

// Prettier 2.0
$ echo "dir" > .prettierignore
$ prettier **/*.js -l
dir/😁.js
dir/中文.js
not-ignored.js

// Prettier 2.1
$ echo "dir" > .prettierignore
$ prettier **/*.js -l
not-ignored.js

`--file-info` respecte désormais le `.prettierrc` et le `--no-config` (#8586, #8830 par @fisker)

$ echo {"parser":"ninja"}>.prettierrc

# Prettier 2.0
$ prettier --file-info file.js
# { "ignored": false, "inferredParser": "babel" }
$ prettier --file-info file.js --no-config
# { "ignored": false, "inferredParser": "babel" }

# Prettier 2.1
$ prettier --file-info file.js
# { "ignored": false, "inferredParser": "ninja" }
$ prettier --file-info file.js --no-config
# { "ignored": false, "inferredParser": "babel" }

Ajout du drapeau `--ignore-unknown` (alias `-u`) (#8829 par @fisker)

# Prettier 2.0
npx prettier * --check
Checking formatting...
foo.unknown[error] No parser could be inferred for file: foo.unknown
All matched files use Prettier code style!

# Prettier 2.1
npx prettier * --check --ignore-unknown
Checking formatting...
All matched files use Prettier code style!

Ajout de l'alias `-w` pour l'option `--write` (#8833 par @fisker)

# Prettier 2.0
$ prettier index.js -w
[warn] Ignored unknown option -w. Did you mean -_?
"use strict";

module.exports = require("./src/index");

# Prettier 2.1
$ prettier index.js -w
index.js 30ms

Arrêt des suggestions `-_` pour les options inconnues (#8934 par @fisker)

# Prettier 2.0
$ prettier foo.js -a
[warn] Ignored unknown option -a. Did you mean -_?

# Prettier 2.1
$ prettier foo.js -a
[warn] Ignored unknown option -a. Did you mean -c?

Principales fonctionnalités​

API​

Ajout de l'option --embedded-language-formatting={auto,off} (#7875 par @bakkot, #8825 par @fisker)​

TypeScript​

Prise en charge de TypeScript 4.0​

Éléments de tuple étiquetés (#8885 par @fisker, #8982 par @sosukesuzuki)​

Opérateurs d'assignation à court-circuit (#8982 par @sosukesuzuki)​

Annotations de type sur les clauses catch (#8805 par @fisker)​

Autres changements​

JavaScript​

Prise en charge des propositions d'opérateur pipeline F# et Smart (#6319 par @sosukesuzuki, @thorn0, #7979 par @sosukesuzuki)​

Correction des commentaires de fin de ligne s'ils sont suivis d'espaces blancs (#8069 par @shisama)​

Correction de l'analyse incohérente des expressions injectées dans les littéraux de modèle styled-components (#8097 par @thecodrr)​

Correction des virgules finales dans les objets lorsque la dernière propriété est ignorée (#8111 par @fisker)​

Conservation des clés d'objet avec séquence d'échappement telles quelles (#8160 par @fisker)​

Correction de l'espace supplémentaire après le signe moins dans le CSS-in-JS (#8255 par @thorn0)​

Correction des commentaires dans la partie extends des déclarations/expressions de classe (#8312 par @thorn0)​

Ne pas encapsuler les tableaux dans les chaînes de modèle test.each de Jest (#8354 par @yogmel)​

Prise en charge de insertPragma et requirePragma dans les fichiers avec shebang (#8376 par @fisker)​

Correction de l'indentation dans le formatage par plage (#8410 par @thorn0)​

Amélioration de la détection des éléments sources pour le formatage par plage (#8419 par @thorn0)​

Prise en charge des champs privés dans in (#8431 par @sosukesuzuki)​

Prise en charge des attributs de module ES et des modules JSON (#8436 par @fisker)​

Prise en charge de la syntaxe des enregistrements et des tuples (#8453 par @fisker)​

Encapsulation des éléments JSX à gauche de "<" avec des parenthèses (#8461 par @sosukesuzuki)​

Correction de l'indentation pour les expressions binaires avec commentaires de fin (#8476 par @sosukesuzuki)​

Correction des commentaires instables dans les expressions binaires (#8491 par @thorn0)​

Ajout/retrait des guillemets sur les clés numériques (#8508 par @lydell)​

Privilégier le commentaire initial lorsqu'un commentaire suit le "?" dans les types conditionnels (#8557 par @sosukesuzuki)​

Casser les expressions ternaires contenant un commentaire multiligne (#8592 par @sosukesuzuki)​

Correction des paires de commentaires instables entre méthodes de classe (#8731 par @fisker)​

Correction des commentaires prettier-ignore dupliqués (#8742 par @fisker)​

Prise en charge de la proposition Decimal (#8901 par @fisker)​

Ajout de parenthèses lors du rendu de JSX avec yield (#9011 par @fisker)​

TypeScript​

Correction du parser babel-ts pour générer une erreur syntaxique appropriée sur (a:b) (#8046 par @thorn0)​

Parenthéser les littéraux de chaîne pour éviter leur interprétation comme directives (#8422 par @thorn0)​

Prise en charge du changement cassant de TypeScript 3.9 pour le chaînage optionnel et les assertions de non-nullité (#8450 par @sosukesuzuki)​

Flow​

Correction du paramètre de type de fonction contenant un paramètre nullable (#8365 par @fisker)​

Correction de l'export par défaut des Flow Enum (#8768 par @gkz)​

CSS​

Ne pas casser le code avec un commentaire à la fin d'une règle @ (#7009 par @evilebottnawi)​

Correction de la manipulation du contenu non cité dans url() (#7592 par @mattiacci)​

Espace incorrect ajouté après un deux-points échappé dans un nom de ligne de grille CSS (#8535 par @boyenn)​

Ajout de la prise en charge de @supports selector(<custom-selector>) (#8545 par @boyenn)​

Amélioration de la gestion des arguments arbitraires par Prettier (#8567, #8566 par @boyenn)​

SCSS​

Correction de l'indentation supplémentaire des lignes suivant des commentaires en SCSS (#7844 par @boyenn)​

Correction des commentaires en ligne entre propriété et valeur (#8366 par @fisker)​

Les commentaires en fin de fichier étaient perdus si le point-virgule final était omis (#8675 par @fisker)​

Less​

Correctif pour la pseudo-classe :extend (#8178 par @fisker)​

Correction des commentaires en ligne contenant /* (#8360 par @fisker)​

HTML​

Omission du point-virgule final dans les attributs style sur une seule ligne (#8013 par @bschlenk)​

Préservation des caractères d'espacement non-ASCII dans le HTML (#8137 par @fisker)​

Prise en charge des commentaires de type HTML dans les blocs script (#8173 par @fisker, #8394 par @fisker)​

Traitement de <select> comme inline-block et <optgroup>/<option> comme block (#8275 par @thorn0, #8620 par @fisker)​

Correction des URL avec virgules dans srcset (#8359 par @fisker)​

Prise en charge de <script type="text/html> (#8371 par @sosukesuzuki)​

Support du front matter avec langage dynamique (#8381 par @fisker)​

Non-préservation des sauts de ligne autour du contenu textuel uniquement (#8614 par @fisker)​

Reconnaissance des balises HTML connues (#8621 par @fisker)​

Correction du formatage des éléments avec un élément vide comme dernier enfant (#8643 par @ikatyang)​

Vue​

Amélioration du formatage des blocs racines des SFC Vue (#8023 par @sosukesuzuki, #8465 par @fisker)​

Amélioration de l'analyse des blocs personnalisés (#8153 par @sosukesuzuki)​

Correction du formatage cassé avec les balises HTML en majuscules (#8280 par @fisker)​

Correction du formatage inélégant pour les template sur une ligne dans les SFC Vue (#8325 par @sosukesuzuki)​

Prise en charge des templates DOM Vue (#8326 par @sosukesuzuki)​

Amélioration du formatage des balises HTML en majuscules dans les templates DOM (#8337 par @sosukesuzuki)​

Correction du formatage des interpolations entre parenthèses (#8747 par @fisker)​

Correction du formatage des valeurs raccourcies des slots nommés (#8839 par @wenfangdu)​

Angular​

Correction du chaînage optionnel avec les propriétés calculées et gestion de this (#8253 par @thorn0, #7942 par @fisker, corrections dans angular-estree-parser par @ikatyang)​

Préservation des parenthèses autour des pipes dans les littéraux d'objet pour la compatibilité avec AngularJS 1.x (#8254 par @thorn0)​

Handlebars (alpha)​

Respect de l'option singleQuote autour des valeurs d'attribut plus complexes qu'un simple texte (#8375 par @dcyriller)​

Correction du formatage des composants classiques à l'intérieur d'un élément (#8593 par @mikoscz)​

Principales fonctionnalités

API

Ajout de l'option --embedded-language-formatting={auto,off} (#7875 par @bakkot, #8825 par @fisker)

TypeScript

Prise en charge de TypeScript 4.0

Éléments de tuple étiquetés (#8885 par @fisker, #8982 par @sosukesuzuki)

Opérateurs d'assignation à court-circuit (#8982 par @sosukesuzuki)

Annotations de type sur les clauses catch (#8805 par @fisker)

Autres changements

JavaScript

Prise en charge des propositions d'opérateur pipeline F# et Smart (#6319 par @sosukesuzuki, @thorn0, #7979 par @sosukesuzuki)

Correction des commentaires de fin de ligne s'ils sont suivis d'espaces blancs (#8069 par @shisama)

Correction de l'analyse incohérente des expressions injectées dans les littéraux de modèle styled-components (#8097 par @thecodrr)

Correction des virgules finales dans les objets lorsque la dernière propriété est ignorée (#8111 par @fisker)

Conservation des clés d'objet avec séquence d'échappement telles quelles (#8160 par @fisker)

Correction de l'espace supplémentaire après le signe moins dans le CSS-in-JS (#8255 par @thorn0)

Correction des commentaires dans la partie `extends` des déclarations/expressions de classe (#8312 par @thorn0)

Ne pas encapsuler les tableaux dans les chaînes de modèle `test.each` de Jest (#8354 par @yogmel)

Prise en charge de `insertPragma` et `requirePragma` dans les fichiers avec shebang (#8376 par @fisker)

Correction de l'indentation dans le formatage par plage (#8410 par @thorn0)

Amélioration de la détection des éléments sources pour le formatage par plage (#8419 par @thorn0)

Prise en charge des champs privés dans `in` (#8431 par @sosukesuzuki)

Prise en charge des attributs de module ES et des modules JSON (#8436 par @fisker)

Prise en charge de la syntaxe des enregistrements et des tuples (#8453 par @fisker)

Encapsulation des éléments JSX à gauche de "<" avec des parenthèses (#8461 par @sosukesuzuki)

Correction de l'indentation pour les expressions binaires avec commentaires de fin (#8476 par @sosukesuzuki)

Correction des commentaires instables dans les expressions binaires (#8491 par @thorn0)

Ajout/retrait des guillemets sur les clés numériques (#8508 par @lydell)

Privilégier le commentaire initial lorsqu'un commentaire suit le "?" dans les types conditionnels (#8557 par @sosukesuzuki)

Casser les expressions ternaires contenant un commentaire multiligne (#8592 par @sosukesuzuki)

Correction des paires de commentaires instables entre méthodes de classe (#8731 par @fisker)

Correction des commentaires `prettier-ignore` dupliqués (#8742 par @fisker)

Prise en charge de la proposition Decimal (#8901 par @fisker)

Ajout de parenthèses lors du rendu de JSX avec yield (#9011 par @fisker)

TypeScript

Correction du parser `babel-ts` pour générer une erreur syntaxique appropriée sur `(a:b)` (#8046 par @thorn0)

Parenthéser les littéraux de chaîne pour éviter leur interprétation comme directives (#8422 par @thorn0)

Prise en charge du changement cassant de TypeScript 3.9 pour le chaînage optionnel et les assertions de non-nullité (#8450 par @sosukesuzuki)

Flow

Correction du paramètre de type de fonction contenant un paramètre nullable (#8365 par @fisker)

Correction de l'export par défaut des Flow Enum (#8768 par @gkz)

CSS

Ne pas casser le code avec un commentaire à la fin d'une règle @ (#7009 par @evilebottnawi)

Correction de la manipulation du contenu non cité dans url() (#7592 par @mattiacci)

Espace incorrect ajouté après un deux-points échappé dans un nom de ligne de grille CSS (#8535 par @boyenn)

Ajout de la prise en charge de @supports selector(<custom-selector>) (#8545 par @boyenn)

Amélioration de la gestion des arguments arbitraires par Prettier (#8567, #8566 par @boyenn)

SCSS

Correction de l'indentation supplémentaire des lignes suivant des commentaires en SCSS (#7844 par @boyenn)

Correction des commentaires en ligne entre propriété et valeur (#8366 par @fisker)

Les commentaires en fin de fichier étaient perdus si le point-virgule final était omis (#8675 par @fisker)

Less

Correctif pour la pseudo-classe `:extend` (#8178 par @fisker)

Correction des commentaires en ligne contenant `/*` (#8360 par @fisker)

HTML

Omission du point-virgule final dans les attributs style sur une seule ligne (#8013 par @bschlenk)

Préservation des caractères d'espacement non-ASCII dans le HTML (#8137 par @fisker)

Prise en charge des commentaires de type HTML dans les blocs script (#8173 par @fisker, #8394 par @fisker)

Traitement de `<select>` comme inline-block et `<optgroup>`/`<option>` comme block (#8275 par @thorn0, #8620 par @fisker)

Correction des URL avec virgules dans srcset (#8359 par @fisker)

Prise en charge de `<script type="text/html>` (#8371 par @sosukesuzuki)

Support du front matter avec langage dynamique (#8381 par @fisker)

Non-préservation des sauts de ligne autour du contenu textuel uniquement (#8614 par @fisker)

Reconnaissance des balises HTML connues (#8621 par @fisker)

Correction du formatage des éléments avec un élément vide comme dernier enfant (#8643 par @ikatyang)

Vue

Amélioration du formatage des blocs racines des SFC Vue (#8023 par @sosukesuzuki, #8465 par @fisker)

Amélioration de l'analyse des blocs personnalisés (#8153 par @sosukesuzuki)

Correction du formatage cassé avec les balises HTML en majuscules (#8280 par @fisker)

Correction du formatage inélégant pour les `template` sur une ligne dans les SFC Vue (#8325 par @sosukesuzuki)

Prise en charge des templates DOM Vue (#8326 par @sosukesuzuki)

Amélioration du formatage des balises HTML en majuscules dans les templates DOM (#8337 par @sosukesuzuki)

Correction du formatage des interpolations entre parenthèses (#8747 par @fisker)

Correction du formatage des valeurs raccourcies des slots nommés (#8839 par @wenfangdu)

Angular

Correction du chaînage optionnel avec les propriétés calculées et gestion de `this` (#8253 par @thorn0, #7942 par @fisker, corrections dans `angular-estree-parser` par @ikatyang)

Préservation des parenthèses autour des pipes dans les littéraux d'objet pour la compatibilité avec AngularJS 1.x (#8254 par @thorn0)

Handlebars (alpha)

Respect de l'option singleQuote autour des valeurs d'attribut plus complexes qu'un simple texte (#8375 par @dcyriller)

Correction du formatage des composants classiques à l'intérieur d'un élément (#8593 par @mikoscz)