Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support!
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.
Highlights
TypeScript
#11426 by @sosukesuzuki)
Support TypeScript 4.4 (Support TypeScript 4.4!
static
Blocks in Classes
Class 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++;
}
}
}
HTML
jsxBracketSameLine
option with bracketSameLine
option (#11006 by @kurtztech)
Replace 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>
Other Changes
JavaScript
#11246 by @sosukesuzuki)
Support parenthesized tagged template literals for styled components (// 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;
`;
#11299 by @sosukesuzuki)
Count correctly regex literals in method chain arguments (// 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);
#11335 by @sosukesuzuki)
Support hack-style pipeline proposal (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(%);
TypeScript
#11247 by @sosukesuzuki)
Fix formatting intersection types that include mapped types (// 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;
};
Flow
#11398 by @noppa)
Always put a semicolon before Flow variance sigils (// 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()
}
SCSS
#11461 by @niksy)
Consistently quote Sass modules strings (// Input
@use "sass:math";
@forward "list";
// Prettier 2.3
@use "sass:math";
@forward "list";
// Prettier 2.4
@use 'sass:math';
@forward 'list';
CLI
.stylelintrc
(#10924 by @SevenOutman)
Infer parser for A .stylelintrc
file (without extension) is handled using json
and yaml
parsers.