website/blog/2017-12-05-1.9.0.md
This release adds an option for arrow function parens in arguments, support for the new JSX fragment syntax (<>), support for .editorconfig files, and nice additions to our GraphQL and Markdown support.
When printing arrow functions, Prettier omitted parens around the arguments if they weren’t strictly necessary, like so:
<!-- prettier-ignore -->// no parens
foo => {};
// parens
(foo: Number) => {};
// parens
({ foo }) => {}
// parens
(foo = 5) => {}
This lead to the most commented thread in our issue tracker. Prettier now has the --arrow-parens option (arrowParens in the config) that can assume two values today:
"avoid" - (default) preserve the behavior that omits parens when possible"always" - always includes parensPrettier will now recognize and format JSX with the new fragment syntax, like the code below:
<!-- prettier-ignore -->function MyComponent() {
return (
<>
<Children1 />
<Children2 />
<Children3 />
</>
);
}
We received feedback that formatting a JSX file with a really long text (~1000 lines) was really slow and noticed there was two performance bottlenecks in our fill primitive, which prints text until it reaches the print width and then insert a line break.
After the release of our Markdown support, we received feedback that breaking text to respect the print width could affect some renderers that could be sensitive to line breaks. In 1.8.2 we released a new option proseWrap: false that would print a paragraph in a single line, and users would rely on the "soft wrapping" feature of editors.
In 1.9 we are releasing a new option proseWrap: "preserve" which will respect the original line breaks of text, and lets the users decide where the text should break.
[WARNING] proseWrap with boolean value is deprecated, use "always", "never" or "preserve" instead.
[BREAKING CHANGE] proseWrap option now defaults to "preserve" as some renderers are linebreak-sensitive.
When GraphQL support was released, Prettier did not support interpolation so it would skip formatting if any interpolations were present, because interpolations make formatting very difficult. While that works well for the most part, users of the Apollo Client were missing out on Prettier’s GraphQL support sometimes, because Apollo Client uses interpolation to share fragments between queries. The good news is that only top-level interpolations are allowed, and that was way easier to add support for in Prettier.
In 1.9 we format GraphQL queries with top-level interpolation:
<!-- prettier-ignore -->gql`
query User {
user(id: "Bob") {
...UserDetails
}
}
${UserDetailsFragment}
`
(Prettier will continue to skip formatting if the interpolation is inside a query or mutation or so.)
Prettier will now respect intentional line breaks inside GraphQL queries (but limit to 1), where before it would remove them.
<!-- prettier-ignore -->query User {
name
age
}
CSS is mostly case insensitive, so Prettier has been lowercasing stuff for a while to keep things consistent. Turns out we overlooked a detail in the CSS spec. Element and attribute names in selectors depend on the markup language: In HTML they are case insensitive, but in SVG (XML) they are not. Previously Prettier would incorrectly lowercase element and attribute names, but now we don’t anymore.
It's taken a while, but Prettier will finally respect your .editorconfig file. This includes:
indent_styleindent_size/tab_widthmax_line_lengthThe prettier CLI respects .editorconfig by default, but you can opt out with --no-editorconfig.
However, the API doesn't respect .editorconfig by default, in order to avoid potential editor integration issues (see here for details). To opt in, add editorconfig: true to the prettier.resolveConfig options.
Prettier won't break an element with no attributes anymore, keeping elements like as an unit.
In the previous release we tried a new strategy of breaking template literals with expressions inside to respect the print width. We've received feedback that for some cases it was actually preferred that it would exceed print width than breaking in multiple lines.
From now on, template literals expressions that contain a single identifier won't break anymore:
<!-- prettier-ignore -->const foo = `Hello ${username}. Today is ${month} ${day}. You have ${newMessages} new messages`.
Fixes an edge case where Prettier was moving comments around breaking tools like Webpack:
<!-- prettier-ignore -->const API = {
loader: () => import('./test' /* webpackChunkName: "test" */),
};
// would get formatted to
const API = {
loader: (/* webpackChunkName: "test" */) => import("./test")
};
There was a case where comments between a decorator and a class property were moved to an invalid position.
<!-- prettier-ignore -->// Before
class Something {
@decorator
static // comment
property = 1;
}
// After
class Something {
@decorator
// comment
static property = 1;
}
It won't break empty type parameters (foo: Type<>) anymore.
We were accidentally dropping flow mixins, this has been fixed, but only for the babylon parser.
// Before
class Foo extends Bar {}
// After
class Foo extends Bar mixins Baz {}
This was inconsistent with JavaScript and Flow, Prettier won't print a trailing comma in the following cases, when using the TypeScript parser:
<!-- prettier-ignore -->const {
bar,
baz,
...rest
} = foo;
We were omitting parens around type assertions inside decorators:
<!-- prettier-ignore -->@(bind as ClassDecorator)
class Decorated {}
inlineCode (#3230) by @ikatyangPrettier won't break text inside inlineCode meaning it will only break of after it.
Fixes cases where Prettier would insert extra whitespace like in the following examples:
<!-- prettier-ignore -->扩展运算符（spread ）是三个点（`...`）。
This is an english paragraph with a CJK quote " 中文 ".
Fixes the case where \_\_text\_\_ would be formatted as __text__.
Prettier now considers not only ASCII punctuation characters but Unicode as well.
We already supported YAML in the front matter of Markdown files and we added the TOML format as well, since some static site generators support it.
<!-- prettier-ignore -->+++
date: '2017-10-10T22:49:47.369Z'
title: 'My Post Title'
categories: ['foo', 'bar']
+++
This is the markdown body of my post.
Fixes a bug where it would indent lines after a list when it shouldn't:
<!-- prettier-ignore -->* parent list item
* child list item
* [x] parent task list item
* [x] child task list item
would become:
<!-- prettier-ignore -->* parent list item
* child list item
* [x] parent task list item
* [x] child task list item
Non-breaking whitespaces are useful to keep words separated by spaces together in the same line (i.e. number and units or multi-word product names). Prettier was wrongfully converting them to regular whitespaces.
Fixes a bug where Prettier could break text if it went over the print width right before a number followed by . which would be parsed as a numbered list:
She grew up in an isolated village in the 19th century and met her father aged
29. Oh no, why are we in a numbered list now?
Prettier will omit the semicolon (before and after) inside code samples if it's a simple JSX expression:
No semi:
<!-- prettier-ignore -->
```jsx
<div>Example</div>
```