prettier

diff

Markdown: Fix text with $ been incorrectly parsed as math syntax (#20140 by @fisker)

<!-- prettier-ignore -->

<!-- Input -->
**Uses $FOO** from `a.sh` and `b.sh`, plus `$BAR` from `c.sh`, before anything else runs here.

<!-- Prettier 3.9.8 -->
**Uses $FOO** from `a.sh` and `b.sh`, plus `$BAR`from`c.sh`, before anything else runs here.

<!-- Prettier 3.9.9 -->
**Uses $FOO** from `a.sh` and `b.sh`, plus `$BAR` from `c.sh`, before anything else runs here.

diff

Markdown: Don't let Liquid objects interrupt paragraphs (#20087 by @seiyab)

<!-- prettier-ignore -->

<!-- Input -->
If `module` is not a [`WebAssembly.Module`](/en-US/docs/WebAssembly/Reference/JavaScript_interface/Module) object instance, a
{{jsxref("TypeError")}} is thrown.

<!-- Prettier 3.9.7 -->
If `module` is not a [`WebAssembly.Module`](/en-US/docs/WebAssembly/Reference/JavaScript_interface/Module) object instance, a

{{jsxref("TypeError")}} is thrown.

<!-- Prettier 3.9.8 -->
If `module` is not a [`WebAssembly.Module`](/en-US/docs/WebAssembly/Reference/JavaScript_interface/Module) object instance, a
{{jsxref("TypeError")}} is thrown.

diff

Markdown: Prevent indentation drift in list-item code blocks (#19647, #19990 by @Austin1serb, @giaBaoJS)

<!-- prettier-ignore -->

<!-- Input -->
- [x] short first line.

      second paragraph at six spaces that wraps
      onto another line here.

<!-- Prettier 3.9.6 -->
- [x] short first line.

      second paragraph at six spaces that wraps
          onto another line here.

<!-- Prettier 3.9.7 -->
- [x] short first line.

      second paragraph at six spaces that wraps
      onto another line here.

JavaScript: Fix embedded template literal idempotency (#19725 by @fisker)

<!-- prettier-ignore -->

// Input
const foo = html`
            <div>${getText({
            value,
            })}</div>
`;

// Prettier 3.9.6 (first format)
const foo = html`
  <div>
    ${getText({
              value,
            })}
  </div>
`;

// Prettier 3.9.6 (second format)
const foo = html`
  <div>
    ${getText({
      value,
    })}
  </div>
`;

// Prettier 3.9.7
const foo = html`
  <div>
    ${getText({
      value,
    })}
  </div>
`;

Markdown: Preserve Liquid blocks after Markdown tables (#19730 by @wanxiankai, @seiyab)

<!-- prettier-ignore -->

<!-- Input -->
| Argument | Type |
| -------- | ---- |
{% set default_params = {
    "model": ["str"],
} %}

<!-- Prettier 3.9.6 -->
| Argument                  | Type |
| ------------------------- | ---- |
| {% set default_params = { |

    "model": ["str"],

} %}

<!-- Prettier 3.9.7 -->
| Argument | Type |
| -------- | ---- |
{% set default_params = {
    "model": ["str"],
} %}

Markdown: Preserve single tildes in Markdown (#19739 by @lazerg)

Since 3.9.0, single-tilde spans like H~2~O were rewritten to double tildes, turning subscript syntax into strike-through. Only double tildes are treated that way now, matching GitHub.

<!-- prettier-ignore -->

<!-- Input -->
H~2~O

<!-- Prettier 3.9.6 -->
H~~2~~O

<!-- Prettier 3.9.7 -->
H~2~O

Markdown: Fix Markdown blockquote containing > characters (#19802 by @seiyab)

<!-- prettier-ignore -->

<!-- Input -->
> **test**\>

<!-- Prettier 3.9.6 -->
> **test**>\>

<!-- Prettier 3.9.7 -->
> **test**\>

Markdown: Strip blockquote markers from a setext heading's continuation lines (#19878 by @Kjubikstronk)

A setext heading spanning multiple lines inside a blockquote kept the > marker of its continuation lines as literal text.

<!-- prettier-ignore -->

<!-- Input -->
> Multi
> Line
> ===

<!-- Prettier 3.9.6 -->
> Multi > Line
> ===

<!-- Prettier 3.9.7 -->
> Multi
> Line
> ===

Markdown: Fix HTML block indentation drift in markdown list items (#19987 by @lazerg)

<!-- prettier-ignore -->

<!-- Input -->
1. Enable images:

    <p align="center">
      <img alt="example">
    </p>

<!-- Prettier 3.9.6 (--tab-width=4) -->
1. Enable images:

     <p align="center">
       <img alt="example">
     </p>

<!-- Prettier 3.9.7 (--tab-width=4) -->
1. Enable images:

    <p align="center">
      <img alt="example">
    </p>

Angular: Support @boundary error boundaries (#20014 by @Yahiro025)

<!-- prettier-ignore -->

<!-- Input -->
@boundary {
<complex-chart [data]="data"/>
}
@error (let err) {
<p>{{err.message}}</p>
}

<!-- Prettier 3.9.6 -->
SyntaxError: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (6:1)

<!-- Prettier 3.9.7 -->
@boundary {
  <complex-chart [data]="data" />
} @error (let err) {
  <p>{{ err.message }}</p>
}

diff

TypeScript: Preserve quotes for methods named new (#19621 by @kovsu)

<!-- prettier-ignore -->

// Input
interface Container {
  "new"(id: string): number;
}

// Prettier 3.9.5
interface Container {
  new(id: string): number;
}

// Prettier 3.9.6
interface Container {
  "new"(id: string): number;
}

TypeScript: Support import defer (#19624, #19675 by @fisker)

<!-- prettier-ignore -->

// Input
import defer * as foo from "foo";

// Prettier 3.9.5
import * as foo from "foo";

// Prettier 3.9.6
import defer * as foo from "foo";

JavaScript: Added a new official plugin @prettier/plugin-yuku (#19628, #19629 by @fisker)

@prettier/plugin-yuku is powered by Yuku (A high-performance JavaScript/TypeScript compiler toolchain written in Zig).

This plugin includes two new parsers: yuku (JavaScript syntax) and yuku-ts (TypeScript syntax).

To use this plugin:

1. Install the plugin:

   yarn add --dev prettier @prettier/plugin-yuku
   

2. Add it to your .prettierrc:

   plugins:
     - "@prettier/plugin-yuku"
   

Due to package size limitations, this plugin is not bundled with the main prettier package and must be installed separately.

For more information, check the package homepage.

Big thanks to @arshad-yaseen for his excellent work.

diff

Markdown: Cap ordered list mark at 999,999,999 (#19351 by @tats-u)

CommonMark parsers only support ordered list item numbers up to 999,999,999.

With this change, Prettier now caps the ordered list item number at 999,999,999 to ensure that the output is correctly parsed as an ordered list by CommonMark parsers. Numbers larger than 999,999,999 are not parsed as list item numbers and are left unchanged in the output:

<!-- prettier-ignore -->

<!-- Input -->
999999998. text
999999998. text
999999998. text
999999998. text

1234567890123456789012) text

<!-- Prettier 3.9.4 -->
999999998. text
999999999. text
1000000000. text
1000000001. text

1234567890123456789012) text

<!-- Prettier 3.9.5 -->
999999998. text
999999999. text
999999999. text
999999999. text

1234567890123456789012) text

Markdown: Avoid corrupting empty link with title (#19487 by @andersk)

Do not remove <> from an inline link or image with an empty URL and a title, as this removal would change its interpretation.

<!-- prettier-ignore -->

<!-- Input -->
[link](<> "title")

<!-- Prettier 3.9.4 -->
[link]( "title")

<!-- Prettier 3.9.5 -->
[link](<> "title")

Less: Remove extra spaces after [ in map lookups (#19503 by @kovsu)

<!-- prettier-ignore -->

// Input
.foo {
  color: #theme[ primary];
  color: #theme[@name];
  color: #theme[@@name];
}

// Prettier 3.9.4
.foo {
  color: #theme[ primary];
  color: #theme[ @name];
  color: #theme[ @@name];
}

// Prettier 3.9.5
.foo {
  color: #theme[primary];
  color: #theme[@name];
  color: #theme[@@name];
}

CSS: Prevent addition space in type() with + (#19516 by @bigandy)

This fixes the addition space before + in CSS type() declaration. For example type(<number>+) was being converted into type(<number> +) which is invalid CSS and does not work.

<!-- prettier-ignore -->

/* Input */
div {
  border-radius: attr(br type(<length>+));
}

/* Prettier 3.9.4 */
div {
  border-radius: attr(br type(<length> +));
}

/* Prettier 3.9.5 */
div {
  border-radius: attr(br type(<length>+));
}

Less: Remove spaces between merge markers and colons (#19517 by @kovsu)

<!-- prettier-ignore -->

// Input
a {
  box-shadow  +  : 0 0 1px #000;
}

// Prettier 3.9.4
a {
  box-shadow+  : 0 0 1px #000;
}

// Prettier 3.9.5
a {
  box-shadow+: 0 0 1px #000;
}

Markdown: Preserve wiki links with aliases (#19527 by @kovsu)

<!-- prettier-ignore -->

<!-- Input -->
[[Foo:Bar]]

<!-- Prettier 3.9.4 -->
[[Foo]]

<!-- Prettier 3.9.5 -->
[[Foo:Bar]]

TypeScript: Fix comments being dropped on shorthand type import/export specifiers (#19565 by @kirkwaiblinger)

<!-- prettier-ignore -->

// Input
export { type /* comment */ T } from "foo";
import { type /* comment */ T } from "foo";

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

// Prettier 3.9.5
export { type /* comment */ T } from "foo";
import { type /* comment */ T } from "foo";

Miscellaneous: Preserving comments' placement property (#19567 by @Janther)

Prettier@3.9.0 deleted an undocumented property on comments, which was already used by plugins, comment.placement is now available again after comment attach.

Flow: Stop enforcing empty module declaration to break (#19568 by @fisker)

<!-- prettier-ignore -->

// Input
declare module "foo" {}

// Prettier 3.9.4
declare module "foo" {
}

// Prettier 3.9.5
declare module "foo" {}

Angular: Support expression for exhaustive typechecking (#19571 by @fisker)

<!-- prettier-ignore -->

<!-- Input -->
@switch (state.mode) {
  @default never(state);
}

<!-- Prettier 3.9.4 -->
@switch (state.mode) {
  @default never;
}

<!-- Prettier 3.9.5 -->
@switch (state.mode) {
  @default never(state);
}

TypeScript: Ignore comments inside mapped type when checking type parameter comments (#19572 by @fisker)

<!-- prettier-ignore -->

// Input
foo<{
  // comment
  [key in keyof Foo]: number
}>();

// Prettier 3.9.4
foo<
  {
    // comment
    [key in keyof Foo]: number;
  }
>();

// Prettier 3.9.5
foo<{
  // comment
  [key in keyof Foo]: number;
}>();

Less: Fix adjacent block comments being corrupted (#19574 by @kovsu)

<!-- prettier-ignore -->

// Input
/* a *//* b */
/* a */* {
  color: red;
}

// Prettier 3.9.4
/* a */
/* b */
/* a * {
  color: red;
}

// Prettier 3.9.5
/* a */ /* b */
/* a */
* {
  color: red;
}

JavaScript: Handle dangling comments in SwitchStatement (#19581 by @fisker)

<!-- prettier-ignore -->

// Input
switch (foo) {
 // comment
}

// Prettier 3.9.4
switch (
  foo
  // comment
) {
}

// Prettier 3.9.5
switch (foo) {
  // comment
}

TypeScript: Remove space in comment-only object type (#19583 by @fisker)

<!-- prettier-ignore -->

// Input
var foo = {
  /* comment */
};
type Foo = {
  /* comment */
};

// Prettier 3.9.4
var foo = {/* comment */};
type Foo = { /* comment */ };

// Prettier 3.9.5
var foo = {/* comment */};
type Foo = {/* comment */};

diff

Angular: Format @content(name) -> @content (name) to align with other block syntax (#19499 by @fisker)

<!-- prettier-ignore -->

<!-- Input -->
<FancyButton [label]="title">
  @content (icon) {
    <span>Icon!</span>
  }
  @content (description) {
    <span>Description text</span>
  }
  <span>Other children</span>
</FancyButton>

<!-- Prettier 3.9.3 -->
<FancyButton [label]="title">
  @content(icon) {
    <span>Icon!</span>
  }
  @content(description) {
    <span>Description text</span>
  }
  <span>Other children</span>
</FancyButton>

<!-- Prettier 3.9.4 -->
<FancyButton [label]="title">
  @content (icon) {
    <span>Icon!</span>
  }
  @content (description) {
    <span>Description text</span>
  }
  <span>Other children</span>
</FancyButton>

diff

Markdown: Fix unexpected removal of characters in liquid syntax (#19489 by @seiyab)

<!-- prettier-ignore -->

// Input
<!-- Input -->
{{ page.title
}} text

<!-- Prettier 3.9.1 -->
{{ page.title
 text

<!-- Prettier 3.9.3 -->
{{ page.title
}} text

TypeScript: Allow decorators to be used with declare on class fields (#19492 by @evoactivity)

Extensively used within the Ember ecosystem, decorators with declare on class fields will ignore the babel parser error and allow Prettier to format the code without breaking it.

<!-- prettier-ignore -->

// Input
export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
  @service declare server: ServerService;
}

// Prettier 3.9.1
// SyntaxError: Decorators can't be used with a declare field. (2:3)
//  1 | export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
//> 2 |   @service declare server: ServerService;
//    |   ^
//  3 | }

// Prettier 3.9.3
export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
  @service declare server: ServerService;
}

diff

CLI: Fix ignored file has been cached incorrectly (#19483 by @kovsu)

Bug details https://github.com/prettier/prettier/issues/18016

diff

🔗 Release Notes

diff

Flow: Support readonly as a variance annotation (#19022 by @marcoww6)

Flow now accepts readonly as a property variance annotation, equivalent to + (covariant/read-only).

<!-- prettier-ignore -->

// Input
type T = {
  readonly foo: string,
};

// Prettier 3.8.4
SyntaxError

// Prettier 3.8.5
type T = {
  readonly foo: string,
};

diff

Markdown: Fix blank lines between list items and nested sub-lists being removed in Markdown/MDX (#17746 by @byplayer)

Prettier was removing blank lines between list items and their nested sub-lists, converting loose lists into tight lists and changing their semantic meaning.

<!-- prettier-ignore -->

<!-- Input -->
- a

  - b

- c


  - d

<!-- Prettier 3.8.3 -->
- a
  - b
- c
  - d

<!-- Prettier 3.8.4 -->
- a

  - b

- c

  - d

diff

SCSS: Prevent trailing comma in if() function (#18471 by @kovsu)

<!-- prettier-ignore -->

// Input
$value: if(sass(false): 1; else: -1);

// Prettier 3.8.2
$value: if(
  sass(false): 1; else: -1,
);

// Prettier 3.8.3
$value: if(sass(false): 1; else: -1);

diff

Angular: Support Angular v21.2 (#18722, #19034 by @fisker)

Exhaustive typechecking with @default never;

<!-- prettier-ignore -->

<!-- Input -->
@switch (foo) {
  @case (1) {}
  @default never;
}

<!-- Prettier 3.8.1 -->
SyntaxError: Incomplete block "default never". If you meant to write the @ character, you should use the "&#64;" HTML entity instead. (3:3)

<!-- Prettier 3.8.2 -->
@switch (foo) {
  @case (1) {}
  @default never;
}

arrow function and instanceof expressions.

<!-- prettier-ignore -->

<!-- Input -->
@let fn = (a) =>        a?    1:2;

{{ fn ( a         instanceof b)}}

<!-- Prettier 3.8.1 -->
@let fn = (a) =>        a?    1:2;

{{ fn ( a         instanceof b)}}

<!-- Prettier 3.8.2 -->
@let fn = (a) => (a ? 1 : 2);

{{ fn(a instanceof b) }}

diff

Include available printers in plugin type declarations (#18706 by @porada)

<!-- prettier-ignore -->

// Input
import * as prettierPluginEstree from "prettier/plugins/estree";

// Prettier 3.8.0
// Property 'printers' does not exist on type 'typeof import("prettier/plugins/estree")'. ts(2339)
prettierPluginEstree.printers.estree; //=> any

// Prettier 3.8.1
prettierPluginEstree.printers.estree; //=> Printer
prettierPluginEstree.printers["estree-json"]; //=> Printer

diff

🔗 Release Notes

diff

LWC: Avoid quote around interpolations (#18383 by @kovsu)

<!-- prettier-ignore -->

<!-- Input -->
<div foo={bar}>   </div>

<!-- Prettier 3.7.3 (--embedded-language-formatting off) -->
<div foo="{bar}"></div>

<!-- Prettier 3.7.4 (--embedded-language-formatting off) -->
<div foo={bar}></div>

TypeScript: Fix comment inside union type gets duplicated (#18393 by @fisker)

<!-- prettier-ignore -->

// Input
type Foo = (/** comment */ a | b) | c;

// Prettier 3.7.3
type Foo = /** comment */ (/** comment */ a | b) | c;

// Prettier 3.7.4
type Foo = /** comment */ (a | b) | c;

TypeScript: Fix unstable comment print in union type comments (#18395 by @fisker)

<!-- prettier-ignore -->

// Input
type X = (A | B) & (
  // comment
  A | B
);

// Prettier 3.7.3 (first format)
type X = (A | B) &
  (// comment
  A | B);

// Prettier 3.7.3 (second format)
type X = (
  | A
  | B // comment
) &
  (A | B);

// Prettier 3.7.4
type X = (A | B) &
  // comment
  (A | B);

diff

API: Fix prettier.getFileInfo() change that breaks VSCode extension (#18375 by @fisker)

An internal refactor accidentally broke the VSCode extension plugin loading.

diff

JavaScript: Fix string print when switching quotes (#18351 by @fisker)

<!-- prettier-ignore -->

// Input
console.log("A descriptor\\'s .kind must be \"method\" or \"field\".")

// Prettier 3.7.1
console.log('A descriptor\\'s .kind must be "method" or "field".');

// Prettier 3.7.2
console.log('A descriptor\\\'s .kind must be "method" or "field".');

JavaScript: Preserve quote for embedded HTML attribute values (#18352 by @kovsu)

<!-- prettier-ignore -->

// Input
const html = /* HTML */ ` <div class="${styles.banner}"></div> `;

// Prettier 3.7.1
const html = /* HTML */ ` <div class=${styles.banner}></div> `;

// Prettier 3.7.2
const html = /* HTML */ ` <div class="${styles.banner}"></div> `;

TypeScript: Fix comment in empty type literal (#18364 by @fisker)

<!-- prettier-ignore -->

// Input
export type XXX = {
  // tbd
};

// Prettier 3.7.1
export type XXX = { // tbd };

// Prettier 3.7.2
export type XXX = {
  // tbd
};

diff

API: Fix performance regression in doc printer (#18342 by @fisker)

Prettier 3.7.0 can be very slow when formatting big files, the regression has been fixed.

diff

🔗 Release Notes

diff

Markdown: Add missing blank line around code block (#17675 by @fisker)

<!-- prettier-ignore -->

<!-- Input -->
1. Some text, and code block below, with newline after code block

   ```yaml
   ---
   foo: bar
   ```

   1. Another
   2. List

<!-- Prettier 3.6.1 -->
1. Some text, and code block below, with newline after code block

   ```yaml
   ---
   foo: bar
   ```
   1. Another
   2. List

<!-- Prettier 3.6.2 -->
1. Some text, and code block below, with newline after code block

   ```yaml
   ---
   foo: bar
   ```

   1. Another
   2. List

diff

TypeScript: Allow const without initializer (#17650, #17654 by @fisker)

<!-- prettier-ignore -->

// Input
export const version: string;

// Prettier 3.6.0 (--parser=babel-ts)
SyntaxError: Unexpected token (1:21)
> 1 | export const version: string;
    |                     ^

// Prettier 3.6.0 (--parser=oxc-ts)
SyntaxError: Missing initializer in const declaration (1:14)
> 1 | export const version: string;
    |              ^^^^^^^^^^^^^^^

// Prettier 3.6.1
export const version: string;

Miscellaneous: Avoid closing files multiple times (#17665 by @43081j)

When reading a file to infer the interpreter from a shebang, we use the n-readlines library to read the first line in order to get the shebang.

This library closes files when it reaches EOF, and we later try close the same files again. We now close files only if n-readlines did not already close them.

diff

🔗 Release Notes

diff

Flow: Fix missing parentheses in ConditionalTypeAnnotation (#17196 by @fisker)

<!-- prettier-ignore -->

// Input
type T<U> = 'a' | ('b' extends U ? 'c' : empty);
type T<U> = 'a' & ('b' extends U ? 'c' : empty);

// Prettier 3.5.2
type T<U> = "a" | "b" extends U ? "c" : empty;
type T<U> = "a" & "b" extends U ? "c" : empty;

// Prettier 3.5.3
type T<U> = "a" | ("b" extends U ? "c" : empty);
type T<U> = "a" & ("b" extends U ? "c" : empty);

diff

Remove module-sync condition (#17156 by @fisker)

In Prettier 3.5.0, we added module-sync condition to package.json, so that require("prettier") can use ESM version, but turns out it doesn't work if CommonJS and ESM plugins both imports builtin plugins. To solve this problem, we decide simply remove the module-sync condition, so require("prettier") will still use the CommonJS version, we'll revisit until require(ESM) feature is more stable.

diff

Fix CLI crash when cache for old version exists (#17100 by @sosukesuzuki)

Prettier 3.5 uses a different cache format than previous versions, Prettier 3.5.0 crashes when reading existing cache file, Prettier 3.5.1 fixed the problem.

Support dockercompose and github-actions-workflow in VSCode (#17101 by @remcohaszing)

Prettier now supports the dockercompose and github-actions-workflow languages in Visual Studio Code.

diff

🔗 Release Notes

diff

Treat U+30A0 & U+30FB in Katakana Block as CJK (#16796 by @tats-u)

Prettier doesn't treat U+30A0 & U+30FB as Japanese. U+30FB is commonly used in Japanese to represent the delimitation of first and last names of non-Japanese people or “and”. The following “C言語・C++・Go・Rust” means “C language & C++ & Go & Rust” in Japanese.

<!-- prettier-ignore -->

<!-- Input (--prose-wrap=never) -->

C言
語
・
C++
・
Go
・
Rust

<!-- Prettier 3.4.1 -->
C言語・ C++ ・ Go ・ Rust

<!-- Prettier 3.4.2 -->
C言語・C++・Go・Rust

U+30A0 can be used as the replacement of the - in non-Japanese names (e.g. “Saint-Saëns” (Charles Camille Saint-Saëns) can be represented as “サン゠サーンス” in Japanese), but substituted by ASCII hyphen (U+002D) or U+FF1D (full width hyphen) in many cases (e.g. “サン=サーンス” or “サン＝サーンス”).

Fix comments print on class methods with decorators (#16891 by @fisker)

<!-- prettier-ignore -->

// Input
class A {
  @decorator
  /** 
   * The method description
   *
  */
  async method(foo: Foo, bar: Bar) {
    console.log(foo);
  }
}

// Prettier 3.4.1
class A {
  @decorator
  async /**
   * The method description
   *
   */
  method(foo: Foo, bar: Bar) {
    console.log(foo);
  }
}

// Prettier 3.4.2
class A {
  @decorator
  /**
   * The method description
   *
   */
  async method(foo: Foo, bar: Bar) {
    console.log(foo);
  }
}

Fix non-idempotent formatting (#16899 by @seiyab)

This bug fix is not language-specific. You may see similar change in any languages. This fixes regression in 3.4.0 so change caused by it should yield same formatting as 3.3.3.

<!-- prettier-ignore -->

// Input
<div>
  foo
  <span>longlonglonglonglonglonglonglonglonglonglonglonglonglonglongl foo</span>
  , abc
</div>;

// Prettier 3.4.1 (first)
<div>
  foo
  <span>
    longlonglonglonglonglonglonglonglonglonglonglonglonglonglongl foo
  </span>, abc
</div>;

// Prettier 3.4.1 (second)
<div>
  foo
  <span>longlonglonglonglonglonglonglonglonglonglonglonglonglonglongl foo</span>
  , abc
</div>;

// Prettier 3.4.2
<div>
  foo
  <span>longlonglonglonglonglonglonglonglonglonglonglonglonglonglongl foo</span>
  , abc
</div>;

diff

Remove unnecessary parentheses around assignment in v-on (#16887 by @fisker)

<!-- prettier-ignore -->

<!-- Input -->
<template>
  <button @click="foo += 2">Click</button>
</template>

<!-- Prettier 3.4.0 -->
<template>
  <button @click="(foo += 2)">Click</button>
</template>

<!-- Prettier 3.4.1 -->
<template>
  <button @click="foo += 2">Click</button>
</template>

diff

🔗 Release Notes

diff

Add parentheses for nullish coalescing in ternary (#16391 by @cdignam-segment)

This change adds clarity to operator precedence.

<!-- prettier-ignore -->

// Input
foo ? bar ?? foo : baz;
foo ?? bar ? a : b;
a ? b : foo ?? bar;

// Prettier 3.3.2
foo ? bar ?? foo : baz;
foo ?? bar ? a : b;
a ? b : foo ?? bar;

// Prettier 3.3.3
foo ? (bar ?? foo) : baz;
(foo ?? bar) ? a : b;
a ? b : (foo ?? bar);

Add parentheses for decorator expressions (#16458 by @y-schneider)

Prevent parentheses around member expressions or tagged template literals from being removed to follow the stricter parsing rules of TypeScript 5.5.

<!-- prettier-ignore -->

// Input
@(foo`tagged template`)
class X {}

// Prettier 3.3.2
@foo`tagged template`
class X {}

// Prettier 3.3.3
@(foo`tagged template`)
class X {}

Support @let declaration syntax (#16474 by @sosukesuzuki)

Adds support for Angular v18 @let declaration syntax.

Please see the following code example. The @let declaration allows you to define local variables within the template:

<!-- prettier-ignore -->

@let name = 'Frodo';

<h1>Dashboard for {{name}}</h1>
Hello, {{name}}

For more details, please refer to the excellent blog post by the Angular Team: Introducing @let in Angular.

We also appreciate the Angular Team for kindly answering our questions to implement this feature.

diff

Fix handlebars path expressions starts with @ (#16358 by @Princeyadav05)

<!-- prettier-ignore -->

{{! Input }}
<div>{{@x.y.z}}</div>

{{! Prettier 3.3.1 }}
<div>{{@x}}</div>

{{! Prettier 3.3.2 }}
<div>{{@x.y.z}}</div>

diff

Preserve empty lines in front matter (#16347 by @fisker)

<!-- prettier-ignore -->

<!-- Input -->
---
foo:
  - bar1

  - bar2

  - bar3
---
Markdown

<!-- Prettier 3.3.0 -->

---
foo:
  - bar1
  - bar2
  - bar3
---

Markdown


<!-- Prettier 3.3.1 -->
---
foo:
  - bar1

  - bar2

  - bar3
---

Markdown

Preserve explicit language in front matter (#16348 by @fisker)

<!-- prettier-ignore -->

<!-- Input -->
---yaml
title: Hello
slug: home
---

<!-- Prettier 3.3.0 -->
---
title: Hello
slug: home
---

<!-- Prettier 3.3.1 -->
---yaml
title: Hello
slug: home
---

Avoid line breaks in import attributes (#16349 by @fisker)

<!-- prettier-ignore -->

// Input
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type: "json" };

// Prettier 3.3.0
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type:
  "json" };

// Prettier 3.3.1
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type: "json" };

diff

🔗 Release Notes

diff

Support Angular inline styles as single template literal (#15968 by @sosukesuzuki)

Angular v17 supports single string inline styles.

<!-- prettier-ignore -->

// Input
@Component({
  template: `<div>...</div>`,
  styles: `h1 { color: blue; }`,
})
export class AppComponent {}

// Prettier 3.2.4
@Component({
  template: `<div>...</div>`,
  styles: `h1 { color: blue; }`,
})
export class AppComponent {}

// Prettier 3.2.5
@Component({
  template: `<div>...</div>`,
  styles: `
    h1 {
      color: blue;
    }
  `,
})
export class AppComponent {}

Unexpected embedded formatting for Angular template (#15969 by @JounQin)

Computed template should not be considered as Angular component template

<!-- prettier-ignore -->

// Input
const template = "foobar";

@Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

// Prettier 3.2.4
const template = "foobar";

@Component({
  [template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}

// Prettier 3.2.5
const template = "foobar";

@Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

Use "json" parser for tsconfig.json by default (#16012 by @sosukesuzuki)

In v3.2.0, we introduced "jsonc" parser which adds trailing comma by default.

When adding a new parser we also define how it will be used based on the linguist-languages data.

tsconfig.json is a special file used by TypeScript, it uses .json file extension, but it actually uses the JSON with Comments syntax. However, we found that there are many third-party tools not recognize it correctly because of the confusing .json file extension.

We decide to treat it as a JSON file for now to avoid the extra configuration step.

To keep using the "jsonc" parser for your tsconfig.json files, add the following to your .prettierrc file

{
  "overrides": [
    {
      "files": ["tsconfig.json", "jsconfig.json"],
      "options": {
        "parser": "jsonc"
      }
    }
  ]
}

<!-- prettier-ignore -->

# Prettier 3.2.4
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "jsonc" }

# Prettier 3.2.5
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "json" }

diff

Fix incorrect parser inference (#15947 by @fisker)

Files like .eslintrc.json were incorrectly formatted as JSONC files.

<!-- prettier-ignore -->

// Input
prettier --file-info .eslintrc.json
{ "ignored": false, "inferredParser": "jsonc" }

// Prettier 3.2.4
prettier --file-info .eslintrc.json
{ "ignored": false, "inferredParser": "json" }

diff

Throw errors for invalid code (#15881 by @fisker, @Josh-Cena, @auvred)

<!-- prettier-ignore -->

// Input
1++;

// Prettier 3.2.2
1++;

// Prettier 3.2.3
SyntaxError: Invalid left-hand side expression in unary operation (1:1)
> 1 | 1++;
    | ^

<!-- prettier-ignore -->

// Input
try {} catch (error = 1){}

// Prettier 3.2.2
try {
} catch (error) {}

// Prettier 3.2.3
SyntaxError: Catch clause variable cannot have an initializer. (1:23)
> 1 | try {} catch (error = 1){}
    |                       ^

Fix parser inference (#15927 by @fisker)

<!-- prettier-ignore -->

// Prettier 3.2.2
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "json" }

// Prettier 3.2.3
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "jsonc" }

diff

Fix crash when parsing template literal CSS in a JSX style tag using a spread attribute (#15896 by @eelco)

For example this code would crash before:

<!-- prettier-ignore -->

<style {...spread}>{`.{}`}</style>

Fix formatting error on optional call expression and member chain (#15920 by @sosukesuzuki)

<!-- prettier-ignore -->

// Input
a(() => {}, c?.d());

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

// Prettier 3.2.2
a(() => {}, c?.d());

diff

Fix formatting error on member chain (#15915 by @sosukesuzuki)

<!-- prettier-ignore -->

// Input
test().test2().test2(thing?.something);

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

// Prettier 3.2.1
test().test2().test2(thing?.something);

diff

🔗 Release Notes

diff

Fix config file search (#15363 by @fisker)

Previously, we start search for config files from the filePath as a directory, if it happened to be a directory and contains config file, it will be used by mistake.

├─ .prettierrc
└─ test.js         (A directory)
  └─ .prettierrc

// Prettier 3.1.0
await prettier.resolveConfigFile(new URL("./test.js", import.meta.url));
// <CWD>/test.js/.prettierrc

// Prettier 3.1.1
await prettier.resolveConfigFile(new URL("./test.js", import.meta.url));
// <CWD>/.prettierrc

Skip explicitly passed symbolic links with --no-error-on-unmatched-pattern (#15533 by @sanmai-NL)

Since Prettier v3, we stopped following symbolic links, however in some use cases, the symbolic link patterns can't be filtered out, and there is no way to prevent Prettier from throwing errors.

In Prettier 3.1.1, you can use --no-error-on-unmatched-pattern to simply skip symbolic links.

Consistently use tabs in ternaries when useTabs is true (#15662 by @auvred)

<!-- prettier-ignore -->

// Input
aaaaaaaaaaaaaaa
	? bbbbbbbbbbbbbbbbbb
	: ccccccccccccccc
	  ? ddddddddddddddd
	  : eeeeeeeeeeeeeee
	    ? fffffffffffffff
	    : gggggggggggggggg;

// Prettier 3.1.0
aaaaaaaaaaaaaaa
	? bbbbbbbbbbbbbbbbbb
	: ccccccccccccccc
	  ? ddddddddddddddd
	  : eeeeeeeeeeeeeee
	    ? fffffffffffffff
	    : gggggggggggggggg;

// Prettier 3.1.1
aaaaaaaaaaaaaaa
	? bbbbbbbbbbbbbbbbbb
	: ccccccccccccccc
		? ddddddddddddddd
		: eeeeeeeeeeeeeee
			? fffffffffffffff
			: gggggggggggggggg;

Improve config file search (#15663 by @fisker)

The Prettier config file search performance has been improved by more effective cache strategy.

Fix unstable and ugly formatting for comments in destructuring patterns (#15708 by @sosukesuzuki)

<!-- prettier-ignore -->

// Input
const {
  foo,
  // bar
  // baz
}: Foo = expr;

// Prettier 3.1.0
const {
  foo1,
} // bar
// baz
: Foo = expr;

// Prettier 3.1.0 second output
const {
  foo1, // bar
} // baz
: Foo = expr;

// Prettier 3.1.1
const {
  foo1,
  // bar
  // baz
}: Foo = expr;

Support "Import Attributes" (#15718 by @fisker)

TypeScript 5.3 supports the latest updates to the import attributes proposal.

import something from "./something.json" with { type: "json" };

Fix false claim in docs that cursorOffset is incompatible with rangeStart/rangeEnd (#15750 by @ExplodingCabbage)

The cursorOffset option has in fact been compatible with rangeStart/rangeEnd for over 5 years, thanks to work by @ds300. However, Prettier's documentation (including the CLI --help text) continued to claim otherwise, falsely. The documentation is now fixed.

Keep curly braces and from keyword in empty import statements (#15756 by @fisker)

<!-- prettier-ignore -->

// Input
import { } from 'foo';
import { /* comment */ } from 'bar';

// Prettier 3.1.0
import {} from "foo";
import /* comment */ "bar";

// Prettier 3.1.1
import {} from "foo";
import {} from /* comment */ "bar";

Keep empty import attributes and assertions (#15757 by @fisker)

<!-- prettier-ignore -->

// Input
import foo from "foo" with {};
import bar from "bar" assert {};

// Prettier 3.1.0
import foo from "foo";
import bar from "bar";

// Prettier 3.1.1
import foo from "foo" with {};
import bar from "bar" assert {};

diff

🔗 Release Notes

diff

Add preferUnplugged: true to package.json (#15169 by @fisker and @so1ve)

Prettier v3 uses dynamic imports, user will need to unplug Prettier when Yarn's PnP mode is enabled, add preferUnplugged: true to package.json, so Yarn will install Prettier as unplug by default.

Support shared config that forbids require() (#15233 by @fisker)

If an external shared config package is used, and the package exports don't have require or default export.

In Prettier 3.0.2 Prettier fails when attempt to require() the package, and throws an error.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in <packageName>/package.json

Allow argument of require() to break (#15256 by @fisker)

<!-- prettier-ignore -->

// Input
const plugin = require(
  global.STANDALONE
    ? path.join(__dirname, "../standalone.js")
    : path.join(__dirname, "..")
);

// Prettier 3.0.2
const plugin = require(global.STANDALONE
  ? path.join(__dirname, "../standalone.js")
  : path.join(__dirname, ".."));

// Prettier 3.0.3
const plugin = require(
  global.STANDALONE
    ? path.join(__dirname, "../standalone.js")
    : path.join(__dirname, "..")
);

Do not print trailing commas in arrow function type parameter lists in ts code blocks (#15286 by @sosukesuzuki)

<!-- prettier-ignore -->

<!-- Input -->
```ts
const foo = <T>() => {}
```

<!-- Prettier 3.0.2 -->
```ts
const foo = <T,>() => {}
```

<!-- Prettier 3.0.3 -->
```ts
const foo = <T>() => {}
```

Support TypeScript 5.2 using / await using declaration (#15321 by @sosukesuzuki)

Support for the upcoming Explicit Resource Management feature in ECMAScript. using / await using declaration

<!-- prettier-ignore -->

{
   using foo = new Foo();
   await using bar = new Bar();
}

diff

Break after = of assignment if RHS is poorly breakable AwaitExpression or YieldExpression (#15204 by @seiyab)

<!-- prettier-ignore -->

// Input
const { section, rubric, authors, tags } = await utils.upsertCommonData(mainData);

// Prettier 3.0.1
const { section, rubric, authors, tags } = await utils.upsertCommonData(
  mainData,
);

// Prettier 3.0.2
const { section, rubric, authors, tags } =
  await utils.upsertCommonData(mainData);

Do not add trailing comma for grouped scss comments (#15217 by @auvred)

<!-- prettier-ignore -->

/* Input */
$foo: (
	'property': (),
	// comment 1
	// comment 2
)

/* Prettier 3.0.1 */
$foo: (
  "property": (),
  // comment 1
  // comment 2,
);

/* Prettier 3.0.2 */
$foo: (
  "property": (),
  // comment 1
  // comment 2
);

Print declare and export keywords for nested namespace (#15249 by @sosukesuzuki)

<!-- prettier-ignore -->

// Input
declare namespace abc1.def {}
export namespace abc2.def {}

// Prettier 3.0.1
namespace abc1.def {}
namespace abc2.def {}

// Prettier 3.0.2
declare namespace abc1.def {}
export namespace abc2.def {}

diff

Fix cursor positioning for a special case (#14812 by @fisker)

<!-- prettier-ignore -->

// <|> is the cursor position

/* Input */
// All messages are represented in JSON.
// So, the prettier.py controls a subprocess which spawns "node {this_file}".
import {<|>  } from "fs"

/* Prettier 3.0.0 */
// All messages are represented in JSON.
// So, the prettier.py <|>controls a subprocess which spawns "node {this_file}".
import {} from "fs"

/* Prettier 3.0.1 */
// All messages are represented in JSON.
// So, the prettier.py controls a subprocess which spawns "node {this_file}".
import {<|>} from "fs"

Fix plugins/estree.d.ts to make it a module (#15018 by @kingyue737)

Add export {} in plugins/estree.d.ts to fix the "File is not a module" error

Add parenthesis around leading multiline comment in return statement (#15037 by @auvred)

<!-- prettier-ignore -->

// Input
function fn() {
  return (
    /**
     * @type {...}
     */ expression
  )
}

// Prettier 3.0.0
function fn() {
  return /**
   * @type {...}
   */ expression;
}

// Prettier 3.0.1
function fn() {
  return (
    /**
     * @type {...}
     */ expression
  );
}

Add support for Vue "Generic Components" (#15066 by @auvred)

https://blog.vuejs.org/posts/vue-3-3#generic-components

<!-- prettier-ignore -->

<!-- Input -->
<script setup lang="ts" generic="T extends Type1 & Type2 & (Type3 | Type4), U extends string | number | boolean"></script>

<!-- Prettier 3.0.0 -->
<script
  setup
  lang="ts"
  generic="T extends Type1 & Type2 & (Type3 | Type4), U extends string | number | boolean"
></script>

<!-- Prettier 3.0.1 -->
<script
  setup
  lang="ts"
  generic="
    T extends Type1 & Type2 & (Type3 | Type4),
    U extends string | number | boolean
  "
></script>

Fix comments print in IfStatement (#15076 by @fisker)

<!-- prettier-ignore -->

function a(b) {
  if (b) return 1; // comment
  else return 2;
}

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

/* Prettier 3.0.1 */
function a(b) {
  if (b) return 1; // comment
  else return 2;
}

Add missing type definition for printer.preprocess (#15123 by @so1ve)

export interface Printer<T = any> {
  // ...
+ preprocess?:
+   | ((ast: T, options: ParserOptions<T>) => T | Promise<T>)
+   | undefined;
}

Add missing getVisitorKeys method type definition for Printer (#15125 by @auvred)

const printer: Printer = {
  print: () => [],
  getVisitorKeys(node, nonTraversableKeys) {
    return ["body"];
  },
};

Add typing to support readonly array properties of AST Node (#15127 by @auvred)

<!-- prettier-ignore -->

// Input
interface TestNode {
  readonlyArray: readonly string[];
}

declare const path: AstPath<TestNode>;

path.map(() => "", "readonlyArray");

// Prettier 3.0.0
interface TestNode {
  readonlyArray: readonly string[];
}

declare const path: AstPath<TestNode>;

path.map(() => "", "readonlyArray");
//                  ^ Argument of type '"readonlyArray"' is not assignable to parameter of type '"regularArray"'. ts(2345)

// Prettier 3.0.1
interface TestNode {
  readonlyArray: readonly string[];
}

declare const path: AstPath<TestNode>;

path.map(() => "", "readonlyArray");

Add space before unary minus followed by a function call (#15129 by @pamelalozano)

<!-- prettier-ignore -->

// Input
div {
  margin: - func();
}

// Prettier 3.0.0
div {
  margin: -func();
}

// Prettier 3.0.1
div {
  margin: - func();
}