Prettier 2.2: nya JavaScript-parserare, TS 4.1 och fristående ESM-paket

20 november 2020 · 17 min att läsa

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 utgåvan stöder nya JavaScript-parserare espree och meriyah, stöder TypeScript 4.1, levererar fristående ESM-paket för moderna webbläsare, och innehåller många buggfixar och förbättringar!

Höjdpunkter

JavaScript

Lägg till `espree`- och `meriyah`-parser (#9000, #9514 av @fisker)

Två nya värden för parser-alternativet har lagts till:

espree - standardparseraren som används av ESLint.

Observera att espree endast fungerar för avslutade ECMAScript-förslag och är striktare än babel-parseraren.
meriyah - En snabb JavaScript-parserare, efterträdare till cherow.

TypeScript

Stöd för TypeScript 4.1 (#9473, #9636 av @sosukesuzuki)

Key Remapping In Mapped Types

// Input
type MappedTypeWithNewKeys<T> = {
  [K in keyof T as NewKeyType]: T[K]
};

// Prettier 2.1
SyntaxError: Unexpected token, expected "]" (2:17)
  1 | type MappedTypeWithNewKeys<T> = {
> 2 |   [K in keyof T as NewKeyType]: T[K]
    |                 ^
  3 | };

// Prettier 2.2
type MappedTypeWithNewKeys<T> = {
  [K in keyof T as NewKeyType]: T[K]
};

Template Literal Types

// Input
type HelloWorld = `Hello, ${keyof World}`

// Prettier 2.1
SyntaxError: Unexpected token, expected "}" (1:35)
> 1 | type HelloWorld = `Hello, ${keyof World}`
    |                                   ^

// Prettier 2.2
type HelloWorld = `Hello, ${keyof World}`;

API

Fristående ESM-paket (#8983 av @Monchi, @fisker)

Prettier finns nu även som ES-moduler som kan användas direkt i moderna webbläsare:

import prettier from "https://unpkg.com/prettier/esm/standalone.mjs";
import parserGraphql from "https://unpkg.com/prettier/esm/parser-graphql.mjs";

prettier.format("query {     }", {
  parser: "graphql",
  plugins: [parserGraphql],
});

Andra ändringar

JavaScript

Respektera mellanrum mellan mallvärden i inbäddad CSS (#9078 av @sosukesuzuki)

// Input
const style = css`
  width: ${size}${sizeUnit};
`;

// Prettier 2.1
const style = css`
  width: ${size} ${sizeUnit};
`;

// Prettier 2.2
const style = css`
  width: ${size}${sizeUnit};
`;

Fixa kommentarer inuti malliteraler med inbäddad syntax (#9278 av @fisker)

// Input
html`${
      foo
  /* comment */
}`;
html`
${
      foo
  /* comment */
}
`;
graphql`${
      foo
  /* comment */
}`;
css`${
      foo
  /* comment */
}`;

// Prettier 2.1
html`${foo}`;
/* comment */
html`
  ${foo}
  /* comment */
`;
graphql`
  ${foo}
  /* comment */
`;
css`
  ${foo}
  /* comment */
`;


// Prettier 2.2
html`${
  foo
  /* comment */
}`;
html`
${
  foo
  /* comment */
}
`;
graphql`${
  foo
  /* comment */
}`;
css`${
  foo
  /* comment */
}`;

Förbättra formateringen för tilldelningar av klasser med långa superklassnamn (#9341 av @sosukesuzuki)

Detta förbättrar formateringen för Google Closure Library-namnområden.

// Input
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends (
  aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1
) {
  method () {
    console.log("foo");
  }
};

// Prettier 2.1
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends aaaaaaaa
  .bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1 {
  method() {
    console.log("foo");
  }
};

// Prettier 2.2
aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg2 = class extends (
  aaaaaaaa.bbbbbbbb.cccccccc.dddddddd.eeeeeeee.ffffffff.gggggggg1
) {
  method() {
    console.log("foo");
  }
};

Fixa placeringen av inledande kommentarer för kroppar av `while`-satser (#9345 av @sosukesuzuki)

// Input
while(1) // Comment
  foo();

// Prettier 2.1
while (
  1 // Comment
)
  foo();

// Prettier 2.2
while (1)
  // Comment
  foo();

Uppdatering till `@babel/parser` 7.12 (#9408, #9476, #9597 av @sosukesuzuki)

JavaScript-parsern har uppdaterats till @babel/parser 7.12. Detta fixar flera buggar och stöder ny syntax.

Stöd för importassertioner

Förslaget "module attributes" som stöddes i 2.1 har ändrats betydligt och bytt namn till "import assertions".

import foo from "./foo.json" assert { type: "json" };

Stöd för import och export med strängnamn

let happy = "happy";
export { happy as "😃" };

Stöd för statiska block i klasser

class C {
  static #x = 42;
  static y;
  static {
    try {
      this.y = doSomethingWith(this.#x);
    } catch {
      this.y = "unknown";
    }
  }
}

Behåll ogiltiga malliteraler i HTML och Markdown oförändrade (#9431 av @fisker)

// Input
foo = html`<div>\u{prettier}</div>`;
foo = html`\u{prettier}${foo}pr\u{0065}ttier`;
foo = markdown`# \u{prettier}\u{0065}`;

// Prettier 2.1
foo = html``;
foo = html`null${foo}prettier`;
foo = markdown`
# \u{prettier}\u{0065}
`;

// Prettier 2.2
foo = html`<div>\u{prettier}</div>`;
foo = html`\u{prettier}${foo}pr\u{0065}ttier`;
foo = markdown`# \u{prettier}\u{0065}`;

Fixa formatering för `import {a as a}` och `export {a as a}` (#9435 av @fisker)

// Input
import { a as a } from "a";
export { b as b } from "b";

// Prettier 2.1
import { a } from "a";
export { b } from "b";

// Prettier 2.2
import { a as a } from "a";
export { b as b } from "b";

Fixa formatering av yieldade JSX-uttryck (#9650 av @brainkim)

// Input
function* f() {
  yield <div>generator</div>
}
// Prettier 2.1
function* f() {
  yield (<div>generator</div>);
}
// Prettier 2.2
function* f() {
  yield <div>generator</div>;
}

Platta till funktionsuttrycksparametrar i omfamnat sista argument (#9662 av @thorn0)

// Prettier 2.1
function* mySagas() {
  yield effects.takeEvery(rexpress.actionTypes.REQUEST_START, function* ({
    id
  }) {
    console.log(id);
    yield rexpress.actions(store).writeHead(id, 400);
    yield rexpress.actions(store).end(id, "pong");
    console.log("pong");
  });
}

// Prettier 2.2
function* mySagas() {
  yield effects.takeEvery(
    rexpress.actionTypes.REQUEST_START,
    function* ({ id }) {
      console.log(id);
      yield rexpress.actions(store).writeHead(id, 400);
      yield rexpress.actions(store).end(id, "pong");
      console.log("pong");
    }
  );
}

Fixa krasch vid `require(/* comment */)` (#9670 av @fisker)

// Input
require(/* comment */)

// Prettier 2.1
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.2
require(/* comment */);

TypeScript

Behåll sista separatorn i ignorerade objekttyper och gränssnitt (#9318 av @sosukesuzuki)

// Input
let x: {
  // prettier-ignore
  y: z;
};

// Prettier 2.1
let x: {
  // prettier-ignore
  y: z;;
};

// Prettier 2.2
let x: {
  // prettier-ignore
  y: z;
};

Lägg till parenteser runt tilldelningar i objektliteralegenskaper (#9484 av @fisker)

// Input
foo = { bar: (a = b) };

// Prettier 2.1
foo = { bar: a = b };

// Prettier 2.2
foo = { bar: (a = b) };

Fixa inkonsekvenser i formatering av typer mellan `typescript` och `flow` (#9521 av @fisker)

// Input
const name: SomeGeneric<
  Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

// Prettier 2.1 (--parser=typescript)
const name: SomeGeneric<Pick<
  Config,
  "ONE_LONG_PROP" | "ANOTHER_LONG_PROP"
>> = null;

// Prettier 2.1 (--parser=flow)
const name: SomeGeneric<
  Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

// Prettier 2.2 (typescript and flow parser)
const name: SomeGeneric<
  Pick<Config, "ONE_LONG_PROP" | "ANOTHER_LONG_PROP">
> = null;

Fixa `prettier-ignore`-ignorerade mappade typer (#9551 av @fisker)

// Input
type a= {
    // prettier-ignore
    [A in B]: C  |  D
  }

// Prettier 2.1
type a = {
  // prettier-ignore
  A in B: C | D;
};

// Prettier 2.2
type a = {
    // prettier-ignore
    [A in B]: C  |  D
  };

Flow

Växla `babel`-parser till `babel-flow` om `@flow`-pragmat hittas (#9071 av @fisker)

I praktiken innebär detta att så länge dina Flow-filer har pragmat, är det säkert att använda .js-tillägg för dem. Prettier kommer korrekt tolka och skriva ut dem utan extra konfiguration. Tidigare kände parsern igen pragmat, men det fanns mindre korrekthetsproblem med utskriften. T.ex. är det inte säkert att avcitationera nummernycklar i Flow.

// Input (with --parser babel)
// @flow
f<T>({ "2": 2 })

// Prettier 2.1
// @flow
f<T>({ 2: 2 });

// Prettier 2.2
// @flow
f<T>({ "2": 2 });

Enumerationer med okända medlemmar (#9432 av @gkz)

Tidigare stöddes detta inte. Nu formateras följande:

// Input
enum E {
  A,
  B,
  ...
}

// Prettier 2.1: parse error

// Prettier 2.2
enum E {
  A,
  B,
  ...
}

Annotationer för `this`-parametrar (#9457 av @dsainati1, #9489 av @fisker)

// Input
function f(this: string, a: number) {
}

type T = (this: boolean, a: number) => boolean;

// Prettier 2.1
function f(this: string, a: number) {}

type T = (a: number) => boolean;

// Prettier 2.2
function f(this: string, a: number) {
}

type T = (this: boolean, a: number) => boolean;

Stöd för `BigIntLiteralTypeAnnotation` och `BigIntTypeAnnotation` (#9523 av @fisker)

Lagt till stöd för BigIntLiteralTypeAnnotation och BigIntTypeAnnotation i Flow.

// Input
const foo: bigint = 1n;
const bar: baz<1n> = 1n;

// Prettier 2.1
Error: unknown type: "BigIntTypeAnnotation"
    at ...

// Prettier 2.2
const foo: bigint = 1n;
const bar: baz<1n> = 1n;

Behandla fler enkla typer som icke-brytande i generiska typannotationer (#9543 av @fisker)

// Input
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<symbol> = a
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<"STRING"> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<0> = a;

// Prettier 2.1
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
  symbol
> = a;
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
  "STRING"
> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<
  0
> = a;

// Prettier 2.2 (typescript and flow parser)
const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<symbol> = a
const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<"STRING"> = a;
const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<0> = a;

Åtgärda saknade parenteser runt `prettier-ignore`ade typomvandlingar (#9553 av @fisker)

// Input
transform(
  // prettier-ignore
  (pointTransformer: (Point => Point))
);

// Prettier 2.1
transform(
  // prettier-ignore
  pointTransformer: (Point => Point)
);

// Prettier 2.2
transform(
  // prettier-ignore
  (pointTransformer: (Point => Point))
);

Förbättra identifiering av kommentarstyper (#9563 av @fisker)

// Input
foo/*::<bar>*/(baz);
class Foo {
  bar( data: Array<string>) {}
}

// Prettier 2.1
foo/*:: <bar> */(baz);
class Foo {
  bar(data: Array/*:: <string> */) {}
}

// Prettier 2.2
foo/*:: <bar> */(baz);
class Foo {
  bar(data: Array<string>) {}
}

Less

Åtgärda kommentarer i värdelistor (#9356 av @thorn0)

// Input
@test-space-separated: #aaaaaa // Start with A
  #bbbbbb // then some B
  #cccccc; // and round it out with C

// Prettier 2.1
@test-space-separated: #aaaaaa a // Start with
  #bbbbbb b // then some
  #cccccc; // and round it out with C

// Prettier 2.2
@test-space-separated: #aaaaaa // Start with A
  #bbbbbb // then some B
  #cccccc; // and round it out with C

HTML

Åtgärda krasch vid läsning av `Node.sourceSpan` (#9368 av @fisker)

<!-- Input -->
<strong>a</strong>-<strong>b</strong>-

<!-- Prettier 2.1 -->
TypeError: Cannot read property 'line' of undefined
    at forceNextEmptyLine ...

<!-- Prettier 2.2 -->
<strong>a</strong>-<strong>b</strong>-

Vue

Åtgärda inkonsekvent formatering av `v-for` (#9225 av @zweimach)

<!-- Input -->
<template>
  <div
    v-for="({ longLongProp=42, anotherLongLongProp='Hello, World!' }, index) of longLongLongLongLongLongLongLongList"
  ></div>
  <div
    v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue, sixthValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
  ></div>
</template>

<!-- Prettier 2.1 -->
<template>
  <div
    v-for="({ longLongProp = 42, anotherLongLongProp = 'Hello, World!' },
    index) of longLongLongLongLongLongLongLongList"
  ></div>
  <div
    v-for="({
      firstValue,
      secondValue,
      thirdValue,
      fourthValue,
      fifthValue,
      sixthValue,
    },
    objectKey,
    index) in objectWithAVeryVeryVeryVeryLongName"
  ></div>
</template>

<!-- Prettier 2.2 -->
<template>
  <div
    v-for="(
      { longLongProp = 42, anotherLongLongProp = 'Hello, World!' }, index
    ) of longLongLongLongLongLongLongLongList"
  ></div>
  <div
    v-for="(
      {
        firstValue,
        secondValue,
        thirdValue,
        fourthValue,
        fifthValue,
        sixthValue,
      },
      objectKey,
      index
    ) in objectWithAVeryVeryVeryVeryLongName"
  ></div>
</template>

Åtgärda inkonsekvent formatering av slots, stöd för Vue 3 `script[setup]` och `style[vars]` (#9609 av @fisker)

<!-- Input -->
<script setup="props, {emit }"></script>
<style vars="{color }"></style>
<template>
  <div>
<div v-slot="{destructuring:{   a:{b}}}"/>
<div v-slot:name="{destructuring:{   a:{b}}}"/>
<div #default="{destructuring:{   a:{b}}}"/>
<slot slot-scope="{destructuring:{   a:{b}}}"/>
</div>
</template>

<!-- Prettier 2.1 -->
<script setup="props, {emit }"></script>
<style vars="{color }"></style>
<template>
  <div>
    <div v-slot="{ destructuring: { a: { b } } }" />
    <div v-slot:name="{ destructuring: { a: { b } } }" />
    <div #default="{ destructuring: { a: { b } } }" />
    <slot
      slot-scope="{
        destructuring: {
          a: { b },
        },
      }"
    />
  </div>
</template>

<!-- Prettier 2.2 -->
<script setup="props, { emit }"></script>
<style vars="{ color }"></style>
<template>
  <div>
    <div
      v-slot="{
        destructuring: {
          a: { b },
        },
      }"
    />
    <div
      v-slot:name="{
        destructuring: {
          a: { b },
        },
      }"
    />
    <div
      #default="{
        destructuring: {
          a: { b },
        },
      }"
    />
    <slot
      slot-scope="{
        destructuring: {
          a: { b },
        },
      }"
    />
  </div>
</template>

Handlebars (alfa)

Åtgärda instabila radbyten efter `<Textarea />` (#9403 av @fisker, fixar i `simple-html-tokenizer` av @rwjblue)

// Input
<Textarea />
{{#if true}}
  Test
{{/if}}

// Prettier 2.1
<Textarea />

{{#if true}}
  Test
{{/if}}

// Prettier 2.1 (second format)
<Textarea />
{{#if true}}
  Test
{{/if}}

// Prettier 2.2
<Textarea />
{{#if true}}
  Test
{{/if}}

Markdown

Uppdatera remark-math till 3.0.1; escape dollartecken endast om ursprungligen escaped (#7938 av @fisker och @thorn0)

<!-- Input -->
Paragraph with $14 million.

Paragraph with $14 million.    But if more $dollars on the same line...

<!-- Prettier 2.1 -->
Paragraph with \$14 million.

Paragraph with $14 million.    But if more $dollars on the same line...

<!-- Prettier 2.2 -->
Paragraph with $14 million.

Paragraph with $14 million. But if more $dollars on the same line...

Åtgärda saknade tomma rader i avgränsade kodblock utan avslutande gräns (#8786 av @fisker)

require("prettier").format("```a\n\n\n\n", { parser: "markdown" });

<!-- Prettier 2.1 -->
'```a\n\n```\n'

<!-- Prettier 2.2 -->
'```a\n\n\n\n```\n'

Lägg till stöd för `[[wiki-style]]`-länkar (#9275 av @iamrecursion)

Stöd för [[wiki-style]]-länkar säkerställer att de inte bryts sönder av Prettiers formatering genom att delas upp på flera rader.
Länkinnehållet (mellan [[]]-hakparenteserna) behandlas som råtext. Anledningen är att olika verktyg som använder [[]]-syntaxen inte är överens om vad som är tillåtet mellan dem.

<!-- Input -->
If I have a prose that forces a wiki link to end up crossing the [[line width limit]] like this. It's wrapped into an invalid state.

<!-- Prettier 2.1 -->
If I have a prose that forces a wiki link to end up crossing the [[line width
limit]] like this. It's wrapped into an invalid state.

<!-- Prettier 2.2 -->
If I have a prose that forces a wiki link to end up crossing the
[[line width limit]] like this. It's wrapped into an invalid state.

Justera språkdetektering för kodblock med andra populära verktyg (#9365 by @kachkaev)

Sedan Prettier 1.12 har kodblock som börjar med ```js {something=something} detekterats som JavaScript och formaterats därefter. Tidigare använde få verktyg mellanslag för att separera språk från metadata, så beslutet togs att göra mellanslag frivilligt och därmed även detektera ```js{something=something} som JavaScript.

Med lanseringen av Remark v8 (som används av Prettier) blev språkdetektering och formatering av kodblock inkonsekventa i flera sällsynta edge cases. Dessutom upptäcktes att Prettiers formateringsbeteende stämde inte överens med syntaxmarkering i VSCode. För att främja enhetlighet mellan verktyg och bättre anpassning till Commonmark-specifikationen blev mellanslag mellan språknamn och metadata obligatoriskt.

<!-- Input -->
```js {something=something}
console.log    (    "hello world"    );
```

```js{something=something}
console.log    (    "hello world"    );
```

<!-- Prettier 2.1 -->
```js {something=something}
console.log("hello world");
```

```js{something=something}
console.log("hello world");
```

<!-- Prettier 2.2 -->
```js {something=something}
console.log("hello world");
```

```js{something=something}
console.log    (    "hello world"    );
```

Åtgärda extra tom rad efter tom tabell (#9654 by @fisker)

<!-- Input -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |

Test line 6

<!-- Prettier 2.1 -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |


Test line 6

<!-- Prettier 2.2 -->
Test line 1

| Specify the selected option : | Option 1 |
| ----------------------------- | -------- |

Test line 6

MDX

Åtgärda extra tomma rader i JSX (#9267 by @fisker)

<!-- Input -->
# title

<Jsx>

text

</Jsx>

<!-- Prettier 2.1 -->
# title

<Jsx>

text

</Jsx>

(Extra empty lines added after `<Jsx>` and `</Jsx>`)

<!-- Prettier 2.2 -->
# title

<Jsx>

text

</Jsx>

YAML

Applicera `trailingComma`-alternativet (#9665 by @fisker)

När --trailing-comma=none används ska inte efterföljande komma läggas till i flowMapping och flowSequence.

# Input
flow-mapping:
  {
    "object-does-not-fit-within-print-width": "------",
    "TEST": "comma IS added here"
  }
flow-sequence:
  [
    "object-does-not-fit-within-print-width", "------",
    "TEST", "comma IS added here"
  ]

# Prettier 2.1
mapping:
  {
    "object-does-not-fit-within-print-width": "------",
    "TEST": "comma IS added here",
  }
flow-sequence:
  [
    "object-does-not-fit-within-print-width",
    "------",
    "TEST",
    "comma IS added here",
  ]

# Prettier 2.2
flow-mapping:
  {
    "object-does-not-fit-within-print-width": "------",
    "TEST": "comma IS added here"
  }
flow-sequence:
  [
    "object-does-not-fit-within-print-width",
    "------",
    "TEST",
    "comma IS added here"
  ]

Åtgärda kommentarer inom `flowMapping` och `flowSequence` (#9669 by @fisker)

# Input
a:
  [
    a, b,
    # comment
  ]

b:
  # prettier-ignore
  {
    a: 1, b: 2,
    # comment
  }

# Prettier 2.1
a: [a, b]
  # comment

b:
  # prettier-ignore
  {
    a: 1, b: 2,
    # comment
  }
  # comment


# Prettier 2.1 (second format)
a:
  [a, b]
  # comment

b:
  # prettier-ignore
  {
    a: 1, b: 2,
    # comment
  }
  # comment
  # comment


# Prettier 2.2
a: [
    a,
    b,
    # comment
  ]

b:
  # prettier-ignore
  {
    a: 1, b: 2,
    # comment
  }

API

Sluta anta att parsern är `json` för `.jsonl`-filer (#9371 by @fisker)

// Prettier 2.1
$ prettier --check .
Checking formatting...
[error] bad.jsonl: SyntaxError: Unexpected token (2:1)
[error]   1 | '{"type": "t/f", "head": "England", "relation": "invaded", "tail": "United States"}'
[error] > 2 | '{"type": "t/f", "head": "England", "relation": "attacked", "tail": "Baltimore"}'
[error]     | ^
[error]   3 |
All matched files use Prettier code style!

// Prettier 2.2
$ prettier --check .
Checking formatting...
All matched files use Prettier code style!

Töm line-suffix-innehåll vid dokumentets slut (#9703 by @dangmai)

Prettier tömde inte line-suffix-innehåll vid dokumentets slut när saknad avslutande nyrad. Denna fix tvingar ut allt sådant innehåll även utan avslutande nyrader.

CLI

Flytta pre-commit-stöd till github.com/pre-commit/mirrors-prettier (#8937 by @FloChehab)

Stödet för pre-commit har flyttats till https://github.com/pre-commit/mirrors-prettier, uppdatera din .pre-commit-config.yaml-fil.

- - repo: https://github.com/prettier/prettier
+ - repo: https://github.com/pre-commit/mirrors-prettier
-   rev: "2.2.0"
+   rev: "v2.2.0"
    hooks:
     - id: prettier

Fixat: fel vid hantering av kataloger och filer med numeriska namn (#9298 av @fisker)

$ cat 1/index.js
hello('world')

// Prettier 2.1
$ prettier 1
[error] The "path" argument must be of type string. Received type number (1)

// Prettier 2.2
$ prettier 1
hello("world");

Höjdpunkter​

JavaScript​

Lägg till espree- och meriyah-parser (#9000, #9514 av @fisker)​

TypeScript​

Stöd för TypeScript 4.1 (#9473, #9636 av @sosukesuzuki)​

Key Remapping In Mapped Types​

Template Literal Types​

API​

Fristående ESM-paket (#8983 av @Monchi, @fisker)​

Andra ändringar​

JavaScript​

Respektera mellanrum mellan mallvärden i inbäddad CSS (#9078 av @sosukesuzuki)​

Fixa kommentarer inuti malliteraler med inbäddad syntax (#9278 av @fisker)​

Förbättra formateringen för tilldelningar av klasser med långa superklassnamn (#9341 av @sosukesuzuki)​

Fixa placeringen av inledande kommentarer för kroppar av while-satser (#9345 av @sosukesuzuki)​

Uppdatering till @babel/parser 7.12 (#9408, #9476, #9597 av @sosukesuzuki)​

Stöd för importassertioner​

Stöd för import och export med strängnamn​

Stöd för statiska block i klasser​

Behåll ogiltiga malliteraler i HTML och Markdown oförändrade (#9431 av @fisker)​

Fixa formatering för import {a as a} och export {a as a} (#9435 av @fisker)​

Fixa formatering av yieldade JSX-uttryck (#9650 av @brainkim)​

Platta till funktionsuttrycksparametrar i omfamnat sista argument (#9662 av @thorn0)​

Fixa krasch vid require(/* comment */) (#9670 av @fisker)​

TypeScript​

Behåll sista separatorn i ignorerade objekttyper och gränssnitt (#9318 av @sosukesuzuki)​

Lägg till parenteser runt tilldelningar i objektliteralegenskaper (#9484 av @fisker)​

Fixa inkonsekvenser i formatering av typer mellan typescript och flow (#9521 av @fisker)​

Fixa prettier-ignore-ignorerade mappade typer (#9551 av @fisker)​

Flow​

Växla babel-parser till babel-flow om @flow-pragmat hittas (#9071 av @fisker)​

Enumerationer med okända medlemmar (#9432 av @gkz)​

Annotationer för this-parametrar (#9457 av @dsainati1, #9489 av @fisker)​

Stöd för BigIntLiteralTypeAnnotation och BigIntTypeAnnotation (#9523 av @fisker)​

Behandla fler enkla typer som icke-brytande i generiska typannotationer (#9543 av @fisker)​

Åtgärda saknade parenteser runt prettier-ignoreade typomvandlingar (#9553 av @fisker)​

Förbättra identifiering av kommentarstyper (#9563 av @fisker)​

Less​

Åtgärda kommentarer i värdelistor (#9356 av @thorn0)​

HTML​

Åtgärda krasch vid läsning av Node.sourceSpan (#9368 av @fisker)​

Vue​

Åtgärda inkonsekvent formatering av v-for (#9225 av @zweimach)​

Åtgärda inkonsekvent formatering av slots, stöd för Vue 3 script[setup] och style[vars] (#9609 av @fisker)​

Handlebars (alfa)​

Åtgärda instabila radbyten efter <Textarea /> (#9403 av @fisker, fixar i simple-html-tokenizer av @rwjblue)​

Markdown​

Uppdatera remark-math till 3.0.1; escape dollartecken endast om ursprungligen escaped (#7938 av @fisker och @thorn0)​

Åtgärda saknade tomma rader i avgränsade kodblock utan avslutande gräns (#8786 av @fisker)​

Lägg till stöd för [[wiki-style]]-länkar (#9275 av @iamrecursion)​

Justera språkdetektering för kodblock med andra populära verktyg (#9365 by @kachkaev)​

Åtgärda extra tom rad efter tom tabell (#9654 by @fisker)​

MDX​

Åtgärda extra tomma rader i JSX (#9267 by @fisker)​

YAML​

Applicera trailingComma-alternativet (#9665 by @fisker)​

Åtgärda kommentarer inom flowMapping och flowSequence (#9669 by @fisker)​

API​

Sluta anta att parsern är json för .jsonl-filer (#9371 by @fisker)​

Töm line-suffix-innehåll vid dokumentets slut (#9703 by @dangmai)​

CLI​

Flytta pre-commit-stöd till github.com/pre-commit/mirrors-prettier (#8937 by @FloChehab)​

Fixat: fel vid hantering av kataloger och filer med numeriska namn (#9298 av @fisker)​

Höjdpunkter

JavaScript

Lägg till `espree`- och `meriyah`-parser (#9000, #9514 av @fisker)

TypeScript

Stöd för TypeScript 4.1 (#9473, #9636 av @sosukesuzuki)

Key Remapping In Mapped Types

Template Literal Types

API

Fristående ESM-paket (#8983 av @Monchi, @fisker)

Andra ändringar

JavaScript

Respektera mellanrum mellan mallvärden i inbäddad CSS (#9078 av @sosukesuzuki)

Fixa kommentarer inuti malliteraler med inbäddad syntax (#9278 av @fisker)

Förbättra formateringen för tilldelningar av klasser med långa superklassnamn (#9341 av @sosukesuzuki)

Fixa placeringen av inledande kommentarer för kroppar av `while`-satser (#9345 av @sosukesuzuki)

Uppdatering till `@babel/parser` 7.12 (#9408, #9476, #9597 av @sosukesuzuki)

Stöd för importassertioner

Stöd för import och export med strängnamn

Stöd för statiska block i klasser

Behåll ogiltiga malliteraler i HTML och Markdown oförändrade (#9431 av @fisker)

Fixa formatering för `import {a as a}` och `export {a as a}` (#9435 av @fisker)

Fixa formatering av yieldade JSX-uttryck (#9650 av @brainkim)

Platta till funktionsuttrycksparametrar i omfamnat sista argument (#9662 av @thorn0)

Fixa krasch vid `require(/* comment */)` (#9670 av @fisker)

TypeScript

Behåll sista separatorn i ignorerade objekttyper och gränssnitt (#9318 av @sosukesuzuki)

Lägg till parenteser runt tilldelningar i objektliteralegenskaper (#9484 av @fisker)

Fixa inkonsekvenser i formatering av typer mellan `typescript` och `flow` (#9521 av @fisker)

Fixa `prettier-ignore`-ignorerade mappade typer (#9551 av @fisker)

Flow

Växla `babel`-parser till `babel-flow` om `@flow`-pragmat hittas (#9071 av @fisker)

Enumerationer med okända medlemmar (#9432 av @gkz)

Annotationer för `this`-parametrar (#9457 av @dsainati1, #9489 av @fisker)

Stöd för `BigIntLiteralTypeAnnotation` och `BigIntTypeAnnotation` (#9523 av @fisker)

Behandla fler enkla typer som icke-brytande i generiska typannotationer (#9543 av @fisker)

Åtgärda saknade parenteser runt `prettier-ignore`ade typomvandlingar (#9553 av @fisker)

Förbättra identifiering av kommentarstyper (#9563 av @fisker)

Less

Åtgärda kommentarer i värdelistor (#9356 av @thorn0)

HTML

Åtgärda krasch vid läsning av `Node.sourceSpan` (#9368 av @fisker)

Vue

Åtgärda inkonsekvent formatering av `v-for` (#9225 av @zweimach)

Åtgärda inkonsekvent formatering av slots, stöd för Vue 3 `script[setup]` och `style[vars]` (#9609 av @fisker)

Handlebars (alfa)

Åtgärda instabila radbyten efter `<Textarea />` (#9403 av @fisker, fixar i `simple-html-tokenizer` av @rwjblue)

Markdown

Uppdatera remark-math till 3.0.1; escape dollartecken endast om ursprungligen escaped (#7938 av @fisker och @thorn0)

Åtgärda saknade tomma rader i avgränsade kodblock utan avslutande gräns (#8786 av @fisker)

Lägg till stöd för `[[wiki-style]]`-länkar (#9275 av @iamrecursion)

Justera språkdetektering för kodblock med andra populära verktyg (#9365 by @kachkaev)

Åtgärda extra tom rad efter tom tabell (#9654 by @fisker)

MDX

Åtgärda extra tomma rader i JSX (#9267 by @fisker)

YAML

Applicera `trailingComma`-alternativet (#9665 by @fisker)

Åtgärda kommentarer inom `flowMapping` och `flowSequence` (#9669 by @fisker)

API

Sluta anta att parsern är `json` för `.jsonl`-filer (#9371 by @fisker)

Töm line-suffix-innehåll vid dokumentets slut (#9703 by @dangmai)

CLI

Flytta pre-commit-stöd till github.com/pre-commit/mirrors-prettier (#8937 by @FloChehab)

Fixat: fel vid hantering av kataloger och filer med numeriska namn (#9298 av @fisker)