Prettier 3.4: Många buggfixar
Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →
Den här versionen innehåller många buggfixar och andra förbättringar.
Om du uppskattar Prettier och vill stödja vårt arbete, överväg att sponsra oss direkt via vår OpenCollective eller genom att sponsra de projekt vi förlitar oss på, såsom typescript-eslint, remark och Babel. Tack för ert fortsatta stöd!
Andra ändringar
JavaScript
Fixa utskrift av malliteral med array (#13315 av @fisker, @syi0808)
// Input
const string = `${[[1, 2], [3, 4]]}`
// Prettier 3.3
const string = `${[
[2],
[4],
]}`;
// Prettier 3.4
const string = `${[
[1, 2],
[3, 4],
]}`;
Lägg till saknade parenteser i taggade malliteraler (#16500 av @syi0808)
// Input
(String?.raw)``;
(getTag?.())``;
// Prettier 3.3
String?.raw``;
getTag?.()``;
// Prettier 3.4
(String?.raw)``;
(getTag?.())``;
Ta inte bort onödiga \ i strängliteraler (#16563 av @sosukesuzuki, #16763 av @fisker)
Tidigare tog Prettier bort onödiga escape-tecken (\) från strängliteraler. Detta beteende var dock inkonsekvent eftersom det inte applicerades på malliteraler, vilket rapporterades i issue #16542.
Denna fråga är en funktionsbegäran om att utöka detta beteende till malliteraler också.
Efter intern diskussion kom Prettier-teamet fram till att borttagning av onödiga escape-tecken, oavsett om de finns i strängliteraler eller malliteraler, är en linters ansvar, inte en formaterares.
Denna ändring inaktiverar borttagning av onödiga escape-tecken i strängliteraler för alla språk som stöds av Prettier. För att behålla det tidigare beteendet rekommenderar vi att använda ESLint-regler som no-useless-escape.
Escaperade citattecken (t.ex. "\"\'") kan bli oescaperade vid byte mellan olika citattecken. Detta förklaras på sidan Rationale i den officiella dokumentationen.
// Input
const str = "\a";
// Prettier 3.3
const str = "a";
// Prettier 3.4
const str = "\a";
Förbättra kommentarsformatering för logiska uttryck i unära uttryck (#16593 av @sosukesuzuki)
// Input
!(
cond1 || // foo
cond2 || // bar
cond3 // baz
);
// Prettier 3.3
!(
(
cond1 || // foo
cond2 || // bar
cond3
) // baz
);
// Prettier 3.4
!(
cond1 || // foo
cond2 || // bar
cond3 // baz
);
Borttaget stöd för experimentell syntax (#16643, #16705 av @fisker)
-
DecimalLiteral- Decimalförslaget beslutade att inte införa ny syntax. Plugin:etdecimalkommer att tas bort från Babel 8. -
importReflection- Förslaget "Import Reflection" har bytt namn till "Source Phase Imports"
TypeScript
Lägg till saknade parenteser i taggade malliteraler (#16500 av @syi0808)
// Input
(String?.raw!)``;
(String?.raw)!``;
// Prettier 3.3
String?.raw!``;
String?.raw!``;
// Prettier 3.4
(String?.raw)!``;
(String?.raw)!``;
Bevara kommentar mellan dekoratör och modifierad parameteregenskap (#16574 av @sosukesuzuki)
Nuvarande version av Prettier flyttar oväntat en radkommentar mellan en parameteregenskap modifierad med readonly, private, public, etc. och en dekoratör. Resultatet blir ogiltig TypeScript-kod.
Denna ändring säkerställer att det ursprungliga formatet bevaras.
// Input
class Foo {
constructor(
@decorator
// comment
readonly foo,
) {}
}
// Prettier 3.3
class Foo {
constructor(
@decorator
readonly // comment
foo,
) {}
}
// Prettier 3.4
class Foo {
constructor(
@decorator
// comment
readonly foo,
) {}
}
Bevara kommentar mellan modifierare och dekorerat egenskapsnamn (#16578 by @sosukesuzuki)
Det fanns en bugg där blockkommentarer mellan modifieraren och namnet på en dekorerad egenskap behandlades som efterföljande kommentarer till dekoratören. Detta beteende var inte bara oväntat utan saknade även idempotens.
Med denna ändring bevaras positionen för blockkommentaren mellan modifieraren och egenskapsnamnet.
// Input
class Foo {
@decorator
readonly /* comment */ propertyName;
}
// Prettier 3.3
class Foo {
@decorator /* comment */
readonly propertyName;
}
// Prettier 3.3 (second output)
class Foo {
@decorator /* comment */ readonly propertyName;
}
// Prettier 3.4
class Foo {
@decorator
readonly /* comment */ propertyName;
}
Lägg inte till extra radbrytning för pilfunktion med typparameter i tilldelning (#16586 by @sosukesuzuki)
Det fanns en bugg där en extra rad infogades vid tilldelning av en kedjad pilfunktion med typparametrar till en variabel om det fanns en radkommentar ovanför.
Denna ändring säkerställer att den extra raden inte längre infogas.
// Input
const foo1 =
// comment
<T,>() => () => 1;
// Prettier 3.3
const foo1 =
// comment
<T,>() =>
() =>
1;
// Prettier 3.4
const foo1 =
// comment
<T,>() =>
() =>
1;
Stöd "Top-level await-satser" (#16729 by @fisker)
// Input
(await (await fetch()).json()).foo
// Prettier 3.3
await(await fetch()).json().foo;
// Prettier 3.4
(await (await fetch()).json()).foo;
Fixa radbrytningar i klassarv trots att det fortfarande passar inom radbredden (#16730 by @fisker)
// Input
export class JiraCreatePixFraudDetectionGateway
implements Pick<IssuePixFraudDetectionGateway, "createPixFraudDetectionIssue">
{
constructor(private readonly logger: Logger) {
this.logger = logger.child({
context: JiraCreatePixFraudDetectionGateway.name,
});
}
}
// Prettier 3.3
export class JiraCreatePixFraudDetectionGateway
implements
Pick<IssuePixFraudDetectionGateway, "createPixFraudDetectionIssue">
{
constructor(private readonly logger: Logger) {
this.logger = logger.child({
context: JiraCreatePixFraudDetectionGateway.name,
});
}
}
// Prettier 3.4
export class JiraCreatePixFraudDetectionGateway
implements Pick<IssuePixFraudDetectionGateway, "createPixFraudDetectionIssue">
{
constructor(private readonly logger: Logger) {
this.logger = logger.child({
context: JiraCreatePixFraudDetectionGateway.name,
});
}
}
Placera declare före åtkomstmodifierare i klasegenskaper (#16731 by @fisker)
// Input
class A {
declare private readonly name: string;
}
// Prettier 3.3
class A {
private declare readonly name: string;
}
// Prettier 3.4
class A {
declare private readonly name: string;
}
CSS
Lös vissa typer av överskridande bredd i CSS (#16570 by @seiyab)
/* Input */
@media (prefers-reduced-data: no-preference) {
@font-face {
unicode-range: U+0000-00FF, U+0131,
U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
/* Prettier 3.3 */
@media (prefers-reduced-data: no-preference) {
@font-face {
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
}
/* Prettier 3.4 */
@media (prefers-reduced-data: no-preference) {
@font-face {
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
}
Ta bort extra indrag i pseudoklasser-funktioner (#16572 by @sosukesuzuki)
Denna ändring fixar en bugg där extra indrag lades till när radbrytningar ingick i argumentlistan för pseudoklasser-funktioner som :where(), :is() och :not.
/* Input */
:where(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select) {
/* CSS here */
}
/* Prettier 3.3 */
:where(
input:not([type="button"], [type="reset"], [type="submit"]),
textarea,
select
) {
/* CSS here */
}
/* Prettier 3.4 */
:where(
input:not([type="button"], [type="reset"], [type="submit"]),
textarea,
select
) {
/* CSS here */
}
Fixa formatering av ofullständiga CSS-värdekommentarer (#16583 by @sosukesuzuki, @fisker)
Vid formatering av CSS-värdekommentarer kan det avslutande / försvinna, vilket resulterar i en ogiltig kommentar.
Denna ändring säkerställer att värdekommentarer inte trunkeras.
/* Input */
h1 {
--OFF: /* OFF */;
}
/* Prettier 3.3 */
h1 {
--OFF: /* OFF *;
}
/* Prettier 3.4 */
h1 {
--OFF: /* OFF */;
}
SCSS
Fixa fel vid formatering av SCSS-filer (#16607 by @fisker)
// Input
@if true {
$newKey: ($key: ( $theme-name: $value ))
}
// Prettier 3.3
Error
// Prettier 3.4
@if true {
$newKey: (
$key:
(
$theme-name: $value,
),
);
}
Fixa felaktig position för efterföljande kommatecken efter kommentar i SCSS (#16617 by @Ma-hawaj, @fisker)
/* Input */
$z-indexes: (
header: 1035,
overlay: 1202 // TODO: change to 1050 after bootstrap modals will be removed
);
/* Prettier 3.3 */
$z-indexes: (
header: 1035,
overlay: 1202 // TODO: change to 1050 after bootstrap modals will be removed,
);
/* Prettier 3.4 */
$z-indexes: (
header: 1035,
overlay: 1202, // TODO: change to 1050 after bootstrap modals will be removed
);
HTML
Behåll doktyp i icke-HTML-filer oförändrad (#16765 by @fisker)
I Prettier v3 skriver vi HTML5-dokumenttyper med gemener, vilket är säkert för HTML-filer. Användare kan dock använda html-parsern för att formatera andra filer, t.ex. XHTML-filer, och att använda gemener för doctype bryter mot XHTML-dokuments syntax.
Från och med Prettier 3.4 kommer vi endast använda gemener för HTML5-dokumenttypen (<!doctype html>) när filändelsen är .html eller .htm. I andra fall kommer de att förbli oförändrade.
<!-- Input -->
<!-- foo.xhtml -->
<!DOCTYPE html>
<!-- Prettier 3.3 -->
<!doctype html>
<!-- Prettier 3.4 -->
<!DOCTYPE html>
Vue
Fixerar extra semikolon i Vue-eventbindningar med icke-ASCII-tecken (#16733 av @fisker)
<!-- Input -->
<template>
<button @click="点击事件">点击!</button>
<button @click="onClick">Click!</button>
</template>
<!-- Prettier 3.3 -->
<template>
<button @click="点击事件;">点击!</button>
<button @click="onClick">Click!</button>
</template>
<!-- Prettier 3.4 -->
<template>
<button @click="点击事件">点击!</button>
<button @click="onClick">Click!</button>
</template>
Angular
Stöd för Angular 19 (#16862 av @fisker)
Angular 19 lade till stöd för typeof-nyckelordet i template-uttryck.
<!-- Input -->
<div>{{ typeof
x ===
'object' ? 'Y' : 'N'}}</div>
<!-- Prettier 3.3 -->
<div>
{{ typeof
x ===
'object' ? 'Y' : 'N'}}
</div>
// Prettier 3.4
<div>{{ typeof x === "object" ? "Y" : "N" }}</div>
Markdown
Tar bort onödiga mellanrum efter radprefix för punktlistor i Markdown (#15526 av @TomasLudvik)
<!-- Input -->
- first line
- second line indented
- third line
- fourth line
- fifth line
<!-- Prettier 3.3 -->
- first line
- second line indented
- third line
- fourth line
- fifth line
<!-- Prettier 3.4 -->
- first line
- second line indented
- third line
- fourth line
- fifth line
Fixerar felaktig radbrytning i meningar med linkReference (#16546 av @seiyab)
<!-- Input (--prose-wrap=always) -->
This folder has [VHS] tape files to create gifs for the [Widget Showcase]. To run them, install VHS from main (the theme and screenshot commands are not yet released).
<!-- Prettier 3.3 -->
This folder has [VHS] tape files to create gifs for the [Widget Showcase]. To run
them, install VHS from main (the theme and screenshot commands are not yet released).
<!-- Prettier 3.4 -->
This folder has [VHS] tape files to create gifs for the [Widget Showcase]. To
run them, install VHS from main (the theme and screenshot commands are not yet
released).
Bevara icke-ASCII-mellanrum i slutet av raden och början av nästa rad (#16619 av @tats-u)
Prettier tar bort icke-ASCII-mellanrum i slutet av raden och början av nästa rad. Detta beteende är dock inte konsekvent med CommonMark-specifikationen.
https://spec.commonmark.org/0.31.2/#soft-line-breaks
Mellanrum i slutet av raden och början av nästa rad tas bort:
https://spec.commonmark.org/0.31.2/#unicode-whitespace-character
Ett Unicode-mellanrumstecken är ett tecken i Unicode Zs-generalkategorin, eller en tabb (U+0009), radmatning (U+000A), formulärmatning (U+000C) eller vagnretur (U+000D).
Unicode-mellanrum är en sekvens av ett eller flera Unicode-mellanrumstecken.
Ett mellanrum är U+0020.
CommonMark-specifikationen nämner inte icke-ASCII-mellanrum här, så att ta bort dem ändrar innehållet i Markdown-dokumentet.
<!-- Input -->
EM Space (U+2003) EM Space
全角スペース (U+3000) 全形空白
<!-- Prettier 3.3 -->
EM Space (U+2003) EM Space
全角スペース (U+3000) 全形空白
<!-- Prettier 3.4 -->
EM Space (U+2003) EM Space
全角スペース (U+3000) 全形空白
Bryt inte rad mellan kinesiska/japanska tecken och andra tecken (#16691 av @tats-u)
Markdown-dokument konverteras främst till HTML eller komponenter i JavaScript-baserade ramverk. Det innebär att stycken i Markdown slutligen bearbetas av webbläsaren enligt CSS-regler. Anledningen är att många Markdown-konverterare bevarar radbrytningar i stycken i indata-Markdown, och HTML i sig specificerar inte hur webbläsare ska hantera radbrytningar i text i HTML.
Enligt CSS-regler (CSS Text Module Level 3 eller senare) ska webbläsare ta bort radbrytningar mellan kinesiska/japanska tecken istället för att ersätta dem med mellanrum. Denna regel har dock länge ignorerats av WebKit-baserade eller Webkit-härledda webbläsare (Chrome, Safari med flera).
Till exempel, följande HTML-paragraf:
<p>
日本語
汉语
漢語
<p>
genererad från följande Markdown:
日本語
汉语
漢語
bör renderas enligt följande enligt CSS-regler och renderas faktiskt så av Firefox:
日本語汉语漢語
Däremot renderar Chrome och Safari den enligt följande:
日本語 汉语 漢語
Det här är anledningen till att vi bör stoppa Prettier från att bryta rader mellan kinesiska/japanska tecken. Vi beslutade att sluta tvinga användare att använda ett plugin för en Markdown-konverterare som sammanfogar rader som börjar eller slutar med kinesiska/japanska tecken (till exempel remark-join-cjk-lines).
Dessutom, en radbrytning mellan kinesiska/japanska och andra tecken är ekvivalent med ett mellanslag enligt innan committen som avbröt en konkret regel i CSS Text Module Level 3 genom att kommentera bort den som fixade ett problem i CSS Working Group Editor Drafts. Firefox följer denna regel. Därför renderar alla webbläsare följande paragraf:
<!-- prettier-ignore -->
```html
<p>日本語 English 汉语 한국어 漢語</p>
<p></p>
enligt följande:
日本語 English 汉语 한국어 漢語
Däremot har Prettier brutit en rad mellan kinesiska/japanska tecken i Markdown under lång tid, och mellan kinesiska/japanska och latinska tecken i vissa fall sedan 3.0.0. Till exempel, följande Markdown-paragraf:
日本語English汉语
English
漢語
formateras enligt följande om --prose-wrap är inställt på ett annat värde än preserve i Prettier 3.x:
日本語English汉语English漢語
Däremot, följande HTML, som genereras av en Markdown-till-HTML-konverterare baserad på ovanstående Markdown:
<p>
日本語English汉语
English
漢語
</p>
renderas enligt följande av alla webbläsare:
日本語English汉语 English 漢語
Det här är anledningen till att vi bör stoppa Prettier från att bryta rader även runt kinesiska/japanska tecken i Markdown. Vi kommer att anpassa Prettiers beteende till denna regel i en framtida version. Efter det kommer radbrytningar mellan kinesiska/japanska och andra tecken att tillåtas igen under vissa regler.
Ett av de få undantagen är mellanslag och radbrytningar mellan kinesiska/japanska och koreanska bokstäver. Följande Markdown-paragrafer är ekvivalenta även i den nuvarande Prettier-versionen:
현재 韓國의 大統領은 尹錫悅이다.
현재
韓國의
大統領은
尹錫悅이다.
Du får den första om du formaterar den senare med --prose-wrap=always och ett tillräckligt långt --print-width-värde eller med --prose-wrap=never, och du får den senare om du formaterar den första med --prose-wrap=always med ett extremt kort --print-width-värde. Därför behöver vi inte röra sådana mellanslag och radbrytningar.
Ett annat undantag är de mellan ett kinesiskt/japanskt tecken och en meningsfull symbol i Markdown som *, `, [ och ]. Till exempel, följande Markdown-paragraf är ekvivalent även i den nuvarande Prettier-versionen:
**Yarn** のCLI経由でフォーマットするには `yarn prettier -w ` を実行してください。
**Yarn**
のCLI経由でフォーマットするには
`yarn prettier -w .`
を実行してください。
<!-- Input (--prose-wrap=always --print-width=20) -->
日本語 汉语 漢語 English 한국어 日本語 汉语 漢語 English 한국어 日本語 汉语 漢語 English 한국어 日本語 汉语 漢語 English 한국어
日本語汉语漢語English한국어日本語汉语漢語English한국어日本語汉语漢語English한국어日本語汉语漢語English한국어
<!-- Prettier 3.3 -->
日本語 汉语 漢語
English 한국어 日本
語 汉语 漢語 English
한국어 日本語 汉语
漢語 English 한국어
日本語 汉语 漢語
English 한국어
日本語汉语漢語
English한국어日本語
汉语漢語
English한국어日本語
汉语漢語
English한국어日本語
汉语漢語
English한국어
<!-- Prettier 3.4 -->
日本語 汉语 漢語 English
한국어
日本語 汉语 漢語 English
한국어
日本語 汉语 漢語 English
한국어
日本語 汉语 漢語 English
한국어
日本語汉语漢語English한국어日本語汉语漢語English한국어日本語汉语漢語English한국어日本語汉语漢語English한국어
Tala om för regexp-util att generera regex-kompatibelt med u-flaggan (#16816 by @tats-u)
CJK-tecken utanför BMP och Ideographic Variation Sequences (IVS; variationsselektorer dedikerade för han/kanji), som upptar 2 tecken i JavaScript-strängar, har inte behandlats som CJK. Detta beror på att Prettier inte har skickat den lämpliga flaggan "u" till paketet regexp-util.
I följande exempel är "𠮷" (U+20BB7) utanför BMP, och "葛󠄀" är en kombination av en han "葛" (U+845B) i BMP och en IVS U+E0100. Den senare kräver ett teckensnitt med stöd för Adobe Japan-1 (t.ex. Yu Gothic UI och Source Han Sans) för att renderas som en form som skiljer sig från tecknet utan IVS (葛).
<!-- Input (--prose-wrap=never) -->
a 字 a 字 a 字
𠮷
𠮷
葛󠄀
葛󠄀
終
<!-- Prettier 3.3 -->
a 字 a 字 a 字 𠮷 𠮷 葛󠄀 葛󠄀 終
<!-- Prettier 3.4 -->
a 字 a 字 a 字𠮷𠮷葛󠄀葛󠄀終
YAML
Korrigera saknat mellanslag före # i yaml-kommentarer för icke-enradsartiklar (#16489 av @fyc09)
# Input
123: # hello
# comment
# Prettier 3.3
123:# hello
# comment
# Prettier 3.4
123: # hello
# comment
API
Stoppa dokumentmutation i prettier.doc.printDocToString (#13315 av @fisker)
Av prestandaskäl muterade prettier.doc.printDocToString tidigare .parts i fill-kommandot under utskrift. Den har nu konverterats till en ren funktion för att säkerställa korrekt utdata.
Göra getPreferredQuote offentlig (#16567 av @sosukesuzuki)
Denna ändring gör den interna funktionen getPreferredQuote till en del av det offentliga API:et.
I språk som JavaScript kan både enkla och dubbla citattecken användas för strängliteraler. Prettier bestämmer vilket citattecken som ska omge en strängliteral baserat på antalet citattecken inom strängen och värdet för alternativet singleQuote. För mer detaljer, se sidan Rationale.
Funktionen getPreferredQuote bestämmer lämpligt citattecken för att omge en strängliteral och har följande gränssnitt:
type Quote = '"' | "'";
function getPreferredQuote(
text: string,
preferredQuoteOrPreferSingleQuote: Quote | boolean,
): Quote;
Här är några exempel på hur den kan användas:
import * as prettier from "prettier";
const SINGLE_QUOTE = `'`;
const DOUBLE_QUOTE = `"`;
console.log(prettier.util.getPreferredQuote(`Hello World Test`, SINGLE_QUOTE)); // '
console.log(prettier.util.getPreferredQuote(`Hello World Test`, DOUBLE_QUOTE)); // "
console.log(prettier.util.getPreferredQuote(`'Hello' "World" 'Test'`, SINGLE_QUOTE)); // "
console.log(prettier.util.getPreferredQuote(`"Hello" 'World' "Test"`, DOUBLE_QUOTE)); // '
console.log(prettier.util.getPreferredQuote(`"Hello" "World" "Test"`, SINGLE_QUOTE)); // '
console.log(prettier.util.getPreferredQuote(`'Hello' 'World' 'Test'`, DOUBLE_QUOTE)); // "
Att göra denna funktion offentlig kommer gynna plugin-utvecklare. Eftersom funktionen är relativt kort kan du hitta mer detaljer i implementeringen.
Korrigera inläsning av ESM-stil konfigurationsfil i Node.js 23 (#16857 av @sosukesuzuki)
I Prettier 3.3 ledde försök att ladda en ESM-stil konfigurationsfil i Node.js 23 till följande varningar, vilket förhindrade att inställningarna lästes in:
[warn] Ignored unknown option { __esModule: true }.
[warn] Ignored unknown option { default: { trailingComma: "es5", tabWidth: 4, singleQuote: true } }.
Felet orsakades av en ny modulfunktion i Node.js 23, känd som require(ESM). Prettier 3.4 löser detta problem så att inställningarna nu laddas korrekt.
För mer detaljer, se https://github.com/prettier/prettier/issues/16812.
CLI
Ignorera filer i Jujutsu-katalogen (#16684 av @marcusirgens)
Jujutsu VCS använder katalogen .jj, på samma sätt som Git använder .git.
Denna ändring lägger till .jj i listan över kataloger som tyst ignoreras av Prettier.
Diverse
Korrigera att cursorOffset-funktionen ibland blev katastrofalt långsam (#15709 av @ExplodingCabbage)
Tidigare kunde Prettiers cursorOffset-funktion bli extremt långsam under vissa olyckliga omständigheter (när användarens markör inte fanns inom ett lövobjekt i AST-trädet, och det icke-lövobjekt som innehöll den var mycket stort och omformaterades avsevärt av Prettier). Konsekvensen blev att om du använde Prettier via en editorintegration som använde cursorOffset under huven, kunde din editor ibland hänga sig oförklarligt när du försökte formatera en fil.
Alla exempel på detta fenomen som vi känner till bör nu vara åtgärdade, men buggrapporter om ytterligare patologiska exempel är välkomna.
