Skip to content

Commit

Permalink
Draft
Browse files Browse the repository at this point in the history
  • Loading branch information
@sosukesuzuki
sosukesuzuki committed Nov 17, 2021
1 parent 4cb850e commit f5d9b87
Showing 1 changed file with 337 additions and 0 deletions.
337 changes: 337 additions & 0 deletions website/blog/2021-11-17-2.5.0.md
View file
@@ -0,0 +1,337 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!"
---

This release adds support for [TypeScript 4.5]() new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments!

If you enjoy Prettier and would like to support our work, consider sponsoring us directly via [our OpenCollective](https://opencollective.com/prettier) or by sponsoring the projects we depend on, including [typescript-eslint](https://opencollective.com/typescript-eslint), [remark](https://opencollective.com/unified), and [Babel](https://opencollective.com/babel).

<!--truncate-->

## Highlights

### TypeScript

#### Support TypeScript 4.5 ([#11721](https://github.com/prettier/prettier/pull/11721), [#11723](https://github.com/prettier/prettier/pull/11723), [#11813](https://github.com/prettier/prettier/pull/11813) by [@sosukesuzuki](https://github.com/sosukesuzuki))

Support new TypeScript 4.5 features.

##### [`type` Modifiers on Import Names](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#type-on-import-names)

<!-- prettier-ignore -->
```ts
// Input
import { type A } from "mod";

// Prettier 2.4
SyntaxError: ',' expected. (1:15)

// Prettier 2.5
import { type A } from "mod";

```

##### [Private Field Presence Checks](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/#private-field-presence-checks)

<!-- prettier-ignore -->
```ts
// Input
class Foo {
#prop1;
method() {
return #prop1 in this;
}
}

// Prettier 2.4
SyntaxError: Private identifiers are not allowed outside class bodies. (4:12)
2 | #prop1;
3 | method() {
> 4 | return #prop1 in this;
| ^
5 | }
6 | }
7 |

// Prettier 2.5
class Foo {
#prop1;
method() {
return #prop1 in this;
}
}

```

##### [Import Assertions](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/#import-assertions)

<!-- prettier-ignore -->
```ts
// Input
import obj from "./something.json" assert { type: "json" };

// Prettier 2.4
SyntaxError: ';' expected. (1:36)
> 1 | import obj from "./something.json" assert { type: "json" };
| ^
2 |

// Prettier 2.5
import obj from "./something.json" assert { type: "json" };

```

##### Handle `.mts` and `.cts`

Handle new file extensions `.mts` and `.cts`.

### MDX

#### Add support for MDX 2 comments ([#11563](https://github.com/prettier/prettier/pull/11563) by [@wooorm](https://github.com/wooorm))

This adds basic support for MDX 2 comments (JavaScript-style comments) in addition to existing MDX 1 comments (HTML-style comments).

Note that in MDX 2, more complex comments and whole expressions can be used inside braces.
This currently only supports a single comment on one line so that `{/* prettier-ignore */}` can be used, but doesn’t support most of MDX 2.

<!-- prettier-ignore -->
```mdx
Input:

{/*A comment*/}

Prettier 2.4:

{/_A comment_/}

Prettier 2.5:
{/*A comment*/}
```

## Other Changes

### JavaScript

#### Fix parentheses around sequence expression as body of arrow chain ([#11593](https://github.com/prettier/prettier/pull/11593) by [@bakkot](https://github.com/bakkot))

The required parentheses around sequence expressions as the body of arrow functions were dropped for chained arrows, causing incorrect code to be generated. Now they are included.

<!-- prettier-ignore -->
```jsx
// Input
const f = () => () => (0, 1);

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

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

#### Ignore errors for sloppy mode syntax ([#11750](https://github.com/prettier/prettier/pull/11750) by [@fisker](https://github.com/fisker), [#11778](https://github.com/prettier/prettier/pull/11778) by [@sosukesuzuki](https://github.com/sosukesuzuki))

<!-- prettier-ignore -->
```jsx
// 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;
}
```

#### Respect spacing for between expressions and parentheses in embedded CSS ([#11800](https://github.com/prettier/prettier/pull/11800) by [@sosukesuzuki](https://github.com/sosukesuzuki))

<!-- Optional description if it makes sense. -->

<!-- prettier-ignore -->
```jsx
// Input
const paragraph2 = css`
transform: ${expr}(30px);
`;

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

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

```

### TypeScript

#### Avoid extra offset in arrow function body when using long types ([#11515](https://github.com/prettier/prettier/pull/11515) by [@kachkaev](https://github.com/kachkaev) and [@thorn0](https://github.com/thorn0))

Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body offset. Changing the length of the type annotation could produce large diffs and thus increased the chance of git conflicts. To prevent this, function body offset was stabilized.

<!-- prettier-ignore -->
```tsx
// 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>;
};
```

#### Fix formatting for tagged template decorators ([#11717](https://github.com/prettier/prettier/pull/11717) by [@sosukesuzuki](https://github.com/sosukesuzuki))

<!-- prettier-ignore -->
```tsx
// Input
class Test {
@foo`bar`
test: string = "test"
}

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

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

### SCSS

#### Fix wildcard syntax in `@forward` ([#11482](https://github.com/prettier/prettier/pull/11482)) ([#11487](https://github.com/prettier/prettier/pull/11487) by [@niksy](https://github.com/niksy))

<!-- prettier-ignore -->
```scss
// Input
@forward "library" as btn-*;

// Prettier 2.4
@forward "library" as btn- *;

// Prettier 2.5
@forward "library" as btn-*;
```

#### Improve `with (...)` formatting ([#11637](https://github.com/prettier/prettier/pull/11637) by [@sosukesuzuki](https://github.com/sosukesuzuki))

<!-- prettier-ignore -->
```scss
// 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'
);

```

#### Fix `@forward with` formatting error ([#11683](https://github.com/prettier/prettier/pull/11683) by [@sriramarul](https://github.com/sriramarul), [@sosukesuzuki](https://github.com/sosukesuzuki))

<!-- prettier-ignore -->
```scss
// 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

#### Uses the opposite quote type for quotes inside mustache statements in attributes ([#11524](https://github.com/prettier/prettier/pull/11524) by [@bmaehr](https://github.com/bmaehr))

<!-- prettier-ignore -->
```hbs
{{!-- 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

#### Keep trailing commas for type parameters in embedded TSX ([#11685](https://github.com/prettier/prettier/pull/11685) by [@sosukesuzuki](https://github.com/sosukesuzuki))

<!-- Optional description if it makes sense. -->

<!-- prettier-ignore -->
````md
<!-- 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) => {};
```
````

### CLI

#### Add new CLI option `debug-print-ast` ([#11514](https://github.com/prettier/prettier/pull/11514) by [@sosukesuzuki](https://github.com/sosukesuzuki))

A new `--debug-print-ast` CLI flag for debugging.

0 comments on commit f5d9b87

Please sign in to comment.