Prettier 3.6: Experimentell snabb CLI och nya OXC- och Hermes-plugin!

23 juni 2025 · 20 min att läsa

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Den här utgåvan innehåller flera viktiga funktionstillägg som vi är glada att dela med oss av.

Först släpper vi en ny experimentell CLI med hög prestanda bakom en funktionsflagga (--experimental-cli). Denna CLI fanns tidigare endast i prettier@next, men nu kan du aktivera den enkelt genom att använda en flagga. Vi uppmuntrar dig att prova den och dela din feedback! Om du är intresserad av den interna implementeringen, läs Prettiers CLI: Prestandadjuptdykning av Fabio.

Dessutom släpper vi två nya officiella plugin: @prettier/plugin-oxc och @prettier/plugin-hermes. Dessa plugin tillhandahålls separat från Prettiers kärna.

Vi vill uttrycka vår varma tacksamhet till alla som gjort denna fantastiska utgåva möjlig: @fabiospampinato, @43081j, och @pralkarz tillsammans med de nya CLI-bidragsgivarna, @boshen och @overlookmotel tillsammans med andra OXC-bidragsgivare, Flow- och Hermes-teamet på Meta. Tack till er alla för era fantastiska bidrag!

Vi ser fram emot att se hur dessa nya funktioner förbättrar din utvecklarupplevelse. Lycklig formatering!

Höjdpunkter

CLI

Stöd för experimentell CLI (#17151, #17396 av @fisker)

Du kanske redan har hört talas om eller använt vår nya CLI med förbättrad prestanda. Från och med Prettier 3.6 kan du nu använda den utan att installera den instabila v4-versionen.

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

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

JavaScript

Tillagd en ny officiell plugin `@prettier/plugin-oxc` (#17472, #17483 av @fisker)

@prettier/plugin-oxc bygger på OXC(en snabb JavaScript- och TypeScript-tolkare skriven i Rust).

Denna plugin innehåller två nya tolkar oxc (JavaScript-syntax) och oxc-ts (TypeScript-syntax). Så här använder du pluginen:

Installera pluginen

yarn add --dev prettier @prettier/plugin-oxc

Lägg till följande i din .prettierrc-fil
```
plugins:
  - "@prettier/plugin-oxc"
```

På grund av begränsningar i paketstorlek ingår den här pluginen inte i prettier-paketet utan måste installeras separat.

För mer information, se paketets hemsida.

Stort tack till OXC-teamet (@boshen, @overlookmotel, och andra bidragsgivare).

Flow

Lagt till en ny officiell plugin `@prettier/plugin-hermes` (#17520 av @fisker)

@prettier/plugin-hermes bygger på Hermes JS Engine.

Den här pluginen innehåller en ny parser hermes (Flow-syntax). Så här använder du pluginen:

Installera pluginen

yarn add --dev prettier @prettier/plugin-hermes

Lägg till följande i din .prettierrc-fil
```
plugins:
  - "@prettier/plugin-hermes"
```

På grund av begränsningar i paketstorlek ingår den här pluginen inte i prettier-paketet utan måste installeras separat.

Vi planerar att göra denna till standardparsern för Flow-syntax i v4. Vi kommer också att ta bort babel-flow-parsern i v4 – prova den gärna!

För mer information, se paketets hemsida.

Stort tack till Hermes-teamet.

Andra ändringar

JavaScript

Lägg till parenteser runt `SequenceExpression` i `ReturnStatement` och `ExpressionStatement` (#17085 av @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());

Lägg till parenteser runt `AssignmentExpression` i klassnycklar (#17145 av @fisker)

Tidigare lade vi bara till parenteser runt AssignmentExpression i objektnycklar, men inte i klassnycklar. Tack till Biome för att de uppmärksammade denna inkonsekvens.

// 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")]() {}
}

Lägg till parenteser runt nummer i valfria medlemsuttryck (#17190 av @fisker)

Det fanns en inkonsekvens vid formatering av medlemsuttryck där objektet är ett nummer före Prettier 3.6.

När babel-parsern användes (och andra Babel-baserade parsrar) skrev vi ut numret utan parenteser, medan vi med typescript-parsern (och andra ESTree-baserade parsrar) skrev ut det med parenteser.

Tekniskt sett behövs inte parenteser, men om vi skriver ut det som 1?.toString() och användare senare inser att det är onödigt att använda ?., kan de inte bara ta bort frågetecknet eftersom 1.toString() skulle ge ett SyntaxError. Av denna anledning har vi beslutat att alltid sätta parenteser runt det.

// 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();

Borttaget stöd för experimentella `Records & Tuples` (#17363 av @fisker)

ES-förslaget JavaScript Records & Tuples Proposal har dragits tillbaka.

Friskrivning om icke-standard syntax

Bevara mellanrum mellan CSS-ord och inbäddade uttryck (#17398 av @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});
`;

Rättar inkonsekvent tilldelningsformat (#17469 av @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;

Rättar inkonsekvent format för medlemskedjor (#17470 av @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,
});

Rättar valfri kedjning (optional chaining) som beräknad nyckel (#17486 av @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]() {}
}

Stöd för typomvandlingskommentarer i `acorn`- och `meriyah`-parsrar (#17491, #17566 av @ArnaudBarre, #17600 av #fisker)

Detta stöddes tidigare endast av Babel-parsern.

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

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

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

Rättar instabilt kommentarsformat i taggade malliteraler (#17510 av @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`;

Förbättrar konsekvens för JSX i valfria metodanrop (#17616 av @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

Stöd för import type-attribut i `TSImportType` (#16881 av @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" } });

Rättar kommentarer i logiska uttryck och snittyper (#17193 av @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 };

Förbättrar detektering av nya rader i mappade typer (#17498 av @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 };

Lägger inte till extra semikolon efter `prettier-ignore`-taggade indexsignaturer (#17538 av @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

Rättar saknade parenteser i `ConditionalTypeAnnotation` (#17196 av @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

Tillåter formatering av JSONC-filer som endast innehåller kommentarer (#17269 av @fisker)

// Input
// Comment

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

// Prettier 3.6
// Comment

Förbjuder parenteserade uttryck (#17598 av @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

Stöd för `@utility`-direktivet i Tailwind (#17362 av @sosukesuzuki)

Denna ändring lägger till stöd för @utility-direktivet i 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-*);
}

Ta bort extra indrag för `:has`-pseudoanrop (#17541 av @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

Åtgärda funktionsargument som felaktigt gjorts med gemener (#17502 av @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

Åtgärda formatering när taggnamn är en egenskap i objektprototypen (#17501 av @fisker)

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

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

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

Angular

Stöd för `TemplateLiteral` introducerat i Angular 19.2 (#17238 av @fisker)

Angular 19.2 lade till stöd för TemplateLiteral.

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

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

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

Ta bort extra kolon efter `track` i angulars `@for`-kontrollflöde (#17280 av @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) {}

Stöd för Angular 20 (#17534 av @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

Aktivera CSS-formatering inom `<mj-style>`-tagg (#17338 av @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>

Tolka `<mj-style>` och `<mj-raw>` korrekt (#17400 av @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

Åtgärda intilliggande markdown-syntax i blockcitat (#16596 av @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`

Åtgärda att markdown infogar oväntad nyrad i listor (#16637 av @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

Åtgärda stark betoning (#17143 av @fiji-flo)

De flesta markdown-implementationer stöder inte 1**_2_**3 så föredra 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

Lägg inte till radbrytning före tom karta eller sekvens (#16074 av @BapRx)

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

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

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

API

Acceptera `URL` i alternativet `plugins` (#17166 av @fisker)

Alternativet plugins accepterar nu URL med file:-protokoll eller en url-sträng som börjar med file: i alla publika API:er.

// `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"],
});

Acceptera `URL` som anpassad konfigurationsfil i `resolveConfig` (#17167 av @fisker)

prettier.resolveConfig() accepterar nu en URL med file:-protokoll eller en URL-sträng som börjar med file: som anpassad konfigurationsfilsplats.

// `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",
});

Sluta tolka `*.frag`-filer som JavaScript-filer (#17178 av @fisker)

*.frag tolkades tidigare som JavaScript-filer, men .frag används också i GLSL (OpenGL Shading Language). Det orsakar fel när Prettier försöker formatera dem som JavaScript-filer.

Från och med Prettier 3.6 behandlas *.frag-filer utom *.start.frag, *.end.frag, start.frag och end.frag inte längre som JavaScript-filer.

Om du har JavaScript-filer med .frag som inte matchar ovanstående mönster kan du konfigurera detta med overrides.

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

Lägg till stöd för `isSupported`-funktion i `languages`-API:t (#17331 av @JounQin, #17490 av @fisker)

Tidigare stödde languages-API:t för anpassade plugins endast inferens av parser baserat på filens basnamn eller filändelse.

Prettier 3.6 har lagt till funktionen isSupported: (options: { filepath: string }) => boolean för att låta plugin kontrollera om en fil stöds baserat på hela sökvägen (t.ex. filer i en specifik katalog).

Prettier kan inte garantera att filepath finns på disken.
Vid användning från API:er (t.ex. prettier.format()) kan Prettier heller inte garantera att det är en giltig sökväg.

Om ingen isSupported anges fungerar det på samma sätt som tidigare.

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

Lägg till `mjml`-parser (#17339 av @fisker)

Vi stödde redan MJML i tidigare versioner med html-parsern. För att särskilja MJML-specifik formatering har en ny mjml-parser lagts till.

Ignorera filer med `--check-ignore-pragma` (#17344 av @wnayes)

Enskilda filer kan nu välja bort formatering via @noformat eller @noprettier "pragma"-kommentarer högst upp i filen.

För att aktivera denna funktion, använd det nya alternativet --check-ignore-pragma (checkIgnorePragma via konfiguration eller API).

Språkplugins kan implementera stöd för denna funktion. De flesta inbyggda parsers, inklusive JavaScript (TypeScript), CSS, HTML, JSON, Markdown (MDX), YAML och GraphQL, har uppdaterats för att stödja denna funktion.

/**
 * @noformat
 */

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

Åtgärda pluginladdning i `prettier.getFileInfo()` (#17548 av @fisker)

I tidigare versioner läste prettier.getFileInfo() endast parser-konfiguration från .prettierrc, men laddade inte plugins för att inferera parser från plugin languages. Prettier 3.6 har åtgärdat detta.

// 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" }

Tillåt att plugin kan åsidosätta inbyggda parsers vid parserslutsats (#17549 av @fisker)

Tidigare när parser slutsats drogs för en fil kontrollerades inbyggda plugins först, så plugins kunde inte åsidosätta parsers för filer som .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

Förbjud samtidig användning av `--config` och `--no-config` (#12221 av @Balastrong)

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

Ignorera filändringstid vid `--cache-strategy=content` (#17438 av @fisker)

I tidigare versioner, när --cache-strategy=content användes, om filens ändringstid ändrades formatterades den om även om filinnehållet var oförändrat. Prettier 3.6 har åtgärdat detta.

Åtgärda resultatmeddelande för filer som inte kan formateras (#17505 av @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.

Åtgärda exitCode när parser inte kan sluta sig till (#17505 av @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

Diverse

Åtgärda inbäddad formatering med `cursorOffset` (#17254 av @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";
}
```

Höjdpunkter​

CLI​

Stöd för experimentell CLI (#17151, #17396 av @fisker)​

JavaScript​

Tillagd en ny officiell plugin @prettier/plugin-oxc (#17472, #17483 av @fisker)​

Flow​

Lagt till en ny officiell plugin @prettier/plugin-hermes (#17520 av @fisker)​

Andra ändringar​

JavaScript​

Lägg till parenteser runt SequenceExpression i ReturnStatement och ExpressionStatement (#17085 av @TYKevin)​

Lägg till parenteser runt AssignmentExpression i klassnycklar (#17145 av @fisker)​

Lägg till parenteser runt nummer i valfria medlemsuttryck (#17190 av @fisker)​

Borttaget stöd för experimentella Records & Tuples (#17363 av @fisker)​

Bevara mellanrum mellan CSS-ord och inbäddade uttryck (#17398 av @sosukesuzuki)​

Rättar inkonsekvent tilldelningsformat (#17469 av @fisker)​

Rättar inkonsekvent format för medlemskedjor (#17470 av @fisker)​

Rättar valfri kedjning (optional chaining) som beräknad nyckel (#17486 av @fisker)​

Stöd för typomvandlingskommentarer i acorn- och meriyah-parsrar (#17491, #17566 av @ArnaudBarre, #17600 av #fisker)​

Rättar instabilt kommentarsformat i taggade malliteraler (#17510 av @fisker)​

Förbättrar konsekvens för JSX i valfria metodanrop (#17616 av @seiyab)​

TypeScript​

Stöd för import type-attribut i TSImportType (#16881 av @fisker)​

Rättar kommentarer i logiska uttryck och snittyper (#17193 av @fisker)​

Förbättrar detektering av nya rader i mappade typer (#17498 av @fisker)​

Lägger inte till extra semikolon efter prettier-ignore-taggade indexsignaturer (#17538 av @sosukesuzuki)​

Flow​

Rättar saknade parenteser i ConditionalTypeAnnotation (#17196 av @fisker)​

JSON​

Tillåter formatering av JSONC-filer som endast innehåller kommentarer (#17269 av @fisker)​

Förbjuder parenteserade uttryck (#17598 av @fisker)​

CSS​

Stöd för @utility-direktivet i Tailwind (#17362 av @sosukesuzuki)​

Ta bort extra indrag för :has-pseudoanrop (#17541 av @sosukesuzuki)​

Less​

Åtgärda funktionsargument som felaktigt gjorts med gemener (#17502 av @fisker)​

HTML​

Åtgärda formatering när taggnamn är en egenskap i objektprototypen (#17501 av @fisker)​

Angular​

Stöd för TemplateLiteral introducerat i Angular 19.2 (#17238 av @fisker)​

Ta bort extra kolon efter track i angulars @for-kontrollflöde (#17280 av @claudio-herger)​

Stöd för Angular 20 (#17534 av @fisker)​

MJML​

Aktivera CSS-formatering inom <mj-style>-tagg (#17338 av @iryusa)​

Tolka <mj-style> och <mj-raw> korrekt (#17400 av @fisker)​

Markdown​

Åtgärda intilliggande markdown-syntax i blockcitat (#16596 av @fiji-flo)​

Åtgärda att markdown infogar oväntad nyrad i listor (#16637 av @byplayer)​

Åtgärda stark betoning (#17143 av @fiji-flo)​

YAML​

Lägg inte till radbrytning före tom karta eller sekvens (#16074 av @BapRx)​

API​

Acceptera URL i alternativet plugins (#17166 av @fisker)​

Acceptera URL som anpassad konfigurationsfil i resolveConfig (#17167 av @fisker)​

Sluta tolka *.frag-filer som JavaScript-filer (#17178 av @fisker)​

Lägg till stöd för isSupported-funktion i languages-API:t (#17331 av @JounQin, #17490 av @fisker)​

Lägg till mjml-parser (#17339 av @fisker)​

Ignorera filer med --check-ignore-pragma (#17344 av @wnayes)​

Åtgärda pluginladdning i prettier.getFileInfo() (#17548 av @fisker)​

Tillåt att plugin kan åsidosätta inbyggda parsers vid parserslutsats (#17549 av @fisker)​

CLI​

Förbjud samtidig användning av --config och --no-config (#12221 av @Balastrong)​

Ignorera filändringstid vid --cache-strategy=content (#17438 av @fisker)​

Åtgärda resultatmeddelande för filer som inte kan formateras (#17505 av @fisker)​

Åtgärda exitCode när parser inte kan sluta sig till (#17505 av @fisker)​

Diverse​

Åtgärda inbäddad formatering med cursorOffset (#17254 av @fisker)​

Höjdpunkter

CLI

Stöd för experimentell CLI (#17151, #17396 av @fisker)

JavaScript

Tillagd en ny officiell plugin `@prettier/plugin-oxc` (#17472, #17483 av @fisker)

Flow

Lagt till en ny officiell plugin `@prettier/plugin-hermes` (#17520 av @fisker)

Andra ändringar

JavaScript

Lägg till parenteser runt `SequenceExpression` i `ReturnStatement` och `ExpressionStatement` (#17085 av @TYKevin)

Lägg till parenteser runt `AssignmentExpression` i klassnycklar (#17145 av @fisker)

Lägg till parenteser runt nummer i valfria medlemsuttryck (#17190 av @fisker)

Borttaget stöd för experimentella `Records & Tuples` (#17363 av @fisker)

Bevara mellanrum mellan CSS-ord och inbäddade uttryck (#17398 av @sosukesuzuki)

Rättar inkonsekvent tilldelningsformat (#17469 av @fisker)

Rättar inkonsekvent format för medlemskedjor (#17470 av @fisker)

Rättar valfri kedjning (optional chaining) som beräknad nyckel (#17486 av @fisker)

Stöd för typomvandlingskommentarer i `acorn`- och `meriyah`-parsrar (#17491, #17566 av @ArnaudBarre, #17600 av #fisker)

Rättar instabilt kommentarsformat i taggade malliteraler (#17510 av @fisker)

Förbättrar konsekvens för JSX i valfria metodanrop (#17616 av @seiyab)

TypeScript

Stöd för import type-attribut i `TSImportType` (#16881 av @fisker)

Rättar kommentarer i logiska uttryck och snittyper (#17193 av @fisker)

Förbättrar detektering av nya rader i mappade typer (#17498 av @fisker)

Lägger inte till extra semikolon efter `prettier-ignore`-taggade indexsignaturer (#17538 av @sosukesuzuki)

Flow

Rättar saknade parenteser i `ConditionalTypeAnnotation` (#17196 av @fisker)

JSON

Tillåter formatering av JSONC-filer som endast innehåller kommentarer (#17269 av @fisker)

Förbjuder parenteserade uttryck (#17598 av @fisker)

CSS

Stöd för `@utility`-direktivet i Tailwind (#17362 av @sosukesuzuki)

Ta bort extra indrag för `:has`-pseudoanrop (#17541 av @sosukesuzuki)

Less

Åtgärda funktionsargument som felaktigt gjorts med gemener (#17502 av @fisker)

HTML

Åtgärda formatering när taggnamn är en egenskap i objektprototypen (#17501 av @fisker)

Angular

Stöd för `TemplateLiteral` introducerat i Angular 19.2 (#17238 av @fisker)

Ta bort extra kolon efter `track` i angulars `@for`-kontrollflöde (#17280 av @claudio-herger)

Stöd för Angular 20 (#17534 av @fisker)

MJML

Aktivera CSS-formatering inom `<mj-style>`-tagg (#17338 av @iryusa)

Tolka `<mj-style>` och `<mj-raw>` korrekt (#17400 av @fisker)

Markdown

Åtgärda intilliggande markdown-syntax i blockcitat (#16596 av @fiji-flo)

Åtgärda att markdown infogar oväntad nyrad i listor (#16637 av @byplayer)

Åtgärda stark betoning (#17143 av @fiji-flo)

YAML

Lägg inte till radbrytning före tom karta eller sekvens (#16074 av @BapRx)

API

Acceptera `URL` i alternativet `plugins` (#17166 av @fisker)

Acceptera `URL` som anpassad konfigurationsfil i `resolveConfig` (#17167 av @fisker)

Sluta tolka `*.frag`-filer som JavaScript-filer (#17178 av @fisker)

Lägg till stöd för `isSupported`-funktion i `languages`-API:t (#17331 av @JounQin, #17490 av @fisker)

Lägg till `mjml`-parser (#17339 av @fisker)

Ignorera filer med `--check-ignore-pragma` (#17344 av @wnayes)

Åtgärda pluginladdning i `prettier.getFileInfo()` (#17548 av @fisker)

Tillåt att plugin kan åsidosätta inbyggda parsers vid parserslutsats (#17549 av @fisker)

CLI

Förbjud samtidig användning av `--config` och `--no-config` (#12221 av @Balastrong)

Ignorera filändringstid vid `--cache-strategy=content` (#17438 av @fisker)

Åtgärda resultatmeddelande för filer som inte kan formateras (#17505 av @fisker)

Åtgärda exitCode när parser inte kan sluta sig till (#17505 av @fisker)

Diverse

Åtgärda inbäddad formatering med `cursorOffset` (#17254 av @fisker)