stable

Prettier 1.7: JSX tweaks, Pragma, TypeScript and CSS fixes

September 15, 2017

@suchipi

This release features some bugfixes and tweaks around JSX, TypeScript, CSS, and JavaScript formatting, as well as a couple new features.

Highlights

JSX Changes

We received a lot of community feedback about the changes we made to JSX formatting in the 1.6.0 release, and have made changes to bring formatting closer to community standards and expectations.

In 1.6.0, we added a second style for ternaries (conditional expressions, a ? b : c), based on a format popular in the community where parentheses are used to demarcate JSX content:

const DinnerOptions = ({ willEatMeat, willEatEggs, willEatVegetables }) => (
  <div>
    <div>Let's get some dinner...</div>
    {willEatMeat ? (
      <FullMenu />
    ) : willEatEggs ? (
      <VegetarianMenu />
    ) : willEatVegetables ? (
      <VeganMenu />
    ) : (
      <BackupMenu />
    )}
  </div>
);

Before this was added, prettier only formatted ternaries with one consistent style:

willEatMeat
  ? "Full Menu"
  : willEatEggs
    ? "Vegetarian Menu"
    : willEatVegetables ? "Vegan Menu" : "Backup Menu";

In 1.6.0, we used the following heuristic to decide when to use the new "JSX mode ternaries":

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it
  OR
  * The ternary appears inside of some JSX

However, this heuristic caused some unexpected formatting: GitHub Diff showing a ternary containing internationalization strings appearing inside a JSX element being converted to use JSX-mode style ternaries

So, in 1.7.0, we have revised our heuristic to just be:

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it

We hope that this change will result in fewer surprising ternaries.

A big thanks goes out to @duailibe who implemented this change in addition to several other JSX-related formatting issues that were reported.

CSS Letter Case Consistency

We spent some time this release polishing our CSS formatting, and as part of that, @lydell did some work to normalize letter case.

So now, almost everything in CSS will print using lower case.

/* Before */
DIV.Foo {
  HEIGHT: 12PX;
}

/* After */
div.Foo {
  height: 12px;
}

Don't worry, though – Prettier won't touch your $scss-variables, [@less](https://github.com/less)-variables, or FunctionNames(). Preprocess on!

Pragma Support

There is a new option called --require-pragma (requirePragma via the API) which will change prettier's behavior so that it only reformats a file if it has a special "pragma" comment at the top of it, that looks like this:

/**
 * @prettier
 */

or

/**
 * @format
 */

This was @ajhyndman's idea and it was implemented by @wbinnssmith.

Other Changes

TypeScript

There was a bug in Prettier 1.6.1 where an error would be thrown while parsing any TypeScript using the never type, for example:

Observable.empty<never>();

Also, Prettier 1.6.1 was incorrectly removing the declare keyword from enum declarations in *.d.ts files:

// In
declare const enum Foo {}

// Out
const enum Foo {}

Both of these issues have been fixed. Thanks to @JamesHenry and @existentialism for these fixes which support our TypeScript community!

Configuration

Configurable Config Precedence

There is a new CLI option --config-precedence which configures how prettier should prioritize config sources. Valid values are:

cli-override (default) - CLI options take precedence over config file

file-override - Config file take precedence over CLI options

prefer-file - If a config file is found will evaluate it and ignore other CLI options. If no config file is found CLI options will evaluate as normal.

This option adds support to editor integrations where users define their default configuration but want to respect project specific configuration.

prettier.resolveConfig.sync

Previously, there was no way via the API to resolve configuration for a source file synchronously. Thanks to some new additions to cosmiconfig by @sudo-suhas, @ikatyang was able to add support for this to the prettier API.

PRs merged in this release

Issues resolved in this release

Thank you to everyone who contributed to this release, be it through issue creation, code contribution, code review, or general commenting and feedback. Prettier is a community-run project and is able to continue to exist thanks to people like you. Thank you!

Recent Posts