diff --git a/changelog_unreleased/api/pr-6993.md b/changelog_unreleased/api/pr-6993.md index 4ba1109827a8..5f639e37c5c7 100644 --- a/changelog_unreleased/api/pr-6993.md +++ b/changelog_unreleased/api/pr-6993.md @@ -1,4 +1,4 @@ -#### Remove deprecated api ([#6993](https://github.com/prettier/prettier/pull/6993) by [@fisker](https://github.com/fisker)) +#### Remove deprecated API ([#6993](https://github.com/prettier/prettier/pull/6993) by [@fisker](https://github.com/fisker)) - Parser `typescript-eslint` is removed. diff --git a/changelog_unreleased/css/pr-6947.md b/changelog_unreleased/css/pr-6947.md index f3024066fc51..37f66d14b89f 100644 --- a/changelog_unreleased/css/pr-6947.md +++ b/changelog_unreleased/css/pr-6947.md @@ -1,7 +1,7 @@ #### Don't lowercase element names in CSS selectors ([#6947](https://github.com/prettier/prettier/pull/6947) by [@ark120202](https://github.com/ark120202)) 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 an there was an element with the same name as in HTML, which is the case in NativeScript. +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. diff --git a/changelog_unreleased/flow/pr-7482.md b/changelog_unreleased/flow/pr-7482.md index 59e9bb37aa8e..7d6a3c198a8d 100644 --- a/changelog_unreleased/flow/pr-7482.md +++ b/changelog_unreleased/flow/pr-7482.md @@ -1,4 +1,4 @@ -#### Add support for `decorators` ([#7482](https://github.com/prettier/prettier/pull/7482) by [@fisker](https://github.com/fisker)) +#### Add support for decorators ([#7482](https://github.com/prettier/prettier/pull/7482) by [@fisker](https://github.com/fisker)) ```jsx diff --git a/changelog_unreleased/flow/pr-7484.md b/changelog_unreleased/flow/pr-7484.md index ced21e2cefcf..7b06ae4b14a9 100644 --- a/changelog_unreleased/flow/pr-7484.md +++ b/changelog_unreleased/flow/pr-7484.md @@ -1,9 +1,7 @@ -#### Add support for the `ClassPrivateProperty` ([#7484](https://github.com/prettier/prettier/pull/7484) by [@fisker](https://github.com/fisker)) - -Previously, symbol `#` of `ClassPrivateProperty` is missing, now this bug been fixed. +#### Fix private class field declarations ([#7484](https://github.com/prettier/prettier/pull/7484) by [@fisker](https://github.com/fisker)) -```jsx +```js // Input class Foo {#privateProp: number;} diff --git a/changelog_unreleased/handlebars/pr-7051.md b/changelog_unreleased/handlebars/pr-7051.md index ac9a7cb9d35f..ce55c9f68f2b 100644 --- a/changelog_unreleased/handlebars/pr-7051.md +++ b/changelog_unreleased/handlebars/pr-7051.md @@ -1,4 +1,4 @@ -#### Fix superfluous line breaks in ConcatStatement ([#7051](https://github.com/prettier/prettier/pull/7051) by [@dcyriller](https://github.com/dcyriller)) +#### Fix superfluous line breaks in `ConcatStatement` ([#7051](https://github.com/prettier/prettier/pull/7051) by [@dcyriller](https://github.com/dcyriller)) ```hbs diff --git a/changelog_unreleased/handlebars/pr-7157.md b/changelog_unreleased/handlebars/pr-7157.md index 03808ddb6a7f..b49f82cada13 100644 --- a/changelog_unreleased/handlebars/pr-7157.md +++ b/changelog_unreleased/handlebars/pr-7157.md @@ -1,4 +1,4 @@ -#### Improve MustacheStatement printing ([#7157](https://github.com/prettier/prettier/pull/7157) by [@dcyriller](https://github.com/dcyriller)) +#### Improve `MustacheStatement` printing ([#7157](https://github.com/prettier/prettier/pull/7157) by [@dcyriller](https://github.com/dcyriller)) ```hbs diff --git a/changelog_unreleased/handlebars/pr-7275.md b/changelog_unreleased/handlebars/pr-7275.md index 3a2a6a7d88ab..e4b50c9e4ff0 100644 --- a/changelog_unreleased/handlebars/pr-7275.md +++ b/changelog_unreleased/handlebars/pr-7275.md @@ -1,4 +1,4 @@ -#### Glimmer: Add prettier-ignore ([#7275](https://github.com/prettier/prettier/pull/7275) by [@chadian](https://github.com/chadian)) +#### Add support for `prettier-ignore` ([#7275](https://github.com/prettier/prettier/pull/7275) by [@chadian](https://github.com/chadian)) ```hbs diff --git a/changelog_unreleased/handlebars/pr-7306.md b/changelog_unreleased/handlebars/pr-7306.md index c9cb7b9489c8..4a742faa54a4 100644 --- a/changelog_unreleased/handlebars/pr-7306.md +++ b/changelog_unreleased/handlebars/pr-7306.md @@ -1,4 +1,4 @@ -#### Support printing inline handlebars in html (through embed function) ([#7306](https://github.com/prettier/prettier/pull/7306) by [@dcyriller](https://github.com/dcyriller)) +#### Support printing inline Handlebars in HTML ([#7306](https://github.com/prettier/prettier/pull/7306) by [@dcyriller](https://github.com/dcyriller)) ``` diff --git a/changelog_unreleased/html/pr-7273.md b/changelog_unreleased/html/pr-7273.md index 29af027e7f14..e9ef5fdda638 100644 --- a/changelog_unreleased/html/pr-7273.md +++ b/changelog_unreleased/html/pr-7273.md @@ -1,6 +1,6 @@ #### Don't treat colons as namespace prefix delimiters in tag names ([#7273](https://github.com/prettier/prettier/pull/7273) by [@fisker](https://github.com/fisker)) -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 are treated as inline with `--html-whitespace-sensitivity css`. +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. ```html diff --git a/changelog_unreleased/html/pr-7293.md b/changelog_unreleased/html/pr-7293.md index 4cf00b2db633..39d437679ff6 100644 --- a/changelog_unreleased/html/pr-7293.md +++ b/changelog_unreleased/html/pr-7293.md @@ -1,10 +1,10 @@ -#### Do not throw on broken html ([#7293](https://github.com/prettier/prettier/pull/7293) by [@fisker](https://github.com/fisker)) +#### Do not throw on broken HTML ([#7293](https://github.com/prettier/prettier/pull/7293) by [@fisker](https://github.com/fisker)) ```html
-< +< TypeError: Cannot read property 'start' of null diff --git a/changelog_unreleased/html/pr-7461.md b/changelog_unreleased/html/pr-7461.md index b76753baf2c4..8085d31c4781 100644 --- a/changelog_unreleased/html/pr-7461.md +++ b/changelog_unreleased/html/pr-7461.md @@ -1,4 +1,4 @@ -#### Fix Empty lines unexpectedly added after `table` tags ([#7461](https://github.com/prettier/prettier/pull/7461) by [@ikatyang](https://github.com/ikatyang)) +#### Fix empty lines unexpectedly added after `table` tags ([#7461](https://github.com/prettier/prettier/pull/7461) by [@ikatyang](https://github.com/ikatyang)) ```html diff --git a/changelog_unreleased/javascript/pr-3903.md b/changelog_unreleased/javascript/pr-3903.md index 0c3a33437355..5652910131ee 100644 --- a/changelog_unreleased/javascript/pr-3903.md +++ b/changelog_unreleased/javascript/pr-3903.md @@ -2,22 +2,10 @@ 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, including in generators. Also, a space is now added between `yield` and `*`, which can help with [catching bugs](https://github.com/prettier/prettier/issues/7028#user-content-bugs). - -```js -// Input -const identity = function (value) { - return value; -}; -function identity (value) { - return value; -} -function * getRawText() { - for (const token of tokens) { - yield* token.getRawText(); - } -} -const f = function(value: T) {} +##### Functions + +```ts // Prettier stable const identity = function(value) { return value; @@ -25,11 +13,6 @@ const identity = function(value) { function identity(value) { return value; } -function* getRawText() { - for (const token of tokens) { - yield* token.getRawText(); - } -} const f = function(value: T) {}; // Prettier master @@ -39,10 +22,34 @@ const identity = function (value) { function identity(value) { return value; } -function *getRawText() { - for (const token of tokens) { - yield *token.getRawText(); +const f = function (value: T) {}; +``` + +##### Generators + + +```ts +// Prettier stable +function* foo() {} +class Bar { + static *foo() { + yield* foo(); + } +} +baz = { + async *foo() {} +}; +f = function*() {}; + +// Prettier master +function *foo() {} +class Bar { + static *foo() { + yield *foo(); } } -const f = function (value: T) {}; +baz = { + async *foo() {} +}; +f = function *() {}; ``` diff --git a/changelog_unreleased/javascript/pr-6984.md b/changelog_unreleased/javascript/pr-6984.md index 18d45dbc1aa3..902455029368 100644 --- a/changelog_unreleased/javascript/pr-6984.md +++ b/changelog_unreleased/javascript/pr-6984.md @@ -1,6 +1,4 @@ -#### Fix formatting of labeled statements with comments ([#6984](https://github.com/prettier/prettier/pull/6984) by [@clement26695](https://github.com/clement26695)) - -Formatting of comments in labeled statements was not stable +#### Fix unstable formatting of labeled statements with comments ([#6984](https://github.com/prettier/prettier/pull/6984) by [@clement26695](https://github.com/clement26695)) ```jsx diff --git a/changelog_unreleased/javascript/pr-7011.md b/changelog_unreleased/javascript/pr-7011.md index f86a2699d28b..642c75a7034b 100644 --- a/changelog_unreleased/javascript/pr-7011.md +++ b/changelog_unreleased/javascript/pr-7011.md @@ -1,6 +1,4 @@ -#### Preserve parentheses for JSDoc type casting with extra spaces and asterisk at end ([#7011](https://github.com/prettier/prettier/pull/7011) by [@evilebottnawi](https://github.com/evilebottnawi)) - -Formatting of comments in labeled statements was not stable +#### Preserve parentheses for JSDoc type casting with extra trailing spaces and asterisks ([#7011](https://github.com/prettier/prettier/pull/7011) by [@evilebottnawi](https://github.com/evilebottnawi)) ```javascript diff --git a/changelog_unreleased/javascript/pr-7367.md b/changelog_unreleased/javascript/pr-7367.md index 391e7973eda3..8e4d9de10fa8 100644 --- a/changelog_unreleased/javascript/pr-7367.md +++ b/changelog_unreleased/javascript/pr-7367.md @@ -1,10 +1,10 @@ -#### Fix: remove unnecessary parens when yielding jsx ([#7367](https://github.com/prettier/prettier/pull/7367) by [@cola119](https://github.com/cola119)) +#### Fix: remove unnecessary parens when yielding JSX ([#7367](https://github.com/prettier/prettier/pull/7367) by [@cola119](https://github.com/cola119)) ```jsx // Input function* f() { - yield
generator
+ yield
generator
; } // Prettier stable @@ -14,6 +14,6 @@ function* f() { // Prettier master function* f() { - yield
generator
+ yield
generator
; } ``` diff --git a/changelog_unreleased/markdown/pr-7181.md b/changelog_unreleased/markdown/pr-7181.md index 0498a031f67e..04b9ed2c5635 100644 --- a/changelog_unreleased/markdown/pr-7181.md +++ b/changelog_unreleased/markdown/pr-7181.md @@ -1,6 +1,6 @@ -#### fix HTML formatting broken if the beginning tag starts after a list item ([#7181](https://github.com/prettier/prettier/pull/7181) by [@sasurau4](https://github.com/sasurau4), [#7220](https://github.com/prettier/prettier/pull/7220) by [@sasurau4](https://github.com/sasurau4)) +#### Fix HTML formatting broken if the beginning tag starts after a list item ([#7181](https://github.com/prettier/prettier/pull/7181) and [#7220](https://github.com/prettier/prettier/pull/7220) by [@sasurau4](https://github.com/sasurau4)) -Previously, when Prettier format the html tag that starts after a list item, it would insert indent and break the relationship of open and close tag. Now, Prettier no longer change anything. +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. ```md diff --git a/changelog_unreleased/mdx/pr-6398.md b/changelog_unreleased/mdx/pr-6398.md index 6d7a883744d2..796eab50a600 100644 --- a/changelog_unreleased/mdx/pr-6398.md +++ b/changelog_unreleased/mdx/pr-6398.md @@ -1,4 +1,4 @@ -#### Fix JSX Fragment format incorrectly ([#6398](https://github.com/prettier/prettier/pull/6398) by [@JounQin](https://github.com/JounQin)) +#### Add support for JSX fragments ([#6398](https://github.com/prettier/prettier/pull/6398) by [@JounQin](https://github.com/JounQin)) Previous versions format JSX Fragment incorrectly in mdx, this has been fixed in this version. diff --git a/changelog_unreleased/mdx/pr-6949.md b/changelog_unreleased/mdx/pr-6949.md index bf24baca188e..5c40294c020d 100644 --- a/changelog_unreleased/mdx/pr-6949.md +++ b/changelog_unreleased/mdx/pr-6949.md @@ -1,4 +1,4 @@ -#### Fix MDX html parsing errors ([#6949](https://github.com/prettier/prettier/pull/6949) by [@Tigge](https://github.com/Tigge) & [@thorn0](https://github.com/thorn0)) +#### Fix JSX parsing bugs introduced in Prettier 1.19 ([#6949](https://github.com/prettier/prettier/pull/6949) by [@Tigge](https://github.com/Tigge) & [@thorn0](https://github.com/thorn0)) MDX parsing for JSX failed when encountering JSX elements that where not parsable as HTML. Such as `test` @@ -23,7 +23,7 @@ parsable as HTML. Such as `test` 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 | test | ^ - 2 | + 2 | 3 | 4 |
``` diff --git a/changelog_unreleased/typescript/pr-7020.md b/changelog_unreleased/typescript/pr-7020.md index 76e2fabba7ae..07ae83664747 100644 --- a/changelog_unreleased/typescript/pr-7020.md +++ b/changelog_unreleased/typescript/pr-7020.md @@ -1,5 +1,7 @@ #### Print JSDoc-only types as is instead of throwing strange errors ([#7020](https://github.com/prettier/prettier/pull/7020) by [@thorn0](https://github.com/thorn0)) +Another fix related to error recovery. Should come in handy to those who migrate from Flow to TypeScript. + ```jsx // Input diff --git a/scripts/draft-blog-post.js b/scripts/draft-blog-post.js new file mode 100644 index 000000000000..f3b7ec8f3ed2 --- /dev/null +++ b/scripts/draft-blog-post.js @@ -0,0 +1,89 @@ +#!/usr/bin/env node + +"use strict"; + +const fs = require("fs"); +const path = require("path"); + +const changelogUnreleasedDir = path.join(__dirname, "../changelog_unreleased"); +const blogDir = path.join(__dirname, "../website/blog"); + +const version = require("../package.json").version.replace(/-.+/, ""); +const versionShort = version.replace(/\.0$/, ""); + +const categories = [ + { dir: "javascript", title: "JavaScript" }, + { dir: "typescript", title: "TypeScript" }, + { dir: "flow", title: "Flow" }, + { dir: "json", title: "JSON" }, + { dir: "css", title: "CSS" }, + { dir: "scss", title: "SCSS" }, + { dir: "less", title: "Less" }, + { dir: "html", title: "HTML" }, + { dir: "vue", title: "Vue" }, + { dir: "angular", title: "Angular" }, + { dir: "lwc", title: "LWC" }, + { dir: "handlebars", title: "Handlebars" }, + { dir: "graphql", title: "GraphQL" }, + { dir: "markdown", title: "Markdown" }, + { dir: "mdx", title: "MDX" }, + { dir: "yaml", title: "YAML" }, + { dir: "api", title: "API" }, + { dir: "cli", title: "CLI" } +]; + +const categoriesByDir = categories.reduce((result, category) => { + result[category.dir] = category; + return result; +}, {}); + +const dirs = fs + .readdirSync(changelogUnreleasedDir, { withFileTypes: true }) + .filter(entry => entry.isDirectory()); + +for (const dir of dirs) { + const dirPath = path.join(changelogUnreleasedDir, dir.name); + const category = categoriesByDir[dir.name]; + + if (!category) { + throw new Error("Unknown category: " + dir.name); + } + + category.entries = fs + .readdirSync(path.join(changelogUnreleasedDir, dir.name)) + .filter(fileName => /^pr-\d+\.md$/.test(fileName)) + .map(fileName => + fs + .readFileSync(path.join(dirPath, fileName), "utf8") + .trim() + .replace(/^#### [a-z]/, s => s.toUpperCase()) + ); +} + +const result = [ + `--- +author: "🚧" +authorURL: "https://github.com/🚧" +title: "Prettier ${versionShort}: 🚧" +---`, + "🚧 Write an introduction here.", + "", + "## Highlights", + "🚧 Move the most interesting changes here.", + "## Other changes" +]; + +for (const category of categories) { + if (!category.entries || category.entries.length === 0) { + continue; + } + + result.push("### " + category.title); + + result.push(...category.entries); +} + +fs.writeFileSync( + path.join(blogDir, `${new Date().getFullYear()}-00-00-${version}.md`), + result.join("\n\n") + "\n" +); diff --git a/website/blog/2020-00-00-2.0.0.md b/website/blog/2020-00-00-2.0.0.md new file mode 100644 index 000000000000..74ee1dd4b076 --- /dev/null +++ b/website/blog/2020-00-00-2.0.0.md @@ -0,0 +1,1537 @@ +--- +author: "🚧" +authorURL: "https://github.com/🚧" +title: "Prettier 2.0: 🚧" +--- + +🚧 Write an introduction here. + + + +## Highlights + +🚧 Move the most interesting changes here. + +## Other changes + +### JavaScript + +#### Always add a space after the `function` keyword ([#3903](https://github.com/prettier/prettier/pull/3903) by [@j-f1](https://github.com/j-f1), [@josephfrazier](https://github.com/josephfrazier), [@sosukesuzuki](https://github.com/sosukesuzuki), [@thorn0](https://github.com/thorn0)) + +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, including in generators. Also, a space is now added between `yield` and `*`, which can help with [catching bugs](https://github.com/prettier/prettier/issues/7028#user-content-bugs). + +##### Functions + + +```ts +// Prettier stable +const identity = function(value) { + return value; +}; +function identity(value) { + return value; +} +const f = function(value: T) {}; + +// Prettier master +const identity = function (value) { + return value; +}; +function identity(value) { + return value; +} +const f = function (value: T) {}; +``` + +##### Generators + + +```ts +// Prettier stable +function* foo() {} +class Bar { + static *foo() { + yield* foo(); + } +} +baz = { + async *foo() {} +}; +f = function*() {}; + +// Prettier master +function *foo() {} +class Bar { + static *foo() { + yield *foo(); + } +} +baz = { + async *foo() {} +}; +f = function *() {}; +``` + +#### Method chain breaking ([#6685](https://github.com/prettier/prettier/pull/6685) by [@mmkal](https://github.com/mmkal)) + +Previously, any chained method calls of length three or longer would be automatically broken. This uses a heuristic for the complexity of the arguments in the chain, rather than just the chain 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](https://github.com/prettier/prettier/issues/3107), [#4765](https://github.com/prettier/prettier/pull/4765), [#1565](https://github.com/prettier/prettier/issues/1565) and [#4125](https://github.com/prettier/prettier/pull/4125) for context and examples. + + +```javascript +// Input +foo.one().two().three() === bar.four().five().six(); + +// Output (Prettier stable) +foo + .one() + .two() + .three() === + bar + .four() + .five() + .six(); + +// Output (Prettier master) +foo.one().two().three() === bar.four().five().six(); +``` + +#### Fix unstable formatting of labeled statements with comments ([#6984](https://github.com/prettier/prettier/pull/6984) by [@clement26695](https://github.com/clement26695)) + + +```jsx +// 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; +``` + +#### Fix formatting of logical, binary and sequence expressions in template literals ([#7010](https://github.com/prettier/prettier/pull/7010) by [@evilebottnawi](https://github.com/evilebottnawi)) + + +```js +// 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) +}`; +``` + +#### Preserve parentheses for JSDoc type casting with extra trailing spaces and asterisks ([#7011](https://github.com/prettier/prettier/pull/7011) by [@evilebottnawi](https://github.com/evilebottnawi)) + + +```javascript +// Input +const foo = /** @type {!Foo} **/ (baz); +const bar = /** @type {!Foo} * * */(baz); + +// Prettier stable +const foo = /** @type {!Foo} **/ baz; +const bar = /** @type {!Foo} * * */ baz; + +// Prettier master +const foo = /** @type {!Foo} **/ (baz); +const bar = /** @type {!Foo} * * */ (baz); +``` + +#### Fix unstable formatting of logical expressions ([#7026](https://github.com/prettier/prettier/pull/7026) by [@thorn0](https://github.com/thorn0)) + + +```jsx +// 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 output) +const averredBathersBoxroomBuggyNurl = + bifornCringerMoshedPerplexSawder === 1 || + askTrovenaBeenaDependsRowans === 2 || + glimseGlyphsHazardNoopsTieTie === 3; +``` + +#### Format `throw` like `return` ([#7070](https://github.com/prettier/prettier/pull/7070) by [@sosukesuzuki](https://github.com/sosukesuzuki)) + + +```js +// 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 + ); +} +``` + +#### Fix indentation in ternaries nested in conditions of other ternaries ([#7087](https://github.com/prettier/prettier/pull/7087) by [@thorn0](https://github.com/thorn0)) + + +```jsx +// 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; +``` + +#### Tweak function composition logic for decorators ([#7138](https://github.com/prettier/prettier/pull/7138) by [@brainkim](https://github.com/brainkim)) + +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. + + +```jsx +// 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; +} +``` + +#### Fix moving semicolon to trailing comment in `return` ([#7140](https://github.com/prettier/prettier/pull/7140) by [@sosukesuzuki](https://github.com/sosukesuzuki)) + + +```js +// Input +return // comment +; + +// Prettier stable +return // comment; + +// Prettier master +return; // comment +``` + +#### Fix: remove unnecessary parens when yielding JSX ([#7367](https://github.com/prettier/prettier/pull/7367) by [@cola119](https://github.com/cola119)) + + +```jsx +// Input +function* f() { + yield
generator
; +} + +// Prettier stable +function* f() { + yield (
generator
); +} + +// Prettier master +function* f() { + yield
generator
; +} +``` + +#### Keep parentheses of `SequenceExpression` for `ExportDefaultDeclaration` ([#7491](https://github.com/prettier/prettier/pull/7491) by [@fisker](https://github.com/fisker)) + +Remove parentheses of `SequenceExpression` breaks `ExportDefaultDeclaration`. + + +```jsx +// Input +export default (1, 2); + +// Prettier stable +export default 1, 2; + +// Prettier master +export default (1, 2); +``` + +#### Fix edge cases with parentheses around optional chaining ([#7500](https://github.com/prettier/prettier/pull/7500) by [@thorn0](https://github.com/thorn0)) + + +```jsx +// Input +(foo?.bar)(); +new (foo?.bar)(); + +// Prettier stable +foo?.bar(); +new foo?.bar(); + +// Prettier master +(foo?.bar)(); +new (foo?.bar)(); +``` + +### TypeScript + +#### Babel as an alternative parser for TypeScript ([#6400](https://github.com/prettier/prettier/pull/6400) by [@JounQin](https://github.com/JounQin) & [@thorn0](https://github.com/thorn0)) + +A new value for the `parser` option has been added: `babel-ts`, which stands for Babel with its TypeScript support enabled. The `babel-ts` parser supports JavaScript features not yet supported by TypeScript (ECMAScript proposals, e.g. [private methods and accessors](https://github.com/tc39/proposal-private-methods)), 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 still must remain cases where code gets formatted differently or even incorrectly. We call upon the community 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](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/typescript-estree#ast-alignment-tests) in future versions of the parsers and thus contribute to a better, more solid JavaScript parser ecosystem. + +#### Fix formatting of type operator as arrow function return type ([#6901](https://github.com/prettier/prettier/pull/6901) by [@sosukesuzuki](https://github.com/sosukesuzuki)) + + +```ts +// Input +export const getVehicleDescriptor = async ( + vehicleId: string +): Promise< + Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined +> => {}; + +// Prettier stable +export const getVehicleDescriptor = async ( + vehicleId: string +): Promise => {}; + +// Prettier master +export const getVehicleDescriptor = async ( + vehicleId: string +): Promise< + Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined +> => {}; +``` + +#### Print JSDoc-only types as is instead of throwing strange errors ([#7020](https://github.com/prettier/prettier/pull/7020) by [@thorn0](https://github.com/thorn0)) + +Another fix related to error recovery. Should come in handy to those who migrate from Flow to TypeScript. + + +```jsx +// Input +function fromFlow(arg: ?Maybe) {} + +// Prettier stable +Error: unknown type: "TSJSDocNullableType" + at printPathNoParens (https://prettier.io/lib/standalone.js:26012:13) + at Object.genericPrint$3 [as print] (https://prettier.io/lib/standalone.js:23541:28) + +// Prettier master +function fromFlow(arg: ?Maybe) {} +``` + +#### Don't print trailing commas after rest elements in tuples ([#7075](https://github.com/prettier/prettier/pull/7075) by [@thorn0](https://github.com/thorn0)) + +- 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](https://github.com/babel/babel/issues/10769) +- In function parameters and array destructuring, such a comma is a syntax error. Keeping it in tuples is inconsistent. + + +```jsx +// 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[] +]; +``` + +#### Remove extra indentation for arrow function on variable declaration with comment ([#7094](https://github.com/prettier/prettier/pull/7094) by [@sosukesuzuki](https://github.com/sosukesuzuki)) + + +```ts +// Input +const foo = () => { + return; +} + +// foo +; + +// Prettier stable +const foo = () => { + return; + }; + + // foo + +// Prettier master +const foo = () => { + return; +}; + +// foo +``` + +#### Fix printing of comments in function types ([#7104](https://github.com/prettier/prettier/pull/7104) by [@thorn0](https://github.com/thorn0)) + + +```ts +// 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; +``` + +#### Fix formatting comments for function-like nodes ([#7144](https://github.com/prettier/prettier/pull/7144) by [@armano2](https://github.com/armano2)) + + +```ts +// 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; +``` + +```ts +// 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! + at https://prettier.io/lib/standalone.js:15543:15 + at Array.forEach () + at ensureAllCommentsPrinted (https://prettier.io/lib/standalone.js:15541:17) + at coreFormat (https://prettier.io/lib/standalone.js:15592:5) + at format (https://prettier.io/lib/standalone.js:15832:75) + at formatWithCursor (https://prettier.io/lib/standalone.js:15848:14) + at https://prettier.io/lib/standalone.js:31794:17 + at Object.format (https://prettier.io/lib/standalone.js:31802:14) + at formatCode (https://prettier.io/worker.js:234:21) + at handleMessage (https://prettier.io/worker.js:185:18) + +// Prettier master +abstract class Test { + abstract foo12 /* foo */(a: /* bar */ string): /* baz */ void; + abstract foo13 /* foo */(/* bar */); /* baz */ +} +``` + +#### Fix printing of mapped types with the template type omitted ([#7221](https://github.com/prettier/prettier/pull/7221) by [@cola119](https://github.com/cola119)) + + +```ts +// Input +type A = { [key in B] }; + +// Prettier stable +type A = { [key in B]: }; + +// Prettier master +type A = { [key in B] }; +``` + +#### Fix edge cases of printing index signatures ([#7228](https://github.com/prettier/prettier/pull/7228) by [@cola119](https://github.com/cola119)) + +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](https://prettier.io/blog/2019/11/09/1.19.0.html#enable-formatting-even-if-there-are-parse-errors-in-some-cases-6816-by-thorn0-and-the-babel-team), Prettier now makes sure its output still can be parsed in these cases. Previous versions produced unparseable code. + + +```ts +// 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 }; +``` + +### Flow + +#### Add typing support for the `symbol` type ([#7472](https://github.com/prettier/prettier/pull/7472) by [@fisker](https://github.com/fisker)) + +New ast node type is introduced in flow@0.114.0, now it's recognized. + + +```jsx +// Input +const x: symbol = Symbol(); + +// Prettier stable +Error: unknown type: "SymbolTypeAnnotation" +(Error throws on next branch) + +// Prettier master +const x: symbol = Symbol(); +``` + +#### Add support for decorators ([#7482](https://github.com/prettier/prettier/pull/7482) by [@fisker](https://github.com/fisker)) + + +```jsx +// Input +/* @flow */ + +@decorator4 +class Foo { + @decorator1 + method1() {} + + @decorator2 + @decorator3 + method2() {} +} + +// Prettier stable +SyntaxError: Unexpected token `@`, expected the token `class` (3:1) + 1 | /* @flow */ + 2 | +> 3 | @decorator4 + | ^ + 4 | class Foo { + 5 | @decorator1 + 6 | method1() {} + +// Prettier master +/* @flow */ + +@decorator4 +class Foo { + @decorator1 + method1() {} + + @decorator2 + @decorator3 + method2() {} +} +``` + +#### Fix private class field declarations ([#7484](https://github.com/prettier/prettier/pull/7484) by [@fisker](https://github.com/fisker)) + + +```js +// Input +class Foo {#privateProp: number;} + +// Prettier stable +class Foo { + privateProp: number; +} + +// Prettier master +class Foo { + #privateProp: number; +} +``` + +### CSS + +#### Don't lowercase element names in CSS selectors ([#6947](https://github.com/prettier/prettier/pull/6947) by [@ark120202](https://github.com/ark120202)) + +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. + + +```css +/* Input */ +Label { +} + +/* Prettier stable */ +label { +} + +/* Prettier master */ +Label { +} +``` + +### SCSS + +#### Don't add extra comma after last comment in map ([#6918](https://github.com/prettier/prettier/pull/6918) by [@fisker](https://github.com/fisker)) + +Previously, when `trailingComma` set to `es5`, extra comma added after last comment in map. + + +```scss +// 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 +); +``` + +#### Fix scss variable string concatenation removing spaces ([#7211](https://github.com/prettier/prettier/pull/7211) by [@sasurau4](https://github.com/sasurau4)) + +Previously, when Prettier format the scss variable string concatenation, it would remove spaces. Now, Prettier insert spaces around plus operator. + + +```scss +// 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"); +} +``` + +### HTML + +#### Comments in `pre` tags caused bad formatting of following closing tag ([#5959](https://github.com/prettier/prettier/pull/5959) by [@selvazhagan](https://github.com/selvazhagan)) + + +``` + +
+
+    
+  
+ + +
+
+    
+  
+ + +
+
+    
+  
+
+``` + +#### Don't treat colons as namespace prefix delimiters in tag names ([#7273](https://github.com/prettier/prettier/pull/7273) by [@fisker](https://github.com/fisker)) + +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. + + +```html + + +
looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+
block
block
block
block
block
+
 pre pr
+e
+ + looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline + inline inline inline inline +
+ + + +
+ looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block +
+
block
block
block
block
block
+
 pre pr e
+ + + looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline + + inline inline inline inline +
+ + + +
+ looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block +
+
block
+
block
+
block
+
block
+
block
+
+ pre pr
+e
+ + + looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline + + inline inline inline inline +
+``` + +#### Do not throw on broken HTML ([#7293](https://github.com/prettier/prettier/pull/7293) by [@fisker](https://github.com/fisker)) + + +```html + +
+< + + +TypeError: Cannot read property 'start' of null + at hasTrailingLineBreak (https://prettier.io/lib/standalone.js:19694:169) + at forceBreakContent (https://prettier.io/lib/standalone.js:19668:154) + at Object.genericPrint$2 [as print] (https://prettier.io/lib/standalone.js:21068:126) + at callPluginPrintFunction (https://prettier.io/lib/standalone.js:15302:20) + at https://prettier.io/lib/standalone.js:15253:18 + at Object.printComments (https://prettier.io/lib/standalone.js:14974:19) + at printGenerically (https://prettier.io/lib/standalone.js:15252:24) + at printChild (https://prettier.io/lib/standalone.js:21227:14) + at https://prettier.io/lib/standalone.js:21211:104 + at FastPath.map (https://prettier.io/lib/standalone.js:15155:23) + + +
<
+``` + +#### Fix srcset parse error ([#7295](https://github.com/prettier/prettier/pull/7295) by [@fisker](https://github.com/fisker)) + + +```html + + + + +Error: Mixed descriptor in srcset is not supported + at printImgSrcset (https://prettier.io/lib/standalone.js:20867:13) + at printEmbeddedAttributeValue (https://prettier.io/lib/standalone.js:21538:26) + at Object.embed$2 [as embed] (https://prettier.io/lib/standalone.js:21009:43) + at Object.printSubtree (https://prettier.io/lib/standalone.js:15170:30) + at callPluginPrintFunction (https://prettier.io/lib/standalone.js:15288:31) + at https://prettier.io/lib/standalone.js:15253:18 + at Object.printComments (https://prettier.io/lib/standalone.js:14974:19) + at printGenerically (https://prettier.io/lib/standalone.js:15252:24) + at https://prettier.io/lib/standalone.js:21285:175 + at FastPath.map (https://prettier.io/lib/standalone.js:15155:23) + + + +``` + +#### Fix error throws on unclosed tag in `pre` tag ([#7392](https://github.com/prettier/prettier/pull/7392) by [@fisker](https://github.com/fisker)) + + +```html + +

+

+ + +TypeError: Cannot read property 'start' of null + at printChild (https://prettier.io/lib/standalone.js:21224:358) + at https://prettier.io/lib/standalone.js:21211:104 + at FastPath.map (https://prettier.io/lib/standalone.js:15155:23) + at printChildren$1 (https://prettier.io/lib/standalone.js:21155:26) + at Object.genericPrint$2 [as print] (https://prettier.io/lib/standalone.js:21039:41) + at callPluginPrintFunction (https://prettier.io/lib/standalone.js:15302:20) + at https://prettier.io/lib/standalone.js:15253:18 + at Object.printComments (https://prettier.io/lib/standalone.js:14974:19) + at printGenerically (https://prettier.io/lib/standalone.js:15252:24) + at printAstToDoc (https://prettier.io/lib/standalone.js:15264:15) + + +

+

+``` + +#### Fix empty lines unexpectedly added after `table` tags ([#7461](https://github.com/prettier/prettier/pull/7461) by [@ikatyang](https://github.com/ikatyang)) + + +```html + + + +
Should not insert empty line before this div
+ + + + +
+ +
Should not insert empty line before this div
+ + + + +
+
Should not insert empty line before this div
+``` + +### Vue + +#### Format vue SFC containing JSX script ([#7180](https://github.com/prettier/prettier/pull/7180) by [@sosukesuzuki](https://github.com/sosukesuzuki)) + + +```html + + + + + + + + +``` + +### Angular + +#### Fix formatting i18n attributes ([#7371](https://github.com/prettier/prettier/pull/7371) by [@thorn0](https://github.com/thorn0)) + +Prettier 1.19 [added](https://prettier.io/blog/2019/11/09/1.19.0.html#add-formatting-for-i18n-attributes-6695-by-voithos) +support for formatting [i18n attributes](https://angular.io/guide/i18n), but putting the closing quote mark on a new line +broke [custom ids](https://angular.io/guide/i18n#set-a-custom-id-for-persistence-and-maintenance). This is fixed now. + + +```html + +
+ + +
+ + +
+``` + +### Handlebars + +#### Fix superfluous line breaks in `ConcatStatement` ([#7051](https://github.com/prettier/prettier/pull/7051) by [@dcyriller](https://github.com/dcyriller)) + + +```hbs +{{!-- input --}} +Link + +{{!-- Prettier stable --}} + + Link + + +{{!-- Prettier master --}} + + Link + +``` + +and + +```hbs +{{!-- input --}} +
+ Hello +
+ +{{!-- Prettier stable --}} +
+ Hello +
+ +{{!-- Prettier master --}} +
+ Hello +
+``` + +#### Fix a falling mustache issue ([#7052](https://github.com/prettier/prettier/pull/7052) by [@dcyriller](https://github.com/dcyriller)) + + +```hbs +{{!-- input --}} + + +{{!-- stable --}} + + +{{!-- master --}} + +``` + +#### Improve `MustacheStatement` printing ([#7157](https://github.com/prettier/prettier/pull/7157) by [@dcyriller](https://github.com/dcyriller)) + + +```hbs +{{!-- input --}} +

Hi here is your name, as it will be displayed {{firstName}} {{lastName}} , welcome!

+ +{{!-- stable --}} +

+ Hi here is your name, as it will be displayed {{firstName}} {{lastName + }} , welcome! +

+ +{{!-- master --}} +

+ Hi here is your name, as it will be displayed {{firstName}} {{ + lastName + }} , welcome! +

+``` + +#### Add support for `prettier-ignore` ([#7275](https://github.com/prettier/prettier/pull/7275) by [@chadian](https://github.com/chadian)) + + +```hbs +{{! Input}} +{{! prettier-ignore }} +
+ "hello! my parent was ignored" + {{#my-crazy-component "shall" be="preserved"}} + + {{/my-crazy-component}} +
+ +{{#a-normal-component isRestoredTo = "order" }} + +{{/a-normal-component}} + +{{! Prettier stable}} +{{! prettier-ignore }} +
+ "hello! my parent was ignored" + {{#my-crazy-component "shall" be="preserved"}} + + {{/my-crazy-component}} +
+ +{{#a-normal-component isRestoredTo="order"}} + +{{/a-normal-component}} + +{{! Prettier master}} +{{! prettier-ignore }} +
+ "hello! my parent was ignored" + {{#my-crazy-component "shall" be="preserved"}} + + {{/my-crazy-component}} +
+ +{{#a-normal-component isRestoredTo='order'}} + +{{/a-normal-component}} +``` + +#### Support printing inline Handlebars in HTML ([#7306](https://github.com/prettier/prettier/pull/7306) by [@dcyriller](https://github.com/dcyriller)) + + +``` + + + + + + + + +``` + +### GraphQL + +#### Improve detection of separator between interfaces ([#7305](https://github.com/prettier/prettier/pull/7305) by [@fisker](https://github.com/fisker)) + +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. + + +```graphql +# 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 + +#### Handle zero-based lists correctly ([#6852](https://github.com/prettier/prettier/pull/6852) by [@evilebottnawi](https://github.com/evilebottnawi)) + + +```md + +0. List +1. List +2. List + + +0. List +1. List +1. List + + +0. List +1. List +2. List +``` + +#### Fix redundant leading spaces in lists ([#7178](https://github.com/prettier/prettier/pull/7178) by [@sasurau4](https://github.com/sasurau4)) + + +```md + +- a + b + c + d + e + +- a + b + c + d + e + +1. a + b + c + d + e + +1. a + b + c + d + e + + +- a + b + c + d + e + +- a + b + c + d + e + +1. a + b + c + d + e + +1. a + b + c + d + e + + +- a + b + c + d + e + +- a + b + c + d + e + +1. a + b + c + d + e + +1. a + b + c + d + e +``` + +#### Fix HTML formatting broken if the beginning tag starts after a list item ([#7181](https://github.com/prettier/prettier/pull/7181) and [#7220](https://github.com/prettier/prettier/pull/7220) by [@sasurau4](https://github.com/sasurau4)) + +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. + + +```md + +- A list item. +
Summary +

+ +- A list item. + +

+
+ +- A list item +
asdf
+ + +- A list item. + +
Summary +

+ +- A list item. + +

+
+ +- A list item +
asdf
+ + +- A list item. +
Summary +

+ +- A list item. + +

+
+ +- A list item +
asdf
+``` + +### MDX + +#### Add support for JSX fragments ([#6398](https://github.com/prettier/prettier/pull/6398) by [@JounQin](https://github.com/JounQin)) + +Previous versions format JSX Fragment incorrectly in mdx, this has been fixed in this version. + + +```md + +<> + test test + 123 + + +<> +test test + 123 + + +<> + test test + 123 +``` + +#### Fix JSX parsing bugs introduced in Prettier 1.19 ([#6949](https://github.com/prettier/prettier/pull/6949) by [@Tigge](https://github.com/Tigge) & [@thorn0](https://github.com/thorn0)) + +MDX parsing for JSX failed when encountering JSX elements that where not +parsable as HTML. Such as `test` + + +````md + + +test + + +
+ hi + { hello } + { /* another comment */} +
+
+ + + +``` +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 | test + | ^ + 2 | + 3 | + 4 |
+``` + + + +test + + +
+ hi + {hello} + {/* another comment */} +
+
+ +```` + +### API + +#### Change default value for `trailingComma` to `es5` ([#6963](https://github.com/prettier/prettier/pull/6963) by [@fisker](https://github.com/fisker)) + +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](https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8). + +Prettier has included an [option to configure trailing commas](https://prettier.io/docs/en/options.html#trailing-commas) since its early days, and an initiative to change the default value has been out there [for over three years](https://github.com/prettier/prettier/issues/68). +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. + +#### Remove deprecated API ([#6993](https://github.com/prettier/prettier/pull/6993) by [@fisker](https://github.com/fisker)) + +- Parser `typescript-eslint` is removed. + + Use `typescript` instead. + +- `prettier.util.mapDoc` is removed + + Use `prettier.doc.utils.mapDoc` instead. + +- `prettier.util.isNextLineEmpty` is updated + + Use `isNextLineEmpty(text, node, locEnd)` instead of `isNextLineEmpty(text, node, options)`. + +- `prettier.util.isPreviousLineEmpty` is updated + + Use `isPreviousLineEmpty(text, node, locStart)` instead of `isNextLineEmpty(text, node, options)`. + +- `prettier.util.getNextNonSpaceNonCommentCharacterIndex` is updated + + Use `getNextNonSpaceNonCommentCharacterIndex(text, node, locEnd)` instead of `getNextNonSpaceNonCommentCharacterIndex(text, node, options)`. + +#### Change default value for `arrowParens` to `always` ([#7430](https://github.com/prettier/prettier/pull/7430) by [@kachkaev](https://github.com/kachkaev)) + +[Since version 1.9](https://prettier.io/blog/2017/12/05/1.9.0.html#option-to-add-parens-in-arrow-function-arguments-3324httpsgithubcomprettierprettierpull3324-by-rattrayalexhttpsgithubcomrattrayalex-and-suchipihttpsgithubcomsuchipi), Prettier has an [option](https://prettier.io/docs/en/options.html#arrow-function-parentheses) to always wrap arrow function arguments with parentheses. +Since version 2.0, this behavior becomes default. + + +```js +// 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 of less visual noise. +However, when Prettier removes parentheses, it becomes harder to add type annotations, extra arguments or default values as well as making [other changes](https://twitter.com/ManuelBieh/status/1181880524954050560). +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" }`. + +#### Change default value for `endOfLine` to `lf` ([#7435](https://github.com/prettier/prettier/pull/7435) by [@kachkaev](https://github.com/kachkaev)) + +Early versions of Prettier were formatting all files with the \*nix flavor of [line endings](https://en.wikipedia.org/wiki/Newline) (`\n`, also known as `LF`). +This behavior was changed in [#472](https://github.com/prettier/prettier/pull/472), which allowed preserving Windows line endings (`\r\n`, also known as `CRLF`). + +[Since Prettier version 1.15](https://prettier.io/blog/2018/11/07/1.15.0.html#add-an-option-to-enforce-line-endings-5327-by-kachkaev), the flavor of line endings is configurable via the `endOfLine` option. +The default value was set to `auto` for backwards compatibility, which meant that Prettier preserved a flavor of line endings already present in a given file. + +With `endOfLine` equal to `auto`, Prettier converted mixed line endings within one file to what was found at the end of the first line. +However, line endings in neighboring 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](https://prettier.io/docs/en/options.html#end-of-line) 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" }`. + +### CLI + +#### Support file extensions `.cjs` and `.yaml.sed` ([#7210](https://github.com/prettier/prettier/pull/7210) by [@sosukesuzuki](https://github.com/sosukesuzuki)) + +```sh +# 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!"); +```