Prettier 2.0 “2020”
Better defaults, a better CLI and better heuristics. Oh, and TypeScript 3.8.
Highlights
JavaScript
#6685 by @mmkal)
Improved method chain breaking heuristic (Previously, any method call chain of length three or longer would be automatically broken into multiple lines. The new heuristic is based on the complexity of the call arguments in the chain, rather than simply on the chain's length. Now, if chained method calls have arguments which aren't easy to understand at a glance (e.g. functions or deeply-nested objects), the chain is broken. Otherwise, they're allowed to remain on one line. See prior issues #3197, #4765, #1565 and #4125 for context and examples.
// Output (Prettier stable)
if (
foo
.one()
.two()
.three() ===
bar
.four()
.five()
.six()
) {
// ...
}
// Output (Prettier master)
if (foo.one().two().three() === bar.four().five().six()) {
// ...
}
#7791 by @thorn0, #7011 by @evilebottnawi)
Ultimate fix for Closure-style type casts (Prettier has been trying not to corrupt these JSDoc type assertions since v1.6.0, with mixed results. As type checking based on JSDoc becomes increasingly common, we've been getting new bug reports about this syntax. The bugs were tricky because the required parentheses around the expression weren't part of the AST, so Prettier didn't have a good way to detect their presence.
Finally, we used the createParenthesizedExpressions
option of the Babel parser to represent parentheses in the AST using non-standard nodes. This helped fix all the reported bugs.
Consequently, Prettier won't recognize JSDoc type casts if the flow
or typescript
parser is used, but this is reasonable as this syntax makes little sense in Flow and TypeScript files.
// Input
const nestedAssertions = /** @type {MyType} */
(/** @type {unknown} */
(x));
// Prettier stable
const nestedAssertions /** @type {MyType} */ /** @type {unknown} */ = x;
// Prettier master
const nestedAssertions = /** @type {MyType} */ (/** @type {unknown} */ (x));
Reference documentation for this syntax: Closure Compiler, TypeScript (with --checkJs
).
TypeScript
#7631 by @thorn0, #7764 by @sosukesuzuki, #7804 by @sosukesuzuki)
TypeScript 3.8 (Prettier now supports the new syntax added in TypeScript 3.8:
CLI
#7587 by @fisker)
Test whether passed globs are names of existing files before treating them as globs (Since file names in Linux can contain almost any characters, strings like foo*.js
and [bar].css
are valid file names. Previously, if the user needed to format a file named [bar].css
, a glob escaping syntax had to be used: prettier "\[bar].css"
(this one doesn't work on Windows, where backslashes are treated as path separators) or prettier "[[]bar].css"
. Because of this, important use cases were broken. E.g. lint-staged passes absolute paths and knows nothing about the escaping syntax. Now, when Prettier CLI gets a glob, it first tries to resolve it as a literal file name.
.
(#7660 by @thorn0)
Expand directories, including It's finally possible to run prettier --write .
to format all supported files in the current directory and its subdirectories.
Directory names can be mixed with file names and glob patterns (e.g. prettier src "test/*.spec.js" foo.js
).
Also, the order in which files are processed has changed. Previously, all the files were sorted alphabetically before formatting. Now, their order corresponds to the order of the specified paths. For each path, the list of resolved files is sorted, but the full sorting of the resulting combined list isn't done anymore.
Breaking changes
API
#5813 by @chrisblossom)
Fix config overrides pattern matching to include dot files (Previously, configuration overrides weren't applied to files whose name had a leading dot.
#6908 by @fisker)
Drop support for Node versions older than 10 (The minimal required Node version now is 10.13.0.
trailingComma
to es5
(#6963 by @fisker)
Change default value for Before version 2.0, Prettier was avoiding trailing commas by default where possible. This made the resulting JavaScript compatible with now very old environments such as IE8, but implied some missed opportunities.
Prettier has included an option to configure trailing commas since its early days, and an initiative to change the default value has been out there for over three years.
Finally, the default value becomes es5
instead of none
in Prettier v2.0.
If the old behavior is still preferred, please configure Prettier with { "trailingComma": "none" }
.
There is a possibility that the default value will change to always
(meaning even more trailing commas) in a future major version of Prettier as the JavaScript ecosystem further matures.
#6993 by @fisker)
Remove deprecated API and change util signatures (- Parser
typescript-eslint
is removed. Use thetypescript
parser instead. prettier.util.mapDoc
is removed. Useprettier.doc.utils.mapDoc
instead.prettier.util.isNextLineEmpty
is updated.
UseisNextLineEmpty(text, node, locEnd)
instead ofisNextLineEmpty(text, node, options)
.prettier.util.isPreviousLineEmpty
is updated.
UseisPreviousLineEmpty(text, node, locStart)
instead ofisPreviousLineEmpty(text, node, options)
.prettier.util.getNextNonSpaceNonCommentCharacterIndex
is updated.
UsegetNextNonSpaceNonCommentCharacterIndex(text, node, locEnd)
instead ofgetNextNonSpaceNonCommentCharacterIndex(text, node, options)
.
arrowParens
to always
(#7430 by @kachkaev)
Change default value for Since version 1.9, Prettier has had an option to always wrap arrow function arguments with parentheses. In version 2.0, this behavior has become the default.
// Input
const fn = (x) => y => x + y;
// Prettier stable
const fn = x => y => x + y;
// Prettier master
const fn = (x) => (y) => x + y;
At first glance, avoiding parentheses in the isolated example above may look like a better choice because it results in less visual noise. However, when Prettier removes parentheses, it becomes harder to add type annotations, extra arguments, default values, or a variety of other things. Consistent use of parentheses provides a better developer experience when editing real codebases, which justifies the change.
You are encouraged to use the new default value, but if the old behavior is still preferred, please configure Prettier with { "arrowParens": "avoid" }
.
endOfLine
to lf
(#7435 by @kachkaev)
Change default value for Early versions of Prettier were formatting all files with the *nix flavor of line endings (\n
, also known as LF
).
This behavior was changed in #472, which allowed preserving Windows line endings (\r\n
, also known as CRLF
).
Since Prettier version 1.15, the flavor of line endings has been configurable via the endOfLine
option.
The default value was set to auto
for backwards compatibility, which meant that Prettier preserved whichever flavor of line endings was already present in a given file.
That meant Prettier converted mixed line endings within one file to what was found at the end of the first line.
However, line endings in separate files could still remain inconsistent.
Besides, contributors on different operating systems could accidentally change line endings in previously committed files and this would be fine with Prettier.
Doing so would produce a large git diff
and thus make the line-by-line history for a file (git blame
) harder to explore.
You are encouraged to use the new default value for endOfLine
, which is now lf
.
It may be also worth checking the option docs to ensure your project repository is configured correctly.
This will help you avoid a mix of line endings in the repo and a broken git blame
.
If the old behavior is still preferred, please configure Prettier with { "endOfLine": "auto" }
.
#7485 by @fisker)
Cache plugin search results (Previously, Prettier searched the file system for plugins on every prettier.format
call. Now, search results are cached. The cache can be cleared by calling prettier.clearConfigCache()
.
#7511, #7533, #7535, #7536 by @fisker)
Remove deprecated options and option values (- Options:
useFlowParser
(--flow-parser
in CLI) has been deprecated sincev0.0.10
.
- Option values:
parser
:babylon
(renamed tobabel
in v1.16.0),postcss
(renamed tocss
in v1.7.1)proseWrap
:true
(renamed toalways
in v1.9.0),false
(renamed tonever
in v1.9.0)trailingComma
:true
(renamed toes5
in v0.19.0),false
(renamed tonone
in v0.19.0)
version
parameter of prettier.getSupportInfo
(#7620 by @thorn0)
Remove the Since Prettier 1.8.0, it was possible to pass a version number to prettier.getSupportInfo
to get information on the languages, options, etc. supported by previous versions. This interesting but apparently not very useful API kept causing maintenance problems and has been removed in Prettier 2.0.0.
Other changes
JavaScript
function
keyword (#3903 by @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 by @bakkot)
Always add a space after the Previously, a space would be added after the function
keyword in function declarations, but not in function expressions. Now, for consistency, a space is always added after the function
keyword. The only exception is generator declarations where function*
is treated as a whole word.
// Prettier stable
const identity = function(value) {
return value;
};
function identity(value) {
return value;
}
const f = function<T>(value: T) {};
const g = function*() {};
// Prettier master
const identity = function (value) {
return value;
};
function identity(value) {
return value;
}
const f = function <T>(value: T) {};
const g = function* () {};
#6984 by @clement26695)
Fix unstable formatting of labeled statements with comments (// Input
loop1:
//test
const i = 3;
// Prettier stable (first output)
loop1: //test
const i = 3;
// Prettier stable (second output)
//test
loop1: const i = 3;
// Prettier master (first output)
//test
loop1: const i = 3;
#7010 by @evilebottnawi)
Fix formatting of logical, binary and sequence expressions in template literals (// Input
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo || bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo | bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo, bar)}`;
// Prettier stable
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo ||
bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo |
bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo,
bar)}`;
// Prettier master
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
foo || bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
foo | bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
(foo, bar)
}`;
#7026 by @thorn0)
Fix unstable formatting of logical expressions (// Input
const averredBathersBoxroomBuggyNurl =
bifornCringerMoshedPerplexSawder === 1 ||
(askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3);
// Prettier stable (first output)
const averredBathersBoxroomBuggyNurl =
bifornCringerMoshedPerplexSawder === 1 ||
askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3;
// Prettier stable (second output)
const averredBathersBoxroomBuggyNurl =
bifornCringerMoshedPerplexSawder === 1 ||
askTrovenaBeenaDependsRowans === 2 ||
glimseGlyphsHazardNoopsTieTie === 3;
// Prettier master (first and second outputs)
const averredBathersBoxroomBuggyNurl =
bifornCringerMoshedPerplexSawder === 1 ||
askTrovenaBeenaDependsRowans === 2 ||
glimseGlyphsHazardNoopsTieTie === 3;
throw
like return
(#7070 by @sosukesuzuki)
Format // Input
function foo() {
throw this.hasPlugin("dynamicImports") && this.lookahead().type === tt.parenLeft.right;
}
// Prettier stable
function foo() {
throw this.hasPlugin("dynamicImports") &&
this.lookahead().type === tt.parenLeft.right;
}
// Prettier master
function foo() {
throw (
this.hasPlugin("dynamicImports") &&
this.lookahead().type === tt.parenLeft.right
);
}
#7087 by @thorn0)
Fix indentation in ternaries nested in conditions of other ternaries (// Input
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20) ?
kochabCooieGameOnOboleUnweave : annularCooeedSplicesWalksWayWay)
? anodyneCondosMalateOverateRetinol : averredBathersBoxroomBuggyNurl;
// Prettier stable
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
? kochabCooieGameOnOboleUnweave
: annularCooeedSplicesWalksWayWay)
? anodyneCondosMalateOverateRetinol
: averredBathersBoxroomBuggyNurl;
// Prettier master
const foo = (
number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
? kochabCooieGameOnOboleUnweave
: annularCooeedSplicesWalksWayWay
)
? anodyneCondosMalateOverateRetinol
: averredBathersBoxroomBuggyNurl;
#7138 by @brainkim)
Tweak function composition logic for decorators (Because decorators modify the line following, splitting a decorator call’s arguments onto multiple lines can obscure the relationship between the decorator and its intended target, producing less-readable code. Therefore, the function composition logic introduced in #6033 has been changed to exclude decorator calls.
// Input
export class Item {
@OneToOne(() => Thing, x => x.item)
thing!: Thing;
}
// Output (Prettier stable)
export class Item {
@OneToOne(
() => Thing,
x => x.item,
)
thing!: Thing;
}
// Output (Prettier master)
export class Item {
@OneToOne(() => Thing, x => x.item)
thing!: Thing;
}
return
statement with comment (#7140 by @sosukesuzuki)
Correct semicolon placement in empty // Input
return // comment
;
// Prettier stable
return // comment;
// Prettier master
return; // comment
#7208 by @saschanaz)
Respect whitespace significance in HTML template literals (Prettier had been adding newlines for every HTML template string, which could lead to unexpected whitespace in rendered HTML.
This doesn't happen anymore unless --html-whitespace-sensitivity ignore
option is given.
// Input
html`<div>`;
html` <span>TEXT</span> `;
// Prettier stable
html`
<div></div>
`;
html`
<span>TEXT</span>
`;
// Prettier master
html`<div></div>`;
html` <span>TEXT</span> `;
#7367 by @cola119)
Remove unnecessary parens when yielding JSX (// Input
function* f() {
yield <div>generator</div>;
}
// Prettier stable
function* f() {
yield (<div>generator</div>);
}
// Prettier master
function* f() {
yield <div>generator</div>;
}
#7491 by @fisker)
Keep parentheses around comma expressions in default export declarations (Omitting these parentheses makes the code invalid.
// Input
export default (1, 2);
// Prettier stable
export default 1, 2;
// Prettier master
export default (1, 2);
#7500 by @thorn0)
Fix edge cases with parentheses around optional chaining (// Input
(foo?.bar)();
new (foo?.bar)();
// Prettier stable
foo?.bar();
new foo?.bar();
// Prettier master
(foo?.bar)();
new (foo?.bar)();
undefined
in parentheses in conditional expressions within JSX (#7504 by @fisker)
Don't wrap Previously, parentheses were added around any expression except null
. Now, undefined
is excluded too.
// Input
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
undefined
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
null
// Prettier stable
foo ? (
<span>
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
</span>
) : (
undefined
);
foo ? (
<span>
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
</span>
) : null;
// Prettier master
foo ? (
<span>
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
</span>
) : undefined;
foo ? (
<span>
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
</span>
) : null;
#7709 by @sosukesuzuki)
Keep comments position for assignments/variables (// Input
const foo = /* comments */
bar;
// Prettier stable
const foo /* comments */ = bar;
// Prettier master
const foo = /* comments */ bar;
TypeScript
#6400 by @JounQin & @thorn0)
Babel as an alternative parser for TypeScript (A new value for the parser
option has been added: babel-ts
, which makes use of Babel’s TypeScript plugin. The babel-ts
parser supports JavaScript features not yet supported by TypeScript (ECMAScript proposals, e.g. private methods and accessors), but it's less permissive when it comes to error recovery and less battle-tested than the typescript
parser. While Babel’s TypeScript plugin is quite mature, ASTs produced by the two parsers aren't 100% compatible. We tried to take the discrepancies into account, but there are most likely still cases where code gets formatted differently or even incorrectly. We call upon you, our users, to help us find such cases. If you see them, please raise issues. In the long run, this will help with unifying the AST format in future versions of the parsers and thus contribute to a better, more solid JavaScript parser ecosystem.
#6901 by @sosukesuzuki)
Fix formatting of complex types in arrow function return type annotations (// Input
export const getVehicleDescriptor = async (
vehicleId: string
): Promise<
Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};
// Prettier stable
export const getVehicleDescriptor = async (
vehicleId: string
): Promise<Collections.Parts.PrintedCircuitBoardAssembly["attributes"] &
undefined> => {};
// Prettier master
export const getVehicleDescriptor = async (
vehicleId: string
): Promise<
Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};
#7020 by @thorn0)
Print JSDoc-only types as is instead of throwing errors (Another fix related to error recovery. Should come in handy to those who migrate from Flow to TypeScript.
// Input
function fromFlow(arg: ?Maybe) {}
// Prettier stable
Error: unknown type: "TSJSDocNullableType"
// Prettier master
function fromFlow(arg: ?Maybe) {}
#7075 by @thorn0)
Don't print trailing commas after rest elements in tuples (- A rest element is always the last element of a tuple type. Nothing can be added after it.
- While TS is okay with this comma, Babel doesn't parse it
- In function parameters and array destructuring, such a comma is a syntax error. Keeping it in tuples is inconsistent.
// Input
type ValidateArgs = [
{
[key: string]: any;
},
string,
...string[],
];
// Prettier stable
type ValidateArgs = [
{
[key: string]: any;
},
string,
...string[],
];
// Prettier master
type ValidateArgs = [
{
[key: string]: any;
},
string,
...string[]
];
#7094 by @sosukesuzuki)
Fix indentation of arrow functions in variable declarations followed by comments (This could happen with code written in the no-semicolon style if the statement after the variable declaration was prefixed with a semicolon to avoid ASI issues.
// Input
const foo = () => {
return
}
// foo
;[1,2,3].forEach(bar)
// Prettier stable
const foo = () => {
return;
};
// foo
[1, 2, 3].forEach(bar);
// Prettier master
const foo = () => {
return;
};
// foo
[1, 2, 3].forEach(bar);
#7104 by @thorn0)
Fix printing of comments in function types (// Input
type f1 = (
currentRequest: {a: number},
// TODO this is a very very very very long comment that makes it go > 80 columns
) => number;
// Prettier stable
type f1 = (currentRequest: {
a: number;
}) => // TODO this is a very very very very long comment that makes it go > 80 columns
number;
// Prettier master
type f1 = (
currentRequest: { a: number }
// TODO this is a very very very very long comment that makes it go > 80 columns
) => number;
#7144 by @armano2)
Fix formatting of comments for function-like nodes (// Input
interface foo1 {
bar1/* foo */ (/* baz */) // bat
bar2/* foo */ ? /* bar */ (/* baz */) /* bat */;
bar3/* foo */ (/* baz */) /* bat */
bar4/* foo */ ? /* bar */ (bar: /* baz */ string): /* bat */ string;
/* foo */ (/* bar */): /* baz */ string;
/* foo */ (bar: /* bar */ string): /* baz */ string;
/* foo */ new /* bar */ (a: /* baz */ string): /* bat */ string
/* foo */ new /* bar */ (/* baz */): /* bat */ string
}
type foo7 = /* foo */ (/* bar */) /* baz */ => void
type foo8 = /* foo */ (a: /* bar */ string) /* baz */ => void
let foo9: new /* foo */ (/* bar */) /* baz */ => string;
let foo10: new /* foo */ (a: /* bar */ string) /* baz */ => string;
// Prettier stable
interface foo1 {
bar1 /* foo */ /* baz */(); // bat
bar2 /* foo */ /* bar */ /* baz */ /* bat */?();
bar3 /* foo */ /* baz */() /* bat */;
bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
/* foo */ (): /* bar */ /* baz */ string;
/* foo */ (bar: /* bar */ string): /* baz */ string;
/* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
/* foo */ new (): /* bar */ /* baz */ /* bat */ string;
}
type foo7 = /* foo */ () => /* bar */ /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new () => /* foo */ /* bar */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;
// Prettier master
interface foo1 {
bar1 /* foo */(/* baz */); // bat
bar2 /* foo */ /* bar */?(/* baz */) /* bat */;
bar3 /* foo */(/* baz */) /* bat */;
bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
/* foo */ (/* bar */): /* baz */ string;
/* foo */ (bar: /* bar */ string): /* baz */ string;
/* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
/* foo */ new (/* baz */): /* bar */ /* bat */ string;
}
type foo7 = /* foo */ (/* bar */) => /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new (/* bar */) => /* foo */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;
// Input
abstract class Test {
abstract foo12 /* foo */ (a: /* bar */ string): /* baz */ void
abstract foo13 /* foo */ (/* bar */) /* baz */
}
// Prettier stable
Error: Comment "foo" was not printed. Please report this error!
// Prettier master
abstract class Test {
abstract foo12 /* foo */(a: /* bar */ string): /* baz */ void;
abstract foo13 /* foo */(/* bar */); /* baz */
}
#7221 by @cola119)
Fix printing of mapped types with the template type omitted (// Input
type A = { [key in B] };
// Prettier stable
type A = { [key in B]: };
// Prettier master
type A = { [key in B] };
#7228 by @cola119)
Fix edge cases of printing index signatures (Even though index signatures without type annotations or with multiple parameters aren't valid TypeScript, the TypeScript parser supports this syntax. In line with the previous error recovery efforts, Prettier now makes sure its output still can be parsed in these cases. Previous versions produced unparseable code.
// Input
type A = { [key: string] };
type B = { [a: string, b: string]: string; };
// Prettier stable
type A = { [key: string]: };
type B = { [a: stringb: string]: string };
// Prettier master
type A = { [key: string] };
type B = { [a: string, b: string]: string };
#7729 by @sosukesuzuki)
Fix printing of comments in empty type parameters (// Input
const a: T</* comment */> = 1;
// Prettier stable
Error: Comment "comment" was not printed. Please report this error!
// Prettier master
const a: T</* comment */> = 1;
Flow
symbol
(#7472 by @fisker)
Add support for A new AST node type was introduced in flow@0.114.0, now it's recognized.
// Input
const x: symbol = Symbol();
// Prettier after updating Flow, but without this fix
Error: unknown type: "SymbolTypeAnnotation"
// Prettier master
const x: symbol = Symbol();
#7482 by @fisker)
Add support for decorators (// Input
/* @flow */
@decorator4
class Foo {
@decorator1
method1() {}
@decorator2
@decorator3
method2() {}
}
// Prettier stable
SyntaxError: Unexpected token `@`, expected the token `class` (2:1)
// Prettier master
/* @flow */
@decorator4
class Foo {
@decorator1
method1() {}
@decorator2
@decorator3
method2() {}
}
#7484 by @fisker)
Fix private class field declarations (// Input
class Foo {
#privateProp: number;
}
// Prettier stable
class Foo {
privateProp: number;
}
// Prettier master
class Foo {
#privateProp: number;
}
CSS
#6947 by @ark120202)
Don't lowercase element names in CSS selectors (Previously, Prettier already preserved casing of unknown element names, but it did lowercase names of HTML elements. This caused issues when CSS was applied to a case-sensitive document and there was an element with the same name as in HTML, which is the case in NativeScript. Prettier now always preserves original casing.
/* Input */
Label {
}
/* Prettier stable */
label {
}
/* Prettier master */
Label {
}
SCSS
#6918 by @fisker)
Don't add extra comma after last comment in map (Previously, when trailingComma
set to es5
, an extra comma was added after last comment in an SCSS map.
// Input
$my-map: (
'foo': 1, // Comment
'bar': 2, // Comment
);
// Prettier stable
$my-map: (
"foo": 1,
// Comment
"bar": 2,
// Comment,
);
// Prettier master
$my-map: (
"foo": 1,
// Comment
"bar": 2,
// Comment
);
#7211 by @sasurau4)
Fix whitespace in SCSS concatenation (// Input
a {
background-image: url($test-path + 'static/test.jpg');
}
// Prettier stable
a {
background-image: url($test-path+"static/test.jpg");
}
// Prettier master
a {
background-image: url($test-path + "static/test.jpg");
}
Less
postcss-less
(#6981 by @fisker, #7021 by @evilebottnawi, @thorn0)
Fix multiple long-standing issues by updating each
is supported now (#5653).!important
was being moved out of mixin call parameters (#3544).- Comments in rulesets passed to mixin calls caused duplicate semicolons (#3096).
::before
was broken in mixin call parameters (#5791).
HTML
pre
tags caused bad formatting of following closing tag (#5959 by @selvazhagan)
Comments in <!-- Input -->
<details>
<pre>
<!-- TEST -->
</pre></details>
<!-- Output (Prettier stable) -->
<details>
<pre>
<!-- TEST -->
</pre></details</details
>
<!-- Output (Prettier master) -->
<details>
<pre>
<!-- TEST -->
</pre>
</details>
#7273 by @fisker)
Don't treat colons as namespace prefix delimiters in tag names (In HTML5, colons don't have any special meaning in tag names. Previously, Prettier treated them the XML way, as namespace prefix delimiters, but no more. In practice, this means that tags whose ancestors have colons in their names are now treated as usual HTML tags: if they're known standard tags, their names can be lowercased and assumptions can be made about their whitespace sensitivity; custom elements whose names are unknown to Prettier retain the casing of their names and, if --html-whitespace-sensitivity
is set to css
, are treated as inline.
<!-- Input -->
<with:colon>
<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
<DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div><div> block </div>
<pre> pre pr
e</pre>
<textarea> pre-wrap pr
e-wrap </textarea>
<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
</with:colon>
<!-- Prettier stable -->
<with:colon>
<div>
looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
</div>
<DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div
><div> block </div>
<pre> pre pr e</pre>
<textarea> pre-wrap pr e-wrap </textarea>
<span>
looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
</span>
<span> inline </span><span> inline </span> <span> inline </span
><span> inline </span>
</with:colon>
<!-- Prettier master -->
<with:colon>
<div>
looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
</div>
<div>block</div>
<div>block</div>
<div>block</div>
<div>block</div>
<div>block</div>
<pre>
pre pr
e</pre
>
<textarea>
pre-wrap pr
e-wrap </textarea
>
<span>
looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
</span>
<span> inline </span><span> inline </span> <span> inline </span
><span> inline </span>
</with:colon>
#7293 by @fisker)
Do not throw on broken HTML (<!-- Input -->
<div><span>
<
<!-- Prettier stable -->
TypeError: Cannot read property 'start' of null
<!-- Prettier master -->
<div><span> < </span></div>
#7295 by @fisker)
Fix srcset parse error (<!-- Input -->
<img
srcset="
/media/examples/surfer-240-200.jpg
">
<!-- Prettier stable -->
Error: Mixed descriptor in srcset is not supported
<!-- Prettier master -->
<img srcset="/media/examples/surfer-240-200.jpg" />
pre
tag (#7392 by @fisker)
Fix error thrown on unclosed tag in <!-- Input -->
<pre><br></pre>
<pre><hr></pre>
<!-- Prettier stable -->
TypeError: Cannot read property 'start' of null
<!-- Prettier master -->
<pre><br /></pre>
<pre><hr /></pre>
#7395 by @fisker)
Fix inconsistent formatting of self-closing tags (<!-- Input -->
<span><input type="checkbox"/> </span>
<span><span><input type="checkbox"/></span></span>
<span><input type="checkbox"/></span>
<!-- Prettier stable -->
<span><input type="checkbox" /> </span>
<span
><span><input type="checkbox"/></span
></span>
<span><input type="checkbox"/></span>
<!-- Prettier master -->
<span><input type="checkbox" /> </span>
<span
><span><input type="checkbox" /></span
></span>
<span><input type="checkbox" /></span>
table
tags (#7461 by @ikatyang)
Fix empty lines unexpectedly added after <!-- Input -->
<table><tr>
</tr>
</table><div>Should not insert empty line before this div</div>
<!-- Prettier stable -->
<table>
<tr></tr>
</table>
<div>Should not insert empty line before this div</div>
<!-- Prettier master -->
<table>
<tr></tr>
</table>
<div>Should not insert empty line before this div</div>
class
attribute (#7555 by @fisker)
Format value of HTML <!-- Input -->
<div class=" foo
bar baz"></div>
<div class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"></div>
<!-- Prettier stable -->
<div
class=" foo
bar baz"
></div>
<div
class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"
></div>
<!-- Prettier master -->
<div class="foo bar baz"></div>
<div
class="another element with so many classes even can not fit one line really a lot and lot of classes"
></div>
style
attribute (#7556 by @fisker)
Format value of HTML <!-- Input -->
<div style=" color : red;
display :inline ">
</div>
<div style=" color : red;
display :inline; height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; ">
</div>
<!-- Prettier stable -->
<div
style=" color : red;
display :inline "
></div>
<div
style=" color : red;
display :inline; height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; "
></div>
<!-- Prettier master -->
<div style="color: red; display: inline;"></div>
<div
style="
color: red;
display: inline;
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
"
></div>
<!-- prettier ignore -->
for text (#7654 by @graemeworthy)
Support Previously, it worked only for tags. Useful for protecting various macros and pre-processor commands from being corrupted by formatting.
<!-- Input -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.
<!-- Prettier stable -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably
generated by some script.
<!-- Prettier master -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.
<!-- Input -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
| 1 | 1 | 0 | 0 | 1 | 1 | 5 | 16 | 4 | 0 |
<!-- Prettier stable -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats |
Tigers | | ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- |
---- | ------ | | 1 | 1 | 0 | 0 | 1 | 1 | 5 | 16 | 4 | 0 |
<!-- Prettier master -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
| 1 | 1 | 0 | 0 | 1 | 1 | 5 | 16 | 4 | 0 |
Vue
#7180 by @sosukesuzuki)
Format vue SFC containing JSX script (<!-- Input -->
<script lang="jsx">
export default {
data: () => ({
message: 'hello with jsx'
}),
render(h) {
return <div>{this.message}</div>
}
}
</script>
<!-- Prettier stable -->
<script lang="jsx">
export default {
data: () => ({
message: 'hello with jsx'
}),
render(h) {
return <div>{this.message}</div>
}
}
</script>
<!-- Prettier master -->
<script lang="jsx">
export default {
data: () => ({
message: "hello with jsx"
}),
render(h) {
return <div>{this.message}</div>;
}
};
</script>
#7479 by @fisker)
Don't print sole string literals in attributes on a new line (<!-- Input -->
<template>
<MyComponent
:attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
:attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"/>
</template>
<!-- Prettier stable -->
<template>
<MyComponent
:attr1="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`
"
:attr2="
'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'
"
/>
</template>
<!-- Prettier master -->
<template>
<MyComponent
:attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
:attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"
/>
</template>
#7781 by @fisker)
Fix indentation of Vue expressions (<!-- Input -->
<template>
<MyComponent v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>
<!-- Prettier stable -->
<template>
<MyComponent
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>
<!-- Prettier master -->
<template>
<MyComponent
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>
Angular
#6869 by @thorn0)
Unofficial rudimentary support for some of the most used directives of AngularJS 1.x (While there are some syntax incompatibilities (one-time bindings and the precedence of |
) between the expression languages of the old AngularJS and the new Angular, overall the two languages are compatible enough for legacy and hybrid AngularJS-based projects to be able to benefit from using Prettier. Previously, when Prettier formatted AngularJS templates using the Angular parser, it formatted expressions only in interpolations. Now, some of the most used AngularJS directives are formatted too, namely: ng-if
, ng-show
, ng-hide
, ng-class
, ng-style
.
<!-- Input -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading ">Warning!</div>
<!-- Output (Prettier stable) -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading ">Warning!</div>
<!-- Output (Prettier master) -->
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>
#7371 by @thorn0)
Fix formatting of i18n attributes (Prettier 1.19 added support for formatting i18n attributes, but putting the closing quote mark on a new line broke custom ids. This is fixed now.
<!-- Input -->
<div i18n-prop="Special-property|This is a special property with much important information@@MyTextId"
prop="My Text"></div>
<!-- Prettier stable -->
<div
i18n-prop="
Special-property|This is a special property with much important
information@@MyTextId
"
prop="My Text"
></div>
<!-- Prettier master -->
<div
i18n-prop="
Special-property|This is a special property with much important
information@@MyTextId"
prop="My Text"
></div>
Handlebars (alpha)
ConcatStatement
(#7051 by @dcyriller)
Fix superfluous line breaks in {{!-- input --}}
<a href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars">Link</a>
{{!-- Prettier stable --}}
<a
href="a-very-long-href-from-a-third-party-marketing-platform
{{id}}
longer-than-eighty-chars"
>
Link
</a>
{{!-- Prettier master --}}
<a
href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars"
>
Link
</a>
and
{{!-- input --}}
<div class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if goodbye false}} {{if goodbye true}}">
Hello
</div>
{{!-- Prettier stable --}}
<div
class="hello
{{if goodbye true}}
{{if goodbye false}}
{{if goodbye true}}
{{if goodbye false}}
{{if goodbye true}}"
>
Hello
</div>
{{!-- Prettier master --}}
<div
class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if
goodbye
false
}} {{if goodbye true}}"
>
Hello
</div>
#7052 by @dcyriller)
Fix a falling mustache issue ({{!-- input --}}
<GlimmerComponent @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}} />
{{!-- stable --}}
<GlimmerComponent
@progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue
}}
/>
{{!-- master --}}
<GlimmerComponent
@progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>
MustacheStatement
printing (#7157 by @dcyriller)
Improve {{!-- input --}}
<p>Hi here is your name, as it will be displayed {{firstName}} {{lastName}} , welcome!</p>
{{!-- stable --}}
<p>
Hi here is your name, as it will be displayed {{firstName}} {{lastName
}} , welcome!
</p>
{{!-- master --}}
<p>
Hi here is your name, as it will be displayed {{firstName}} {{
lastName
}} , welcome!
</p>
prettier-ignore
(#7275 by @chadian)
Add support for {{! Input}}
{{! prettier-ignore }}
<div>
"hello! my parent was ignored"
{{#my-crazy-component "shall" be="preserved"}}
<This
is="preserved"
/>
{{/my-crazy-component}}
</div>
{{#a-normal-component isRestoredTo = "order" }}
<ThisWillBeNormal backTo = "normal" />
{{/a-normal-component}}
{{! Prettier stable}}
{{! prettier-ignore }}
<div>
"hello! my parent was ignored"
{{#my-crazy-component "shall" be="preserved"}}
<This is="preserved" />
{{/my-crazy-component}}
</div>
{{#a-normal-component isRestoredTo="order"}}
<ThisWillBeNormal backTo="normal" />
{{/a-normal-component}}
{{! Prettier master}}
{{! prettier-ignore }}
<div>
"hello! my parent was ignored"
{{#my-crazy-component "shall" be="preserved"}}
<This
is="preserved"
/>
{{/my-crazy-component}}
</div>
{{#a-normal-component isRestoredTo='order'}}
<ThisWillBeNormal backTo='normal' />
{{/a-normal-component}}
#7306 by @dcyriller)
Support printing inline Handlebars in HTML (<!-- Input -->
<script type="text/x-handlebars-template">
{{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>
<!-- Output (Prettier stable) -->
<script type="text/x-handlebars-template">
{{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>
<!-- Output (Prettier master) -->
<script type="text/x-handlebars-template">
{{component
arg1='hey'
arg2=(helper this.arg7 this.arg4)
arg3=anotherone
arg6=this.arg8
}}
</script>
#7552 by @bantic)
Fix stripped value from AttrNode ({{!-- input --}}
<ul class="abc
def">
</ul>
{{!-- Prettier stable --}}
<ul class></ul>
{{!-- Prettier master --}}
<ul class="abc
def">
</ul>
#7575 by @mahirshah)
Preserve whitespace control characters ({{!-- input --}}
{{~#if bar}}
if1
{{~else~}}
else
{{~/if~}}
{{!-- stable --}}
{{#if bar}}
if1
{{else}}
else
{{/if}}
{{!-- master --}}
{{~#if bar}}
if1
{{~else~}}
else
{{~/if~}}
GraphQL
#7305 by @fisker)
Improve detection of separator between interfaces (Even though using a comma to separate multiple implemented interfaces is deprecated syntax, in order to support legacy use cases, Prettier keeps the original separator and doesn't wilfully replace commas with ampersands. Previously, however, this logic contained a bug, so the wrong separator could end up in the output. This is fixed now.
# Input
type Type1 implements A, B
# { & <-- Removing this comment changes the separator in stable
{a: a}
type Type2 implements A, B & C{a: a}
# Prettier stable
type Type1 implements A & B {
# { & <-- Removing this comment changes the separator in stable
a: a
}
type Type2 implements A & B & C {
a: a
}
# Prettier master
type Type1 implements A, B {
# { & <-- Removing this comment changes the separator in stable
a: a
}
type Type2 implements A, B & C {
a: a
}
Markdown
#6852 by @evilebottnawi)
Handle zero-based lists correctly (<!-- Input -->
0. List
1. List
2. List
<!-- Prettier stable -->
0. List
1. List
1. List
<!-- Prettier master -->
0. List
1. List
2. List
#7178 by @sasurau4)
Fix redundant leading spaces in lists (<!-- Input -->
- a
b
c
d
e
- a
b
c
d
e
1. a
b
c
d
e
1. a
b
c
d
e
<!-- Prettier stable -->
- a
b
c
d
e
- a
b
c
d
e
1. a
b
c
d
e
1. a
b
c
d
e
<!-- Prettier master -->
- a
b
c
d
e
- a
b
c
d
e
1. a
b
c
d
e
1. a
b
c
d
e
#7181 and #7220 by @sasurau4)
Fix HTML formatting broken if the beginning tag starts after a list item (Previously, when Prettier formatted an HTML tag placed just after a list item, it would insert indent and break the relationship of open and close tag. Now, Prettier no longer changes anything.
<!-- Input -->
- A list item.
<details><summary>Summary</summary>
<p>
- A list item.
</p>
</details>
- A list item
<blockquote>asdf</blockquote>
<!-- Prettier stable -->
- A list item.
<details><summary>Summary</summary>
<p>
- A list item.
</p>
</details>
- A list item
<blockquote>asdf</blockquote>
<!-- Prettier master -->
- A list item.
<details><summary>Summary</summary>
<p>
- A list item.
</p>
</details>
- A list item
<blockquote>asdf</blockquote>
#7203 by @sasurau4)
Fix formatting of multi-line footnote (<!-- Input -->
Here's a statement[^footnote].
[^footnote]:
Here's a multi-line footnote walking back the above statement, and showing
how it's all totally bollocks.
<!-- Prettier stable -->
Here's a statement[^footnote].
[^footnote]:
Here's a multi-line footnote walking back the above statement, and showing
how it's all totally bollocks.
<!-- Prettier master -->
Here's a statement[^footnote].
[^footnote]:
Here's a multi-line footnote walking back the above statement, and showing
how it's all totally bollocks.
MDX
#6398 by @JounQin)
Add support for JSX fragments (<!-- Input -->
<>
test <World /> test
</> 123
<!-- Output (Prettier stable) -->
<>
test <World /> test
</> 123
<!-- Output (Prettier master) -->
<>
test <World /> test
</> 123
#6949 by @Tigge & @thorn0)
Fix JSX parsing bugs introduced in Prettier 1.19 (MDX parsing for JSX failed when encountering JSX elements that where not
parsable as HTML, such as <Tag value={{a: 'b'}}>test</Tag>
<!-- Input -->
<Tag value={ {a : 'b' } }>test</ Tag>
<Foo bg={ 'red' } >
<div style={{ display: 'block'} }>
<Bar >hi </Bar>
{ hello }
{ /* another comment */}
</div>
</Foo>
<!-- Prettier stable -->
SyntaxError: Unexpected closing tag "Tag". 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 (1:35)
> 1 | <Tag value={ {a : 'b' } }>test</ Tag>
<!-- Prettier master -->
<Tag value={{ a: "b" }}>test</Tag>
<Foo bg={"red"}>
<div style={{ display: "block" }}>
<Bar>hi </Bar>
{hello}
{/* another comment */}
</div>
</Foo>
CLI
.cjs
and .yaml.sed
(#7210 by @sosukesuzuki)
Support file extensions # Prettier stable
$ prettier test.cjs
test.cjs[error] No parser could be inferred for file: test.cjs
# Prettier master
$ prettier test.cjs
"use strict";
console.log("Hello, World!");
--ignore-path
when prettier executes from a subdirectory (#7588 by @heylookltsme)
Respect Changes the filename used when filtering ignored files to be relative to the
--ignore-path
, if present, rather than the current working directory.
--stdin
(#7668 by @thorn0)
Remove This CLI flag, never properly documented, was supposed to make Prettier CLI read input from stdin, but Prettier CLI does so anyway when not given any file paths or glob patterns. So the flag was redundant. Now that it's been removed, if you use this flag in your commands, you'll see a warning: "Ignored unknown option". This warning is just information. It doesn't prevent the command from doing what it should do and doesn't affect the exit code.