首发知乎：https://zhuanlan.zhihu.com/p/438830128
链接：Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax! · Prettier
作者：Sosuke Suzuki (@sosukesuzuki)
这个发布支持了 TypeScript 4.5 的新语法和 MDX v2 的注释语法！
如果你喜欢 Prettier，同时想支持我们的工作，可以通过 OpenCollective 来支持我们，也可以支持我们其他的项目，包括 typescript-eslint，remark，和 Babel。
重要更新
TypeScript
使用长类型时避免在箭头函数中产生位移（Avoid extra offset in arrow function body when using long types (#11515 by @kachkaev and @thorn0)）
在 Prettier 2.3.0 开始，箭头函数的类型声明可能影响函数体的压缩情况。改变类型签名的长度有可能造成更大的区别，从而导致 git 冲突的可能性。为了防止这个事情，函数体的位移以后是稳定的。
注意：这个改变可能会影响很多你的代码。
// 输入
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({ x, y }) => {
const a = useA();
return <div>{x + y + a}</div>;
};
// Prettier 2.2 及以下
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>;
};
支持 TypeScript 4.5 Support TypeScript 4.5 (#11721, #11723, #11813 by @sosukesuzuki)
我们支持了 TypeScript 4.5 的新语法：
Import 语句中的 type
// 例子
import { type A } from "mod";
私有属性
// 例子
class Foo {
#prop1;
method() {
return #prop1 in this;
}
}
Import 断言
// 例子
import obj from "./something.json" assert { type: "json" };
处理 .mts 和 .cts
Prettier 现在会以 TypeScript 处理 .mts 和 .cts 结尾的文件。
HTML
折叠 HTML 的 class 属性到一行Collapse HTML class attributes onto one line (#11827 by @jlongster)
回退 #7865。
虽然之前的这个特性对于一些 CSS 库例如 Tailwind 的用户是有用的。因为这些库会产生大量的 CSS 属性。但是我们始终没法找到合适的方法得到让我们满意的结果。我们仍然在找更好的办法来去处理大量 CSS 的问题。如果你关心这个事情，请来和我们讨论。
<!-- 输入 -->
<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>
MDX
增加对 MDX v2 注释语法的支持Add support for MDX v2 comment syntax (#11563 by @wooorm)
目前增加了对于 MDX v2注释的语法，类似 JavaScript 形式，而 MDX v1 的注释时形如 HTML 样式的。
注意：目前 Prettier 只支持单行注释，所以{/* prettier-ignore */}可以使用，MDX v2 其他的部分还不支持。
Input:
{/*A comment*/}
Prettier 2.4:
{/_A comment_/}
Prettier 2.5:
{/*A comment*/}
其他改变
JavaScript
修复括号作为箭头函数返回的序列表达式时的情况Fix parentheses around sequence expression as body of arrow chain (#11593 by @bakkot)
箭头函数返回的序列表达式的括号会保留下来。之前，Prettier 会移除他们，会造成语法问题。
// 输入
const f = () => () => (0, 1);
// Prettier 2.4
const f = () => () => 0, 1;
// Prettier 2.5
const f = () => () => (0, 1);
sloppy 模式的语法错误会忽略Ignore errors for sloppy mode syntax (#11750 by @fisker, #11778 by @sosukesuzuki)
JavaScript 的严格模式会增加一些有用的报错来避免错误。一些错误是在解析语法时触发的。因为 Prettier 的目标是格式化代码，而不是这些代码是否能跑起来，这些跑起来正确的检查任务应该留给 linters，compilers 和 runtime。
// 输入
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;
}
嵌入 CSS 的括号和表达式之间的空格会保留Respect spacing for between expressions and parentheses in embedded CSS (#11800 by @sosukesuzuki)
// 输入
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 解析器支持 ES2022 私有类属性 Support ES2022 class-private-fields-in syntax in espree parser (#11835 by @fisker)
// 例子
class Foo {
#brand;
static isC(obj) {
return #brand in Foo;
}
}
TypeScript
去除装饰器的不必要的括号Remove unnecessary parentheses for decorators (#11717, #11849 by @sosukesuzuki)
// 输入
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";
}
SCSS
改进 @use with 格式 Improve @use with formatting (#11637 by @sosukesuzuki)
// 输入
@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 的格式错误 Fix @forward with formatting error (#11683 by @sriramarul, @sosukesuzuki)
// 输入
@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
使用相反的引号模式对于 mustache statements 中的引用Uses the opposite quote type for quotes inside mustache statements in attributes (#11524 by @bmaehr)
{{!-- 输入 --}}
<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
嵌入 TSX 的尾后逗号会保留Keep trailing commas for type parameters in embedded TSX (#11685 by @sosukesuzuki)
尾后逗号是必要的，因为它可以防止 TypeScript 认为 <T> 是印个 JSX 表达式的开始
<!-- 输入 -->
```tsx
const test = <T,>(value: T) => {};
```
<!-- Prettier 2.4 -->
```tsx
const test = <T>(value: T) => {};
```
<!-- Prettier 2.5 -->
```tsx
const test = <T,>(value: T) => {};
转载请注明本文知乎链接和译者 Hugo。
