This release adds support for TypeScript 4.5's new syntax and MDX v2 comment syntax!
If you enjoy Prettier and would like to support our work, consider sponsoring us directly via our OpenCollective or by sponsoring the projects we depend on, including typescript-eslint, remark, and Babel.
Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body indentation. 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.
Note: This change may affect a large number of lines in your codebase.
// 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>;
};
We’ve added support for TypeScript 4.5’s new syntax features:
type Modifiers on Import Names// Example
import { type A } from "mod";
// Example
class Foo {
#prop1;
method() {
return #prop1 in this;
}
}
// Example
import obj from "./something.json" assert { type: "json" };
.mts and .ctsPrettier will now format files with .mts and .cts extensions as TypeScript.
class attributes onto one line (#11827 by @jlongster)Reverts #7865.
While this was intended to be useful for users of CSS libraries like Tailwind that tend to result in large numbers of classes on elements, it became clear that our heuristics for where to split the class list on to multiple lines were unable to consistently produce good results. We’re still considering better ways to format HTML with lots of classes — consider discussing with us.
<!-- Input -->
<div
class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>
<!-- Prettier 2.4 -->
<div
class="
SomeComponent__heading-row
d-flex
flex-column flex-lg-row
justify-content-start justify-content-lg-between
align-items-start align-items-lg-center
"
></div>
<!-- Prettier 2.5 -->
<div
class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>
This adds basic support for MDX v2 comment syntax (JavaScript-style comments) in addition to the existing support MDX v1 comment syntax (HTML-style comments).
Note: Prettier currently only supports the new comment syntax for single-line comments (so that {/* prettier-ignore */} can be used), and doesn’t support the rest of MDX v2.
Input:
{/*A comment*/}
Prettier 2.4:
{/_A comment_/}
Prettier 2.5:
{/*A comment*/}
The required parentheses around sequence expressions as the body of arrow functions are now preserved for chained arrows. Previously, Prettier removed them, which resulted in invalid syntax.
// Input
const f = () => () => (0, 1);
// Prettier 2.4
const f = () => () => 0, 1;
// Prettier 2.5
const f = () => () => (0, 1);
JavaScript’s strict mode adds several useful errors to prevent mistakes. Some of these errors are syntax errors that occur at parse time. Since Prettier’s goal is to format all syntactically valid JavaScript code regardless of whether it will actually run, we’ve opted to leave this error checking to linters, compilers, and the runtime.
// 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;
}
// Input
const paragraph2 = css`
transform1: ${expr}(30px);
transform2: ${expr} (30px);
`;
// Prettier 2.4
const paragraph2 = css`
transform1: ${expr} (30px);
transform2: ${expr} (30px);
`;
// Prettier 2.5
const paragraph2 = css`
transform1: ${expr}(30px);
transform2: ${expr} (30px);
`;
espree parser (#11835 by @fisker)// Example
class Foo {
#brand;
static isC(obj) {
return #brand in Foo;
}
}
// Input
class Test {
@foo`bar`
test1: string = "test"
@test().x("global").y()
test2: string = "test";
}
// Prettier 2.4
class Test {
@(foo`bar`)
test: string = "test"
@(test().x("global").y())
test2: string = "test";
}
// Prettier 2.5
class Test {
@foo`bar`
test: string = "test"
@test().x("global").y()
test2: string = "test";
}
@use with formatting (#11637 by @sosukesuzuki)// 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'
);
@forward with formatting error (#11683 by @sriramarul, @sosukesuzuki)// 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
);
{{!-- 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"}}" />
The trailing comma is necessary to prevent TypeScript from treating the <T> as the beginning of a JSX expression.
<!-- 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) => {};
```
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。