This release includes a new singleAttributePerLine option. This is an option to print only one attribute per line in Vue SFC templates, HTML, and JSX. Per our Option Philosophy, we would prefer not to add such an option. However, there are many users who want this feature, and major style guides like Airbnb’s JavaScript Style Guide and Vue’s style guide recommend the single attribute per line style. A PR to add this feature was opened in October 2019, and both it and the corresponding issue have received a significant amount of support from users. For us it was a hard decision to add this option. We hope the addition of this option will benefit many users without significantly harming our principles.
We've also added support formatting for some new JavaScript syntax proposals via Babel.
As discussed in a blog post from earlier this year, we have begun paying our maintainers from funds received from our sponsors. We would like to thank our many sponsors who have made this possible! We’re especially grateful to the following companies and individuals, who have donated over $1,000 to us:
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.
We’ve updated the version of TypeScript that we use to parse TS code to TypeScript 4.6. However, no new syntax was added in this release of TypeScript so we have not had to make any other changes.
Added the singleAttributePerLine option for specifying if Prettier should enforce single attribute per line in HTML, Vue and JSX.
<!-- Input -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier 2.5 -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier 2.6, with `{"singleAttributePerLine": false}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier 2.6, with `{"singleAttributePerLine": true}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div
data-a="1"
data-b="2"
data-c="3"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
// Input
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar")
}));
// Prettier 2.5
test(
"foo bar",
waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
})
);
// Prettier 2.6
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
}));
// Input
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C
// Prettier 2.5
if (condition1) expression1;
// comment A
else if (condition2) expression2;
// comment B
else expression3; // comment C
// Prettier 2.6
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C
// Input
let foo: (
// comment
never
);
// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!
// Prettier 2.6
let foo: // comment
never;
// Input
for (;;) continue // comment
;
// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!
// Prettier 2.6
for (;;)
continue; // comment
await expressions in JSX (#12088 & #12109 by @j-f1)await expressions in JSX are now inlined if their argument would be inlined.
// Input
{await Promise.all(
someVeryLongExpression
)}
{await (
<div>Lorem ipsum ...</div>
)}
// Prettier 2.5
{
await Promise.all(
someVeryLongExpression
)
}
{
await (
<div>Lorem ipsum ...</div>
)
}
// Prettier 2.6
{await Promise.all(
someVeryLongExpression
)}
{await (
<div>Lorem ipsum ...</div>
)}
acorn parser (#12172 by @fisker)A new value for the parser option has been added: acorn - A small, fast, JavaScript-based JavaScript parser.
Keep comments right after default cases (in switch statements) in the same line, when possible.
// Input
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default: // expression;
return ExpressionStatement.read();
}
}
// Prettier 2.5
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default:
// expression;
return ExpressionStatement.read();
}
}
// Prettier 2.6
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default: // expression;
return ExpressionStatement.read();
}
}
// Input
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
)
}
// Prettier 2.5
abstract class Foo {
abstract bar(userId);
/** comment explaining userId param */
}
// Prettier 2.6
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
);
}
This was a combination of two separate bugs: moving the comments before the superclass and adding multiple parenthesis around the superclass.
// Input
class Foo extends /** @type {Type} */ (Bar) {}
// Prettier 2.5
class Foo /** @type {Type} */ extends ((Bar)) {}
// Prettier 2.6
class Foo extends /** @type {Type} */ (Bar) {}
The Stage 3 proposal for Unicode Set Notation in regular expressions is now supported via Babel 7.17.0.
See the release blog post of Babel v7.17.0 and the README of this proposal for details. Also keep in mind our policy on non-standardized syntax before using this proposed syntax feature with Prettier.
// Examples
/[\p{Decimal_Number}--[0-9]]/v; // Non-ASCII decimal digits
"Did you see the 👩🏿❤️💋👩🏾 emoji?".match(/\p{RGI_Emoji}/v). // ["👩🏿❤️💋👩🏾"]
/[\r\n\q{\r\n|NEWLINE}]/v; // Matches \r, \n, \r\n or NEWLINE
ClassExpression with decorators (#12260 by @fisker)// Input
(@f() class {});
// Prettier 2.5
@f()
class {};
// Prettier 2.5 (Second format)
SyntaxError: A class name is required. (2:7)
1 | @f()
> 2 | class {};
| ^
3 |
// Prettier 2.6
(
@f()
class {}
);
For Flow, the comments will now be more aligned to how we print comments in assignments where the right-hand side is an object expression:
// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};
// Prettier 2.5
// comment explaining the props
type Props = {
isPlaying: boolean,
};
// Prettier 2.6
type Props =
// comment explaining the props
{
isPlaying: boolean,
};
This change also fixes an issue where a similarly-placed comment in TypeScript would be moved again after a second formatting operation:
// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};
// Prettier 2.5
type Props = { // comment explaining the props
isPlaying: boolean;
};
// Prettier 2.5 (2nd format)
type Props = {
// comment explaining the props
isPlaying: boolean;
};
// Prettier 2.6
type Props =
// comment explaining the props
{
isPlaying: boolean,
};
The Stage 2 TC39 proposal for destructuring of private fields is now supported via Babel 7.17. Please read our policy on non-standardized syntax before you decide to use this proposed syntax feature with Prettier.
// Example
class Foo {
constructor() {
console.log(this.#x); // => 1
const { #x: x } = this;
console.log(x); // => 1
}
}
Support auto accessors syntax that is introduced in new decorators proposal. Please read our policy on non-standardized syntax before you decide to use this proposed syntax feature with Prettier.
// Example
@defineElement("my-class")
class C extends HTMLElement {
@reactive accessor clicked = false;
}
// Input
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);
// Prettier 2.5, first format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb( // !!!
annularCooeedSplicesWalksWayWay
);
// Prettier 2.5, second format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb(
// !!!
annularCooeedSplicesWalksWayWay
);
// Prettier 2.6
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);
Definite assignment assertions are now printed even when they aren't followed by type annotations. This is an error in TypeScript, but TS is still able to parse the file.
// Input
let a!;
// Prettier 2.5
let a;
// Prettier 2.6
let a!;
TypeScript has allowed rest elements in tuple types (...T) to have normal elements come after them since TypeScript 4.2.
Prettier now prints a trailing comma for the trailing rest element (when trailing commas are enabled) for consistency and to reduce diffs if you decide to add more elements after the final element in the future.
// { trailingCommma: "all" }
// Input
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];
// Prettier 2.5
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement
];
// Prettier 2.6
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];
static indexer formatting (#12009 by @gkz)// Input
declare class A {
static [string]: boolean;
}
// Prettier 2.5
declare class A {
[string]: boolean;
}
// Prettier 2.6
declare class A {
static [string]: boolean;
}
This change also applies to some PostCSS features with similar syntax.
/* Input */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
/* Prettier 2.5 */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
/* Prettier 2.6 */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
PostCSS values can start with digits. Prettier interprets this as a number followed by a unit in the example below.
// Input
@value 4XLarge 28/36px;
.test {
font: 4XLarge Helvetica;
}
// Prettier 2.5
@value 4XLarge 28/36px;
.test {
font: 4xlarge Helvetica;
}
// Prettier 2.6
@value 4XLarge 28/36px;
.test {
font: 4XLarge Helvetica;
}
// Input
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null, // TODO some comment
)
);
}
// Prettier 2.5
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
r: null, // TODO som
)
);
}
// Prettier 2.6
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
// TODO some comment
)
);
}
selector() (#12213 by @duailibe)/* Input */
@mixin selector($param: 'value') {
}
/* Prettier 2.5 */
@mixin selector($param: 'value) {
}
/* Prettier 2.6 */
@mixin selector($param: 'value') {
}
v-for (#12113 by @fisker)// Input
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>
// Prettier 2.5
// Hangs
// Prettier 2.6
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>;
lang attribute of <template> to be empty (#12394 by @HallvardMM)Template tag should allow empty string lang="" or undefined lang
<!-- Input -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<!-- Prettier 2.5 -->
SyntaxError: Unexpected closing tag "v-menu". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (5:5)
[error] 3 | <v-menu offset-y>
[error] 4 | <template></template>
[error] > 5 | </v-menu>
[error] | ^^^^^^^^^
[error] 6 | </v-app-bar>
[error] 7 | </template>
<!-- Prettier 2.6 -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
This caused Prettier to unnecessarily add backslashes every time a file was formatted.
{{! Input }}
<p>\</p>
<p>\\</p>
<p>\\\</p>
{{! Prettier 2.5 }}
<p>\\</p>
<p>\\\</p>
<p>\\\\</p>
{{! Prettier 2.6 }}
<p>\</p>
<p>\\</p>
<p>\\\</p>
# Input
"""SchemaDefinition description is lost"""
schema {
query: Query
}
# Prettier 2.5
schema {
query: Query
}
# Prettier 2.6
"""
SchemaDefinition description is lost
"""
schema {
query: Query
}
# Input
block_with_ideographic_space: |
line-content # This line starts with U+3000
# Prettier 2.5
block_with_ideographic_space: |
// Prettier 2.6
block_with_ideographic_space: |
line-content # This line starts with U+3000
--no-plugin-search option to turn off plugin autoloading (#10274 by @fisker)To turn off plugin autoloading, use --no-plugin-search when using Prettier CLI or add { pluginSearchDirs: false } to options in prettier.format() or to the config file.
// Prettier 2.5
$ prettier . --plugin-search-dir=a-dir-without-plugins
// Prettier 2.6
$ prettier . --no-plugin-search
.swcrc (#12320 by @sosukesuzuki)Format the .swcrc file as a JSON file.
esbuild (#12055 by @fisker)We've switched our build process from Rollup to esbuild. esbuild is much faster and has improved our development experience. This is an internal change and should not affect users. If something isn’t working for you after upgrading, please open an issue!
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。