From 3250dd002c00d2bc997b6eb6a75d65496b91efe2 Mon Sep 17 00:00:00 2001 From: Lucas Duailibe Date: Fri, 12 Apr 2019 17:40:37 -0300 Subject: [PATCH] Add 1.17 blog post (#6052) --- CHANGELOG.unreleased.md | 304 ------------------------- website/blog/2019-04-12-1.17.0.md | 359 ++++++++++++++++++++++++++++++ 2 files changed, 359 insertions(+), 304 deletions(-) create mode 100644 website/blog/2019-04-12-1.17.0.md diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index 70752e4cb..7b5a8f5be 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -41,307 +41,3 @@ Examples: ``` --> - -- JavaScript: Respect newlines between parameters ([#5260] by [@evilebottnawi]) - - - ```js - // Input - function foo( - one, - - two, - three, - four, - - - five, - six, - seven, - eight, - nine, - ten, - - eleven - - ) {} - - // Output (Prettier stable) - function foo( - one, - two, - three, - four, - five, - six, - seven, - eight, - nine, - ten, - eleven - ) {} - - // Output (Prettier master) - function foo( - one, - - two, - three, - four, - - five, - six, - seven, - eight, - nine, - ten, - - eleven - ) {} - ``` - -- JavaScript: Fix multiline dynamic import comments ([#6025] by [@noahsug]) - - - ```js - // Input - import( - /* Hello */ - 'something' - /* Hello */ - ) - import( - 'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename' - ) - - // Output (Prettier stable) - import(/* Hello */ - "something"); - /* Hello */ - import('myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'); - - // Output (Prettier master) - import( - /* Hello */ - 'something' - /* Hello */ - ) - import( - 'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename' - ); - ``` - -- JavaScript: Add parentheses for immediately-constructed fn/class ([#5996] by [@bakkot]) - - - ```js - // Input - new class {}; - new function() {} - - // Output (Prettier stable) - new class {}(); - new function() {}(); - - // Output (Prettier master) - new (class {})(); - new (function() {})(); - ``` - -- Config: Support shared configurations ([#5963] by [@azz]) - - Sharing a Prettier configuration is simple: just publish a module that exports a configuration object, say `@company/prettier-config`, and reference it in your `package.json`: - - ```json - { - "name": "my-cool-library", - "version": "9000.0.1", - "prettier": "@company/prettier-config" - } - ``` - - If you don't want to use `package.json`, you can use any of the supported extensions to export a string, e.g. `.prettierrc.json`: - - ```json - "@company/prettier-config" - ``` - - An example configuration repository is available [here](https://github.com/azz/prettier-config). - - > Note: This method does **not** offer a way to _extend_ the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a `.prettierrc.js` file and export the modifications, e.g: - > - > ```js - > module.exports = { - > ...require("@company/prettier-config"), - > semi: false - > }; - > ``` - -- JavaScript: Add an option to modify when Prettier quotes object properties ([#5934] by [@azz]) - **`--quote-props `** - - `as-needed` **(default)** - Only add quotes around object properties where required. Current behaviour. - `preserve` - Respect the input. This is useful for users of Google's Closure Compiler in Advanced Mode, which treats quoted properties differently. - `consistent` - If _at least one_ property in an object requires quotes, quote all properties - this is like ESLint's [`consistent-as-needed`](https://eslint.org/docs/rules/quote-props) option. - - - ```js - // Input - const headers = { - accept: "application/json", - "content-type": "application/json", - "origin": "prettier.io" - }; - - // Output --quote-props=as-needed - const headers = { - accept: "application/json", - "content-type": "application/json", - origin: "prettier.io" - }; - - // Output --quote-props=consistent - const headers = { - "accept": "application/json", - "content-type": "application/json", - "origin": "prettier.io" - }; - - // Output --quote-props=preserve - const headers = { - accept: "application/json", - "content-type": "application/json", - "origin": "prettier.io" - }; - ``` - -- CLI: Honor stdin-filepath when outputting error messages. - -- Markdown: Do not align table contents if it exceeds the print width and `--prose-wrap never` is set ([#5701] by [@chenshuai2144]) - - The aligned table is less readable than the compact one - if it's particularly long and the word wrapping is not enabled in the editor - so we now print them as compact tables in these situations. - - - ```md - - | Property | Description | Type | Default | - | -------- | ----------- | ---- | ------- | - | bordered | Toggles rendering of the border around the list | boolean | false | - | itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | - - - | Property | Description | Type | Default | - | ---------- | --------------------------------------------------------------------------------------------------------------------- | ------- | ------- | - | bordered | Toggles rendering of the border around the list | boolean | false | - | itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | - - - | Property | Description | Type | Default | - | --- | --- | --- | --- | - | bordered | Toggles rendering of the border around the list | boolean | false | - | itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | - ``` - -- LWC: Add support for Lightning Web Components ([#5800] by [@ntotten]) - - Supports [Lightning Web Components (LWC)](https://developer.salesforce.com/docs/component-library/documentation/lwc) template format for HTML attributes by adding a new parser called `lwc`. - - - ```html - // Input - - - // Output (Prettier stable) - - - // Output (Prettier master) - - ``` - -- JavaScript: Fix parens logic for optional chaining expressions and closure type casts ([#5843] by [@yangsu]) - - Logic introduced in #4542 will print parens in the wrong places and produce invalid code for optional chaining expressions (with more than 2 nodes) or closure type casts that end in function calls. - - - ```js - // Input - (a?.b[c]).c(); - let value = /** @type {string} */ (this.members[0]).functionCall(); - - // Output (Prettier stable) - a(?.b[c]).c(); - let value = /** @type {string} */ this(.members[0]).functionCall(); - - // Output (Prettier master) - (a?.b[c]).c(); - let value = /** @type {string} */ (this.members[0]).functionCall(); - ``` - -- CLI: Plugins published as a scoped NPM package (e.g.: `@name/prettier-plugin-foo`) are now automatically registered ([#5945] by [@Kocal]) - -- Angular: Don't add unnecessary parentheses to pipes ([#5929] by [@voithos]) - - In some cases, wrapping parentheses were being added to certain pipes inside attributes, but they are no longer added when they don't affect the result of the expression. - - - ```html - // Input -
- - // Output (Prettier stable) -
- - // Output (Prettier master) -
- ``` - -- TypeScript: Support `readonly` operator ([#6027] by [@ikatyang]) - - - ```ts - // Input - declare const array: readonly number[]; - - // Output (Prettier stable) - // SyntaxError: ',' expected. - - // Output (Prettier master) - declare const array: readonly number[]; - ``` - -- GraphQL: Support variable directives ([#6020] by [@adek05]) - - Upgrading to graphql-js 14.0 enables new GraphQL language feature - variable directives. Support for printing them is added along with the graphql-js version bump. - - - ``` - // Input - query Q($variable: Int @directive) {node} - - // Output (Prettier stable) - query Q($variable: Int) { - node - } - - // Output (Prettier master) - query Q($variable: Int @directive) { - node - } - ``` - -- GraphQL: Support GraphQL fragment variables ([#6016] by [@adek05]) - - ``` - // Input - fragment F($var: Int) on Type { node } - - // Output (Prettier stable) - // Fails to parse - - // Output (Prettier master) - fragment F($var: Int) on Type { - node - } - ``` diff --git a/website/blog/2019-04-12-1.17.0.md b/website/blog/2019-04-12-1.17.0.md new file mode 100644 index 000000000..215c8f2f6 --- /dev/null +++ b/website/blog/2019-04-12-1.17.0.md @@ -0,0 +1,359 @@ +--- +author: Lucas Duailibe (@duailibe) +authorURL: https://github.com/duailibe +title: "Prettier 1.17: More quotes options and support for shared configs" +--- + +This release brings long-requested flexibility to quotes around object properties, allows Prettier configuration to be shared in the form of packages, adds a [LWC] parser, adds support for new GraphQL syntax and fixes lots of formatting bugs. + +[lwc]: https://developer.salesforce.com/docs/component-library/documentation/lwc + + + +## Highlights + +### JavaScript + +#### Add an option to modify when Prettier quotes object properties ([#5934] by [@azz]) + +**`--quote-props `** + +`as-needed` **(default)** - Only add quotes around object properties where required. Current behaviour. +`preserve` - Respect the input. This is useful for users of Google's Closure Compiler in Advanced Mode, which treats quoted properties differently. +`consistent` - If _at least one_ property in an object requires quotes, quote all properties - this is like ESLint's [`consistent-as-needed`](https://eslint.org/docs/rules/quote-props) option. + + +```js +// Input +const headers = { + accept: "application/json", + "content-type": "application/json", + "origin": "prettier.io" +}; + +// Output (Prettier 1.16 or --quote-props=as-needed) +const headers = { + accept: "application/json", + "content-type": "application/json", + origin: "prettier.io" +}; + +// Output (--quote-props=consistent) +const headers = { + "accept": "application/json", + "content-type": "application/json", + "origin": "prettier.io" +}; + +// Output (--quote-props=preserve) +const headers = { + accept: "application/json", + "content-type": "application/json", + "origin": "prettier.io" +}; +``` + +### Config + +#### Support shared configurations ([#5963] by [@azz]) + +Sharing a Prettier configuration is simple: just publish a module that exports a configuration object, say `@company/prettier-config`, and reference it in your `package.json`: + +```json +{ + "name": "my-cool-library", + "version": "9000.0.1", + "prettier": "@company/prettier-config" +} +``` + +If you don't want to use `package.json`, you can use any of the supported extensions to export a string, e.g. `.prettierrc.json`: + +```json +"@company/prettier-config" +``` + +[@azz] has created an example configuration package. You can [see the source on GitHub](https://github.com/azz/prettier-config) or [install it via npm](https://www.npmjs.com/package/@azz/prettier-config). + +> Note: This method does **not** offer a way to _extend_ the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a `.prettierrc.js` file and export the modifications, e.g: +> +> ```js +> module.exports = { +> ...require("@company/prettier-config"), +> semi: false +> }; +> ``` + +## General + +### JavaScript + +#### Respect newlines between parameters ([#5836] by [@evilebottnawi]) + + +```js +// Input +function foo( + one, + + two, + three, + four, + + + five, + six, + seven, + eight, + nine, + ten, + + eleven + +) {} + +// Output (Prettier 1.16) +function foo( + one, + two, + three, + four, + five, + six, + seven, + eight, + nine, + ten, + eleven +) {} + +// Output (Prettier 1.17) +function foo( + one, + + two, + three, + four, + + five, + six, + seven, + eight, + nine, + ten, + + eleven +) {} +``` + +#### Fix multiline dynamic import comments ([#6025] by [@noahsug]) + + +```js +// Input +import( + /* Hello */ + 'something' + /* Hello */ +) +import( + 'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename' +) + +// Output (Prettier stable) +import(/* Hello */ +"something"); +/* Hello */ +import('myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'); + +// Output (Prettier master) +import( + /* Hello */ + 'something' + /* Hello */ +) +import( + 'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename' +); +``` + +#### Add parentheses for immediately-constructed functions and class ([#5996] by [@bakkot]) + + +```js +// Input +new class {}; +new function() {} + +// Output (Prettier stable) +new class {}(); +new function() {}(); + +// Output (Prettier master) +new (class {})(); +new (function() {})(); +``` + +#### Fix parens logic for optional chaining expressions and closure type casts ([#5843] by [@yangsu]) + +Logic introduced in #4542 will print parens in the wrong places and produce invalid code for optional chaining expressions (with more than 2 nodes) or closure type casts that end in function calls. + + +```js +// Input +(a?.b[c]).c(); +let value = /** @type {string} */ (this.members[0]).functionCall(); + +// Output (Prettier stable) +a(?.b[c]).c(); +let value = /** @type {string} */ this(.members[0]).functionCall(); + +// Output (Prettier master) +(a?.b[c]).c(); +let value = /** @type {string} */ (this.members[0]).functionCall(); +``` + +#### Do not align table contents if it exceeds the print width and `--prose-wrap never` is set ([#5701] by [@chenshuai2144]) + +The aligned table is less readable than the compact one if it's particularly long and the word wrapping is not enabled in the editor so we now print them as compact tables in these situations. + + +```md + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| bordered | Toggles rendering of the border around the list | boolean | false | +| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | + + +| Property | Description | Type | Default | +| ---------- | --------------------------------------------------------------------------------------------------------------------- | ------- | ------- | +| bordered | Toggles rendering of the border around the list | boolean | false | +| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | + + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| bordered | Toggles rendering of the border around the list | boolean | false | +| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | +``` + +### TypeScript + +#### Support `readonly` operator ([#6027] by [@ikatyang]) + + +```ts +// Input +declare const array: readonly number[]; + +// Output (Prettier stable) +// SyntaxError: ',' expected. + +// Output (Prettier master) +declare const array: readonly number[]; +``` + +### HTML + +#### Add support for Lightning Web Components ([#5800] by [@ntotten]) + +Supports [Lightning Web Components (LWC)][LWC] template format for HTML attributes by adding a new parser called `lwc`. + + +```html +// Input + + +// Output (Prettier stable) + + +// Output (Prettier master) + +``` + +#### Angular: Don't add unnecessary parentheses to pipes ([#5929] by [@voithos]) + +In some cases, wrapping parentheses were being added to certain pipes inside attributes, but they are no longer added when they don't affect the result of the expression. + + +```html +// Input +
+ +// Output (Prettier stable) +
+ +// Output (Prettier master) +
+``` + +### GraphQL + +#### Support variable directives ([#6020] by [@adek05]) + +Prettier now supports formatting variable directives. + + +``` +// Input +query Q($variable: Int @directive) {node} + +// Output (Prettier stable) +query Q($variable: Int) { + node +} + +// Output (Prettier master) +query Q($variable: Int @directive) { + node +} +``` + +#### Support GraphQL fragment variables ([#6016] by [@adek05]) + +Prettier now supports formatting fragment variables. + +``` +// Input +fragment F($var: Int) on Type { node } + +// Output (Prettier stable) +// Fails to parse + +// Output (Prettier master) +fragment F($var: Int) on Type { + node +} +``` + +### CLI + +#### Automatically discover scoped plugins ([#5945] by [@Kocal]) + +Prettier now supports automatically loading scoped plugins named `@scope-name/prettier-plugin-*`. + +[@adek05]: https://github.com/adek05 +[@azz]: https://github.com/azz +[@bakkot]: https://github.com/bakkot +[@chenshuai2144]: https://github.com/chenshuai2144 +[@evilebottnawi]: https://github.com/evilebottnawi +[@ikatyang]: https://github.com/ikatyang +[@kocal]: https://github.com/Kocal +[@noahsug]: https://github.com/noahsug +[@ntotten]: https://github.com/ntotten +[@voithos]: https://github.com/voithos +[@yangsu]: https://github.com/yangsu +[#5836]: https://github.com/prettier/prettier/pull/5836 +[#5701]: https://github.com/prettier/prettier/pull/5701 +[#5800]: https://github.com/prettier/prettier/pull/5800 +[#5843]: https://github.com/prettier/prettier/pull/5843 +[#5929]: https://github.com/prettier/prettier/pull/5929 +[#5934]: https://github.com/prettier/prettier/pull/5934 +[#5945]: https://github.com/prettier/prettier/pull/5945 +[#5963]: https://github.com/prettier/prettier/pull/5963 +[#5996]: https://github.com/prettier/prettier/pull/5996 +[#6016]: https://github.com/prettier/prettier/pull/6016 +[#6020]: https://github.com/prettier/prettier/pull/6020 +[#6025]: https://github.com/prettier/prettier/pull/6025 +[#6027]: https://github.com/prettier/prettier/pull/6027