Hoppa till huvudinnehållet

Prettier 2.4: nytt bracketSameLine-alternativ och stöd för TypeScript 4.4!

· 5 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 byter namn på alternativet jsxBracketSameLine till bracketSameLine, som nu stöder HTML, Vue och Angular utöver JSX. Det gamla namnet är nu föråldrat.

Vi har också lagt till stöd för TypeScript 4.4, inklusive nya syntaxfunktioner som klassens static block.

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​

Stöd för TypeScript 4.4 (#11426 av @sosukesuzuki)​

Stöd för TypeScript 4.4!

static-block i klasser​

Syntaxen för statiska klassblock är ett ECMAScript-förslag i Stadium 4. Se https://github.com/tc39/proposal-class-static-block för mer information.

// 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​

Ersätt jsxBracketSameLine-alternativet med bracketSameLine-alternativet (#11006 av @kurtztech)​

Föråldra jsxBracketSameLine-alternativet till förmån för det nya bracketSameLine-alternativet som fungerar för HTML, Angular, Vue och JSX.

<!-- 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>

Andra ändringar​

JavaScript​

Stöd för parenteserade taggade malliteraler för styled components (#11246 av @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;
  `;

Räkna regex-literaler korrekt i metodkedje-argument (#11299 av @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);

Stöd för hack-style pipeline-förslag (#11335 av @sosukesuzuki)​

Det föreslagna hack-style pipeline-syntaxen stöds nu av Prettier. Vi använder % som ämnestoken enligt den officiella förklaringen – detta kan dock komma att ändras i framtida versioner när förslaget utvecklas.

Som del av denna ändring har stödet för ”smart” pipeline-syntax tagits bort. Se vår policy för icke-standardiserad syntax för motiveringen bakom detta beslut.

// 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​

Åtgärda formatering av snittyper som inkluderar mappade typer (#11247 av @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​

Placera alltid semikolon före Flow-varianssymboler (#11398 av @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​

Konsekvent användning av citattecken för strängar i Sass-moduler (#11461 by @niksy)​

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

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

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

CLI​

Härled parser för .stylelintrc (#10924 by @SevenOutman)​

En .stylelintrc-fil (utan filändelse) hanteras med hjälp av json- och yaml-parsers.