Hoppa till huvudinnehållet

Prettier 3.5: Nytt objectWrap-alternativ, experimentalOperatorPosition-alternativ och stöd för TS-konfigurationsfiler!

· 9 min att läsa
Sosuke Suzuki
Sosuke Suzuki
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 versionen innehåller många felkorrigeringar och följande nya funktioner:

  • Stöd för det nya objectWrap-alternativet

  • Stöd för det nya experimentella experimentalOperatorPosition-alternativet

  • Stöd för TypeScript-konfigurationsfiler

Se varje avsnitt för detaljer.

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!

Varför vi lade till två nya alternativ​

Den här versionen introducerar två nya alternativ. Om du känner till Prettiers Alternativfilosofi, kanske du undrar: "Varför lägga till nya alternativ?" Var säker på att dessa inte är vanliga alternativ, och de bryter inte mot vår alternativfilosofi.

Som namnet antyder är experimentalOperatorPosition experimentellt. Vi har en policy för experimentella alternativ, vilket innebär att det så småningom kommer att tas bort. I framtiden kan det nya beteendet bli standard, eller så kan det här alternativet helt tas bort. Om du följt Prettier ett tag, kanske du minns att vi en gång lade till ett experimentalTernaries-alternativ, och detta följer samma tillvägagångssätt.

objectWrap är lite speciellt. Länge har vi kämpat med hur man ska skriva ut flerradiga objekt. Vi har ännu inte hittat den perfekta lösningen, så vi har tillgripit ett semi-manuellt tillvägagångssätt. För mer information, se vår Motivering. Det nuvarande beteendet är inte idealiskt eftersom slutresultatet kan variera beroende på hur användaren skriver sin kod. För att ge ett mer konsekvent format har vi beslutat att introducera objectWrap-alternativet.

Även om den här versionen innehåller två nya alternativ, vill vi betona att vi inte har glömt Prettiers alternativfilosofi. Dessa alternativ hanterar specifika, långvariga formateringsutmaningar utan att kompromissa med vår alternativfilosofi.

Höjdpunkter​

JavaScript​

Lägg till experimentellt alternativ för radbrytning före binära operatorer (#7111 av @btmills)​

Detta implementeras bakom flaggan --experimental-operator-position <start|end>.

När binära uttryck bryts över flera rader, placerar start operatorerna i början av nya rader. Att placera binära operatorer i början av radbrytna rader kan göra operatorerna mer framträdande och lättare att skanna.

// Input
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;

// `experimentalOperatorPosition: end` (default behavior)
var a =
  Math.random() * (yRange * (1 - minVerticalFraction)) +
  minVerticalFraction * yRange -
  offset;

// `experimentalOperatorPosition: start`
var a =
  Math.random() * (yRange * (1 - minVerticalFraction))
  + minVerticalFraction * yRange
  - offset;

Implementera objectWrap-konfigurationsalternativ (#16163 av @pauldraper, @sosukesuzuki)​

Prettier har historiskt sett använt semi-manuell formatering av flerradiga JavaScript-objektliteraler.

Närmare bestämt behålls ett objekt på flera rader om det finns en radbrytning före den första egenskapen, även om det skulle få plats på en enda rad. Se Flerradiga objekt för mer detaljer.

Medan detta beteende fortfarande är standard, ignorerar --object-wrap=collapse istället blanktecken vid formatering av objektliteraler.

// Input
const obj1 = {
  name1: "value1", name2: "value2",
};

const obj2 = { name1: "value1",
  name2: "value2",
};

// Prettier 3.4
const obj1 = {
  name1: "value1",
  name2: "value2",
};

const obj2 = { name1: "value1", name2: "value2" };

// Prettier 3.5 (with `--object-wrapping=collapse`)
const obj1 = { name1: "value1", name2: "value2" };

const obj2 = { name1: "value1", name2: "value2" };

API​

Lägg till stöd för TypeScript-konfigurationsfiler (#16828 av @itsyoboieltr & @fisker)​

Nya konfigurationsfilformat har lagts till:

  • .prettierrc.ts

  • .prettierrc.mts

  • .prettierrc.cts

  • prettier.config.ts

  • prettier.config.mts

  • prettier.config.cts

Obs:

Stödet för TypeScript i Node.js är för närvarande experimentellt.

För att TypeScript-konfigurationsfiler ska fungera krävs Node.js>=22.6.0 och Node.js v22 kräver --experimental-strip-types.

Du kan köra Prettier med

node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write

eller

NODE_OPTIONS="--experimental-strip-types" prettier . --write

Andra TS-laddare bör också fungera, men de är inte testade – använd på egen risk.

Till exempel, med tsx kan du

node --import tsx node_modules/prettier/bin/prettier.cjs . --write

eller

tsx node_modules/prettier/bin/prettier.cjs . --write

Andra ändringar​

JavaScript​

Förbättra kantfall för ordbrytning i JSX (#16700 av @seiyab)​

// Input
br_triggers_expression_break =
  <div><br />
  text text text text text text text text text text text {this.props.type} </div>

// Prettier 3.4
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text {
      this.props.type
    }{" "}
  </div>
);

// Prettier 3.5
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text{" "}
    {this.props.type}{" "}
  </div>
);

Flow​

Stöd för const-typparametrar i Flow (#16947 av @gkz)​

function f<const T>(): void {}

// Prettier 3.4
// Parse error

// Prettier 3.5
function f<const T>(): void {}

CSS​

Bryt före brytande komma-separerade värden (#16907 av @seiyab)​

/* Input */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

/* Prettier 3.4 */
a {
  background-image: linear-gradient(
      to bottom,
      rgb(255 255 0 / 50%),
      rgb(0 0 255 / 50%)
    ),
    url("catfront.png");
}

/* Prettier 3.5 */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

Vue​

Stöd för .prop-genväg (#16920 av @fisker)​

.foo är en genväg för v-bind:foo.prop. Se inbyggda direktivet v-bind för detaljer.

<!-- Input -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.4 -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.5 -->
<template>
  <button .disabled="a && b">Click!</button>
</template>

Angular​

Förbättra radbrytningar inuti ICU-block (#16922 av @fisker)​

<!-- Input -->
<span>The author is {gender, select, male {male} female {female} other {other}}</span>
<span>The author is <span>male consectetur adipiscing elit, sed do eiusmod</span></span>

<!-- Prettier 3.4 -->
<span
  >The author is {gender, select, male {male} female {female} other {other}
}</span>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

<!-- Prettier 3.5 -->
<span
  >The author is
  {gender, select, male {male} female {female} other {other}}</span
>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

Åtgärda extra ny rad inuti ICU-block (#16922 av @fisker)​

<!-- Input -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

<!-- Prettier 3.4 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
}

<!-- Prettier 3.5 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

Ember / Handlebars​

Hantera <style>- och <pre>-taggar i Handlebars/Glimmer (#15087 av @jurgenwerk)​

{{!-- Input --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red { color: red }
  .blue {
    color: red
  }
</style>

{{!-- Prettier 3.4 --}}
<pre>
  cd ~ ls echo "hey"
</pre>
<style>
  .red { color: red } .blue { color: blue }
</style>

{{!-- Prettier 3.5 --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red {
    color: red;
  }
  .blue {
    color: red;
  }
</style>

Markdown​

U+FF5E som CJK-skiljetecken (#16832 av @tats-u)​

U+FF5E FULLWIDTH TILDE (～) används vanligtvis som en ersättning för U+301C WAVE DASH (〜) i Windows för japanska. Helbreddsalfabet används mindre i Markdown-dokument jämfört med andra dokumenttyper (t.ex. Microsoft Office-dokument), och helbredds-tilde används mycket mindre för detta ändamål jämfört med helbreddsalfabet och siffror. Därför kan vi anta att helbredds-tilden i Markdown-dokument i det vilda är en alternativ form av vågstrecket och en del av CJK-skiljetecken.

<!-- Input (--prose-wrap=never) -->
a 字 a 字 a 字
60～
100点
60〜
100点

<!-- Prettier 3.4 -->
a 字 a 字 a 字 60～ 100点 60〜10点


<!-- Prettier 3.5 -->
a 字 a 字 a 字 60～10点 60〜100点

Den första symbolen mellan 60 och 100 i exemplet ovan är U+FF5E FULLWIDTH TILDE (～) och den andra är U+301C WAVE DASH (〜).

API​

Stöd för att läsa konfiguration från package.json med JSONC-syntax på Bun (#17041 av @fisker)​

Bun 1.2 lade till stöd för JSONC i package.json. I tidigare versioner av Prettier ignorerades prettier-konfigurationen i den. Från och med Prettier 3.5 kan vi läsa prettier-konfigurationen från den utan fel.

Men eftersom det bara är en funktion i Bun och inte stöds av Node.js, fungerar det bara när Prettier körs med Bun.

Viktigt att notera: Prettier använder json-stringify-parser för att formatera package.json-filer som standard. För att stödja formatering av package.json-filer med JSONC-syntax måste du åsidosätta parser-alternativet.

export default {
  overrides: [
    {
      files: ["package.json"],
      options: {
        parser: "jsonc",
      },
    },
  ],
};

Om du av någon anledning inte kan uppgradera Prettier kan du fortfarande använda JSONC-syntax i package.json, men placera inte din prettier-konfiguration där. Du måste istället använda en annan konfigurationsfil.

Diverse​

Använd ESM-entrypunkt för require(ESM) (#16958 av @tats-u)​

info

Denna ändring har återställts i v3.5.2, se #17139 för detaljer.

Node.js 22.12 eller senare kan (experimentellt) ladda ESM-moduler med require-funktionen utan runtime-flaggor. Denna ändring möjliggör för require att ladda Prettier utan CommonJS-entrypunkten genom att nästan uteslutande importera ESM-entrypunkten.

Funktionen att ladda ES-moduler med require är inte helt stabil men kan användas utan ExperimentalWarning från och med Node 22.13.