Zum Hauptinhalt springen

Prettier 2.4: Neue bracketSameLine-Option und TypeScript 4.4-Support!

· 5 Min. Lesezeit
Sosuke Suzuki
Sosuke Suzuki
Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

In diesem Release wurde die Option jsxBracketSameLine in bracketSameLine umbenannt, die nun neben JSX auch HTML, Vue und Angular unterstützt. Der alte Name ist veraltet.

Wir haben außerdem Unterstützung für TypeScript 4.4 hinzugefügt, einschließlich neuer Syntax-Features wie statische Klassenblöcke (static Blocks).

Wenn Ihnen Prettier gefällt und Sie unsere Arbeit unterstützen möchten, erwägen Sie eine direkte Förderung über unser OpenCollective oder durch Unterstützung der Projekte, von denen wir abhängen, darunter typescript-eslint, remark und Babel.

Höhepunkte​

TypeScript​

Unterstützung für TypeScript 4.4 (#11426 von @sosukesuzuki)​

Unterstützung für TypeScript 4.4!

static Blöcke in Klassen​

Die Syntax für statische Klassenblöcke ist ein Stage-4-ECMAScript-Vorschlag. Weitere Details unter https://github.com/tc39/proposal-class-static-block.

// Input
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

// Prettier 2.3
SyntaxError: Declaration expected. (5:9)
  3 |
  4 |   // This is a static block:
> 5 |   static {
    |         ^
  6 |     if (someCondition()) {
  7 |       Foo.count++;
  8 |     }

// Prettier 2.4
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

HTML​

Ersetze jsxBracketSameLine-Option durch bracketSameLine-Option (#11006 von @kurtztech)​

Die jsxBracketSameLine-Option wurde zugunsten der neuen bracketSameLine-Option als veraltet markiert, die für HTML, Angular, Vue und JSX funktioniert.

<!-- Input -->
<div id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">lorem ipsum dolor sit amet</div>

<!-- Prettier 2.3 -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz"
>
  lorem ipsum dolor sit amet
</div>

<!-- Prettier 2.4 -->
<!-- Options: `{bracketSameLine: true}` -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">
  lorem ipsum dolor sit amet
</div>

Weitere Änderungen​

JavaScript​

Unterstützung für geklammerte Tagged Template Literals bei Styled Components (#11246 von @sosukesuzuki)​

// Input
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.3
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.4
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position: fixed;
    color: red;
  `;

Korrekte Zählung von Regex-Literalen in Method-Chaining-Argumenten (#11299 von @sosukesuzuki)​

// Input
foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.3
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.4
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/)
  .foo2(bar)
  .foo3(baz);

Unterstützung für Hack-Style-Pipeline-Vorschlag (#11335 von @sosukesuzuki)​

Die vorgeschlagene Hack-Style-Pipeline-Syntax wird nun von Prettier unterstützt. Wir verwenden % als Topic-Token gemäß der offiziellen Dokumentation – dies könnte sich in zukünftigen Releases ändern, während der Vorschlag weiterentwickelt wird.

Im Zuge dieser Änderung wurde die Unterstützung für die "Smart"-Pipeline-Syntax entfernt. Die Begründung hierfür findet sich in unserer Policy zu nicht standardisierter Syntax.

// Input
const foo = fn() |> fn1(%) |> fn2(%);

// Prettier 2.3
SyntaxError: Unexpected token (1:25)
> 1 | const foo = fn() |> fn1(%) |> fn2(%);
    |                         ^
  2 |

// Prettier 2.4
const foo = fn() |> fn1(%) |> fn(%);

TypeScript​

Korrigiere Formatierung von Intersection Types mit Mapped Types (#11247 von @sosukesuzuki)​

// Input
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

// Prettier 2.3
type Example = {
  [A in B]: T;
} &
  {
    [A in B]: T;
  };

// Prettier 2.4
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

Flow​

Immer ein Semikolon vor Flow-Varianzsymbolen setzen (#11398 von @noppa)​

// Input
class A {
  +one = function() {};
  -two = val();
  +#privOne = val();
  static +#privTwo = val();
}
// Prettier 2.3
class A {
  +one = function() {}
  -two = val()
  +#privOne = val()
  static +#privTwo = val()
}
// Prettier 2.4
class A {
  +one = function() {};
  -two = val();
  +#privOne = val()
  static +#privTwo = val()
}

SCSS​

Strings für Sass-Module konsistent in Anführungszeichen setzen (#11461 von @niksy)​

// Input
@use "sass:math";
@forward "list";

// Prettier 2.3
@use "sass:math";
@forward "list";

// Prettier 2.4
@use 'sass:math';
@forward 'list';

CLI​

Parser für .stylelintrc automatisch ermitteln (#10924 von @SevenOutman)​

Eine .stylelintrc-Datei (ohne Erweiterung) wird mit den Parsern für json und yaml verarbeitet.