This release adds indentation back to nested ternaries along with a new --experimental-ternaries flag to try a more novel "curious ternary" format that scales better to deeply nested conditionals. We are keen for your feedback on the experimental format before it rolls out as the default behavior later this year!
We have also added support for the control flow syntax in Angular v17. For details on the syntax, please read the official Angular release post.
If you appreciate Prettier and would like to support our work, please consider sponsoring us directly via our OpenCollective or by sponsoring the projects we depend on, such as typescript-eslint, remark, and Babel. Thank you for your continued support!
// Input
const message =
i % 3 === 0 && i % 5 === 0
? "fizzbuzz"
: i % 3 === 0
? "fizz"
: i % 5 === 0
? "buzz"
: String(i);
// Prettier 3.0
const message =
i % 3 === 0 && i % 5 === 0
? "fizzbuzz"
: i % 3 === 0
? "fizz"
: i % 5 === 0
? "buzz"
: String(i);
// Prettier 3.1
const message =
i % 3 === 0 && i % 5 === 0
? "fizzbuzz"
: i % 3 === 0
? "fizz"
: i % 5 === 0
? "buzz"
: String(i);
This is implemented behind a --experimental-ternaries flag.
We move the ? in multiline ternaries to the end of the first line instead of the start of the second, along with several related changes.
While it might look weird at first, beta-testing shows that after a few hours of use, developers find it makes nested ternaries much more readable and useful.
This PR resolves one of our a highly-upvoted issue without the problems its proposed solution would reintroduce.
Please see A curious case of the ternaries for more details.
// "Questioning" ternaries for simple ternaries:
const content =
children && !isEmptyChildren(children) ?
render(children)
: renderDefaultChildren();
// "Case-style" ternaries for chained ternaries:
const message =
i % 3 === 0 && i % 5 === 0 ? "fizzbuzz"
: i % 3 === 0 ? "fizz"
: i % 5 === 0 ? "buzz"
: String(i);
// Smoothly transitions between "case-style" and "questioning" when things get complicated:
const reactRouterResult =
children && !isEmptyChildren(children) ? children
: props.match ?
component ? React.createElement(component, props)
: render ? render(props)
: null
: null
We support new JS syntax supported by Babel 7.23.0!
Please see https://github.com/tc39/proposal-source-phase-imports for more details.
import source x from "mod";
Please see https://github.com/tc39/proposal-defer-import-eval for more details.
import defer * as ns from "mod";
Please see https://github.com/tc39/proposal-optional-chaining-assignment for more details.
Added support for built-in control flow in Angular 17. Please give us feedback if you find any bugs.
For more details about control flow, please check this article on the official blog.
https://blog.angular.io/introducing-angular-v17-4d7033312e4b
// Input
function function_declaration()
// this is a function
{
return 42
}
(function function_expression()
// this is a function
{
return 42
})();
// Prettier 3.0
function function_declaration() {
// this is a function
return 42;
}
(function function_expression() // this is a function
{
return 42;
})();
// Prettier 3.1
function function_declaration() {
// this is a function
return 42;
}
(function function_expression() {
// this is a function
return 42;
})();
// Input
function function_declaration()
// this is a function
{
return 42
}
export default function()
// this is a function
{
return 42
}
// Prettier 3.0
TypeError: Cannot read properties of null (reading 'range')
// Prettier 3.1
function function_declaration() {
// this is a function
return 42;
}
export default function () {
// this is a function
return 42;
}
Parentheses are now added around unary expression on the left hand side of
instanceof and in expressions, to disambiguate the unary on the left hand
side with a unary applying to the entire binary expression.
This helps catch a common mistake where a user intends to write !("x" in y)
but instead writes !"x" in y, which is really parsed as the nonsensical
(!"x") in y.
// Input
!"x" in y;
!("x" in y);
// Prettier 3.0
!"x" in y;
!("x" in y);
// Prettier 3.1
(!"x") in y;
!("x" in y);
// Input
const StyledComponent = styled.div`
margin-right: -4px;
${Container}.isExpanded & {
transform: rotate(-180deg);
}
`;
const StyledComponent2 = styled.div`
margin-right: -4px;
${abc}.camelCase + ${def}.camelCase & {
transform: rotate(-180deg);
}
`;
// Prettier 3.0
const StyledComponent = styled.div`
margin-right: -4px;
${Container}.isexpanded & {
transform: rotate(-180deg);
}
`;
const StyledComponent2 = styled.div`
margin-right: -4px;
${abc}.camelcase + ${def}.camelCase & {
transform: rotate(-180deg);
}
`;
// Prettier 3.1 -- same as input
// Input
export const MSG_GENERIC_OPERATION_FAILURE_BODY_1 =
goog.getMsg("That's all we know");
export const MSG_GENERIC_OPERATION_FAILURE_BODY_2 =
goog.getMsg("That\'s all we know");
// Prettier 3.0
export const MSG_GENERIC_OPERATION_FAILURE_BODY_1 =
goog.getMsg("That's all we know");
export const MSG_GENERIC_OPERATION_FAILURE_BODY_2 = goog.getMsg(
"That's all we know",
);
// Prettier 3.1
export const MSG_GENERIC_OPERATION_FAILURE_BODY_1 =
goog.getMsg("That's all we know");
export const MSG_GENERIC_OPERATION_FAILURE_BODY_2 =
goog.getMsg("That's all we know");
// Input
params["redirectTo"] =
`${window.location.pathname}${window.location.search}${window.location.hash}`;
// Prettier 3.0
params[
"redirectTo"
] = `${window.location.pathname}${window.location.search}${window.location.hash}`;
// Prettier 3.1
params["redirectTo"] =
`${window.location.pathname}${window.location.search}${window.location.hash}`;
// Input
class Class {
constructor(
private readonly paramProp: Type,
// comment
) {
}
}
// Prettier 3.0
class Class {
constructor(private readonly paramProp: Type) // comment
{}
}
// Prettier 3.0 (Second format)
class Class {
constructor(
private readonly paramProp: Type, // comment
) {}
}
// Prettier 3.1
class Class {
constructor(
private readonly paramProp: Type,
// comment
) {}
}
as const (#15408 by @sosukesuzuki)// Input
const GQL_QUERY_WITH_CONST = /* GraphQL */ `
query S { shop }
` as const;
// Prettier 3.0
const GQL_QUERY_WITH_CONST = /* GraphQL */ `
query S { shop }
` as const;
// Prettier 3.1
const GQL_QUERY_WITH_CONST = /* GraphQL */ `
query S {
shop
}
` as const;
// Input
type Foo1 = (
| "thing1" // Comment1
| "thing2" // Comment2
)[]; // Final comment1
type Foo2 = (
| "thing1" // Comment1
| "thing2" // Comment2
) & Bar; // Final comment2
// Prettier 3.0
type Foo1 = (
| "thing1" // Comment1
| "thing2"
)[]; // Comment2 // Final comment1
type Foo2 = (
| "thing1" // Comment1
| "thing2"
) & // Comment2
Bar; // Final comment2
// Prettier 3.1
type Foo1 = (
| "thing1" // Comment1
| "thing2" // Comment2
)[]; // Final comment1
type Foo2 = (
| "thing1" // Comment1
| "thing2" // Comment2
) &
Bar; // Final comment2
// Input
(type) satisfies never;
// Prettier 3.0
type satisfies never;
// Prettier 3.1
(type) satisfies never;
as and satisfies expressions for Flow (#15130 by @gkz)// Input
const x = y as T;
// Prettier 3.0
// <error: unsupported>
// Prettier 3.1
const x = y as T;
// Input
<Foo<bar> />;
// Prettier 3.0
<Foo />;
// Prettier 3.1
<Foo<bar> />;
typeof (#15466 by @sosukesuzuki)Supports type arguments after typeof syntax supported since Flow v0.127.0:
type Foo = typeof MyGenericClass<string, number>;
/* Input */
div {
width: -double(-double(3));
}
/* Prettier 3.0 */
div {
width: -double(- double(3));
}
/* Prettier 3.1 */
div {
width: -double(-double(3));
}
menu and marquee elements (#15334 by @fisker)<!-- Input -->
<menu><li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li></menu>
<marquee
direction="down"
width="250"
height="200"
behavior="alternate"
style="border:solid"><marquee behavior="alternate"> This text will bounce </marquee></marquee>
<!-- Prettier 3.0 -->
<menu
><li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li></menu
>
<marquee
direction="down"
width="250"
height="200"
behavior="alternate"
style="border: solid"
><marquee behavior="alternate"> This text will bounce </marquee></marquee
>
<!-- Prettier 3.1 -->
<menu>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>
<marquee
direction="down"
width="250"
height="200"
behavior="alternate"
style="border: solid"
>
<marquee behavior="alternate">This text will bounce</marquee>
</marquee>
< and > in markdown urls (#15400 by @vivekjoshi556)<!-- Input -->
[link](https://www.google.fr/()foo->bar)
<!-- Prettier 3.0 -->
[link](<https://www.google.fr/()foo->bar>)
<!-- Prettier 3.1 -->
[link](<https://www.google.fr/()foo-%3Ebar>)
<!-- Input -->
foo->bar>)
<!-- Prettier 3.0 -->
foo->bar>)
<!-- Prettier 3.1 -->
foo-%3Ebar>)
This PR fixes #15410.
Japanese (semi-)voiced kana characters can be split into two code points. For example, the following hiragana character /ka/ can be represented as:
が (U+304C) → か (U+304B) + ゙ (U+3099) → が (U+304C U+3099)
Most users do not use or meet expressions like this except for file paths in macOS. However, there are some characters that can only be represented in this way. Some Japanese text that have to tell /ŋa̠/ (there are not a few Japanese that do not use it these days though) from the common /ga/ use a expression "か゚" (U+304B U+309A).
nasalか゚き゚く゚け゚こ゚か゚き゚く゚け゚こ゚か゚き゚く゚け゚こ゚か゚き゚く゚け゚こ゚
The above Markdown is formatted as in Prettier 3.0:
nasalか゚き゚く゚け゚こ゚か゚き゚く゚け゚こ゚か゚き゚く゚け゚こ゚か゚き゚く゚け
゚こ゚
The semi-voiced sound mark goes to the next line but it is not correct. By this PR, the source Markdown is now formatted as:
nasalか゚き゚く゚け゚こ゚か゚き゚く゚け゚こ゚か゚き゚く゚け゚こ゚か゚き゚く゚
け゚こ゚
The semi-voiced sound mark now keeps attached to the hiragana "け".
URL in prettier.{resolveConfig,resolveConfigFile,getFileInfo}() (#15332, #15354, #15360, #15364 by @fisker)prettier.resolveConfig(), prettier.resolveConfigFile(), and prettier.getFileInfo() now accepts an URL with file: protocol or a url string starts with file://.
// `URL`
await prettier.resolveConfig(new URL("./path/to/file", import.meta.url));
await prettier.resolveConfigFile(new URL("./path/to/file", import.meta.url));
await prettier.getFileInfo(new URL("./path/to/file", import.meta.url));
await prettier.getFileInfo("/path/to/file", {
ignorePath: new URL("./.eslintignore", import.meta.url),
});
// URL string
await prettier.resolveConfig("file:///path/to/file");
await prettier.resolveConfigFile("file:///path/to/file");
await prettier.getFileInfo("file:///path/to/file");
await prettier.getFileInfo("/path/to/file", {
ignorePath: "file:///path/to/.eslintignore",
});
In Prettier 3.0, when specifying a directory from the CLI, only files with default supported extensions were processed.
In the following scenario, not just foo.js but also foo.astro should be formatted:
# Prettier 3.0 version
$ ls .
foo.js foo.astro
$ cat .prettierrc
{ "plugins": ["prettier-plugin-astro"] }
$ prettier --write .
foo.js 20ms
With this update, both foo.js and foo.astro will now be formatted:
# Prettier 3.1 branch
$ prettier --write .
foo.js 20ms
foo.astro 32ms
You can replace prettier "**/*" --ignore-unknown with prettier . since they are equivalent now.
(unchanged) keyword for accessibility in CLI --write (#15467 by @ADTC)Previously, the only distinction between a changed file and an unchanged file was the grey color of the file name. In the example below, we can't distinguish between a.js and b.js as the color is missing. This issue is fixed by adding the (unchanged) keyword which makes the distinction accessible without color.
prettier --write .
# Prettier 3.0
a.js 0ms
b.js 0ms
c.js 0ms (cached)
# Prettier 3.1
a.js 0ms
b.js 0ms (unchanged)
c.js 0ms (unchanged) (cached)
prettier "[with-square-brackets].js" --list
# Prettier 3.0
[error] Explicitly specified file was ignored due to negative glob patterns: "[with-square-brackets].js".
# Prettier 3.1
[with-square-brackets].js
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。