Hoppa till huvudinnehållet

Prettier 2.5: TypeScript 4.5 och MDX v2-kommentarssyntax!

· 7 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 lägger till stöd för TypeScript 4.5s nya syntax och MDX v2-kommentarssyntax!

Om du gillar 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å, inklusive typescript-eslint, remark och Babel.

Höjdpunkter​

TypeScript​

Undvik extra indrag i pilfunktioners kropp vid långa typer (#11515 av @kachkaev och @thorn0)​

Från och med Prettier 2.3.0 kunde typdeklarationer i pilfunktioner påverka indragningen av funktionskroppen. Att ändra längden på typannoteringen kunde skapa stora diffar och därmed öka risken för git-konflikter. För att förhindra detta stabiliserades indraget för funktionskroppen.
Observera: Denna ändring kan påverka många rader i din kodbas.

// Input
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.2 and below
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({
  x,
  y,
}) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.4
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> =
  ({ x, y }) => {
    const a = useA();
    return <div>{x + y + a}</div>;
  };

// Prettier 2.5
const MyComponentWithLongName: React.VoidFunctionComponent<
  MyComponentWithLongNameProps
> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

Stöd för TypeScript 4.5 (#11721, #11723, #11813 av @sosukesuzuki)​

Vi har lagt till stöd för TypeScript 4.5:s nya syntaxfunktioner:

type-modifierare på importnamn​
// Example
import { type A } from "mod";

Kontroll av förekomst av privata fält​
// Example
class Foo {
  #prop1;
  method() {
    return #prop1 in this;
  }
}

Importassertioner​
// Example
import obj from "./something.json" assert { type: "json" };

Hantera .mts och .cts​

Prettier kommer nu att formatera filer med .mts och .cts-ändelser som TypeScript.

HTML​

Slå ihop HTML-class-attribut på en rad (#11827 av @jlongster)​

Återgår till före #7865.

Även om detta var tänkt att hjälpa användare av CSS-bibliotek som Tailwind (som ofta resulterar i många klasser på element), visade det sig att våra heuristiker för att dela upp klasslistan på flera rader inte kunde ge konsekvent bra resultat. Vi letar fortfarande efter bättre sätt att formatera HTML med många klasser – diskutera gärna med oss.

<!-- Input -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.4 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

<!-- Prettier 2.5 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

MDX​

Lägg till stöd för MDX v2-kommentarssyntax (#11563 av @wooorm)​

Detta lägger till grundläggande stöd för MDX v2-kommentarssyntax (JavaScript-stilskommentarer) utöver det befintliga stödet för MDX v1-kommentarssyntax (HTML-stilskommentarer).

Observera: Prettier stöder för närvarande endast den nya kommentarssyntaxen för enradskommentarer (så att {/* prettier-ignore */} kan användas), och stöder inte övriga delar av MDX v2.

Input:
{/*A comment*/}

Prettier 2.4:
{/_A comment_/}

Prettier 2.5:
{/*A comment*/}

Andra ändringar​

JavaScript​

Rätta parenteser kring sekvensuttryck som kropp av pilkedja (#11593 by @bakkot)​

De nödvändiga parenteserna runt sekvensuttryck som kropp av pilfunktioner bevaras nu för kedjade pilar. Tidigare tog Prettier bort dem, vilket resulterade i ogiltig syntax.

// Input
const f = () => () => (0, 1);

// Prettier 2.4
const f = () => () => 0, 1;

// Prettier 2.5
const f = () => () => (0, 1);

Ignorera fel för slarvigt läges-syntax (#11750 by @fisker, #11778 by @sosukesuzuki)​

JavaScripts striktläge lägger till flera användbara fel för att förhindra misstag. Några av dessa fel är syntaxfel som uppstår vid parsning. Eftersom Prettiers mål är att formatera all syntaktiskt giltig JavaScript-kod oavsett om den faktiskt kommer att köras, har vi valt att lämna denna felkontroll till linters, kompilatorer och runtime-miljön.

// Input
function foo() { var bar = 1; delete bar; }

// Prettier 2.4
SyntaxError: Deleting local variable in strict mode. (1:31)
> 1 | function foo() { var bar = 1; delete bar; }
    |                               ^

// Prettier 2.5
function foo() {
  var bar = 1;
  delete bar;
}

Respektera mellanrum mellan uttryck och parenteser i inbäddad CSS (#11800 by @sosukesuzuki)​

// Input
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.4
const paragraph2 = css`
  transform1: ${expr} (30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.5
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

Stöd för ES2022 class-private-fields-in-syntax i espree-parser (#11835 by @fisker)​

// Example
class Foo {
  #brand;
  static isC(obj) {
    return #brand in Foo;
  }
}

TypeScript​

Ta bort onödiga parenteser för dekoratorer (#11717, #11849 by @sosukesuzuki)​

// Input
class Test {
  @foo`bar`
  test1: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

// Prettier 2.4
class Test {
  @(foo`bar`)
  test: string = "test"

  @(test().x("global").y())
  test2: string = "test";
}

// Prettier 2.5
class Test {
  @foo`bar`
  test: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

SCSS​

Förbättra @use with-formatering (#11637 by @sosukesuzuki)​

// Input
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

// Prettier 2.4
@use "library" with
  ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif");

// Prettier 2.5
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

Rätta formateringsfel för @forward with (#11683 by @sriramarul, @sosukesuzuki)​

// Input
@forward 'foo.scss' with ($components: red);

// Prettier 2.4
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.5
@forward "foo.scss" with (
  $components: red
);

Ember / Handlebars​

Använd motsatt citattyp för citat inuti mustaschuttryck i attribut (#11524 by @bmaehr)​

{{!-- Input --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.5 --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.4 --}}
<div title="{{t "login.username.description"}}" />

Markdown​

Behåll avslutande kommatecken för typparametrar i inbäddad TSX (#11685 by @sosukesuzuki)​

Det avslutande kommatecknet är nödvändigt för att förhindra att TypeScript behandlar <T> som början på ett JSX-uttryck.

<!-- Input  -->
```tsx
const test = <T,>(value: T) => {};
```

<!-- Prettier 2.4 -->
```tsx
const test = <T>(value: T) => {};
```

<!-- Prettier 2.5 -->
```tsx
const test = <T,>(value: T) => {};
```