From 4eb3e2650a3cc4be5b13afe55fe01ce790c1634d Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Sat, 9 Nov 2019 01:23:57 +0100 Subject: [PATCH] Blog post, changelog and docs for 1.19 (#6787) --- .github/PULL_REQUEST_TEMPLATE.md | 2 +- changelog_unreleased/TEMPLATE.md | 39 + changelog_unreleased/angular/.gitkeep | 0 changelog_unreleased/api/.gitkeep | 0 changelog_unreleased/cli/.gitkeep | 0 changelog_unreleased/css/.gitkeep | 0 changelog_unreleased/flow/.gitkeep | 0 changelog_unreleased/graphql/.gitkeep | 0 changelog_unreleased/handlebars/.gitkeep | 0 changelog_unreleased/html/.gitkeep | 0 changelog_unreleased/javascript/.gitkeep | 0 changelog_unreleased/json/.gitkeep | 0 changelog_unreleased/less/.gitkeep | 0 changelog_unreleased/lwc/.gitkeep | 0 changelog_unreleased/markdown/.gitkeep | 0 changelog_unreleased/mdx/.gitkeep | 0 changelog_unreleased/scss/.gitkeep | 0 changelog_unreleased/typescript/.gitkeep | 0 changelog_unreleased/vue/.gitkeep | 0 changelog_unreleased/yaml/.gitkeep | 0 cspell.json | 5 +- docs/integrating-with-linters.md | 2 +- package.json | 2 +- scripts/release/steps/update-changelog.js | 2 +- .../blog/2019-11-09-1.19.0.md | 1836 +++++++++-------- .../integrating-with-linters.md | 2 +- .../version-stable/rationale.md | 6 +- 27 files changed, 1041 insertions(+), 855 deletions(-) create mode 100644 changelog_unreleased/TEMPLATE.md create mode 100644 changelog_unreleased/angular/.gitkeep create mode 100644 changelog_unreleased/api/.gitkeep create mode 100644 changelog_unreleased/cli/.gitkeep create mode 100644 changelog_unreleased/css/.gitkeep create mode 100644 changelog_unreleased/flow/.gitkeep create mode 100644 changelog_unreleased/graphql/.gitkeep create mode 100644 changelog_unreleased/handlebars/.gitkeep create mode 100644 changelog_unreleased/html/.gitkeep create mode 100644 changelog_unreleased/javascript/.gitkeep create mode 100644 changelog_unreleased/json/.gitkeep create mode 100644 changelog_unreleased/less/.gitkeep create mode 100644 changelog_unreleased/lwc/.gitkeep create mode 100644 changelog_unreleased/markdown/.gitkeep create mode 100644 changelog_unreleased/mdx/.gitkeep create mode 100644 changelog_unreleased/scss/.gitkeep create mode 100644 changelog_unreleased/typescript/.gitkeep create mode 100644 changelog_unreleased/vue/.gitkeep create mode 100644 changelog_unreleased/yaml/.gitkeep rename CHANGELOG.unreleased.md => website/blog/2019-11-09-1.19.0.md (65%) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index aee7178f6..6ef9e89f7 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -5,7 +5,7 @@ - [ ] I’ve added tests to confirm my change works. - [ ] (If changing the API or CLI) I’ve documented the changes I’ve made (in the `docs/` directory) -- [ ] (If the change is user-facing) I’ve added my changes to the `CHANGELOG.unreleased.md` file following the template. +- [ ] (If the change is user-facing) I’ve added my changes to `changelog_unreleased/*/pr-XXXX.md` file following `changelog_unreleased/TEMPLATE.md`. - [ ] I’ve read the [contributing guidelines](https://github.com/prettier/prettier/blob/master/CONTRIBUTING.md). **✨[Try the playground for this PR](https://prettier.io/playground-redirect)✨** diff --git a/changelog_unreleased/TEMPLATE.md b/changelog_unreleased/TEMPLATE.md new file mode 100644 index 000000000..a7ebe3c0a --- /dev/null +++ b/changelog_unreleased/TEMPLATE.md @@ -0,0 +1,39 @@ + + +#### Title ([#XXXX](https://github.com/prettier/prettier/pull/XXXX) by [@user](https://github.com/user)) + +Optional description if it makes sense. + + +```jsx +// Input +(foo ?? baz) || baz; + +// Prettier stable +foo ?? baz || baz; + +// Prettier master +(foo ?? baz) || baz; +``` diff --git a/changelog_unreleased/angular/.gitkeep b/changelog_unreleased/angular/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/api/.gitkeep b/changelog_unreleased/api/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/cli/.gitkeep b/changelog_unreleased/cli/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/css/.gitkeep b/changelog_unreleased/css/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/flow/.gitkeep b/changelog_unreleased/flow/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/graphql/.gitkeep b/changelog_unreleased/graphql/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/handlebars/.gitkeep b/changelog_unreleased/handlebars/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/html/.gitkeep b/changelog_unreleased/html/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/javascript/.gitkeep b/changelog_unreleased/javascript/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/json/.gitkeep b/changelog_unreleased/json/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/less/.gitkeep b/changelog_unreleased/less/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/lwc/.gitkeep b/changelog_unreleased/lwc/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/markdown/.gitkeep b/changelog_unreleased/markdown/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/mdx/.gitkeep b/changelog_unreleased/mdx/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/scss/.gitkeep b/changelog_unreleased/scss/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/typescript/.gitkeep b/changelog_unreleased/typescript/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/vue/.gitkeep b/changelog_unreleased/vue/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/changelog_unreleased/yaml/.gitkeep b/changelog_unreleased/yaml/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/cspell.json b/cspell.json index fbac679b0..2dcef8169 100644 --- a/cspell.json +++ b/cspell.json @@ -288,7 +288,7 @@ "React's", "readline", "readlines", - "rebalance", + "rebalance", "rebeccapurple", "recurse", "recurses", @@ -338,6 +338,7 @@ "superset", "supertypes", "swac", + "systemjs", "tdeekens", "templating", "tempy", @@ -398,4 +399,4 @@ "ve{2,}r{2,}y", "ve+r+y+long\\w*" ] -} \ No newline at end of file +} diff --git a/docs/integrating-with-linters.md b/docs/integrating-with-linters.md index 57fa98f72..3264d4293 100644 --- a/docs/integrating-with-linters.md +++ b/docs/integrating-with-linters.md @@ -124,7 +124,7 @@ Then in `tslint.json`: ### Disable formatting rules -[`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier) is a config that disables rules that conflict with Prettier. Add it to your `devDependencies`, then extend from it within your `.stylelintrc` configuration. Make sure to put it last in the `extends` array, so it gets the chance to override other configs. +[`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier) is a config that disables rules that conflict with Prettier. Add it to your [`devDependencies`], then extend from it within your `.stylelintrc` configuration. Make sure to put it last in the `extends` array, so it gets the chance to override other configs. ```bash yarn add --dev stylelint-config-prettier diff --git a/package.json b/package.json index 9d1e75732..892631d09 100644 --- a/package.json +++ b/package.json @@ -130,6 +130,6 @@ "build": "node --max-old-space-size=3072 ./scripts/build/build.js", "build-docs": "node ./scripts/build-docs.js", "check-deps": "node ./scripts/check-deps.js", - "spellcheck": "npx -p cspell@4.0.31 cspell {bin,scripts,src}/**/*.js {docs,website/blog}/**/*.md CHANGELOG.unreleased.md" + "spellcheck": "npx -p cspell@4.0.31 cspell {bin,scripts,src}/**/*.js {docs,website/blog,changelog_unreleased}/**/*.md" } } diff --git a/scripts/release/steps/update-changelog.js b/scripts/release/steps/update-changelog.js index 4ad5ee3df..d45d5b1b1 100644 --- a/scripts/release/steps/update-changelog.js +++ b/scripts/release/steps/update-changelog.js @@ -57,7 +57,7 @@ module.exports = async function({ version, previousVersion }) { dedent(chalk` {yellow.bold A manual step is necessary.} - You can copy the entries from {bold CHANGELOG.unreleased.md} to {bold CHANGELOG.md} + You can copy the entries from {bold changelog_unreleased/*/pr-*.md} to {bold CHANGELOG.md} and update it accordingly. You don't need to commit the file, the script will take care of that. diff --git a/CHANGELOG.unreleased.md b/website/blog/2019-11-09-1.19.0.md similarity index 65% rename from CHANGELOG.unreleased.md rename to website/blog/2019-11-09-1.19.0.md index 9adb4a5b9..de0e050fb 100644 --- a/CHANGELOG.unreleased.md +++ b/website/blog/2019-11-09-1.19.0.md @@ -1,50 +1,24 @@ - -#### Category: Title ([#PR] by [@user]) +## Highlights -Description +### Vue -``` -// Input -Code Sample +#### Add `--vue-indent-script-and-style` ([#6157] by [@kamilic]) -// Output (Prettier stable) -Code Sample +The new [`--vue-indent-script-and-style`](https://prettier.io/docs/en/options.html#vue-files-script-and-style-tags-indentation) option controls whether or not to indent the code inside ` - - - - - - - -``` - -#### TypeScript: Correctly format long one-line mapped types in one pass ([#6420] by [@sosukesuzuki]) - -Previously, when Prettier formatted long one-line mapped types, it would break the line but didn’t add a semicolon until you ran Prettier again, which means Prettier’s idempotence rule was broken. Now, Prettier adds the semicolon in the first run. - - -```ts -// Input -type FooBar = { [P in keyof T]: T[P] extends Something ? Something : T[P] } - -// Prettier (stable) -type FooBar = { - [P in keyof T]: T[P] extends Something ? Something : T[P] -}; - -// Prettier (master) -type FooBar = { - [P in keyof T]: T[P] extends Something ? Something : T[P]; -}; -``` - -#### JavaScript: Fix formatting of object destructuring with parameter decorators ([#6411] by [@sosukesuzuki]) - -Previously, Prettier formatted decorators for destructured parameters in a weird way. Now, parameter decorators are placed just above the parameter they belong to. +#### Fix formatting of object destructuring with parameter decorators ([#6411] by [@sosukesuzuki]) ```js @@ -814,7 +792,7 @@ class Class { ) {} } -// Prettier (stable) +// Prettier 1.18 class Class { method(@decorator { @@ -822,7 +800,7 @@ class Class { }) {} } -// Prettier (master) +// Prettier 1.19 class Class { method( @decorator @@ -831,7 +809,7 @@ class Class { } ``` -#### JavaScript: Handle empty object patterns with type annotations in function parameters ([#6438] by [@bakkot]) +#### Handle empty object patterns with type annotations in function parameters ([#6438] by [@bakkot]) ```js @@ -839,18 +817,18 @@ class Class { const f = ({}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {}; function g({}: Foo) {} -// Output (Prettier stable) +// Prettier 1.18 const f = ({ , }: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {}; function g({ }: Foo) {} -// Output (Prettier master) +// Prettier 1.19 const f = ({}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {}; function g({}: Foo) {} ``` -#### JavaScript: Put a closing parenthesis onto a new line after binary expressions within function calls ([#6441] by [@sosukesuzuki]) +#### Put a closing parenthesis onto a new line after binary expressions within function calls ([#6441] by [@sosukesuzuki]) ```js @@ -863,14 +841,14 @@ function g({}: Foo) {} eeeeeeeeeeeeeeeeeeeeeeeee )(); -// Prettier (stable) +// Prettier 1.18 (aaaaaaaaaaaaaaaaaaaaaaaaa && bbbbbbbbbbbbbbbbbbbbbbbbb && ccccccccccccccccccccccccc && ddddddddddddddddddddddddd && eeeeeeeeeeeeeeeeeeeeeeeee)(); -// Prettier (master) +// Prettier 1.19 ( aaaaaaaaaaaaaaaaaaaaaaaaa && bbbbbbbbbbbbbbbbbbbbbbbbb && @@ -880,25 +858,25 @@ function g({}: Foo) {} )(); ``` -#### JavaScript: Fix formatting of long named exports ([#6446] by [@sosukesuzuki]) +#### Fix formatting of long named exports ([#6446] by [@sosukesuzuki]) -Now, Prettier formats them the same way it formats named imports. +Now, Prettier formats named exports the same way as named imports. ```js // Input export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo"; -// Prettier (stable) +// Prettier 1.18 export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo"; -// Prettier (master) +// Prettier 1.19 export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo"; ``` -#### JavaScript: Fix bad formatting for multi-line optional chaining with comment ([#6506] by [@sosukesuzuki]) +#### Fix bad formatting for multi-line optional chaining with comment ([#6506] by [@sosukesuzuki]) ```js @@ -909,14 +887,14 @@ return a // Comment ?.d() -// Prettier (stable) +// Prettier 1.18 return a .b() .c() ?.// Comment d(); -// Prettier (master) +// Prettier 1.19 return ( a .b() @@ -926,7 +904,7 @@ return ( ); ``` -#### JavaScript: Fix inconsistent indentation in switch statement ([#6514] by [@sosukesuzuki]) +#### Fix inconsistent indentation in switch statement ([#6514] by [@sosukesuzuki]) ```js @@ -937,7 +915,7 @@ switch ($veryLongAndVeryVerboseVariableName && $anotherVeryLongAndVeryVerboseVar switch ($longButSlightlyShorterVariableName && $anotherSlightlyShorterVariableName) { } -// Prettier (stable) +// Prettier 1.18 switch ( $veryLongAndVeryVerboseVariableName && $anotherVeryLongAndVeryVerboseVariableName @@ -949,7 +927,7 @@ switch ( ) { } -// Prettier (master) +// Prettier 1.19 switch ( $veryLongAndVeryVerboseVariableName && $anotherVeryLongAndVeryVerboseVariableName @@ -963,62 +941,7 @@ switch ( } ``` -#### TypeScript: Keep type parameters inline for type annotations in variable declarations ([#6467] by [@sosukesuzuki]) - - -```ts -// Input -const fooooooooooooooo: SomeThing = looooooooooooooooooooooooooooooongNameFunc(); - -// Prettier (stable) -const fooooooooooooooo: SomeThing< - boolean -> = looooooooooooooooooooooooooooooongNameFunc(); - -// Prettier (master) -const fooooooooooooooo: SomeThing = looooooooooooooooooooooooooooooongNameFunc(); -``` - -#### Handlebars: Fix `--single-quote` option on HTML attributes ([#6377] by [@dcyriller]) - -Previously, the flag was not applied on HTML attributes. - - -```hbs - -
- - -
- - -
-``` - -#### TypeScript: Sometimes double parentheses around types were removed incorrectly ([#6604] by [@sosukesuzuki]) - - -```ts -// Input -type A = 0 extends ((1 extends 2 ? 3 : 4)) ? 5 : 6; -type B = ((0 extends 1 ? 2 : 3)) extends 4 ? 5 : 6; -type C = ((number | string))["toString"]; -type D = ((keyof T1))["foo"]; - -// Prettier (stable) -type A = 0 extends 1 extends 2 ? 3 : 4 ? 5 : 6; -type B = 0 extends 1 ? 2 : 3 extends 4 ? 5 : 6; -type C = number | string["toString"]; -type D = keyof T1["foo"]; - -// Prettier (master) -type A = 0 extends (1 extends 2 ? 3 : 4) ? 5 : 6; -type B = (0 extends 1 ? 2 : 3) extends 4 ? 5 : 6; -type C = (number | string)["toString"]; -type D = (keyof T1)["foo"]; -``` - -#### JavaScript: Support formatting code with V8 intrinsics ([#6496] by [@rreverser]) +#### Support formatting code with V8 intrinsics ([#6496] by [@rreverser]) ```js @@ -1029,33 +952,19 @@ function doSmth() { foo ) } -// Prettier (stable) +// Prettier 1.18 SyntaxError: Unexpected token (2:13) 1 | function doSmth() { > 2 | %DebugPrint | ^ -// Prettier (master) +// Prettier 1.19 function doSmth() { %DebugPrint(foo); } ``` -#### TypeScript: Sometimes removing parentheses around JSX made the code unparseable ([#6640] by [@sosukesuzuki]) - - -```tsx -// Input -().toString(); - -// Prettier (stable) -.toString(): - -// Prettier (master) -().toString(); -``` - -#### JavaScript: Object destructuring in method parameters always broke into multiple lines ([#6646] by [@ericsakmar]) +#### Object destructuring in method parameters always broke into multiple lines ([#6646] by [@ericsakmar]) ```js @@ -1075,7 +984,7 @@ class A { } } -// Prettier (stable) +// Prettier 1.18 const obj = { func( id, @@ -1106,7 +1015,7 @@ class A { } } -// Prettier (master) +// Prettier 1.19 const obj = { func(id, { blog: { title } }) { return id + title; @@ -1123,21 +1032,182 @@ class A { } ``` -#### Angular: Put a closing parenthesis onto a new line after ternaries passed to pipes ([#5682] by [@selvazhagan]) +#### Numeric separators were removed from BigInt literals ([#6796] by [@thorn0]) + + +```js +// Input +const bigints = [200_000n, 0x0000_000An, 0b0111_1111n]; + +// Prettier 1.18 +const bigints = [200000n, 0x0000000an, 0b01111111n]; + +// Prettier 1.19 +const bigints = [200_000n, 0x0000_000an, 0b0111_1111n]; +``` + +#### Better formatting for inline `await` expression nested in calls ([#6856] by [@thorn0]) + + +```js +// Input +async function f() { + const admins = (await(db.select('*').from('admins').leftJoin('bla').where('id', 'in', [1,2,3,4]))).map(({id, name})=>({id, name})) +} + +// Prettier 1.18 +async function f() { + const admins = (await db + .select("*") + .from("admins") + .leftJoin("bla") + .where("id", "in", [1, 2, 3, 4])).map(({ id, name }) => ({ id, name })); +} + +// Prettier 1.19 +async function f() { + const admins = ( + await db + .select("*") + .from("admins") + .leftJoin("bla") + .where("id", "in", [1, 2, 3, 4]) + ).map(({ id, name }) => ({ id, name })); +} +``` + +### HTML + +#### Don't wrap `template` elements on lines shorter than `printWidth` ([#6284] by [@sosukesuzuki]) + +Previously, even if the line length was shorter than `printWidth`, Prettier would break the line with a `template` element. + + +```html + + + + + + + + +``` + +#### Script tags are now treated as blocks for the purposes of formatting ([#6423] by [@thorn0]) + +Previously, in the [whitespace-sensitive mode](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity), they were formatted as if they were inline. + + +```html + + + + + + + + + +``` + +#### Add support for `!` and other entities ([#6785] by [@lydell] and [@ikatyang]) + +Previously, Prettier only supported the most common HTML entities, such as ` ` and `"`. Now, Prettier supports every HTML entity in the HTML spec, such as `!` and `⋔`. + + +```html + +

Hi!

+ + + + +

Hi!

+``` + +#### Add JSON script types ([#6293] by [@ascorbic]) + + +```html + + + + + + + + + + + + + + + + +``` + +### Angular + +#### Put a closing parenthesis onto a new line after ternaries passed to pipes ([#5682] by [@selvazhagan]) ```html {{ (isCustomDiscount ? 'DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT' : 'DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT') | translate }} - + {{ (isCustomDiscount ? "DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT" : "DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT") | translate }} - + {{ (isCustomDiscount ? "DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT" @@ -1146,7 +1216,38 @@ class A { }} ``` -#### Handlebars: Fix handling of whitespace and line breaks ([#6354] by [@chadian]) +#### Add formatting for `i18n` attributes ([#6695] by [@voithos]) + +Prettier will auto-wrap the contents of `i18n` attributes once they exceed the line length. + + +```html + +

+ Hello! +

+ + +

+ Hello! +

+ + +

+ Hello! +

+``` + +### Handlebars + +#### Fix handling of whitespace and line breaks ([#6354] by [@chadian]) This fixes a variety of whitespace and line break use cases within Handlebars and Glimmer templates. @@ -1162,7 +1263,7 @@ Some sentence with {{dynamic}} expressions. sometimes{{nogaps}}areimportant {{name}} is your name - + {{name}} Some sentence with @@ -1178,7 +1279,7 @@ areimportant {{name}} is your name - + {{name}} Some sentence with {{dynamic}} expressions. @@ -1190,273 +1291,207 @@ sometimes{{nogaps}}areimportant {{name}} is your name ``` -#### Angular: Add formatting for `i18n` attributes ([#6695] by [@voithos]) +#### Avoid adding unwanted line breaks between text and mustaches ([#6186] by [@gavinjoyce]) -Prettier will auto-wrap the contents of `i18n` attributes once they exceed the line length. +Previously, Prettier added line breaks between text and mustaches which resulted in unwanted whitespace in rendered output. -```html +```hbs -

- Hello! -

+

Your username is @{{name}}

+

Hi {{firstName}} {{lastName}}

- -

- Hello! -

+ +

+ Your username is @ + {{name}} +

+

+ Hi + {{firstName}} + {{lastName}} +

- -

- Hello! -

+ +

+ Your username is @{{name}} +

+

+ Hi {{firstName}} {{lastName}} +

``` -#### JavaScript: Break arrays of arrays/objects if each element has more than one element/property ([#6694] by [@sosukesuzuki]) +#### Improve comment formatting ([#6206] by [@gavinjoyce]) -```js -// Input -test.each([ - { a: "1", b: 1 }, - { a: "2", b: 2 }, - { a: "3", b: 3 } -])("test", ({ a, b }) => { - expect(Number(a)).toBe(b); -}); -[[0, 1, 2], [0, 1, 2]]; -new Map([ - [A, B], - [C, D], - [E, F], - [G, H], - [I, J], - [K, L], - [M, N] -]); +```hbs + +
+ {{! Foo }} + {{#if @foo}} + Foo + {{/if}} -// Output (Prettier stable) -test.each([{ a: "1", b: 1 }, { a: "2", b: 2 }, { a: "3", b: 3 }])( - "test", - ({ a, b }) => { - expect(Number(a)).toBe(b); - } -); -[[0, 1, 2], [0, 1, 2]] -new Map([[A, B], [C, D], [E, F], [G, H], [I, J], [K, L], [M, N]]); + {{! Bar }} + {{#if @bar}} + Bar + {{/if}} +
-// Output (Prettier master) -test.each([ - { a: "1", b: 1 }, - { a: "2", b: 2 }, - { a: "3", b: 3 } -])("test", ({ a, b }) => { - expect(Number(a)).toBe(b); -}); -[ - [0, 1, 2], - [0, 1, 2] -]; -new Map([ - [A, B], - [C, D], - [E, F], - [G, H], - [I, J], - [K, L], - [M, N] -]); + +
+ {{! Foo }} + {{#if @foo}} + Foo + {{/if}}{{! Bar }}{{#if @bar}} + Bar + {{/if}} +
+ + +
+ {{! Foo }} + {{#if @foo}} + Foo + {{/if}} + {{! Bar }} + {{#if @bar}} + Bar + {{/if}} +
``` -#### TypeScript: Keep semi for a class property before index signature when no-semi is enabled ([#6728] by [@sosukesuzuki]) - -Attempting to format Prettier’s output again used to result in a syntax error. +#### Preserve HTML entities ([#6234] by [@gavinjoyce]) -```ts -// Input -export class User { - id: number = 2; - [key: string]: any -} +```hbs + +

+ Some escaped characters: < > & +

-// Output (Prettier stable) -export class User { - id: number = 2 - [key: string]: any -} + +

+ Some escaped characters: < > & +

-// Output (Prettier master) -export class User { - id: number = 2; - [key: string]: any -} + +

+ Some escaped characters: < > & +

``` -#### Flow: Parentheses around arrow functions' return types that have `FunctionTypeAnnotation` nested in `ObjectTypeAnnotation` ([#6717] by [@sosukesuzuki]) +#### Fix `--single-quote` option on HTML attributes ([#6377] by [@dcyriller]) -This is a workaround for a [bug](https://github.com/facebook/flow/pull/8163) in the Flow parser. Without the parentheses, the parser throws an error. +Previously, the flag was not applied on HTML attributes. -```js -// Input -const example1 = (): { p: (string => string) } => (0: any); + +```hbs + +
-// Output (Prettier stable) -const example1 = (): { p: string => string } => (0: any); + +
-// Output (Prettier master) -const example1 = (): ({ p: string => string }) => (0: any); + +
``` -#### CLI: Handle errors when reading stdin ([#6708] by [@andersk] and [@lydell]) - -If you had an error in your `.prettierrc` Prettier used to crash when formatting stdin. Such errors are now handled properly. - -``` -# Prettier stable -$ prettier --parser babel < test.js -(node:21531) UnhandledPromiseRejectionWarning: Error: Invalid printWidth value. Expected an integer, but received "nope". - at _loop (/home/lydell/forks/prettier/node_modules/prettier/bin-prettier.js:7887:63) - at Normalizer._applyNormalization (/home/lydell/forks/prettier/node_modules/prettier/bin-prettier.js:8000:13) - at applyNormalization (/home/lydell/forks/prettier/node_modules/prettier/bin-prettier.js:7817:49) - at Normalizer.normalize (/home/lydell/forks/prettier/node_modules/prettier/bin-prettier.js:7823:9) - at normalizeOptions$1 (/home/lydell/forks/prettier/node_modules/prettier/bin-prettier.js:8760:31) - at Object.normalizeApiOptions (/home/lydell/forks/prettier/node_modules/prettier/bin-prettier.js:8918:10) - at getOptionsForFile (/home/lydell/forks/prettier/node_modules/prettier/bin-prettier.js:44160:69) - at /home/lydell/forks/prettier/node_modules/prettier/bin-prettier.js:44214:22 - at process._tickCallback (internal/process/next_tick.js:68:7) -(node:21531) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) -(node:21531) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. - -# Prettier master -$ prettier --parser babel < test.js -[error] Invalid printWidth value. Expected an integer, but received "nope". -``` - -#### CLI: Gracefully handle nonexistent paths passed to --stdin-filepath ([#6687] by [@voithos]) - -Previously, if you passed a nonexistent subdirectory to --stdin-filepath, Prettier would throw an error. Now, Prettier gracefully handles this. - -``` -# Prettier stable -$ prettier --stdin-filepath does/not/exist.js < test.js -[error] Invalid configuration file: ENOENT: no such file or directory, scandir '/home/lydell/forks/prettier/does/not' - -# Prettier master -$ prettier --stdin-filepath does/not/exist.js < test.js -test; -``` - -#### JavaScript: Numeric separators were removed from BigInt literals ([#6796] by [@thorn0]) +#### Break long interpolations ([#6249] by [@jjaffeux]) -```js -// Input -const bigints = [200_000n, 0x0000_000An, 0b0111_1111n]; +```hbs + +{{my-component foo="bar" bar="baz" action=(action "almostTheMaximumLengthxxxx") +}} -// Output (Prettier stable) -const bigints = [200000n, 0x0000000an, 0b01111111n]; + +{{my-component foo="bar" bar="baz" action=(action "almostTheMaximumLengthxxxx") +}} -// Output (Prettier master) -const bigints = [200_000n, 0x0000_000an, 0b0111_1111n]; + +{{my-component + foo="bar" + bar="baz" + action=(action "almostTheMaximumLengthxxxx") +}} ``` -#### VS Code: add support for .mongo files ([#6848] by [@aymericbouzy]) +### MDX -When using the Azure Cosmos DB extension for VS Code, you can create .mongo files to write MongoDB queries, which use Javascript syntax. This change allows VS Code to format your file using Prettier. - -```js -db.users.find({ someField: { $exists: true } }); -``` - -#### JavaScript: Better formatting for inline `await` expression nested in calls ([#6856] by [@thorn0]) +#### Text following JSX was trimmed incorrectly ([#6340] by [@JounQin]) -```js -// Input -async function f() { - const admins = (await(db.select('*').from('admins').leftJoin('bla').where('id', 'in', [1,2,3,4]))).map(({id, name})=>({id, name})) -} +```md + + + test test + 123 -// Output (Prettier stable) -async function f() { - const admins = (await db - .select("*") - .from("admins") - .leftJoin("bla") - .where("id", "in", [1, 2, 3, 4])).map(({ id, name }) => ({ id, name })); -} + + + test test +123 -// Output (Prettier master) -async function f() { - const admins = ( - await db - .select("*") - .from("admins") - .leftJoin("bla") - .where("id", "in", [1, 2, 3, 4]) - ).map(({ id, name }) => ({ id, name })); -} + + + test test + 123 ``` -#### JavaScript: Don't require parens for same-operator logical expressions ([#6864] by [@jridgewell]) +#### Adjacent JSX elements should be allowed ([#6332] by [@JounQin]) -```js +```jsx // Input -foo && (bar && baz); -foo || (bar || baz); -foo ?? (bar ?? baz); + + test test +123 -// Output (Prettier stable) -foo && (bar && baz); -foo || (bar || baz); -foo ?? (bar ?? baz); +// Prettier 1.18 +SyntaxError: Unexpected token (3:9) + 1 | + 2 | test test +> 3 | 123 + | ^ -// Output (Prettier master) -foo && bar && baz; -foo || bar || baz; -foo ?? bar ?? baz; -``` +// Prettier 1.19 + + test test +123 -#### CLI: Display invalid config filename in error message ([#6865] by [@fisker]) - -```bash -# Input -$ prettier filename.js --config .invalid-config - -# Output (Prettier stable) -Invalid configuration file: ... - -# Output (Prettier master) -Invalid configuration file `.invalid-config`: ... -``` - -#### Less: don't lowercase variable names, remove whitespace between variable and colon ([#6778] by [@fisker]) - - -```less // Input -@FoO : bar; + + test test + + + test test +123 -// Output (Prettier stable) -@foo : bar; +// Prettier 1.18 +SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (4:1) + 2 | test test + 3 | +> 4 | + | ^ + 5 | test test + 6 | 123 -// Output (Prettier master) -@FoO: bar; +// Prettier 1.19 + + test test + + + test test +123 ``` -#### Vue: Format `style[lang="css"]` ([#6875] by [@fisker]) +### Vue -Previously, ` ``` +### Less + +#### Don't lowercase variable names and remove whitespace between variable and colon ([#6778] by [@fisker]) + + +```less +// Input +@FoO : bar; + +// Prettier 1.18 +@foo : bar; + +// Prettier 1.19 +@FoO: bar; +``` + +### API + +#### Add `resolveConfig` option to `getFileInfo()` ([#6666] by [@kaicataldo]) + +Add a `resolveConfig: boolean` option to `prettier.getFileInfo()` that, when set to `true`, will resolve the configuration for the given file path. This allows consumers to take any overridden parsers into account. + +### CLI + +#### Handle errors when reading stdin ([#6708] by [@andersk] and [@lydell]) + +If you had an error in your `.prettierrc` Prettier used to crash when formatting stdin. Such errors are now handled properly. + +``` +# Prettier 1.18 +$ prettier --parser babel < test.js +(node:21531) UnhandledPromiseRejectionWarning: Error: Invalid printWidth value. Expected an integer, but received "nope". + at _loop (/home/you/project/node_modules/prettier/bin-prettier.js:7887:63) + at Normalizer._applyNormalization (/home/you/project/node_modules/prettier/bin-prettier.js:8000:13) + at applyNormalization (/home/you/project/node_modules/prettier/bin-prettier.js:7817:49) + at Normalizer.normalize (/home/you/project/node_modules/prettier/bin-prettier.js:7823:9) + at normalizeOptions$1 (/home/you/project/node_modules/prettier/bin-prettier.js:8760:31) + at Object.normalizeApiOptions (/home/you/project/node_modules/prettier/bin-prettier.js:8918:10) + at getOptionsForFile (/home/you/project/node_modules/prettier/bin-prettier.js:44160:69) + at /home/you/project/node_modules/prettier/bin-prettier.js:44214:22 + at process._tickCallback (internal/process/next_tick.js:68:7) +(node:21531) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) +(node:21531) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. + +# Prettier 1.19 +$ prettier --parser babel < test.js +[error] Invalid printWidth value. Expected an integer, but received "nope". +``` + +#### Gracefully handle nonexistent paths passed to `--stdin-filepath` ([#6687] by [@voithos] and [@lydell]) + +Previously, if you passed a nonexistent subdirectory to `--stdin-filepath`, Prettier would throw an error. Now, Prettier gracefully handles this. + +``` +# Prettier 1.18 +$ prettier --stdin-filepath does/not/exist.js < test.js +[error] Invalid configuration file: ENOENT: no such file or directory, scandir '/home/you/project/does/not' + +# Prettier 1.19 +$ prettier --stdin-filepath does/not/exist.js < test.js +test; +``` + +#### Config should not be evaluated for ignored files ([#6233] by [@jamesreggio]) + +Prior to this change, the CLI would resolve the config for a file before checking it against the ignored list. If the config was invalid, the CLI would report a failure. + +This change relocates the config-resolution phase until after the file is confirmed to not be ignored. + +#### Display invalid config filename in error message ([#6865] by [@fisker]) + + +``` +# Input +$ prettier filename.js --config .invalid-config + +# Prettier 1.18 +Invalid configuration file: ... + +# Prettier 1.19 +Invalid configuration file `.invalid-config`: ... +``` + +### Other + +Thanks to [@fisker] for updating lots of Prettier’s dependencies! + +#### VS Code: add support for .mongo files ([#6848] by [@aymericbouzy]) + +When using the Azure Cosmos DB extension for VS Code, you can create .mongo files to write MongoDB queries, which use Javascript syntax. This change allows VS Code to format your file using Prettier. + +```js +db.users.find({ someField: { $exists: true } }); +``` + [#5682]: https://github.com/prettier/prettier/pull/5682 -[#6657]: https://github.com/prettier/prettier/pull/6657 [#5910]: https://github.com/prettier/prettier/pull/5910 [#6033]: https://github.com/prettier/prettier/pull/6033 +[#6157]: https://github.com/prettier/prettier/pull/6157 [#6186]: https://github.com/prettier/prettier/pull/6186 [#6206]: https://github.com/prettier/prettier/pull/6206 [#6209]: https://github.com/prettier/prettier/pull/6209 [#6217]: https://github.com/prettier/prettier/pull/6217 +[#6233]: https://github.com/prettier/prettier/pull/6233 [#6234]: https://github.com/prettier/prettier/pull/6234 [#6236]: https://github.com/prettier/prettier/pull/6236 +[#6249]: https://github.com/prettier/prettier/pull/6249 [#6270]: https://github.com/prettier/prettier/pull/6270 [#6284]: https://github.com/prettier/prettier/pull/6284 -[#6785]: https://github.com/prettier/prettier/pull/6785 [#6289]: https://github.com/prettier/prettier/pull/6289 +[#6293]: https://github.com/prettier/prettier/pull/6293 [#6301]: https://github.com/prettier/prettier/pull/6301 [#6307]: https://github.com/prettier/prettier/pull/6307 [#6332]: https://github.com/prettier/prettier/pull/6332 @@ -1509,10 +1641,11 @@ color: #F00 [#6412]: https://github.com/prettier/prettier/pull/6412 [#6420]: https://github.com/prettier/prettier/pull/6420 [#6423]: https://github.com/prettier/prettier/pull/6423 -[#6438]: https://github.com/prettier/prettier/pull/6411 +[#6438]: https://github.com/prettier/prettier/pull/6438 [#6441]: https://github.com/prettier/prettier/pull/6441 [#6446]: https://github.com/prettier/prettier/pull/6446 [#6467]: https://github.com/prettier/prettier/pull/6467 +[#6471]: https://github.com/prettier/prettier/pull/6471 [#6496]: https://github.com/prettier/prettier/pull/6496 [#6506]: https://github.com/prettier/prettier/pull/6506 [#6514]: https://github.com/prettier/prettier/pull/6514 @@ -1520,42 +1653,53 @@ color: #F00 [#6605]: https://github.com/prettier/prettier/pull/6605 [#6640]: https://github.com/prettier/prettier/pull/6640 [#6646]: https://github.com/prettier/prettier/pull/6646 +[#6657]: https://github.com/prettier/prettier/pull/6657 [#6666]: https://github.com/prettier/prettier/pull/6666 [#6673]: https://github.com/prettier/prettier/pull/6673 -[#6695]: https://github.com/prettier/prettier/pull/6695 +[#6687]: https://github.com/prettier/prettier/pull/6687 [#6694]: https://github.com/prettier/prettier/pull/6694 +[#6695]: https://github.com/prettier/prettier/pull/6695 +[#6708]: https://github.com/prettier/prettier/pull/6708 [#6717]: https://github.com/prettier/prettier/pull/6717 [#6728]: https://github.com/prettier/prettier/pull/6728 -[#6708]: https://github.com/prettier/prettier/pull/6708 -[#6687]: https://github.com/prettier/prettier/pull/6687 -[#6796]: https://github.com/prettier/prettier/pull/6796 [#6778]: https://github.com/prettier/prettier/pull/6778 +[#6785]: https://github.com/prettier/prettier/pull/6785 +[#6796]: https://github.com/prettier/prettier/pull/6796 +[#6816]: https://github.com/prettier/prettier/pull/6816 +[#6833]: https://github.com/prettier/prettier/pull/6833 [#6848]: https://github.com/prettier/prettier/pull/6848 [#6856]: https://github.com/prettier/prettier/pull/6856 -[#6865]: https://github.com/prettier/prettier/pull/6865 -[#6875]: https://github.com/prettier/prettier/pull/6875 [#6863]: https://github.com/prettier/prettier/pull/6863 [#6864]: https://github.com/prettier/prettier/pull/6864 -[@brainkim]: https://github.com/brainkim -[@duailibe]: https://github.com/duailibe -[@gavinjoyce]: https://github.com/gavinjoyce -[@sosukesuzuki]: https://github.com/sosukesuzuki -[@g-harel]: https://github.com/g-harel -[@jounqin]: https://github.com/JounQin -[@bakkot]: https://gibhub.com/bakkot -[@thorn0]: https://github.com/thorn0 -[@dcyriller]: https://github.com/dcyriller -[@rreverser]: https://github.com/RReverser -[@ericsakmar]: https://github.com/ericsakmar -[@squidfunk]: https://github.com/squidfunk -[@vjeux]: https://github.com/vjeux -[@selvazhagan]: https://github.com/selvazhagan -[@chadian]: https://github.com/chadian -[@kaicataldo]: https://github.com/kaicataldo -[@cryrivers]: https://github.com/Cryrivers -[@voithos]: https://github.com/voithos +[#6865]: https://github.com/prettier/prettier/pull/6865 +[#6875]: https://github.com/prettier/prettier/pull/6875 [@andersk]: https://github.com/andersk -[@lydell]: https://github.com/lydell +[@ascorbic]: https://github.com/ascorbic [@aymericbouzy]: https://github.com/aymericbouzy +[@bakkot]: https://gibhub.com/bakkot +[@brainkim]: https://github.com/brainkim +[@chadian]: https://github.com/chadian +[@cryrivers]: https://github.com/Cryrivers +[@dcyriller]: https://github.com/dcyriller +[@duailibe]: https://github.com/duailibe +[@ericsakmar]: https://github.com/ericsakmar [@fisker]: https://github.com/fisker +[@g-harel]: https://github.com/g-harel +[@gavinjoyce]: https://github.com/gavinjoyce +[@gkz]: https://github.com/gkz +[@ikatyang]: https://github.com/ikatyang/ +[@jamesreggio]: https://github.com/jamesreggio +[@jjaffeux]: https://github.com/jjaffeux +[@jounqin]: https://github.com/JounQin [@jridgewell]: https://github.com/jridgewell +[@kaicataldo]: https://github.com/kaicataldo +[@kamilic]: https://github.com/kamilic +[@lydell]: https://github.com/lydell +[@mattleff]: https://github.com/mattleff +[@rreverser]: https://github.com/RReverser +[@selvazhagan]: https://github.com/selvazhagan +[@sosukesuzuki]: https://github.com/sosukesuzuki +[@squidfunk]: https://github.com/squidfunk +[@thorn0]: https://github.com/thorn0 +[@vjeux]: https://github.com/vjeux +[@voithos]: https://github.com/voithos diff --git a/website/versioned_docs/version-stable/integrating-with-linters.md b/website/versioned_docs/version-stable/integrating-with-linters.md index e310e0e1b..a6b762f5b 100644 --- a/website/versioned_docs/version-stable/integrating-with-linters.md +++ b/website/versioned_docs/version-stable/integrating-with-linters.md @@ -125,7 +125,7 @@ Then in `tslint.json`: ### Disable formatting rules -[`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier) is a config that disables rules that conflict with Prettier. Add it to your `devDependencies`, then extend from it within your `.stylelintrc` configuration. Make sure to put it last in the `extends` array, so it gets the chance to override other configs. +[`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier) is a config that disables rules that conflict with Prettier. Add it to your [`devDependencies`], then extend from it within your `.stylelintrc` configuration. Make sure to put it last in the `extends` array, so it gets the chance to override other configs. ```bash yarn add --dev stylelint-config-prettier diff --git a/website/versioned_docs/version-stable/rationale.md b/website/versioned_docs/version-stable/rationale.md index 0a68fdee3..292931df8 100644 --- a/website/versioned_docs/version-stable/rationale.md +++ b/website/versioned_docs/version-stable/rationale.md @@ -133,9 +133,11 @@ One final thing: TC39 has [not yet decided if decorators come before or after `e ```js @decorator -export class Foo { } +export class Foo {} -export @decorator class Foo { } +export +@decorator +class Foo {} ``` ### Semicolons