This release renames the jsxBracketSameLine option to bracketSameLine, which supports HTML, Vue, and Angular in addition to JSX. The old name has been deprecated.
We’ve also added support for TypeScript 4.4, including new syntax features such as class static blocks.
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.
Support TypeScript 4.4!
static Blocks in ClassesClass Static Blocks syntax is a Stage 4 ECMAScript proposal. See https://github.com/tc39/proposal-class-static-block for more details.
// Input
class Foo {
static count = 0;
// This is a static block:
static {
if (someCondition()) {
Foo.count++;
}
}
}
// Prettier 2.3
SyntaxError: Declaration expected. (5:9)
3 |
4 | // This is a static block:
> 5 | static {
| ^
6 | if (someCondition()) {
7 | Foo.count++;
8 | }
// Prettier 2.4
class Foo {
static count = 0;
// This is a static block:
static {
if (someCondition()) {
Foo.count++;
}
}
}
jsxBracketSameLine option with bracketSameLine option (#11006 by @kurtztech)Deprecate the jsxBracketSameLine option in favour of the new bracketSameLine option that will work for HTML, Angular, Vue, and JSX.
<!-- Input -->
<div id="foo-bar-baz"
class="bar-foo-baz"
title="a sample title"
data-foo="bar"
data-bar="baz">lorem ipsum dolor sit amet</div>
<!-- Prettier 2.3 -->
<div
id="foo-bar-baz"
class="bar-foo-baz"
title="a sample title"
data-foo="bar"
data-bar="baz"
>
lorem ipsum dolor sit amet
</div>
<!-- Prettier 2.4 -->
<!-- Options: `{bracketSameLine: true}` -->
<div
id="foo-bar-baz"
class="bar-foo-baz"
title="a sample title"
data-foo="bar"
data-bar="baz">
lorem ipsum dolor sit amet
</div>
// Input
const StyledComponent =
/** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
(styled.div)`
position: fixed;
color: red;
`;
// Prettier 2.3
const StyledComponent =
/** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
(styled.div)`
position: fixed;
color: red;
`;
// Prettier 2.4
const StyledComponent =
/** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
(styled.div)`
position: fixed;
color: red;
`;
// Input
foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);
foo1(/叱叱叱/).foo2(bar).foo3(baz);
// Prettier 2.3
foo1(/𠮟𠮟𠮟/)
.foo2(bar)
.foo3(baz);
foo1(/叱叱叱/).foo2(bar).foo3(baz);
// Prettier 2.4
foo1(/𠮟𠮟𠮟/)
.foo2(bar)
.foo3(baz);
foo1(/叱叱叱/)
.foo2(bar)
.foo3(baz);
The proposed hack-style pipeline syntax is now supported by Prettier. We are using % as the topic token, following the official explainer — although this may change in future releases as the proposal progresses.
As part of this change, support for the “smart” pipeline syntax has been removed. See our policy on non-standardized syntax for the rationale behind this decision.
// Input
const foo = fn() |> fn1(%) |> fn2(%);
// Prettier 2.3
SyntaxError: Unexpected token (1:25)
> 1 | const foo = fn() |> fn1(%) |> fn2(%);
| ^
2 |
// Prettier 2.4
const foo = fn() |> fn1(%) |> fn(%);
// Input
type Example = {
[A in B]: T;
} & {
[A in B]: T;
};
// Prettier 2.3
type Example = {
[A in B]: T;
} &
{
[A in B]: T;
};
// Prettier 2.4
type Example = {
[A in B]: T;
} & {
[A in B]: T;
};
// Input
class A {
+one = function() {};
-two = val();
+#privOne = val();
static +#privTwo = val();
}
// Prettier 2.3
class A {
+one = function() {}
-two = val()
+#privOne = val()
static +#privTwo = val()
}
// Prettier 2.4
class A {
+one = function() {};
-two = val();
+#privOne = val()
static +#privTwo = val()
}
// Input
@use "sass:math";
@forward "list";
// Prettier 2.3
@use "sass:math";
@forward "list";
// Prettier 2.4
@use 'sass:math';
@forward 'list';
.stylelintrc (#10924 by @SevenOutman)A .stylelintrc file (without extension) is handled using json and yaml parsers.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。