stable

Prettier 1.17: More quotes options and support for shared configs

April 12, 2019

Lucas Duailibe (@duailibe)

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.

Highlights

JavaScript

Add an option to modify when Prettier quotes object properties (#5934 by @azz)

--quote-props <as-needed|preserve|consistent>

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 option.

// 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:

{
  "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:

"@company/prettier-config"

@azz has created an example configuration package. You can see the source on GitHub or install it via npm.

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:

module.exports = {
  ...require("@company/prettier-config"),
  semi: false,
};

General

JavaScript

Respect newlines between parameters (#5836 by @evilebottnawi)

// 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)

// 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)

// 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.

// 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();

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.

<!-- Input -->
| 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 | - |

<!-- Output (Prettier stable, --prose-wrap never) -->
| 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  | -       |

<!-- Output (Prettier master, --prose-wrap never) -->
| 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)

// 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) template format for HTML attributes by adding a new parser called lwc.

// Input
<my-element data-for={value}></my-element>

// Output (Prettier stable)
<my-element data-for="{value}"></my-element>

// Output (Prettier master)
<my-element data-for={value}></my-element>

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.

// Input
<div *ngIf="isRendered | async"></div>

// Output (Prettier stable)
<div *ngIf="(isRendered | async)"></div>

// Output (Prettier master)
<div *ngIf="isRendered | async"></div>

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-*.

Recent Posts