Aller au contenu principal

Prettier 3.6 : CLI expérimentale ultra-rapide et nouveaux plugins OXC et Hermes !

· 21 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 inclut plusieurs ajouts de fonctionnalités importantes que nous sommes ravis de partager avec vous.

Premièrement, nous livrons une nouvelle CLI expérimentale haute performance accessible via un flag (--experimental-cli). Cette CLI n'était auparavant disponible que dans prettier@next, mais vous pouvez désormais l'activer simplement en utilisant un flag. Nous vous encourageons à l'essayer et à partager vos retours ! Si l'implémentation interne vous intéresse, lisez Prettier's CLI: Performance Deep Dive by Fabio.

De plus, nous publions deux nouveaux plugins officiels : @prettier/plugin-oxc et @prettier/plugin-hermes. Ces plugins sont fournis séparément du cœur de Prettier.

Nous tenons à exprimer notre profonde gratitude à toutes les personnes qui ont rendu cette version exceptionnelle possible : @fabiospampinato, @43081j, et @pralkarz ainsi que les contributeurs de la nouvelle CLI, @boshen et @overlookmotel avec les autres contributeurs OXC, les équipes Flow et Hermes chez Meta. Merci à tous pour vos contributions extraordinaires !

Nous sommes impatients de voir comment ces nouvelles fonctionnalités amélioreront votre expérience de développement. Bon formattage !

Principales fonctionnalités

CLI

Support de la CLI expérimentale (#17151, #17396 par @fisker)

Vous avez peut-être déjà entendu parler ou utilisé notre nouvelle CLI aux performances améliorées. À partir de Prettier 3.6, vous pouvez l'utiliser sans installer la version instable v4.

# Run CLI with `--experimental-cli`
prettier . --check --experimental-cli

# Or use environment variable `PRETTIER_EXPERIMENTAL_CLI=1`
PRETTIER_EXPERIMENTAL_CLI=1 prettier . --check

JavaScript

Ajout du nouveau plugin officiel @prettier/plugin-oxc (#17472, #17483 par @fisker)

@prettier/plugin-oxc est basé sur OXC (un parseur JavaScript et TypeScript ultra-rapide en Rust).

Ce plugin inclut deux nouveaux parseurs oxc (syntaxe JavaScript) et oxc-ts (syntaxe TypeScript). Pour l'utiliser :

  1. Installez le plugin

    yarn add --dev prettier @prettier/plugin-oxc
  2. Ajoutez ceci à votre fichier .prettierrc

    plugins:
    - "@prettier/plugin-oxc"

Pour des raisons de taille de package, ce plugin n'est pas inclus dans le package prettier et doit être installé séparément.

Pour plus d'informations, consultez la page d'accueil du package.

Un grand merci à l'équipe OXC (@boshen, @overlookmotel, et les autres contributeurs).

Flow

Ajout d'un nouveau plugin officiel @prettier/plugin-hermes (#17520 par @fisker)

@prettier/plugin-hermes est basé sur Hermes JS Engine.

Ce plugin introduit un nouveau parser hermes (syntaxe Flow). Pour l'utiliser :

  1. Installez le plugin

    yarn add --dev prettier @prettier/plugin-hermes
  2. Ajoutez la configuration suivante à votre fichier .prettierrc

    plugins:
    - "@prettier/plugin-hermes"

Pour des raisons de taille de package, ce plugin n'est pas inclus dans le package prettier et doit être installé séparément.

Nous prévoyons d'en faire le parser par défaut pour la syntaxe Flow dans la v4, et de retirer le parser babel-flow. Merci de l'essayer dès maintenant.

Pour plus d'informations, consultez la page d'accueil du package.

Un grand merci à l'équipe Hermes.

Autres changements

JavaScript

Ajout de parenthèses pour les SequenceExpression dans ReturnStatement et ExpressionStatement (#17085 par @TYKevin)

// Input
function a() {
return ( a, b)
}

(a(), b());

// Prettier 3.5
function a() {
return a, b;
}

a(), b();

// Prettier 3.6
function a() {
return (a, b);
}

(a(), b());

Ajout de parenthèses pour les AssignmentExpression dans les clés de propriétés de classe (#17145 par @fisker)

Auparavant, nous n'ajoutions des parenthèses que pour les AssignmentExpression dans les clés d'objet, mais pas dans les propriétés de classe. Merci à Biome d'avoir signalé cette incohérence.

// Input
a = {
[(x = "key")]: 1,
}

class A {
[(x = "property")] = 1;
[(x = "method")]() {}
}

// Prettier 3.5
a = {
[(x = "key")]: 1,
};

class A {
[x = "property"] = 1;
[(x = "method")]() {}
}

// Prettier 3.6
a = {
[(x = "key")]: 1,
};

class A {
[(x = "property")] = 1;
[(x = "method")]() {}
}

Ajout de parenthèses pour les nombres dans les expressions membres optionnelles (#17190 par @fisker)

Avant Prettier 3.6, il existait une incohérence dans le formatage des expressions membres lorsque l'objet était un nombre.

Avec le parser babel (et autres parsers basés sur Babel), le nombre était imprimé sans parenthèses. Avec le parser typescript (et autres parsers ESTree), il était entre parenthèses.

Techniquement, les parenthèses ne sont pas nécessaires. Mais si nous imprimons 1?.toString() et que l'utilisateur réalise ensuite que le ?. est superflu, il ne pourra pas simplement supprimer le point d'interrogation car 1.toString() génère une SyntaxError. Pour cette raison, nous ajoutons systématiquement des parenthèses.

// Input
(1)?.toString();
(1.5)?.toString();

// Prettier 3.5 (--parser=babel)
1?.toString();
1.5?.toString();

// Prettier 3.5 (--parser=typescript)
(1)?.toString();
(1.5)?.toString();

// Prettier 3.6
(1)?.toString();
(1.5)?.toString();

Suppression du support expérimental des Records & Tuples (#17363 par @fisker)

La proposition ES JavaScript Records & Tuples Proposal a été retirée.

Préservation des espaces entre mots CSS et expressions intégrées (#17398 par @sosukesuzuki)

// Input
const Heading = styled.h1`
font-size: var(--font-size-h${level});
`;

// Prettier 3.5
const Heading = styled.h1`
font-size: var(--font-size-h ${level});
`;

// Prettier 3.6
const Heading = styled.h1`
font-size: var(--font-size-h${level});
`;

Correction du format d'affectation incohérent (#17469 par @fisker)

// Input
didScheduleRenderPhaseUpdateDuringThisPassFoo = didScheduleRenderPhaseUpdate = true

// Prettier 3.5 (--parser=babel)
didScheduleRenderPhaseUpdateDuringThisPassFoo =
didScheduleRenderPhaseUpdate = true;

// Prettier 3.5 (--parser=typescript)
didScheduleRenderPhaseUpdateDuringThisPassFoo = didScheduleRenderPhaseUpdate =
true;

// Prettier 3.6
didScheduleRenderPhaseUpdateDuringThisPassFoo =
didScheduleRenderPhaseUpdate = true;

Correction du format de chaîne de membres incohérent (#17470 par @fisker)

// Input
s.get(u)?.trigger({ triggerKind: y.SignatureHelpTriggerKind.InvokeFooBarBaz123 });

// Prettier 3.5 (--parser=babel)
s.get(u)?.trigger({
triggerKind: y.SignatureHelpTriggerKind.InvokeFooBarBaz123,
});

// Prettier 3.5 (--parser=typescript)
s
.get(u)
?.trigger({ triggerKind: y.SignatureHelpTriggerKind.InvokeFooBarBaz123 });

// Prettier 3.6
s.get(u)?.trigger({
triggerKind: y.SignatureHelpTriggerKind.InvokeFooBarBaz123,
});

Correction du chaînage optionnel comme clé calculée (#17486 par @fisker)

// Input
const a = { [y?.z]() {} };
class A { [y?.z]() {} };

// Prettier 3.5
const a = { [y?.z]?() {} };
class A {
[y?.z]?() {}
}

// Prettier 3.6
const a = { [y?.z]() {} };
class A {
[y?.z]() {}
}

Prise en charge des commentaires de conversion de type pour les parseurs acorn et meriyah (#17491, #17566 par @ArnaudBarre, #17600 par #fisker)

Cette fonctionnalité n'était auparavant prise en charge que par le parseur Babel.

// Input
/** @type {MyType} */ (x).foo;

// Prettier 3.5 (--parser=acorn|meriyah)
/** @type {MyType} */ x.foo;

// Prettier 3.6
/** @type {MyType} */ (x).foo;

Correction du format instable des commentaires dans les littéraux de modèle balisés (#17510 par @fisker)

// Input
foo
// Comment
`x`

// Prettier 3.5 (First format)
foo// Comment
`x`;

// Prettier 3.5 (Second format)
foo // Comment
`x`;

// Prettier 3.6
foo // Comment
`x`;

Amélioration de la cohérence pour JSX dans les appels de méthode optionnels (#17616 par @seiyab)

// Input
<SuspendyTree>
<div style={{ height: 200, overflow: "scroll" }}>
{Array(20)
.fill()
?.map((_, i) => (
<h2 key={i}>{i + 1}</h2>
))}
</div>
</SuspendyTree>;

// Prettier 3.5 (ESTree based parsers like espree and typescript)
<SuspendyTree>
<div style={{ height: 200, overflow: "scroll" }}>
{Array(20)
.fill()
?.map((_, i) => <h2 key={i}>{i + 1}</h2>)}
</div>
</SuspendyTree>;

// Prettier 3.5 (babel and babel-ts parser)
<SuspendyTree>
<div style={{ height: 200, overflow: "scroll" }}>
{Array(20)
.fill()
?.map((_, i) => (
<h2 key={i}>{i + 1}</h2>
))}
</div>
</SuspendyTree>;

// Prettier 3.6 (parsers of both types)
<SuspendyTree>
<div style={{ height: 200, overflow: "scroll" }}>
{Array(20)
.fill()
?.map((_, i) => (
<h2 key={i}>{i + 1}</h2>
))}
</div>
</SuspendyTree>;

TypeScript

Prise en charge de l'attribut import type dans TSImportType (#16881 par @fisker)

// Input
type A = import("foo", {with: {type: "json"}})

// Prettier 3.5
type A = import("foo")

// Prettier 3.6
type A = import("foo", { with: { type: "json" } });

Correction des commentaires dans les expressions logiques et types d'intersection (#17193 par @fisker)

// Input
export type ErrorLike =
SerializedProps<Error> &
// cause is a new addition to Error that is not yet available in all runtimes. We have added
// it to try and pinpoint additional reasoning for failures such as Node's fetch.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
{ cause?: unknown };

// Prettier 3.5
export type ErrorLike =
SerializedProps<Error> & // cause is a new addition to Error that is not yet available in all runtimes. We have added
// it to try and pinpoint additional reasoning for failures such as Node's fetch.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
{ cause?: unknown };

// Prettier 3.5 (second format)
export type ErrorLike =
SerializedProps<Error> & // it to try and pinpoint additional reasoning for failures such as Node's fetch. // cause is a new addition to Error that is not yet available in all runtimes. We have added
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
{ cause?: unknown };

// Prettier 3.6
export type ErrorLike = SerializedProps<Error> &
// cause is a new addition to Error that is not yet available in all runtimes. We have added
// it to try and pinpoint additional reasoning for failures such as Node's fetch.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
{ cause?: unknown };

Amélioration de la détection des nouvelles lignes dans les types mappés (#17498 par @fisker)

// Input
type A = { readonly
[A in B]: T}

// Prettier 3.5
type A = {
readonly [A in B]: T;
};

// Prettier 3.6
type A = { readonly [A in B]: T };

Suppression du point-virgule superflu après une signature d'index ignorée via prettier-ignore (#17538 par @sosukesuzuki)

// Input
type foo = {
// prettier-ignore
[key: string]: bar;
};

// Prettier 3.5
type foo = {
// prettier-ignore
[key: string]: bar;;
};

// Prettier 3.6
type foo = {
// prettier-ignore
[key: string]: bar;
};

Flow

Correction des parenthèses manquantes dans ConditionalTypeAnnotation (#17196 par @fisker)

// Input
type T<U> = 'a' | ('b' extends U ? 'c' : empty);
type T<U> = 'a' & ('b' extends U ? 'c' : empty);

// Prettier 3.5
type T<U> = "a" | "b" extends U ? "c" : empty;
type T<U> = "a" & "b" extends U ? "c" : empty;

// Prettier 3.6
type T<U> = "a" | ("b" extends U ? "c" : empty);
type T<U> = "a" & ("b" extends U ? "c" : empty);

JSON

Autorisation du formatage des fichiers JSONC contenant uniquement des commentaires (#17269 par @fisker)

// Input
// Comment

// Prettier 3.5
SyntaxError: Unexpected token (1:11)
> 1 | // Comment
| ^

// Prettier 3.6
// Comment

Interdiction des expressions entre parenthèses (#17598 par @fisker)

// Input
[1, (2)]

// Prettier 3.5
[1, 2]

// Prettier 3.6
SyntaxError: 'ParenthesizedExpression' is not allowed in JSON. (1:5)
> 1 | [1, (2)]
| ^^^

CSS

Prise en charge de la directive @utility pour Tailwind (#17362 par @sosukesuzuki)

Cette modification ajoute la prise en charge de la directive @utility pour Tailwind CSS V4.

/* Input */
@utility tab-* {
tab-size: --value(--tab-size-*);
}

/* Prettier 3.5 */
@utility tab-* {
tab-size: --value(--tab-size- *);
}

/* Prettier 3.6 */
@utility tab-* {
tab-size: --value(--tab-size-*);
}

Suppression de l'indentation supplémentaire pour l'appel pseudo :has (#17541 par @sosukesuzuki)

/* Input */
li:has(
path[d="M544,272H480V150.627L523.314,107.314A16,16,0,0,0,500.686,84.687L457.373,128H415a127.00381,127.00381,0,1,0-254,0H118.627L75.314,84.687A16,16,0,1,0,52.686,107.314L96,150.627V272H32a16,16,0,0,0,0,32H96v24a174.98856,174.98856,0,0,0,30.484,98.889L68.687,484.686a15.99972,15.99972,0,1,0,22.627,22.627l55.616-55.616A175.45165,175.45165,0,0,0,272,504h32a175.45165,175.45165,0,0,0,125.07-52.303l55.616,55.616a15.99972,15.99972,0,0,0,22.627-22.627l-57.797-57.797A174.98856,174.98856,0,0,0,480,328V304h64a16,16,0,0,0,0-32ZM288,32.01263A95.99568,95.99568,0,0,1,383,128H193A95.99568,95.99568,0,0,1,288,32.01263ZM448,328c0,79.401-64.598,144-144,144V236a12.00052,12.00052,0,0,0-12-12h-8a12.00052,12.00052,0,0,0-12,12V472c-79.402,0-144-64.599-144-144V160H448Z"]
) {
display: none;
}

/* Prettier 3.5 */
li:has(
path[d="M544,272H480V150.627L523.314,107.314A16,16,0,0,0,500.686,84.687L457.373,128H415a127.00381,127.00381,0,1,0-254,0H118.627L75.314,84.687A16,16,0,1,0,52.686,107.314L96,150.627V272H32a16,16,0,0,0,0,32H96v24a174.98856,174.98856,0,0,0,30.484,98.889L68.687,484.686a15.99972,15.99972,0,1,0,22.627,22.627l55.616-55.616A175.45165,175.45165,0,0,0,272,504h32a175.45165,175.45165,0,0,0,125.07-52.303l55.616,55.616a15.99972,15.99972,0,0,0,22.627-22.627l-57.797-57.797A174.98856,174.98856,0,0,0,480,328V304h64a16,16,0,0,0,0-32ZM288,32.01263A95.99568,95.99568,0,0,1,383,128H193A95.99568,95.99568,0,0,1,288,32.01263ZM448,328c0,79.401-64.598,144-144,144V236a12.00052,12.00052,0,0,0-12-12h-8a12.00052,12.00052,0,0,0-12,12V472c-79.402,0-144-64.599-144-144V160H448Z"]
) {
display: none;
}

/* Prettier 3.6 */
li:has(
path[d="M544,272H480V150.627L523.314,107.314A16,16,0,0,0,500.686,84.687L457.373,128H415a127.00381,127.00381,0,1,0-254,0H118.627L75.314,84.687A16,16,0,1,0,52.686,107.314L96,150.627V272H32a16,16,0,0,0,0,32H96v24a174.98856,174.98856,0,0,0,30.484,98.889L68.687,484.686a15.99972,15.99972,0,1,0,22.627,22.627l55.616-55.616A175.45165,175.45165,0,0,0,272,504h32a175.45165,175.45165,0,0,0,125.07-52.303l55.616,55.616a15.99972,15.99972,0,0,0,22.627-22.627l-57.797-57.797A174.98856,174.98856,0,0,0,480,328V304h64a16,16,0,0,0,0-32ZM288,32.01263A95.99568,95.99568,0,0,1,383,128H193A95.99568,95.99568,0,0,1,288,32.01263ZM448,328c0,79.401-64.598,144-144,144V236a12.00052,12.00052,0,0,0-12-12h-8a12.00052,12.00052,0,0,0-12,12V472c-79.402,0-144-64.599-144-144V160H448Z"]
) {
display: none;
}

Less

Correction d'un argument de fonction incorrectement mis en minuscules (#17502 par @fisker)

// Input
.what {
.make-modifier(1A, "1a.png");
.make-modifier(AA, "1a.png");
}

// Prettier 3.5
.what {
.make-modifier(1a, "1a.png");
.make-modifier(AA, "1a.png");
}

// Prettier 3.6
.what {
.make-modifier(1A, "1a.png");
.make-modifier(AA, "1a.png");
}

HTML

Correction du formatage lorsque le nom de balise est une propriété de prototype d'objet (#17501 par @fisker)

<!-- Input -->
<constructor>
text
</constructor>

<!-- Prettier 3.5 -->
TypeError: Vn(...).startsWith is not a function

<!-- Prettier 3.6 -->
<constructor> text </constructor>

Angular

Prise en charge de TemplateLiteral introduit dans Angular 19.2 (#17238 par @fisker)

Angular 19.2 a ajouté la prise en charge de TemplateLiteral.

<!-- Input -->
<div>{{ `Hello, ${
getName('world')}` }}</div>

<!-- Prettier 3.5 -->
<div>
{{ `Hello, ${
getName('world')}` }}
</div>

<!-- Prettier 3.6 -->
<div>{{ `Hello, ${getName("world")}` }}</div>

Suppression du double-point supplémentaire après track dans le contrôle de flux @for d'Angular (#17280 par @claudio-herger)

// Input
@for (item of items; let i = $index; let count = $count; track block) {}

// Prettier 3.5
@for (item of items; let i = $index; let count = $count; track: block) {}

// Prettier 3.6
@for (item of items; let i = $index; let count = $count; track block) {}

Prise en charge d'Angular 20 (#17534 par @fisker)

// Input
{{
( (a in (b)))
}}
{{
( (tag ` a ${ b } \u0063 `))
}}
{{
( (` a ${ b } \u0063 `))
}}
{{ void(1 + 2) }}

// Prettier 3.5
The new syntax is not correctly recognized.

// Prettier 3.6
{{ a in b }}
{{ tag` a ${b} \u0063 ` }}
{{ ` a ${b} \u0063 ` }}
{{ void (1 + 2) }}

MJML

Activation du formatage CSS dans la balise <mj-style> (#17338 par @iryusa)

<!-- Input -->
<mj-style>
.hello {
color: blue;
border: 1px solid blue;
font-size:12px;
} p { font-size: 14px; }
</mj-style>

<!-- Prettier 3.5 -->
<mj-style>
.hello { color: blue; border: 1px solid blue; font-size:12px; } p { font-size:
14px; }
</mj-style>

<!-- Prettier 3.6 -->
<mj-style>
.hello {
color: blue;
border: 1px solid blue;
font-size: 12px;
}
p {
font-size: 14px;
}
</mj-style>

Analyse correcte de <mj-style> et <mj-raw> (#17400 par @fisker)

<!-- Input -->
<mj-style>
a::before {
content: "</p>";
}
</mj-style>

<!-- Prettier 3.5 -->
SyntaxError: Unexpected closing tag "p".

<!-- Prettier 3.6 -->
Correctly parsed as CSS.

Markdown

Correction de la syntaxe Markdown adjacente dans les blockquotes (#16596 par @fiji-flo)

<!-- Input -->
> `x`
> `y`

> _x_
> _y_

> [foo](http://foo)
> [bar](http://bar)

> `this` behaves
> `correctly`

<!-- Prettier 3.5 -->
> `x` > `y`

> _x_ > _y_

> [foo](http://foo) > [bar](http://bar)

> `this` behaves `correctly`

<!-- Prettier 3.6 -->
> `x` `y`

> _x_ _y_

> [foo](http://foo) [bar](http://bar)

> `this` behaves `correctly`

Correction de l'insertion inattendue de sauts de ligne dans les listes Markdown (#16637 par @byplayer)

<!-- Input -->
- Level 1
- Level 1-1

- Level 2

<!-- Prettier 3.5 -->
- Level 1

- Level 1-1

- Level 2


<!-- Prettier 3.6 -->
- Level 1
- Level 1-1

- Level 2

Correction de l'emphase forte (#17143 par @fiji-flo)

La plupart des implémentations Markdown ne prennent pas en charge 1**_2_**3, nous préférons donc 1***2***3.

<!-- Input -->
1***2***3
1**_2_**3

<!-- Prettier 3.5 -->
1**_2_**3
1**_2_**3

<!-- Prettier 3.6 -->
1***2***3
1***2***3

YAML

Ne pas ajouter de saut de ligne avant une carte ou une séquence vide (#16074 par @BapRx)

# Input
---
myDict: {}
# comment
myList: []
# comment

# Prettier 3.5
---
myDict:
{}
# comment
myList:
[]
# comment

# Prettier 3.6
---
myDict: {}
# comment
myList: []
# comment

API

Accepter URL dans l'option plugins (#17166 par @fisker)

L'option plugins accepte désormais les URL avec le protocole file: ou une chaîne d'URL commençant par file: dans toutes les API publiques.

// `URL`
await prettier.check("foo", {
parser: "my-cool-parser",
plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});
await prettier.format("foo", {
parser: "my-cool-parser",
plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});
await prettier.formatWithCursor("foo", {
parser: "my-cool-parser",
cursorOffset: 2,
plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});
await prettier.getFileInfo("/path/to/file", {
plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});
await prettier.getSupportInfo({
plugins: [new URL("./path/to/plugin.js", import.meta.url)],
});

// URL string
await prettier.check("foo", {
parser: "my-cool-parser",
plugins: ["file:///path/to/plugin.js"],
});
await prettier.format("foo", {
parser: "my-cool-parser",
plugins: ["file:///path/to/plugin.js"],
});
await prettier.formatWithCursor("foo", {
parser: "my-cool-parser",
cursorOffset: 2,
plugins: ["file:///path/to/plugin.js"],
});
await prettier.getFileInfo("/path/to/file", {
plugins: ["file:///path/to/plugin.js"],
});
await prettier.getSupportInfo({
plugins: ["file:///path/to/plugin.js"],
});

Accepter URL comme fichier de configuration personnalisé dans resolveConfig (#17167 par @fisker)

prettier.resolveConfig() accepte désormais une URL avec le protocole file: ou une chaîne d'URL commençant par file: comme emplacement de fichier de configuration personnalisé.

// `URL`
await prettier.resolveConfig("path/to/file", {
config: new URL("/path/to/prettier-config-file", import.meta.url),
});

// URL string
await prettier.resolveConfig("path/to/file", {
config: "file:///path/to/prettier-config-file",
});

Cesser d'interpréter les fichiers *.frag comme fichiers JavaScript (#17178 par @fisker)

*.frag était interprété comme fichiers JavaScript, mais .frag est aussi utilisé en GLSL (OpenGL Shading Language). Cela provoquait des erreurs lorsque Prettier tentait de les formater comme fichiers JavaScript.

À partir de Prettier 3.6, les fichiers *.frag sauf *.start.frag, *.end.frag, start.frag et end.frag ne sont plus traités comme fichiers JavaScript.

Si vous avez des fichiers JavaScript avec l'extension .frag ne correspondant pas aux motifs ci-dessus, vous pouvez les configurer via overrides.

export default {
overrides: {
files: "**/*.frag",
options: {
parser: "babel",
},
},
};

Ajouter la prise en charge de la fonction isSupported pour l'API languages (#17331 par @JounQin, #17490 par @fisker)

Auparavant, l'API languages pour les plugins personnalisés ne supportait que l'inférence du parseur basée sur le nom de base ou l'extension du fichier.

Prettier 3.6 a ajouté la fonction isSupported: (options: { filepath: string }) => boolean permettant aux plugins de vérifier si un fichier est pris en charge selon son chemin complet (ex : fichiers dans un répertoire spécifique).

remarque

Prettier ne peut garantir que filepath existe sur le disque.
Lorsqu'elle est utilisée via des API (ex : prettier.format()), Prettier ne peut pas non plus garantir qu'il s'agit d'un chemin valide.

Si aucune fonction isSupported n'est fournie, le comportement reste identique à avant.

export const languages = [
{
name: "foo",
parsers: ["foo"],
isSupported: ({ filepath }) => filepath.includes(".foo"),
},
];

Ajouter le parseur mjml (#17339 par @fisker)

Nous prenions déjà en charge MJML dans les versions précédentes avec le parseur html. Pour distinguer spécifiquement MJML, un nouveau parseur mjml a été ajouté.

Ignorer les fichiers avec --check-ignore-pragma (#17344 par @wnayes)

Les fichiers individuels peuvent désormais désactiver le formatage via des commentaires "pragma" @noformat ou @noprettier en haut du fichier.

Pour activer cette fonctionnalité, utilisez la nouvelle option --check-ignore-pragma (checkIgnorePragma via la configuration ou l'API).

Les plugins de langage peuvent implémenter la prise en charge de cette fonctionnalité. La plupart des parseurs intégrés, dont JavaScript (TypeScript), CSS, HTML, JSON, Markdown (MDX), YAML et GraphQL, ont été mis à jour pour la supporter.

/**
* @noformat
*/

export default matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
);

Correction du chargement des plugins dans prettier.getFileInfo() (#17548 par @fisker)

Dans les versions précédentes, prettier.getFileInfo() ne lisait que la configuration parser depuis .prettierrc, sans charger les plugins pour déduire le parser à partir des languages des plugins. Prettier 3.6 corrige ce comportement.

// prettier-plugin-foo
export const languages = [
{
parsers: ["foo"],
extensions: [".foo"],
},
];
# .prettierrc
plugins:
- prettier-plugin-foo
prettier --file-info file.foo

# Prettier 3.5
{ "ignored": false, "inferredParser": null }

# Prettier 3.6
{ "ignored": false, "inferredParser": "foo" }

Autorisation des plugins à surcharger les parsers intégrés lors de l'inférence du parser (#17549 par @fisker)

Précédemment, lors de l'inférence du parser pour un fichier, les plugins intégrés étaient vérifiés en premier, empêchant ainsi les plugins externes de surcharger les parsers pour des fichiers comme .js.

// prettier-plugin-foo
export const languages = [
{
parsers: ["foo"],
extensions: [".js"],
},
];
// prettier.config.js
import * as prettierPluginFoo from "prettier-plugin-foo";

export default {
plugins: [prettierPluginFoo],
};
prettier --file-info file.js

# Prettier 3.5
{ "ignored": false, "inferredParser": "babel" }

# Prettier 3.6
{ "ignored": false, "inferredParser": "foo" }

CLI

Interdiction d'utiliser simultanément --config et --no-config (#12221 par @Balastrong)

$ prettier --config=.prettierrc --no-config .
[error] Cannot use --no-config and --config together.

Ignorance de la date de modification des fichiers avec --cache-strategy=content (#17438 par @fisker)

Dans les versions précédentes, avec --cache-strategy=content, si la date de modification d'un fichier changeait, celui-ci était reformaté même si son contenu restait identique. Prettier 3.6 corrige ce comportement.

Correction du message de résultat pour les fichiers non formatables (#17505 par @fisker)

touch unknown
prettier --check unknown

# Prettier 3.5
Checking formatting...
unknown
[error] No parser could be inferred for file "</path/to/unknown>".
All matched files use Prettier code style!

# Prettier 3.6
Checking formatting...
unknown
[error] No parser could be inferred for file "</path/to/unknown>".
Error occurred when checking code style in the above file.

Correction du exitCode lors de l'échec d'inférence du parser (#17505 par @fisker)

touch unknown
prettier --check unknown > /dev/null;echo $?

# Prettier 3.5
[error] No parser could be inferred for file "</path/to/unknown>".
0

# Prettier 3.6
[error] No parser could be inferred for file "</path/to/unknown>".
2

Divers

Correction du formatage embarqué avec cursorOffset (#17254 par @fisker)

<!-- Input (--cursor-offset=1) -->
# Angular note

```typescript
import {Component} from '@angular/core';

@Component({
selector: 'app-root',
standalone: true,
imports: [],
template: `
<h1>

{{ title }}</h1>
`,
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'default';
}
```

<!-- Prettier 3.5 -->
Error: There are too many 'cursor' in doc.

<!-- Prettier 3.6 -->
# Angular note

```typescript
import { Component } from "@angular/core";

@Component({
selector: "app-root",
standalone: true,
imports: [],
template: `
<h1>
{{ title }}
</h1>
`,
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = "default";
}
```