Add Blog, Populate with Release Notes (#3604)
* Add blog * Rename files, add extra # * Improve formatting * Convert pull-request links * Fix typo * Update links in CHANGELOG.md, lint docs * Add missing parens * Remove banner images * Add 1.0 release blog post * Fix encoding bug * Add truncate to 1.0 blog post * TS syntax highlighting looks better than JS highlighting on Flow * Add introductory sentences to older posts * More highlighting fixes * Fix mistake * Fix more highlighting errors * More highlighting fixes * Add CSS fix * fix truncate on 1.9.0 post * fix truncate on 1.0.0 post * Fix additional # and my name in 1.0.0 * Restore js -> ts on codeblocksmaster
Lucas Azzola
GitHub
parent
8a86c0cc9f
commit
800a1cf9d4
16
CHANGELOG.md
16
CHANGELOG.md
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
[link](https://github.com/prettier/prettier/compare/1.8.2...1.9.0)
|
||||
|
||||
* [Release Notes](https://github.com/prettier/prettier/releases/tag/1.9.0)
|
||||
* [Release Notes](https://prettier.io/blog/2017/12/05/1.9.0.html)
|
||||
|
||||
# 1.8.2
|
||||
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
[link](https://github.com/prettier/prettier/compare/1.7.4...1.8.0)
|
||||
|
||||
* [Release Notes](https://github.com/prettier/prettier/releases/tag/1.8.0)
|
||||
* [Release Notes](https://prettier.io/blog/2017/11/07/1.8.0.html)
|
||||
|
||||
# 1.7.4
|
||||
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
|
||||
[link](https://github.com/prettier/prettier/compare/1.6.1...1.7.0)
|
||||
|
||||
* [Release Notes](https://github.com/prettier/prettier/releases/tag/1.7.0)
|
||||
* [Release Notes](https://prettier.io/blog/2017/09/15/1.7.0.html)
|
||||
|
||||
# 1.6.1
|
||||
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
|
||||
[link](https://github.com/prettier/prettier/compare/1.5.3...1.6.0)
|
||||
|
||||
* [Release Notes](https://github.com/prettier/prettier/releases/tag/1.6.0)
|
||||
* [Release Notes](https://prettier.io/blog/2017/08/29/1.6.0.html)
|
||||
|
||||
# 1.5.3
|
||||
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
|
||||
[link](https://github.com/prettier/prettier/compare/1.4.4...1.5.0)
|
||||
|
||||
* [Release Notes](https://github.com/prettier/prettier/releases/tag/1.5.0)
|
||||
* [Release Notes](https://prettier.io/blog/2017/06/28/1.5.0.html)
|
||||
|
||||
# 1.4.4
|
||||
|
||||
|
|
@ -189,7 +189,7 @@ Lots of small fixes, mainly for TypeScript.
|
|||
|
||||
[link](https://github.com/prettier/prettier/compare/1.3.1...1.4.0)
|
||||
|
||||
* [Release Notes](https://github.com/prettier/prettier/releases/tag/1.4.0)
|
||||
* [Release Notes](https://prettier.io/blog/2017/06/03/1.4.0.html)
|
||||
|
||||
# 1.3.1
|
||||
|
||||
|
|
@ -199,6 +199,8 @@ Lots of small fixes, mainly for TypeScript.
|
|||
|
||||
[link](https://github.com/prettier/prettier/compare/1.2.2...1.3.0)
|
||||
|
||||
* [Release Notes](https://prettier.io/blog/2017/05/03/1.3.0.html)
|
||||
|
||||
* add printer branches for some TypeScript nodes (#1331)
|
||||
* Skip trailing commas with FlowShorthandWithOneArg (#1364)
|
||||
* add TSLastTypeNode and TSIndexedAccessType (#1370)
|
||||
|
|
@ -263,6 +265,8 @@ Lots of small fixes, mainly for TypeScript.
|
|||
|
||||
[link](https://github.com/prettier/prettier/compare/1.1.0...1.2.0)
|
||||
|
||||
* [Release Notes](https://prettier.io/blog/2017/04/20/1.2.0.html)
|
||||
|
||||
* match jsx files in pre-commit hook (#1276)
|
||||
* Fix isPreviousLineEmpty on Windows (#1263)
|
||||
* Add --dev option to suggested install cmd (#1289)
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
"test:dist": "cross-env NODE_ENV=production yarn test",
|
||||
"test-integration": "jest tests_integration",
|
||||
"lint": "cross-env EFF_NO_LINK_RULES=true eslint . --format node_modules/eslint-friendly-formatter",
|
||||
"lint-docs": "prettylint {.,docs,website}/*.md",
|
||||
"lint-docs": "prettylint {.,docs,website,website/blog}/*.md",
|
||||
"build": "node ./scripts/build/build.js",
|
||||
"build-docs": "node ./scripts/build/build-docs.js",
|
||||
"check-deps": "node ./scripts/check-deps.js"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
author: Christopher Chedeau (@vjeux)
|
||||
authorURL: https://twitter.com/vjeux
|
||||
title: Prettier 1.2
|
||||
---
|
||||
|
||||
1.0 is not the end of prettier, we're going to continue to work on the long tail of formatting issues in order to make it an awesome JavaScript code formatter. You should expect minor version releases like this one to change small things and edge cases but nothing major or controversial.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
### Format
|
||||
|
||||
#### Do not print the sub-tree when using prettier-ignore ([#1286](https://github.com/prettier/prettier/pull/1286))
|
||||
|
||||
#### Bail when traversing === groups ([#1294](https://github.com/prettier/prettier/pull/1294))
|
||||
|
||||
A regression was introduced in 1.0 where deeply nested functions like this would trigger an exponential behavior and no longer complete in a reasonable time. We introduced a mitigation such that it's not instant but at least completes in a reasonable amount of time.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
#### Break if () if conditional inside breaks ([#1344](https://github.com/prettier/prettier/pull/1344))
|
||||
|
||||
prettier was sometimes breaking inside of an if condition as it didn't fit 80 columns but would print all the conditions in a single line. This was very weird looking. Now if the if break, prettier will also break the conditions.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
if (
|
||||
this.hasPlugin("dynamicImports") && this.lookahead().type === tt.parenLeft
|
||||
) {
|
||||
|
||||
// After
|
||||
if (
|
||||
this.hasPlugin("dynamicImports") &&
|
||||
this.lookahead().type === tt.parenLeft
|
||||
) {
|
||||
```
|
||||
|
||||
#### Avoid breaking arguments for last arg expansion ([#1305](https://github.com/prettier/prettier/pull/1305))
|
||||
|
||||
A long-standing issue around last argument expansion and complex arguments has been fixed, it no longer looks crazy bad.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
manageChildren: jest.fn(function manageChildren(parentTag, moveFromIndices = [
|
||||
], moveToIndices = [], addChildReactTags = [], addAtIndices = [
|
||||
], removeAtIndices = []) {
|
||||
|
||||
// After
|
||||
manageChildren: jest.fn(function manageChildren(
|
||||
parentTag,
|
||||
moveFromIndices = [],
|
||||
moveToIndices = [],
|
||||
addChildReactTags = [],
|
||||
addAtIndices = [],
|
||||
removeAtIndices = []
|
||||
) {
|
||||
```
|
||||
|
||||
#### Add parentheses for assignment as body of arrow ([#1326](https://github.com/prettier/prettier/pull/1326))
|
||||
|
||||
We're fine tuning when to add parenthesis in order to improve understanding of the code. This time, we're adding it to assignment inside of arrow functions. Please open up issues if you think that there should be parenthesis and prettier doesn't put them.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
() => foo = bar + 2;
|
||||
|
||||
// After
|
||||
() => (foo = bar + 2);
|
||||
```
|
||||
|
||||
#### Improve regex printing ([#1341](https://github.com/prettier/prettier/pull/1341))
|
||||
|
||||
Flow and Babylon were inconsistent in how they printed escapes and flags. Now the escapes are untouched compared to the original ones and the flags are sorted.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
/[\/]\/\u0aBc/mgi;
|
||||
|
||||
// After
|
||||
/[/]\/\u0aBc/gim;
|
||||
```
|
||||
|
||||
#### Fix arrow function parenthesis with comments in flow ([#1339](https://github.com/prettier/prettier/pull/1339))
|
||||
|
||||
With the Flow parser, prettier didn't add parenthesis for single argument functions with a comment.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
call(/*object*/ row => {});
|
||||
|
||||
// After
|
||||
call((/*object*/ row) => {});
|
||||
```
|
||||
|
||||
#### Don't inline paren at right of arguments ([#1345](https://github.com/prettier/prettier/pull/1345))
|
||||
|
||||
We incorrectly put a comment at the right of arguments inside of the argument list.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
f(/* ... */) {}
|
||||
|
||||
// After
|
||||
f() /* ... */ {}
|
||||
```
|
||||
|
||||
#### Fix template literal comments ([#1296](https://github.com/prettier/prettier/pull/1296))
|
||||
|
||||
Comments inside of template literals would crash in some conditions and be inserted in the wrong `${}`, no more :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
stdin: TypeError: Cannot read property 'comments' of undefined
|
||||
|
||||
// After
|
||||
`
|
||||
(?:${escapeChar}[\\S\\s]|(?:(?!${// Using `XRegExp.union` safely rewrites backreferences in `left` and `right`.
|
||||
// Intentionally not passing `basicFlags` to `XRegExp.union` since any syntax
|
||||
// transformation resulting from those flags was already applied to `left` and
|
||||
// `right` when they were passed through the XRegExp constructor above.
|
||||
XRegExp.union([left, right], '', {conjunction: 'or'}).source})[^${escapeChar}])+)+
|
||||
`
|
||||
```
|
||||
|
||||
#### Fix isPreviousLineEmpty on Windows ([#1263](https://github.com/prettier/prettier/pull/1263))
|
||||
|
||||
Empty lines were not properly preserved for switch case on windows.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
switch (a) {
|
||||
case x:
|
||||
|
||||
case y:
|
||||
call();
|
||||
}
|
||||
|
||||
// After
|
||||
switch (a) {
|
||||
case x:
|
||||
case y:
|
||||
call();
|
||||
}
|
||||
```
|
||||
|
||||
### CLI
|
||||
|
||||
#### Skip globbing filenames with node-glob when the filename is not a glob ([#1307](https://github.com/prettier/prettier/pull/1307))
|
||||
|
||||
If you run `prettier file.js` and `file.js` doesn't exist, it's going to throw an exception instead of silently doing nothing.
|
||||
|
||||
#### Write out change CLI changes synchronously ([#1292](https://github.com/prettier/prettier/pull/1292))
|
||||
|
||||
There was a race condition when you did ctrl-c to stop the process where it could delete files. Now we write files synchronously so it doesn't anymore.
|
||||
|
|
@ -0,0 +1,507 @@
|
|||
---
|
||||
author: Christopher Chedeau (@vjeux)
|
||||
authorURL: https://twitter.com/vjeux
|
||||
title: Prettier 1.3
|
||||
---
|
||||
|
||||
This post provides an update to Facebook's adoption or Prettier, outlines our progress on TypeScript, and details some of the improvements and fixes included in the 1.3.0 release of Prettier.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
### Facebook Adoption Update
|
||||
|
||||
The reason why I ([@vjeux](https://github.com/vjeux)) embarked on this journey working on prettier has always been to get the entire Facebook codebase converted over. I would like to give an update on how it is going and what is the process to get there.
|
||||
|
||||
The first projects to adopt prettier were Jest, React and immutable-js. Those are small codebases in the order of hundreds of files that have their own infrastructure. There are a handful of people working on them full time.
|
||||
|
||||
Then, Oculus and Nuclide converted their codebase over. The scale is bigger with a few thousands of files and tens of full time contributors but looks pretty similar to the first projects. The conversions went in one big codemod and that's it.
|
||||
|
||||
Now, the entire Facebook codebase is way bigger than this and it's not feasible to just convert everything in one go and to convince everyone that their entire codebase is going to be reformatted under their feet. So we need to find a more incremental approach.
|
||||
|
||||
#### Scaling adoption
|
||||
|
||||
Running prettier on a piece of code is a pretty expensive operation, it makes your pull request look bad because of a lot of unrelated changes and it causes merge conflicts for all the outstanding pull requests. So **once a file has been formatted, you should do everything to make sure it remains formatted**.
|
||||
|
||||
* When pretty-printing a file, add `@format` to the first block comment like `@flow`.
|
||||
* Have a lint rule with autofix that checks if the file is correctly pretty printed when `@format` is present.
|
||||
* When running Nuclide, it's going to show as an inline warning and have a fix button.
|
||||
* When sending a pull request, it's going to show the lint failing with a [Yn] prompt that you can just press enter.
|
||||
* Update the default code templates to add `@format` to the header.
|
||||
* When you run code formatting via cmd-shift-c inside of Nuclide, automatically insert the `@format` header.
|
||||
* Disable all the stylistic rules like max-len when `@format` is in the header.
|
||||
* Have script to run prettier through an entire folder with everything configured as a one line operation.
|
||||
* Have a good guide to help people that want to convert their codebase over with instructions and best practices.
|
||||
* When pushing a new release of prettier, also run it through all the files with `@format` in order to avoid getting warnings afterwards.
|
||||
* Add tracking for the number of files with `@format` over time.
|
||||
|
||||
We finally got all those things wired up 1.5 weeks ago and the reception has been insane. Many people from various teams converted their codebase to prettier on their own. As of today, 15% of Facebook codebase has been converted over!
|
||||
|
||||
<center><img src="https://cloud.githubusercontent.com/assets/197597/25565785/ed4abca4-2d82-11e7-9c26-380733444543.png" width="250" /></center>
|
||||
|
||||
When I started working on prettier, I had a hunch that people were hungry for tools to solve formatting. But I had no idea that once the tooling was in place, people would rush to convert their codebase over! This is great confirmation that this project is useful to people and not just a gimmicky tool.
|
||||
|
||||
### TypeScript Support Progress
|
||||
|
||||
[@despairblue](https://github.com/despairblue), [@azz](https://github.com/azz) and [@JamesHenry](https://github.com/JamesHenry) have been hard at work around getting TypeScript supported by prettier as it's the top requested feature. 2000 out of 11000 files in the TypeScript test suite are not yet properly printed. You can follow progress on https://github.com/prettier/prettier/issues/1480 and do not hesitate to help out!
|
||||
|
||||
### Flow
|
||||
|
||||
#### Add trailing commas on flow generics ([#1381](https://github.com/prettier/prettier/pull/1381))
|
||||
|
||||
The `--trailing-comma=all` option is supposed to add trailing commas everywhere possible, but as an oversight we forgot to do it for flow generics.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type Errors = Immutable.Map<
|
||||
Ahohohhohohohohohohohohohohooh,
|
||||
Fbt | Immutable.Map<ErrorIndex, Fbt>
|
||||
>;
|
||||
|
||||
// After
|
||||
type Errors = Immutable.Map<
|
||||
Ahohohhohohohohohohohohohohooh,
|
||||
Fbt | Immutable.Map<ErrorIndex, Fbt>,
|
||||
>;
|
||||
```
|
||||
|
||||
#### Inline nullable in flow generics ([#1426](https://github.com/prettier/prettier/pull/1426))
|
||||
|
||||
The phase after printing things correctly is to tweak the output to make it closer to the way people write code in practice. Inlining optional flow types is a small thing that makes a difference.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type Cursor = Promise<
|
||||
?{
|
||||
newCursor?: number,
|
||||
formatted: string,
|
||||
}
|
||||
>;
|
||||
|
||||
// After
|
||||
type Cursor = Promise<?{
|
||||
newCursor?: number,
|
||||
formatted: string,
|
||||
}>;
|
||||
```
|
||||
|
||||
#### Allow flow declarations to break on StringLiteralTypeAnnotations ([#1437](https://github.com/prettier/prettier/pull/1437))
|
||||
|
||||
We can always find more places to add breaks when things don't fit 80 columns. This time it's around declaring a type as a constant string.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
export type AdamPlacementValidationSingleErrorKey = 'SOME_FANCY_TARGETS.GLOBAL_TARGET';
|
||||
|
||||
// After
|
||||
export type AdamPlacementValidationSingleErrorKey =
|
||||
'SOME_FANCY_TARGETS.GLOBAL_TARGET';
|
||||
```
|
||||
|
||||
#### Add space around `=` for flow generics default arguments ([#1476](https://github.com/prettier/prettier/pull/1476))
|
||||
|
||||
Another example of small thing where we can improve the display of flow code. For function default arguments we put a space around `=` but didn't around flow generics.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
class PolyDefault<T=string> {}
|
||||
|
||||
// After
|
||||
class PolyDefault<T = string> {}
|
||||
```
|
||||
|
||||
#### Don't break for unparenthesised single argument flow function ([#1452](https://github.com/prettier/prettier/pull/1452))
|
||||
|
||||
I'm trying to figure out something to write here, but ... it just looks weird!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
const selectorByPath:
|
||||
Path
|
||||
=> SomethingSelector<
|
||||
SomethingUEditorContextType,
|
||||
SomethingUEditorContextType,
|
||||
SomethingBulkValue<string>
|
||||
> = memoizeWithArgs(/* ... */)
|
||||
|
||||
// After
|
||||
const selectorByPath: Path => SomethingSelector<
|
||||
SomethingUEditorContextType,
|
||||
SomethingUEditorContextType,
|
||||
SomethingBulkValue<string>
|
||||
> = memoizeWithArgs(/* ... */);
|
||||
```
|
||||
|
||||
#### Fix optional flow parenthesis ([#1357](https://github.com/prettier/prettier/pull/1357))
|
||||
|
||||
We were a bit too lenient around parenthesis for optional flow types. In one case in the entire Facebook codebase, it generated code with different semantics. As part of this fix, we hardened the list of types that can be written without parenthesis.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type X = ?(number, number) => number => void;
|
||||
|
||||
// After
|
||||
type X = (?(number, number) => number) => void;
|
||||
```
|
||||
|
||||
#### Skip trailing commas with FlowShorthandWithOneArg ([#1364](https://github.com/prettier/prettier/pull/1364))
|
||||
|
||||
It is a parse error to add a trailing comma without parenthesis for arguments of arrow function types. We found one case in Facebook codebase when this happened, it's a very rare occurrence.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type IdeConnectionFactory =
|
||||
child_process$ChildProcess,
|
||||
=> FlowIDEConnection = defaultIDEConnectionFactory;
|
||||
|
||||
// After
|
||||
type IdeConnectionFactory =
|
||||
child_process$ChildProcess
|
||||
=> FlowIDEConnection = defaultIDEConnectionFactory;
|
||||
```
|
||||
|
||||
#### Reorder flow object props ([#1451](https://github.com/prettier/prettier/pull/1451))
|
||||
|
||||
This one is an example where the way the AST is structured is not our favor. Instead of having a list of elements inside of a type, the AST is structured in a way where normal keys and array keys each have their own group. In order to restore the initial order, we're now reading from the original source :(
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type Foo = {
|
||||
[key: string]: void,
|
||||
alpha: "hello",
|
||||
beta: 10
|
||||
};
|
||||
|
||||
// After
|
||||
type Foo = {
|
||||
alpha: 'hello',
|
||||
[key: string]: void,
|
||||
beta: 10
|
||||
}
|
||||
```
|
||||
|
||||
### Template Literal
|
||||
|
||||
#### Proper indentation for template literals ([#1385](https://github.com/prettier/prettier/pull/1385))
|
||||
|
||||
A long standing issue with template literals and prettier is around the indentation of code inside of `${}`. It used to be the indentation of the backtick but turned out to give poor results. Instead people tend to use the indent of the `${`. We changed this behavior and it magically made GraphQL queries look pretty!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
Relay.createContainer({
|
||||
nodes: ({ solution_type, time_frame }) => Relay.QL`
|
||||
fragment {
|
||||
__typename
|
||||
${OptimalSolutionsSection.getFragment("node", {
|
||||
solution_type,
|
||||
time_frame
|
||||
})}
|
||||
}
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// After
|
||||
Relay.createContainer({
|
||||
nodes: ({ solution_type, time_frame }) => Relay.QL`
|
||||
fragment {
|
||||
__typename
|
||||
${OptimalSolutionsSection.getFragment("node", {
|
||||
solution_type,
|
||||
time_frame
|
||||
})}
|
||||
}
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
#### Do not indent calls with a single template literal argument ([#873](https://github.com/prettier/prettier/pull/873))
|
||||
|
||||
Template literals are very hard to deal with for a pretty printer because the spaces inside are meaningful so you can't re-indent them. We didn't know what to do for a call with a single template literal so we didn't do anything, but we kept receiving reports of people saying that prettier indented it the wrong way, so we are now inlining them. Fingers crossed it is going to cover most use cases.
|
||||
|
||||
```js
|
||||
// Before
|
||||
insertRule(
|
||||
`*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}`
|
||||
);
|
||||
|
||||
// After
|
||||
insertRule(`*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}`);
|
||||
```
|
||||
|
||||
#### Fix windows line ending on template literals ([#1439](https://github.com/prettier/prettier/pull/1439))
|
||||
|
||||
We manipulate line endings in a lot of places in prettier and took great care of handling both `\n` and `\r\n` except for template literals where we forgot. Now this is fixed!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const aLongString = `
|
||||
|
||||
Line 1
|
||||
|
||||
Line 2
|
||||
|
||||
Line 3
|
||||
|
||||
`;
|
||||
|
||||
// After
|
||||
const aLongString = `
|
||||
Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
`;
|
||||
```
|
||||
|
||||
#### Inline template literals as arrow body ([#1485](https://github.com/prettier/prettier/pull/1485))
|
||||
|
||||
We already inline template literals that are tagged (eg `` graphql`query` ``) but didn't for plain template literals. For the anecdote, it turns out the code was supposed to support it but it was using `TemplateElement` instead of `TemplateLiteral` :(
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const inlineStore = preloadedState =>
|
||||
`
|
||||
<script>
|
||||
window.preloadedState = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
|
||||
</script>
|
||||
`
|
||||
|
||||
// After
|
||||
const inlineStore = preloadedState => `
|
||||
<script>
|
||||
window.preloadedState = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
|
||||
</script>
|
||||
`
|
||||
```
|
||||
|
||||
### Ternaries
|
||||
|
||||
#### Add parenthesis for unusual nested ternaries ([#1386](https://github.com/prettier/prettier/pull/1386))
|
||||
|
||||
While working on printing nested ternaries, everyone focused on the ones with the shape of an if then else `cond1 ? elem1_if : cond2 ? elem2_if : elem_else` which is the most common. But, if you move some `?` and `:` around you can have another pattern. It looks almost the same but has a different meaning. In order to reduce confusion, we're adding parenthesis around the uncommon form.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
cond1 ? cond2 ? elem2_if : elem2_else : elem1_else
|
||||
|
||||
// After
|
||||
cond1 ? (cond2 ? elem2_if : elem2_else) : elem1_else
|
||||
```
|
||||
|
||||
#### Only add parenthesis on ternaries inside of arrow functions if doesn't break ([#1450](https://github.com/prettier/prettier/pull/1450))
|
||||
|
||||
There's an eslint rule [`no-confusing-arrows`](http://eslint.org/docs/rules/no-confusing-arrow) which suggests adding parenthesis for ternaries in arrow functions without brackets. The following two pieces of code are confusing:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
var x = a => 1 ? 2 : 3;
|
||||
var x = a <= 1 ? 2 : 3;
|
||||
```
|
||||
|
||||
It makes sense when code is in one line, but when it is split into multiple lines, the parenthesis are unnecessary given the indentation, so we now only put them when they serve their disambiguation purpose.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
var x = a => (1 ? 2 : 3);
|
||||
var x = a =>
|
||||
(1
|
||||
? 2
|
||||
: 3);
|
||||
|
||||
// After
|
||||
var x = a => (1 ? 2 : 3);
|
||||
var x = a =>
|
||||
1
|
||||
? 2
|
||||
: 3;
|
||||
```
|
||||
|
||||
### General JavaScript Improvements
|
||||
|
||||
#### Inline function declaration with single arg as object ([#1173](https://github.com/prettier/prettier/pull/1173))
|
||||
|
||||
This one was often requested for React Stateless Functional Components (SFC). If you make use of a lot of them, it's likely going to be a big change for you.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const X = (
|
||||
props: {
|
||||
a: boolean,
|
||||
},
|
||||
) => <div />;
|
||||
|
||||
// After
|
||||
const X = (props: {
|
||||
a: boolean,
|
||||
}) => <div />;
|
||||
```
|
||||
|
||||
#### Break inline object first in function arguments ([#1453](https://github.com/prettier/prettier/pull/1453))
|
||||
|
||||
One thing we discovered early on is that people usually break the arguments of the function before breaking the return type. Unfortunately, the code responsible to inline single destructuring argument broke that assumption and it introduced bad looking code like this example. The good news is that it enables us to turn on inlining for single arguments that are typed with an object.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
class X {
|
||||
async onDidInsertSuggestion({editor, triggerPosition, suggestion}): Promise<
|
||||
void
|
||||
> {
|
||||
}
|
||||
}
|
||||
|
||||
// After
|
||||
class X {
|
||||
async onDidInsertSuggestion({
|
||||
editor,
|
||||
triggerPosition,
|
||||
suggestion
|
||||
}): Promise<void> {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Don't break on empty arrays and objects ([#1440](https://github.com/prettier/prettier/pull/1440))
|
||||
|
||||
This one has been a long standing issue and is an easy fix, but was an invaluable tool: whenever someone reported that `[]` or `{}` would break, we were able to fix the example by fixing something else. So it was a great way to surface edge cases. Fortunately, this vein has now ran out and all the recent examples just look bad with no other reason than the fact that they are breaking. So it's time to finally do it!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const a = someVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeLong.Expression || [
|
||||
];
|
||||
|
||||
// After
|
||||
const a = someVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeLong.Expression || [];
|
||||
```
|
||||
|
||||
#### Do not break on `[0]` ([#1441](https://github.com/prettier/prettier/pull/1441))
|
||||
|
||||
We have a lot of issues where code breaks in array access when it doesn't look good. We don't yet have a good generic solution for it, but we can add a specific fix a common situation: `[0]`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
queryThenMutateDOM(() => {
|
||||
title = SomeThing.call(root, "someLongStringThatPushesThisTextReall")[
|
||||
0
|
||||
];
|
||||
});
|
||||
|
||||
// After
|
||||
queryThenMutateDOM(() => {
|
||||
title = SomeThing.call(
|
||||
root,
|
||||
"someLongStringThatPushesThisTextReall",
|
||||
)[0];
|
||||
});
|
||||
```
|
||||
|
||||
#### Indent do while condition ([#1373](https://github.com/prettier/prettier/pull/1373))
|
||||
|
||||
We were not using the correct indentation logic for do-while condition but someone noticed, now we do!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
do {}
|
||||
while (someVeryLongStringA && someVeryLongStringB && someVeryLongStringC && someVeryLongStringD);
|
||||
|
||||
// After
|
||||
do {}
|
||||
while (
|
||||
someVeryLongStringA &&
|
||||
someVeryLongStringB &&
|
||||
someVeryLongStringC &&
|
||||
someVeryLongStringD
|
||||
);
|
||||
```
|
||||
|
||||
#### Preserve inline comment as last argument ([#1390](https://github.com/prettier/prettier/pull/1390))
|
||||
|
||||
We forgot to add one case in the comment detection code when they appear last for JSX attributes and function arguments which made them go after the closing. In the case of JSX, it generated code that had a different meaning. Fortunately, since we don't usually commit commented out code it didn't affect production code, but it is not a good experience while coding.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const x = (
|
||||
<div
|
||||
attr1={1}>
|
||||
// attr3={3}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
// After
|
||||
const x = (
|
||||
<div
|
||||
attr1={1}
|
||||
// attr3={3}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
#### Break class expression returned by arrow call ([#1464](https://github.com/prettier/prettier/pull/1464))
|
||||
|
||||
In 1.0, we made class be inline inside of arrow functions. It turns out that it doesn't work great when the class is non trivial, so we are reverting this change. We're trying really hard to avoid making trashy decisions like this where the style changes back and forth, but we allow ourselves to do it sometimes to fix mistakes!
|
||||
|
||||
```js
|
||||
// Before
|
||||
export default (ViewComponent: Function, ContainerComponent: Function) => class
|
||||
extends React.Component {
|
||||
static propTypes = {};
|
||||
};
|
||||
|
||||
// After
|
||||
export default (ViewComponent: Function, ContainerComponent: Function) =>
|
||||
class extends React.Component {
|
||||
static propTypes = {};
|
||||
};
|
||||
```
|
||||
|
||||
#### Fix empty line in block with EmptyStatement ([#1375](https://github.com/prettier/prettier/pull/1375))
|
||||
|
||||
This one was found by fuzzing. You're unlikely going to hit this in real code but it's good to know it is fixed!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Input
|
||||
if (a) {
|
||||
b;
|
||||
|
||||
|
||||
;
|
||||
}
|
||||
|
||||
// Before
|
||||
if (a) {
|
||||
b;
|
||||
|
||||
}
|
||||
|
||||
// After
|
||||
if (a) {
|
||||
b;
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,655 @@
|
|||
---
|
||||
author: Christopher Chedeau (@vjeux)
|
||||
authorURL: https://twitter.com/vjeux
|
||||
title: "Prettier 1.4: TypeScript and CSS support"
|
||||
---
|
||||
|
||||
This release introduces support for TypeScript, CSS, Less, and SCSS languages to Prettier!
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
[](https://revolutionconf.com/talk/a-prettier-printer)
|
||||
|
||||
## TypeScript Support
|
||||
|
||||
This is the most requested feature for prettier. With 1.4.0, you can now use prettier to format your `.ts` and `.tsx` files!
|
||||
|
||||
The way prettier works is by using those project to generate an AST representation of the code and print it. Both babylon (the parser that powers babel) and flow are producing an AST approximately following the [estree](https://github.com/estree/estree) format for the JavaScript parts and then have special nodes for Flow-specific ones.
|
||||
|
||||
TypeScript, the same way as Flow, introduces special nodes for the syntax it introduces. Unfortunately, it doesn't follow the estree format for the rest of the JavaScript language. This puts us in a rough spot with prettier as we would have to essentially completely fork it in order to print TypeScript.
|
||||
|
||||
This incompatibility with the AST is not a new problem and another project struggled with it: ESLint. Because the AST is different, none of the ESLint rules are working. Fortunately for us, [@JamesHenry](https://github.com/JamesHenry) and [@soda0289](https://github.com/soda0289) wrote a project called [typescript-eslint-parser](https://github.com/eslint/typescript-eslint-parser) which takes a TypeScript AST and convert it to an estree one, just what we need for prettier!
|
||||
|
||||
After that project got setup inside of prettier, [@azz](https://github.com/azz), [@despairblue](https://github.com/despairblue) and [@Pajn](https://github.com/Pajn) implemented all the TypeScript-specific nodes and ensured that the 13k tests of the TypeScript test suite are correctly passing. This was a huge undertaking and it is finally ready to be used :)
|
||||
|
||||
We tested prettier on the biggest TypeScript projects we could find on GitHub to ensure that it prints correct code. We haven't spent a lot of time trying to optimize the way code is formatted yet, so if you see something strange, please raise an issue!
|
||||
|
||||
## CSS, Less and SCSS Support
|
||||
|
||||
While TypeScript is the most requested feature from open source, CSS is the biggest one from Facebook engineers. Once you are used to pretty print your code in one language, you want to do it everywhere!
|
||||
|
||||
It turns out that CSS is a much smaller language than JavaScript and supporting it only took a few days. We are using [postcss](https://github.com/postcss/postcss) by [@ai](https://github.com/ai) as the underlying parser which is able to parse CSS, Less and SCSS. We also depend on [postcss-values-parser](https://github.com/shellscape/postcss-values-parser), [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser) by [@ben](https://github.com/ben)-eb [postcss-media-query-parser](https://github.com/dryoma/postcss-media-query-parser) by [@dryoma](https://github.com/dryoma).
|
||||
|
||||
Unfortunately, postcss right now doesn't parse Sass nor Stylus. We'd be happy to support them if someone is willing to do the work of printing them.
|
||||
|
||||
Note that prettier is currently just formatting the code, it does not respect any options yet such as `singleQuote` nor is doing any color or number normalization like we do for JavaScript.
|
||||
|
||||
## Editor Integration
|
||||
|
||||
The first phase of the project was to make prettier output correct and good looking code. Now that it's in a good shape, we can spend time on making the integrations better. We just introduced support for two great features: maintain cursor position and being able to format a range instead of the entire file.
|
||||
|
||||
Note that we just landed the support inside of prettier itself, none of the editor integrations are using it yet. Also, we haven't really tried them out in practice so we're likely going to have to fix rough edges with them!
|
||||
|
||||
#### Add `cursorOffset` option for cursor translation ([#1637](https://github.com/prettier/prettier/pull/1637)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
Right now, we let editors figure out where the cursor should be, which they do an okay job at. But since we are printing the code, we can give the correct position!
|
||||
|
||||
#### Add `--range-start/end` options to format only parts of the input ([#1609](https://github.com/prettier/prettier/pull/1609)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
This one is a very often requested feature. Right now prettier only formats the entire file. Now it is possible to format a range.
|
||||
|
||||
The way it works is by going up through the AST in order to find the closest statement. This way you don't need to select exactly the right range that is valid. You can just drag in the rough place where the code you want to reformat it, and it's going to!
|
||||
|
||||
#### Adding filepath option in order to enable filetype inference ([#1835](https://github.com/prettier/prettier/pull/1835)) by [@mitermayer](https://github.com/mitermayer)
|
||||
|
||||
Since we are now formatting CSS and TypeScript, it is not convenient to have to specify the parser for every file. You can now pass the filepath of the file you are working on and prettier will read the extension and figure out the right parser to use.
|
||||
|
||||
## Highlights
|
||||
|
||||
#### Wrap text content inside of JSX ([#1120](https://github.com/prettier/prettier/pull/1120), [#1671](https://github.com/prettier/prettier/pull/1671), [#1827](https://github.com/prettier/prettier/pull/1827), [#1829](https://github.com/prettier/prettier/pull/1829)) by [@karl](https://github.com/karl)
|
||||
|
||||
The biggest remaining issue that people have with prettier when printing JSX is when it is used when printing text. The behavior of prettier used to add an ugly `{" "}` before and if a line was too long, just leave it alone. Now we treat each word as a token and are able to make it flow correctly.
|
||||
|
||||
This is an awesome piece of work by [@karl](https://github.com/karl) as not only did he implement the feature, but also introduced a new primitive inside of prettier in order to print a sequence of elements and break as soon as one hits the edge.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<div>
|
||||
Please state your
|
||||
{" "}
|
||||
<b>name</b>
|
||||
{" "}
|
||||
and
|
||||
{" "}
|
||||
<b>occupation</b>
|
||||
{" "}
|
||||
for the board of directors.
|
||||
</div>
|
||||
|
||||
// After
|
||||
<div>
|
||||
Please state your <b>name</b> and <b>occupation</b> for the board of
|
||||
directors.
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Remove parenthesis for JSX inside of arrow functions ([#1733](https://github.com/prettier/prettier/pull/1733)) by [@xixixao](https://github.com/xixixao)
|
||||
|
||||
People writing functional components are going to be happy about this one. We no longer put parens for arrow functions that return JSX.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
const render1 = ({ styles }) => (
|
||||
<div style={styles}>
|
||||
Keep the wrapping parens. Put each key on its own line.
|
||||
</div>
|
||||
);
|
||||
|
||||
// After
|
||||
const render1 = ({ styles }) =>
|
||||
<div style={styles}>
|
||||
Keep the wrapping parens. Put each key on its own line.
|
||||
</div>;
|
||||
```
|
||||
|
||||
#### Improve template literal printing ([#1664](https://github.com/prettier/prettier/pull/1664), [#1714](https://github.com/prettier/prettier/pull/1714)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
Template literal printing has always caused prettier a lot of difficulties. With 1.3.0 we massively improved the situation and with this release, I believe that we handle all the common situations in a good way.
|
||||
|
||||
In order to workaround issues, we added an utility that removes empty lines from the output, but it yielded some really weird results sometimes, this is now gone. Another tweak we've done is instead of indenting when `${` starts, we indent where the line that contains `${` starts.
|
||||
|
||||
Let us know if you still have issues with how template literals output after this release!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const Bar = styled.div`
|
||||
color: ${props => (props.highlight.length > 0 ? palette([
|
||||
'text',
|
||||
'dark',
|
||||
'tertiary'
|
||||
])(props) : palette([
|
||||
'text',
|
||||
'dark',
|
||||
'primary'
|
||||
])(props))} !important;
|
||||
`
|
||||
|
||||
// After
|
||||
const Bar = styled.div`
|
||||
color: ${props =>
|
||||
props.highlight.length > 0
|
||||
? palette(["text", "dark", "tertiary"])(props)
|
||||
: palette(["text", "dark", "primary"])(props)} !important;
|
||||
`
|
||||
```
|
||||
|
||||
#### Use the same breaking rules for assignment and object values ([#1721](https://github.com/prettier/prettier/pull/1721))
|
||||
|
||||
We have a lot of fine-tuned logic for how to break things after assignment (eg `a = ...`). We are now using the same one for object values. This should help for multi-line boolean logic, or big conditionals. This is also a good example of how we can create a consistent printer.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const o = {
|
||||
somethingThatsAReallyLongPropName: this.props.cardType ===
|
||||
AwesomizerCardEnum.SEEFIRST,
|
||||
};
|
||||
|
||||
// After
|
||||
const o = {
|
||||
somethingThatsAReallyLongPropName:
|
||||
this.props.cardType === AwesomizerCardEnum.SEEFIRST,
|
||||
};
|
||||
```
|
||||
|
||||
#### Indent conditions inside of !() ([#1731](https://github.com/prettier/prettier/pull/1731))
|
||||
|
||||
There's been a steady stream of people complaining about the way it was rendered and was put on the list of things that are probably hard to do, will check later. It turned out to be super easy, so here you go!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const anyTestFailures = !(aggregatedResults.numFailedTests === 0 &&
|
||||
aggregatedResults.numRuntimeErrorTestSuites === 0);
|
||||
|
||||
// After
|
||||
const anyTestFailures = !(
|
||||
aggregatedResults.numFailedTests === 0 &&
|
||||
aggregatedResults.numRuntimeErrorTestSuites === 0
|
||||
);
|
||||
```
|
||||
|
||||
## Formatting Fixes
|
||||
|
||||
#### Put loop bodies on the same line when possible ([#1498](https://github.com/prettier/prettier/pull/1498))
|
||||
|
||||
We were already doing this for if statements, we should be consistent and also do it for loops.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
for (a in b)
|
||||
var c = {};
|
||||
|
||||
// After
|
||||
for (a in b) var c = {};
|
||||
```
|
||||
|
||||
#### Fix empty line with flow union ([#1511](https://github.com/prettier/prettier/pull/1511)) by [@existentialism](https://github.com/existentialism)
|
||||
|
||||
We shouldn't indent things twice ;)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type Foo = Promise<
|
||||
|
||||
| { ok: true, bar: string, baz: SomeOtherLongType }
|
||||
| { ok: false, bar: SomeOtherLongType }
|
||||
>;
|
||||
|
||||
// After
|
||||
type Foo = Promise<
|
||||
{ ok: true, bar: string, baz: SomeOtherLongType } |
|
||||
{ ok: false, bar: SomeOtherLongType }
|
||||
>;
|
||||
```
|
||||
|
||||
#### Do not put parens for single argument with end of line comment ([#1518](https://github.com/prettier/prettier/pull/1518))
|
||||
|
||||
The detection code for whether an arrow function should be written without parenthesis just checked if there was a comment, but instead we only want comments that are inline like `(/* comment */ num)`, not end of line comments.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
KEYPAD_NUMBERS.map((num) => ( // Buttons 0-9
|
||||
<div />
|
||||
));
|
||||
|
||||
KEYPAD_NUMBERS.map(num => ( // Buttons 0-9
|
||||
<div />
|
||||
));
|
||||
```
|
||||
|
||||
#### Do not indent nested ternaries ([#1822](https://github.com/prettier/prettier/pull/1822))
|
||||
|
||||
This avoids making it seems like it is indented by 4 characters instead of two. The downside is that if the condition is multi-line it's not going to be properly aligned, but I feel it's a better trade-offs. If you are doing nested ternaries, you usually have small conditions.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
aaaaaaaaaaaaaaa
|
||||
? bbbbbbbbbbbbbbbbbb
|
||||
: ccccccccccccccc
|
||||
? ddddddddddddddd
|
||||
: eeeeeeeeeeeeeee ? fffffffffffffff : gggggggggggggggg;
|
||||
|
||||
// After
|
||||
aaaaaaaaaaaaaaa
|
||||
? bbbbbbbbbbbbbbbbbb
|
||||
: ccccccccccccccc
|
||||
? ddddddddddddddd
|
||||
: eeeeeeeeeeeeeee ? fffffffffffffff : gggggggggggggggg;
|
||||
```
|
||||
|
||||
#### Inline chained conditionals inside of jsx attribute ([#1519](https://github.com/prettier/prettier/pull/1519))
|
||||
|
||||
We don't need to use the indentation to disambiguate another block as nothing can come after.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<div
|
||||
src={
|
||||
!isEnabled &&
|
||||
diffUpdateMessageInput != null &&
|
||||
this.state.isUpdateMessageEmpty
|
||||
}
|
||||
/>;
|
||||
|
||||
// After
|
||||
<div
|
||||
src={
|
||||
!isEnabled &&
|
||||
diffUpdateMessageInput != null &&
|
||||
this.state.isUpdateMessageEmpty
|
||||
}
|
||||
/>;
|
||||
```
|
||||
|
||||
#### Unescape unnecessarily escaped characters in strings ([#1575](https://github.com/prettier/prettier/pull/1575)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
We are already trying to cleanup strings in various ways, this is another small addition that's going to remove `\` that are not needed.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
a = 'hol\a';
|
||||
|
||||
// After
|
||||
a = 'hola';
|
||||
```
|
||||
|
||||
#### Fix boolean for empty objects ([#1590](https://github.com/prettier/prettier/pull/1590)) by [@dmitrika](https://github.com/dmitrika)
|
||||
|
||||
We want to inline objects inside of a boolean expression as it looks weird to have `{` on its own line. But it turns out that it leads to weird behaviors for empty objects. So we keep them on their own line if they are empty.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
const x = firstItemWithAVeryLongNameThatKeepsGoing ||
|
||||
secondItemWithALongNameAsWell || {};
|
||||
|
||||
// After
|
||||
const x =
|
||||
firstItemWithAVeryLongNameThatKeepsGoing ||
|
||||
secondItemWithALongNameAsWell ||
|
||||
{};
|
||||
```
|
||||
|
||||
#### Remove Parens from SequenceExpressions in ForStatements ([#1597](https://github.com/prettier/prettier/pull/1597)) by [@k15a](https://github.com/k15a)
|
||||
|
||||
It is common to assign multiple values inside of a for loop, now we don't add parenthesis anymore.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
for ((i = 0), (len = arr.length); i < len; i++) {
|
||||
|
||||
// After
|
||||
for (i = 0, len = arr.length; i < len; i++) {
|
||||
```
|
||||
|
||||
#### Do not inline arrow when argument has a leading comment ([#1660](https://github.com/prettier/prettier/pull/1660))
|
||||
|
||||
If you put block comments inside of arrow functions, we no longer mess everything up!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
export const bem = block => /**
|
||||
* @param {String} [element] - the BEM Element within that block; if undefined, selects the block itself.
|
||||
*/
|
||||
element => /**
|
||||
* @param {?String} [modifier] - the BEM Modifier for the Block or Element; if undefined, selects the Block or Element unmodified.
|
||||
*/
|
||||
modifier =>
|
||||
|
||||
// After
|
||||
export const bem = block =>
|
||||
/**
|
||||
* @param {String} [element] - the BEM Element within that block; if undefined, selects the block itself.
|
||||
*/
|
||||
element =>
|
||||
/**
|
||||
* @param {?String} [modifier] - the BEM Modifier for the Block or Element; if undefined, selects the Block or Element unmodified.
|
||||
*/
|
||||
modifier =>
|
||||
```
|
||||
|
||||
#### Fix last comments of imports ([#1677](https://github.com/prettier/prettier/pull/1677))
|
||||
|
||||
Another place where we have to do special logic for comments!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
import {
|
||||
ExecutionResult,
|
||||
DocumentNode,
|
||||
/* tslint:disable */
|
||||
SelectionSetNode,
|
||||
} /* tslint:enable */ from 'graphql';
|
||||
|
||||
// After
|
||||
import {
|
||||
DocumentNode,
|
||||
/* tslint:disable */
|
||||
SelectionSetNode,
|
||||
/* tslint:enable */
|
||||
} from 'graphql';
|
||||
```
|
||||
|
||||
#### Handle comments in member chain ([#1686](https://github.com/prettier/prettier/pull/1686), [#1691](https://github.com/prettier/prettier/pull/1691))
|
||||
|
||||
We handled some placements before and kept adding places where they could appear, now we switch to a more general approach. Hopefully those issues shouldn't crop up in the future anymore.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const configModel = this.baseConfigurationService.getCache().consolidated // global/default values (do NOT modify)
|
||||
.merge(this.cachedWorkspaceConfig);
|
||||
|
||||
// After
|
||||
const configModel = this.baseConfigurationService
|
||||
.getCache()
|
||||
.consolidated // global/default values (do NOT modify)
|
||||
.merge(this.cachedWorkspaceConfig);
|
||||
```
|
||||
|
||||
#### Use expandLast for nested arrow functions ([#1720](https://github.com/prettier/prettier/pull/1720))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
f(action => next =>
|
||||
next(action));
|
||||
|
||||
// After
|
||||
f(action => next =>
|
||||
next(action),
|
||||
);
|
||||
```
|
||||
|
||||
#### Put JSX comments inside of the parenthesis ([#1712](https://github.com/prettier/prettier/pull/1712))
|
||||
|
||||
This mostly affects Facebook engineers where we automatically add `$FlowFixMe` when pushing a new version of flow. Now it no longer messes up those comments.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
const aDiv = /* $FlowFixMe */
|
||||
(
|
||||
<div className="foo">
|
||||
Foo bar
|
||||
</div>
|
||||
);
|
||||
|
||||
// After
|
||||
const aDiv = (
|
||||
/* $FlowFixMe */
|
||||
<div className="foo">
|
||||
Foo bar
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
#### Force \n for multiple variable declarations ([#1723](https://github.com/prettier/prettier/pull/1723))
|
||||
|
||||
This one has been very often requested. We used to only break multiple variable declarations if the line was > 80 columns. Now we do it regardless if there's at least one with an assignment.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
var numberValue1 = 1, numberValue2 = 2;
|
||||
|
||||
// After
|
||||
var numberValue1 = 1,
|
||||
numberValue2 = 2;
|
||||
```
|
||||
|
||||
#### Inline | null and | void ([#1734](https://github.com/prettier/prettier/pull/1734))
|
||||
|
||||
The expanded version of flow union looks good when they are many objects but if it's used for nullability, the it looks very weird. We're now inlining `| null` and `| void`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
interface RelayProps {
|
||||
articles:
|
||||
| Array<
|
||||
| {
|
||||
__id: string,
|
||||
}
|
||||
| null
|
||||
>
|
||||
| null
|
||||
}
|
||||
|
||||
// After
|
||||
interface RelayProps {
|
||||
articles: Array<{
|
||||
__id: string,
|
||||
} | null> | null,
|
||||
}
|
||||
```
|
||||
|
||||
#### Break on implements instead of extends ([#1730](https://github.com/prettier/prettier/pull/1730))
|
||||
|
||||
We no longer break on `extends`. This should make classes with extends that can break look less wonky.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
class MyContractSelectionWidget
|
||||
extends React.Component<
|
||||
void,
|
||||
MyContractSelectionWidgetPropsType,
|
||||
void
|
||||
> {
|
||||
method() {}
|
||||
}
|
||||
|
||||
// After
|
||||
class MyContractSelectionWidget extends React.Component<
|
||||
void,
|
||||
MyContractSelectionWidgetPropsType,
|
||||
void
|
||||
> {
|
||||
method() {}
|
||||
}
|
||||
```
|
||||
|
||||
#### Inline single import ([#1729](https://github.com/prettier/prettier/pull/1729))
|
||||
|
||||
The same way we don't break long `require` calls, we no longer break `import` statements if there is only a single thing being imported.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
import somethingSuperLongsomethingSuperLong
|
||||
from "somethingSuperLongsomethingSuperLongsomethingSuperLong";
|
||||
|
||||
// After
|
||||
import somethingSuperLongsomethingSuperLong from "somethingSuperLongsomethingSuperLongsomethingSuperLong";
|
||||
```
|
||||
|
||||
#### Add the ability for SequenceExpression to break ([#1749](https://github.com/prettier/prettier/pull/1749))
|
||||
|
||||
Did you know that if none of your code were statements, you could use `()` instead of `{}` and `,` instead of `;`? Now you do. Some people exploit this fact when returning things from arrow functions. This is not recommended but it's easy to support in prettier so might as well ¯\\\_(ツ)\_/¯
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const f = (argument1, argument2, argument3) =>
|
||||
(doSomethingWithArgument(argument1), doSomethingWithArgument(
|
||||
argument2
|
||||
), argument1);
|
||||
|
||||
// After
|
||||
const f = (argument1, argument2, argument3) => (
|
||||
doSomethingWithArgument(argument1),
|
||||
doSomethingWithArgument(argument2),
|
||||
argument1
|
||||
);
|
||||
```
|
||||
|
||||
#### Don't force line break in empty loop bodies ([#1815](https://github.com/prettier/prettier/pull/1815))
|
||||
|
||||
Loops with empty body no longer have their `{}` split into two lines.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
while (true) {
|
||||
}
|
||||
|
||||
// After
|
||||
while (true) {}
|
||||
```
|
||||
|
||||
#### Preserve empty lines between switch cases with comments ([#1708](https://github.com/prettier/prettier/pull/1708))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
switch (true) {
|
||||
case true:
|
||||
// Good luck getting here
|
||||
case false:
|
||||
}
|
||||
|
||||
// After
|
||||
switch (true) {
|
||||
case true:
|
||||
|
||||
// Good luck getting here
|
||||
case false:
|
||||
}
|
||||
```
|
||||
|
||||
## Correctness
|
||||
|
||||
#### Remove ast-types ([#1743](https://github.com/prettier/prettier/pull/1743), [#1744](https://github.com/prettier/prettier/pull/1744), [#1745](https://github.com/prettier/prettier/pull/1745), [#1746](https://github.com/prettier/prettier/pull/1746), [#1747](https://github.com/prettier/prettier/pull/1747))
|
||||
|
||||
We used to find where to put comments by traversing the AST using the definition from ast-types. This occasionally caused issues when some field wasn't declared, we wouldn't find the node and either print comments in an incorrect location or throw an error. It turns out that we don't need to keep this mapping and can just traverse the objects and if a node has a `type` field, then it's a node.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
Error: did not recognize object of type "ObjectTypeSpreadProperty"
|
||||
|
||||
// After
|
||||
type X = {...Y/**/};
|
||||
type X = {/**/...Y};
|
||||
```
|
||||
|
||||
#### Preserve unusual unicode whitespace ([#1658](https://github.com/prettier/prettier/pull/1658), [#1165](https://github.com/prettier/prettier/pull/1165)) by [@karl](https://github.com/karl) and [@yamafaktory](https://github.com/yamafaktory)
|
||||
|
||||
If you were adding invisible characters inside of JSX text, we would replace them by regular spaces. I don't know why anyone would ever want to do that, but now we print it back as is!
|
||||
|
||||
#### Don't let trailing template literal comments escape ([#1580](https://github.com/prettier/prettier/pull/1580), [#1713](https://github.com/prettier/prettier/pull/1713), [#1598](https://github.com/prettier/prettier/pull/1598), [#1713](https://github.com/prettier/prettier/pull/1713)) by [@josephfrazier](https://github.com/josephfrazier) and [@k15a](https://github.com/k15a)
|
||||
|
||||
We used to have some pretty complicated (and not working well) code to handle comments inside of template literals. We introduced a really nice solution for JSX `{}` expressions. The idea is to introduce a boundary before the end of the `}` and if we still have unprinted comments, then flush them all at once, put a \n and print the `}`. We are now using this logic for template literals :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
`${0} // comment`;
|
||||
|
||||
// After
|
||||
`${
|
||||
0
|
||||
// comment
|
||||
}`;
|
||||
```
|
||||
|
||||
#### Parenthesize await correctly ([#1513](https://github.com/prettier/prettier/pull/1513), [#1595](https://github.com/prettier/prettier/pull/1595), [#1593](https://github.com/prettier/prettier/pull/1593)) by [@bakkot](https://github.com/bakkot) and [@existentialism](https://github.com/existentialism)
|
||||
|
||||
We don't have an automated way to put parenthesis, we instead specify all the possible combinations of nodes and when they should or shouldn't have parenthesis. So there's likely a long tail of unusual combinations that are still remaining. In this case, we made `await` handling a lot more robust by both adding parenthesis where they are needed and removing them when they are not.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
(await spellcheck) && spellcheck.setChecking(false);
|
||||
new A((await x));
|
||||
|
||||
// After
|
||||
await (spellcheck && spellcheck.setChecking(false));
|
||||
new A(await x);
|
||||
```
|
||||
|
||||
#### Preserve getter/setter info on flow ObjectTypeProperty ([#1585](https://github.com/prettier/prettier/pull/1585)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
Another long tail option that we haven't got right!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type T = { method: () => void };
|
||||
|
||||
// After
|
||||
type T = { get method(): void }
|
||||
```
|
||||
|
||||
#### Add parenthesis for single arg types with generics ([#1814](https://github.com/prettier/prettier/pull/1814))
|
||||
|
||||
Another case of sneaky parenthesis that we didn't properly add!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type ExtractType = <A>B<C> => D
|
||||
|
||||
// After
|
||||
type ExtractType = <A>(B<C>) => D
|
||||
```
|
||||
|
||||
#### Fall back to non-strict mode in babylon ([#1587](https://github.com/prettier/prettier/pull/1587), [#1608](https://github.com/prettier/prettier/pull/1608)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
We want prettier to be able to parse all the JavaScript out there. For babylon parser, we have to chose whether a file is using strict mode or not. We opted in to use strict mode by default as most files parse that way. But if you have octal literals like `0775`, it would not even parse. Now if it fails to parse in strict mode, we're going to try again in non-strict. We also allow `return` outside of a function as it's valid in node files.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
SyntaxError
|
||||
|
||||
// After
|
||||
return 0775;
|
||||
```
|
||||
|
||||
## CLI
|
||||
|
||||
#### Allow `--write` to be used with `--list-different` ([#1633](https://github.com/prettier/prettier/pull/1633))
|
||||
|
||||
This is useful to combine the two if you are writing a commit hook to tell the user what actually changed in a single command.
|
||||
|
||||
#### Ignore node_modules when running prettier from CLI ([#1683](https://github.com/prettier/prettier/pull/1683)) by [@thymikee](https://github.com/thymikee)
|
||||
|
||||
It's very easy to run prettier over the `node_modules/` folder by mistake which is something you almost never want to. So now we disable it by default and add a `--with-node-modules` option if you really want to.
|
||||
|
||||
#### Traverse dot files for glob ([#1844](https://github.com/prettier/prettier/pull/1844)) by [@jhgg](https://github.com/jhgg)
|
||||
|
||||
We enabled the option to go through .dotfiles in the glob parsing library we are using. This means that writing `*` will now catch `.eslintrc`.
|
||||
|
|
@ -0,0 +1,665 @@
|
|||
---
|
||||
author: Christopher Chedeau (@vjeux)
|
||||
authorURL: https://twitter.com/vjeux
|
||||
title: "Prettier 1.5: GraphQL, CSS-in-JS & JSON"
|
||||
---
|
||||
|
||||
This release adds GraphQL formatting support, CSS-in-JS (including styled-components), and JSON support to Prettier.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
This is the release I've been waiting for a very long time: one that has only minimal changes to JavaScript!
|
||||
|
||||
For the past 6 months, we kept doing changes to various aspects of printing JavaScript, with the hope that one day we would get to a stable place. No automated tool is going to print perfect code for all the possible edge cases. The goal is to find a good place where when people report code that is printed in a funny way, we can't make it better without making other pieces of code look worse, introduce behavior that's very hard to understand for humans and doesn't introduce some disproportionate complexity to the codebase.
|
||||
|
||||
We're not 100% there yet, but we're closer than ever!
|
||||
|
||||
Now that JavaScript needs for support is trending down, it's an opportunity to support other languages that front-end developers are working on and want formatted. We've introduced TypeScript and CSS in the last release and are doing a batch of fixes for them in this release. We're also adding support for new languages: GraphQL queries, embedding CSS-in-JS and JSON are now available in prettier!
|
||||
|
||||
#### Blog Post: [Adding a new layout strategy to Prettier](https://medium.com/geckoboard-under-the-hood/adding-a-new-layout-strategy-to-prettier-8d33084c0f99) by [@karl](https://github.com/karl)
|
||||
|
||||
Prettier is not only a useful tool but it's also a really cool piece of technology. [@karl](https://github.com/karl) spent a bunch of time improving JSX support and in the process implemented a new primitive to prettier: `fill`. He wrote a very interesting blog post [Adding a new layout strategy to Prettier](https://medium.com/geckoboard-under-the-hood/adding-a-new-layout-strategy-to-prettier-8d33084c0f99) that I highly recommend reading if you're interested in how prettier is working behind the scenes.
|
||||
|
||||
### GraphQL
|
||||
|
||||
Thanks to [@stubailo](https://github.com/stubailo), [@jnwng](https://github.com/jnwng), [@tgriesser](https://github.com/tgriesser) and [@azz](https://github.com/azz), prettier now supports printing GraphQL queries!
|
||||
|
||||
It works for `.graphql` files and within JavaScipt templates that start with `graphql`, `graphql.experimental` and `gql` in order to work with [Relay](https://facebook.github.io/relay/) and [Apollo](https://www.apollodata.com/).
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
ReactDOM.render(
|
||||
<QueryRenderer
|
||||
query={graphql`
|
||||
query appQuery {
|
||||
viewer {
|
||||
...TodoApp_viewer
|
||||
}
|
||||
}
|
||||
`}
|
||||
// ...
|
||||
/>,
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
|
||||
Note that it only supports the open source syntax of GraphQL, therefore doesn't work with Relay Classic, it only works with Relay Modern.
|
||||
|
||||
### CSS-in-JS
|
||||
|
||||
If you are using [styled-components](https://github.com/styled-components/styled-components) or [styled-jsx](https://github.com/zeit/styled-jsx), prettier will now reformat the CSS inside of your template expressions. Thanks to [@pomber](https://github.com/pomber) for the awesome work!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
const EqualDivider = styled.div`
|
||||
margin: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: papayawhip;
|
||||
> * {
|
||||
flex: 1;
|
||||
&:not(:first-child) {
|
||||
${props => (props.vertical ? "margin-top" : "margin-left")}: 1rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
```
|
||||
|
||||
### JSON
|
||||
|
||||
This was pretty straightforward to implement but nonetheless very useful. Thanks to [@josephfrazier](https://github.com/josephfrazier) for doing it :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```json
|
||||
{
|
||||
"name": "prettier",
|
||||
"version": "1.5.0",
|
||||
"description": "Prettier is an opinionated JavaScript formatter",
|
||||
"bin": {
|
||||
"prettier": "./bin/prettier.js"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
I'm really excited because we only put a few days to build the initial CSS support and it has worked surprisingly well. This release brings a handful of important improvements to CSS but nothing that required big changes.
|
||||
|
||||
#### CSS: Every selector is now printed in its own line ([#2047](https://github.com/prettier/prettier/pull/2047)) by [@yuchi](https://github.com/yuchi)
|
||||
|
||||
The biggest unknown when printing CSS was how to deal with multiple selectors. The initial approach we took was to use the 80 columns rule where we would only split if it was bigger than that. Many people reported that they were using another strategy for this: always break after a `,`. It turns out that many popular codebases are using this approach and it feels good as you can see the structure of the selectors when layed out on-top of each others.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// Before
|
||||
.clusterPlannerDialog input[type="text"], .clusterPlannerDialog .uiTypeahead {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// After
|
||||
.clusterPlannerDialog input[type="text"],
|
||||
.clusterPlannerDialog .uiTypeahead {
|
||||
color: #333;
|
||||
}
|
||||
```
|
||||
|
||||
#### CSS: lowercase hex colors ([#2203](https://github.com/prettier/prettier/pull/2203)) by [@azz](https://github.com/azz)
|
||||
|
||||
The concept of code formatting has blurry boundaries. The core aspect of it is around whitespaces but some things like single vs double quotes and semi-colons are usually bundled with it. With prettier on JavaScript, we also lightly reformat strings by removing extra `\` and normalize numbers. For CSS, we need to do a similar interpretation of where the boundary ends. For colors, we decided to turn all the letters into lowercase and stop there. Turning rgb() into hex or 6 hex into 3 hex is out of scope.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// Before
|
||||
.foo {
|
||||
color: #AAA;
|
||||
-o-color: #fabcd3;
|
||||
-ms-color: #AABBCC;
|
||||
}
|
||||
|
||||
// After
|
||||
.foo {
|
||||
color: #aa;
|
||||
-o-color: #fabcd3;
|
||||
-ms-color: #aabbcc;
|
||||
}
|
||||
```
|
||||
|
||||
#### CSS: Use fill for CSS values ([#2224](https://github.com/prettier/prettier/pull/2224))
|
||||
|
||||
The new fill primitive turned out to be very useful for CSS. For long values, instead of breaking and putting a `\n` before every element, we can instead only put a `\n` when it goes over the limit. It leads to much better looking code.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```scss
|
||||
// Before
|
||||
foo {
|
||||
border-left:
|
||||
1px
|
||||
solid
|
||||
mix($warningBackgroundColors, $warningBorderColors, 50%);
|
||||
}
|
||||
|
||||
// After
|
||||
foo {
|
||||
border-left: 1px solid
|
||||
mix($warningBackgroundColors, $warningBorderColors, 50%);
|
||||
}
|
||||
```
|
||||
|
||||
#### CSS: Allow long media rules to break ([#2219](https://github.com/prettier/prettier/pull/2219))
|
||||
|
||||
This is another small fix in the journey of properly supporting a new language. We now encode the ability to break on long `@media` rules.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// Before
|
||||
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
|
||||
}
|
||||
|
||||
// After
|
||||
@media all and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
all and (-o-min-device-pixel-ratio: 3/2),
|
||||
all and (min--moz-device-pixel-ratio: 1.5),
|
||||
all and (min-device-pixel-ratio: 1.5) {
|
||||
}
|
||||
```
|
||||
|
||||
#### CSS: Print @else on same line as } ([#2088](https://github.com/prettier/prettier/pull/2088)) by [@azz](https://github.com/azz)
|
||||
|
||||
Less and Scss are turning into real programming languages :) Step by step, we're starting to print all their constructs in the same way as JavaScript. This time, it's the `else` placement.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```scss
|
||||
// Before
|
||||
@if $media == phonePortrait {
|
||||
$k: .15625;
|
||||
}
|
||||
@else if $media == tabletPortrait {
|
||||
$k: .065106;
|
||||
}
|
||||
|
||||
// After
|
||||
@if $media == phonePortrait {
|
||||
$k: .15625;
|
||||
} @else if $media == tabletPortrait {
|
||||
$k: .065106;
|
||||
}
|
||||
```
|
||||
|
||||
#### CSS: implement prettier-ignore ([#2089](https://github.com/prettier/prettier/pull/2089)) by [@azz](https://github.com/azz)
|
||||
|
||||
While we want prettier to format the entire codebase, there are times where we "know better" and want an escape hatch. This is where the `prettier-ignore` comment comes in. It wasn't working for CSS but that was an oversight, now it is implemented :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// Before
|
||||
foo {
|
||||
/* prettier-ignore */
|
||||
thing: foo;
|
||||
-ms-thing: foo;
|
||||
}
|
||||
|
||||
// After
|
||||
foo {
|
||||
/* prettier-ignore */
|
||||
thing: foo;
|
||||
-ms-thing: foo;
|
||||
}
|
||||
```
|
||||
|
||||
#### CSS: Fix css-modules composes breaking with long line width ([#2190](https://github.com/prettier/prettier/pull/2190)) by [@tdeekens](https://github.com/tdeekens)
|
||||
|
||||
In order to be fast, many "packagers" do not parse files in order to extract dependencies but instead use a crude regex. This is a reason why we don't break long `require()` calls and it happens to also affect CSS Modules. If you add new lines in the `composes` field, it doesn't recognize it anymore. So we're no longer breaking it there, even if it goes over 80 columns.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// Before
|
||||
.reference {
|
||||
composes:
|
||||
selector
|
||||
from
|
||||
"a/long/file/path/exceeding/the/maximum/length/forcing/a/line-wrap/file.css";
|
||||
}
|
||||
|
||||
// After
|
||||
.reference {
|
||||
composes: selector from "a/long/file/path/exceeding/the/maximum/length/forcing/a/line-wrap/file.css";
|
||||
}
|
||||
```
|
||||
|
||||
#### CSS: First try scss when there's an [@import](https://github.com/import) with comma ([#2225](https://github.com/prettier/prettier/pull/2225))
|
||||
|
||||
We made a decision to have only a single high level "parser" for CSS, SCSS and Less even though we are using `postcss-less` and `postcss-scss` under the hood. We use a regex to figure out which parser to try first and fallback to the other one if a syntax error is thrown. Unfortunately, for certain features, the first (incorrect) parser doesn't throw and instead skips some elements. So, we need to beef up the regex to make sure we are right for the early detection.
|
||||
|
||||
Thankfully, this hack is working well in practice. If we find a lot more edge cases, we'll likely want to do the right thing(tm) and split them into two parsers.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```scss
|
||||
// Before
|
||||
@import "text-shadow";
|
||||
|
||||
// After
|
||||
@import "rounded-corners", "text-shadow";
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
TypeScript support is now solid, all the changes for this release are small edge cases.
|
||||
|
||||
#### TypeScript: print arrow function type params on same line as params ([#2101](https://github.com/prettier/prettier/pull/2101)) by [@azz](https://github.com/azz)
|
||||
|
||||
The core algorithm of prettier is to expand a group if all the elements do not fit. It works really well in practice for most of JavaScript but there's one case it doesn't handle very well is when there are two groups side by side, in this case: `<Generics>(Arguments)`. We have to carefully create groups such that arguments expand first as this is generally what people expect.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
export const forwardS = R.curry(<
|
||||
V,
|
||||
T
|
||||
>(prop: string, reducer: ReducerFunction<V, T>, value: V, state: {[name: string]: T}) =>
|
||||
R.assoc(prop, reducer(value, state[prop]), state)
|
||||
);
|
||||
|
||||
// After
|
||||
export const forwardS = R.curry(
|
||||
<V, T>(
|
||||
prop: string,
|
||||
reducer: ReducerFunction<V, T>,
|
||||
value: V,
|
||||
state: { [name: string]: T }
|
||||
) => R.assoc(prop, reducer(value, state[prop]), state)
|
||||
);
|
||||
```
|
||||
|
||||
#### TypeScript: keep parens around with yield/await non-null assertion ([#2149](https://github.com/prettier/prettier/pull/2149)) by [@azz](https://github.com/azz)
|
||||
|
||||
For better or worse, we decided to manually handle adding parenthesis. So when a new operator is introduced, we need to make sure that we add correct parenthesis when nested with any other combination of operators. In this case, we missed await inside of TypeScript `!`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
const bar = await foo(false)!;
|
||||
|
||||
// After
|
||||
const bar = (await foo(false))!;
|
||||
```
|
||||
|
||||
#### TypeScript: Print {} in import if it's in the source ([#2150](https://github.com/prettier/prettier/pull/2150)) by [@azz](https://github.com/azz)
|
||||
|
||||
We use typescript-eslint-parser project that translates TypeScript AST into estree AST in order for prettier to print it. From time to time we're going to find edge cases that it doesn't handle yet. In this case, it didn't give a way to tell that there's an empty `{}`, which apparently is important for TypeScript. Thankfully, the team is very responsive and they fixed it after we put a workaround inside of prettier.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
import from "@types/googlemaps";
|
||||
|
||||
// After
|
||||
import {} from "@types/googlemaps";
|
||||
```
|
||||
|
||||
#### TypeScript: Always break interfaces onto multiple lines ([#2161](https://github.com/prettier/prettier/pull/2161)) by [@azz](https://github.com/azz)
|
||||
|
||||
The code that implements `interface` is shared with the code that prints `object`s, which contains a rule to keep them expanded if there's a `\n` inside. But, this is not the intended behavior for interfaces. We always want to expand, like we do for classes, even if it fits 80 columns.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
interface FooBar { [id: string]: number; }
|
||||
|
||||
// After
|
||||
interface FooBar {
|
||||
[id: string]: number;
|
||||
}
|
||||
```
|
||||
|
||||
#### TypeScript: Fix extra semicolon in ambient typescript declaration emit ([#2167](https://github.com/prettier/prettier/pull/2167)) by [@azz](https://github.com/azz)
|
||||
|
||||
`no-semi` and `semi` are often requested but on the prettier team we're one step ahead and implemented `two-semi` for you! Just kidding, it was a bug and is now fixed ;)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
declare module "classnames" {
|
||||
export default function classnames(
|
||||
...inputs: (string | number | false | object | undefined)[]
|
||||
): string;;
|
||||
}
|
||||
|
||||
// After
|
||||
declare module "classnames" {
|
||||
export default function classnames(
|
||||
...inputs: (string | number | false | object | undefined)[]
|
||||
): string;
|
||||
}
|
||||
```
|
||||
|
||||
#### TypeScript: group function params in call/construct signatures ([#2169](https://github.com/prettier/prettier/pull/2169)) by [@azz](https://github.com/azz)
|
||||
|
||||
Adding a comment before a method used to take into account the comment length and would often expand the method when it wasn't expected. Thankfully, it was a simple fix, just wrap the output in a `group`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
interface TimerConstructor {
|
||||
// Line-splitting comment
|
||||
new (
|
||||
interval: number,
|
||||
callback: (handler: Timer) => void
|
||||
): Timer;
|
||||
}
|
||||
|
||||
interface TimerConstructor {
|
||||
// Line-splitting comment
|
||||
new (interval: number, callback: (handler: Timer) => void): Timer;
|
||||
}
|
||||
```
|
||||
|
||||
#### TypeScript: Upgrade tsep ([#2183](https://github.com/prettier/prettier/pull/2183)) by [@azz](https://github.com/azz)
|
||||
|
||||
This bug was very annoying if you ran into it: anytime you formatted the code, it would add one more `_` to the object key!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
obj = {
|
||||
__: 42
|
||||
___: 42
|
||||
};
|
||||
|
||||
// After
|
||||
obj = {
|
||||
_: 42
|
||||
__: 42
|
||||
};
|
||||
```
|
||||
|
||||
#### TypeScript: break on multiple interface extends ([#2085](https://github.com/prettier/prettier/pull/2085)) by [@azz](https://github.com/azz)
|
||||
|
||||
Unlike in JavaScript, TypeScript lets you extend multiple classes at once. It turns out that people use this feature and prettier now does a better job at printing it.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
export interface ThirdVeryLongAndBoringInterfaceName extends AVeryLongAndBoringInterfaceName, AnotherVeryLongAndBoringInterfaceName, AThirdVeryLongAndBoringInterfaceName {}
|
||||
|
||||
// After
|
||||
export interface ThirdVeryLongAndBoringInterfaceName
|
||||
extends AVeryLongAndBoringInterfaceName,
|
||||
AnotherVeryLongAndBoringInterfaceName,
|
||||
AThirdVeryLongAndBoringInterfaceName {}
|
||||
```
|
||||
|
||||
#### TypeScript: handle ObjectPattern instead of ObjectExpression inside BinaryExpression ([#2238](https://github.com/prettier/prettier/pull/2238)) by [@azz](https://github.com/azz)
|
||||
|
||||
This one isn't very interesting, it's an edge case that's not properly handled in the TypeScript -> estree conversion.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
call(c => { bla: 1 }) || [];
|
||||
|
||||
// After
|
||||
call(c => ({ bla: 1 })) || [];
|
||||
```
|
||||
|
||||
#### Preserve lines after directives ([#2070](https://github.com/prettier/prettier/pull/2070))
|
||||
|
||||
By supporting TypeScript, prettier is now being used in a lot of Angular codebases which exercises edge cases that were not properly handled. In this case, we didn't preserve empty lines after directives inside of a function.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
export default class {
|
||||
constructor($log, $uibModal) {
|
||||
"ngInject";
|
||||
Object.assign(this, { $log, $uibModal });
|
||||
|
||||
// After
|
||||
export default class {
|
||||
constructor($log, $uibModal) {
|
||||
"ngInject";
|
||||
|
||||
Object.assign(this, { $log, $uibModal });
|
||||
```
|
||||
|
||||
### JavaScript
|
||||
|
||||
This release is very light in terms of JavaScript changes, which is awesome. We're starting to see the light at the end of the tunnel and get towards a great pretty printer. We're never going to get to a 100% perfect automatic pretty printer. The goal is that for every issue we get, there are no clear ways to improve the way it is printed without regressing other pieces.
|
||||
|
||||
#### Allow JSX lines to be recombined ([#1831](https://github.com/prettier/prettier/pull/1831)) by [@karl](https://github.com/karl)
|
||||
|
||||
The goal of prettier is to have a consistent way to format your code: given an AST, we always print the same way. In two places we had to compromise and read the original format: JSX and Objects. With this change, we're no longer relying on the original input for JSX with text inside. This lets us reflow text inside of JSX.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
const Abc = () => {
|
||||
return (
|
||||
<div>
|
||||
Please state your
|
||||
{" "}
|
||||
<b>name</b>
|
||||
{" "}
|
||||
and
|
||||
{" "}
|
||||
<b>occupation</b>
|
||||
{" "}
|
||||
for the board of directors.
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// After
|
||||
const Abc = () => {
|
||||
return (
|
||||
<div>
|
||||
Please state your <b>name</b> and <b>occupation</b> for the board of
|
||||
directors.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Break on non-literal computed member expression ([#2087](https://github.com/prettier/prettier/pull/2087)) by [@azz](https://github.com/azz)
|
||||
|
||||
Printing member chains is the most complicated piece of prettier and we keep finding small tweaks we can do to make it a better experience.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
nock(/test/)
|
||||
.matchHeader("Accept", "application/json")[httpMethodNock(method)]("/foo")
|
||||
.reply(200, {
|
||||
foo: "bar",
|
||||
});
|
||||
|
||||
// After
|
||||
nock(/test/)
|
||||
.matchHeader("Accept", "application/json")
|
||||
[httpMethodNock(method)]("/foo")
|
||||
.reply(200, {
|
||||
foo: "bar",
|
||||
});
|
||||
```
|
||||
|
||||
#### Indent first variable in one-var scenario ([#2095](https://github.com/prettier/prettier/pull/2095)) by [@azz](https://github.com/azz)
|
||||
|
||||
Up until recently we haven't done much to support printing multiple variables in a single declaration as the most common practice is to do one variable declaration per variable. For single declarations, we don't want to indent it, but it turns out that we do when there are other ones afterwards, otherwise it looks weird.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
var templateTagsMapping = {
|
||||
'%{itemIndex}': 'index',
|
||||
'%{itemContentMetaTextViews}': 'views'
|
||||
},
|
||||
separator = '<span class="item__content__meta__separator">•</span>';
|
||||
|
||||
// After
|
||||
var templateTagsMapping = {
|
||||
'%{itemIndex}': 'index',
|
||||
'%{itemContentMetaTextViews}': 'views'
|
||||
},
|
||||
separator = '<span class="item__content__meta__separator">•</span>';
|
||||
```
|
||||
|
||||
#### Allow break with both default named import ([#2096](https://github.com/prettier/prettier/pull/2096)) by [@azz](https://github.com/azz)
|
||||
|
||||
This one is an unfortunate regression from 1.4 where we inlined import that only contained a single element. Turns out the definition of a single element allowed a single type and a single element. This is now corrected!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
import transformRouterContext, { type TransformedContextRouter } from '../../helpers/transformRouterContext';
|
||||
|
||||
// After
|
||||
import transformRouterContext, {
|
||||
type TransformedContextRouter
|
||||
} from '../../helpers/transformRouterContext';
|
||||
```
|
||||
|
||||
#### Turn allowImportExportEverywhere on ([#2207](https://github.com/prettier/prettier/pull/2207)) by [@zimme](https://github.com/zimme)
|
||||
|
||||
The goal of prettier is to format code people write in practice, so we enable loose/experimental modes for all the parsers we support. Babylon allows you to write import within a function, which is not part of the standard, but it doesn't cost us much to allow it.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
ParseError
|
||||
|
||||
// After
|
||||
function f() {
|
||||
import x from 'x';
|
||||
}
|
||||
```
|
||||
|
||||
#### Support inline template for new calls ([#2222](https://github.com/prettier/prettier/pull/2222))
|
||||
|
||||
We keep adding features for function calls and have to backport them to new calls as they have a different AST node type but in practice we want to treat them the same. This fix refactored the two so that they are going through the same call site, so hopefully should prevent more from sneaking in.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
new Error(
|
||||
formatErrorMessage`
|
||||
This is a really bad error.
|
||||
Which has more than one line.
|
||||
`
|
||||
);
|
||||
|
||||
// After
|
||||
new Error(formatErrorMessage`
|
||||
This is a really bad error.
|
||||
Which has more than one line.
|
||||
`);
|
||||
```
|
||||
|
||||
#### Don't indent + in object value ([#2227](https://github.com/prettier/prettier/pull/2227))
|
||||
|
||||
When we switched to using the same heuristic for assignment (`a = b`) for objects (`{a: b}`), we forgot to fix the indentation. Now it's fixed.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
var abc = {
|
||||
thing:
|
||||
"asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf" +
|
||||
"asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf" +
|
||||
"asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf",
|
||||
}
|
||||
|
||||
// After
|
||||
var abc = {
|
||||
thing:
|
||||
"asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf" +
|
||||
"asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf" +
|
||||
"asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf",
|
||||
}
|
||||
```
|
||||
|
||||
#### Handle conditions inside of a ternary ([#2228](https://github.com/prettier/prettier/pull/2228))
|
||||
|
||||
Prettier already had a special case when the expression was a conditional but it didn't apply when the conditional was the left part of a ternary. Now it does.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
room = room.map((row, rowIndex) =>
|
||||
row.map(
|
||||
(col, colIndex) =>
|
||||
rowIndex === 0 ||
|
||||
colIndex === 0 ||
|
||||
rowIndex === height ||
|
||||
colIndex === width
|
||||
? 1
|
||||
: 0
|
||||
)
|
||||
);
|
||||
|
||||
// After
|
||||
room = room.map((row, rowIndex) =>
|
||||
row.map(
|
||||
(col, colIndex) =>
|
||||
rowIndex === 0 ||
|
||||
colIndex === 0 ||
|
||||
rowIndex === height ||
|
||||
colIndex === width
|
||||
? 1
|
||||
: 0
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
#### Add caching for printing ([#2259](https://github.com/prettier/prettier/pull/2259))
|
||||
|
||||
With the 1.0 release, we fixed a bug in the printing that introduced an exponential behavior. We've been able to mitigate the biggest issue such that reasonable code didn't time out, but it wasn't completely fixed it. By adding a caching layer at the right spot, we should now be in the clear.
|
||||
|
||||
This should make printing the IR of prettier using prettier in debug mode no longer time out.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
...times out...
|
||||
|
||||
// After
|
||||
someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
return someObject.someFunction().then(function () {
|
||||
anotherFunction();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
#### Fix variance location ([#2261](https://github.com/prettier/prettier/pull/2261))
|
||||
|
||||
We refactored the code that prints modifiers when we introduced TypeScript support and accidentally moved around the variance (`+`) part before `static` which is not valid in Flow. This is now fixed.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
class Route {
|
||||
+static param: T;
|
||||
}
|
||||
|
||||
// After
|
||||
class Route {
|
||||
static +param: T;
|
||||
}
|
||||
```
|
||||
|
||||
### Miscellaneous
|
||||
|
||||
#### Various fixes for range and cursor tracking ([#2266](https://github.com/prettier/prettier/pull/2266), [#2248](https://github.com/prettier/prettier/pull/2248), [#2250](https://github.com/prettier/prettier/pull/2250), [#2136](https://github.com/prettier/prettier/pull/2136)) by [@CiGit](https://github.com/CiGit) and [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
Both those features were introduced in the last release and we discovered a bunch of issues when actually using them in production. A bunch of them got fixed, if you see more, please report them!
|
||||
|
|
@ -0,0 +1,729 @@
|
|||
---
|
||||
author: Christopher Chedeau (@vjeux)
|
||||
authorURL: https://twitter.com/vjeux
|
||||
title: "Prettier 1.6: Config File, JSX"
|
||||
---
|
||||
|
||||
This release adds configuration file support to Prettier, as well as some significant enhancements to JSX printing.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
I want to give a special shout out to [@azz](https://github.com/azz) who has been maintaining the repository and implementing a bunch of the changes in this release as I had less time to devote to prettier due to vacation and switching team :)
|
||||
|
||||
## Highlights
|
||||
|
||||
### Configuration
|
||||
|
||||
#### Implement cosmiconfig for workspace configuration ([#2434](https://github.com/prettier/prettier/pull/2434)) by [@azz](https://github.com/azz)
|
||||
|
||||
Since the very first release of prettier, people have asked for a `.prettierrc` file. We've been trying to have as few options as possible and tried to avoid being one more `.dotfile` that you have to have when starting a new project.
|
||||
|
||||
But, the truth is, we need to have some way to configure prettier that can be kept in sync with all the integrations. By not having one, we pushed the problem to them and saw a bunch of incompatible ways of handling the problem. So now, it's handled by prettier itself.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// .prettierrc
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"singleQuote": true
|
||||
}
|
||||
```
|
||||
|
||||
For more information on configuration file support, see the [README](https://github.com/prettier/prettier/blob/master/README.md#configuration-file).
|
||||
|
||||
#### Support .prettierignore files ([#2412](https://github.com/prettier/prettier/pull/2412)) by [@evilebottnawi](https://github.com/evilebottnawi)
|
||||
|
||||
Along with telling what configuration to use, you can write a file `.prettierignore` to tell which files not to convert.
|
||||
|
||||
```
|
||||
## .prettierignore
|
||||
dist/
|
||||
package.json
|
||||
```
|
||||
|
||||
### JSX
|
||||
|
||||
#### Improve JSX Formatting ([#2398](https://github.com/prettier/prettier/pull/2398)) by [@suchipi](https://github.com/suchipi)
|
||||
|
||||
The last big friction point from people trying to adopt prettier was around how JSX was being printed. We went through all the issues that were raised and made a bunch of changes:
|
||||
|
||||
* Arrow Function Expressions returning JSX will now add parens when the JSX breaks
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
const Component = props =>
|
||||
<div>
|
||||
Hello {props.name}!
|
||||
</div>;
|
||||
|
||||
// After
|
||||
const Component = props => (
|
||||
<div>
|
||||
Hello {props.name}!
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
* Conditional expressions within (or containing) JSX are formatted in a different way using parenthesis
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<div>
|
||||
{props.isVisible
|
||||
? <BaseForm
|
||||
url="/auth/google"
|
||||
method="GET"
|
||||
/>
|
||||
: <Placeholder />}
|
||||
</div>;
|
||||
|
||||
// After
|
||||
<div>
|
||||
{props.isVisible ? (
|
||||
<BaseForm
|
||||
url="/auth/google"
|
||||
method="GET"
|
||||
/>
|
||||
) : (
|
||||
<Placeholder />
|
||||
)}
|
||||
</div>
|
||||
```
|
||||
|
||||
* JSX in logical expressions (|| or &&) is always wrapped in parens when the JSX breaks
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<div>
|
||||
{props.isVisible &&
|
||||
<BaseForm
|
||||
url="/auth/google"
|
||||
method="GET"
|
||||
/>}
|
||||
</div>;
|
||||
|
||||
// After
|
||||
<div>
|
||||
{props.isVisible && (
|
||||
<BaseForm
|
||||
url="/auth/google"
|
||||
method="GET"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
```
|
||||
|
||||
Hopefully this is going to be more in line with how the majority of the community is writing JSX and we can have prettier be used in more place ;)
|
||||
|
||||
#### Inline single expressions in JSX ([#2442](https://github.com/prettier/prettier/pull/2442)) by [@karl](https://github.com/karl)
|
||||
|
||||
With JSX, we started by respecting a lot of line breaks that were in the original source. This had the advantage of doing fewer changes to your codebase but chipped away the value of a consistent pretty printer as the same semantic code could be written in two ways.
|
||||
|
||||
During each new release we've tightened this and made decisions around how to always print a piece of code. The latest of those is what happens if there's a single child in a JSX object, we're now always going to inline it.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
return (
|
||||
<div>
|
||||
{this.props.test}
|
||||
</div>
|
||||
);
|
||||
return <div>{this.props.test}</div>;
|
||||
|
||||
// After
|
||||
return <div>{this.props.test}</div>;
|
||||
return <div>{this.props.test}</div>;
|
||||
```
|
||||
|
||||
#### Ensure there is a line break after leading JSX white space ([#2348](https://github.com/prettier/prettier/pull/2348)) by [@karl](https://github.com/karl)
|
||||
|
||||
Leading JSX empty spaces are now on their own line. It looked weird to have them before a tag as it "indented" it differently compared to the rest.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<span className="d1">
|
||||
{' '}<a
|
||||
href="https://github.schibsted.io/finn/troika"
|
||||
className="link"
|
||||
/>
|
||||
</span>
|
||||
|
||||
// After
|
||||
<span className="d1">
|
||||
{' '}
|
||||
<a
|
||||
href="https://github.schibsted.io/finn/troika"
|
||||
className="link"
|
||||
/>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Other Changes
|
||||
|
||||
### JSON
|
||||
|
||||
#### Use babylon.parseExpression for JSON ([#2476](https://github.com/prettier/prettier/pull/2476)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
We used to use a strict JSON parser that would throw if there was a comment or a trailing comma. This was inconvenient as many JSON files in practice are parsed using JavaScript or json5 that are not as strict. Now, we have relaxed this and are using the JavaScript parser to parse and print JSON. This means that comments will be maintained if there were some.
|
||||
|
||||
Note that this is purely additive, if your original file was JSON compliant, it will keep printing a valid JSON.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
Syntax error
|
||||
|
||||
// After
|
||||
{ /* some comment */ "a": 1 }
|
||||
```
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### Print 3 or more chained calls on multiple lines ([#2673](https://github.com/prettier/prettier/pull/2673)) by [@azz](https://github.com/azz)
|
||||
|
||||
This was a longstanding issue with the way we print long member chains. Prettier would try and cram all but the final callback onto one line, which reduced the readability. The solution we landed on was to always break over multiple lines if there are three or more function calls in a method chain.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
Promise.resolve(0).catch(function(err) {}).then(function(res) {
|
||||
//
|
||||
});
|
||||
|
||||
// After
|
||||
Promise.resolve(0)
|
||||
.catch(function(err) {})
|
||||
.then(function(res) {
|
||||
//
|
||||
});
|
||||
```
|
||||
|
||||
#### Add more supervisory parens ([#2423](https://github.com/prettier/prettier/pull/2423)) by [@azz](https://github.com/azz)
|
||||
|
||||
Parenthesis are a hot topic because they are not part of the AST, so prettier ignores all the ones you are putting and re-creating them from scratch. We went through all the things that people reported and came up with a few edge cases that were very confusing when comparisons were chained and `%` was mixed with `*` or `/`.
|
||||
|
||||
One thing that we are not changing is the fact that we remove extra parenthesis around combinations of basic arithmetic operators: `+-*/`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
x !== y === z;
|
||||
x * y % z;
|
||||
|
||||
// After
|
||||
(x !== y) === z;
|
||||
(x * y) % z;
|
||||
```
|
||||
|
||||
#### Implement prettier-ignore inside JSX ([#2487](https://github.com/prettier/prettier/pull/2487)) by [@azz](https://github.com/azz)
|
||||
|
||||
It's useful to be able to ignore pieces of JSX, it's now possible to add a comment inside of a JSX expression to ignore the formatting of the next element.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<Component>
|
||||
{/*prettier-ignore*/}
|
||||
<span ugly format="" />
|
||||
</Component>
|
||||
|
||||
// Before
|
||||
<Component>
|
||||
{/*prettier-ignore*/}
|
||||
<span ugly format='' />
|
||||
</Component>
|
||||
```
|
||||
|
||||
#### Do not swallow prettier-ignore comments ([#2664](https://github.com/prettier/prettier/pull/2664))
|
||||
|
||||
In order to support some edge cases, in the internals, we have the ability to avoid printing comments in a generic way and print them in the call site instead. It turns out that when we used `prettier-ignore`, we didn't print the comments at all! This is now fixed.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
push(
|
||||
<td> :)
|
||||
</td>,
|
||||
);
|
||||
|
||||
// After
|
||||
push(
|
||||
// prettier-ignore
|
||||
<td> :)
|
||||
</td>,
|
||||
);
|
||||
```
|
||||
|
||||
#### Fix indentation of a do-while condition ([#2359](https://github.com/prettier/prettier/pull/2359)) by [@jsnajdr](https://github.com/jsnajdr)
|
||||
|
||||
It took 6 months for someone to report that do-while were broken when the while condition is multi-line, it confirms my hunch that this construct is not widely used in practice.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
do {} while (
|
||||
someVeryLongFunc(
|
||||
someVeryLongArgA,
|
||||
someVeryLongArgB,
|
||||
someVeryLongArgC
|
||||
)
|
||||
);
|
||||
|
||||
// After
|
||||
do {} while (
|
||||
someVeryLongFunc(
|
||||
someVeryLongArgA,
|
||||
someVeryLongArgB,
|
||||
someVeryLongArgC
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
#### Break sequence expressions ([#2388](https://github.com/prettier/prettier/pull/2388)) by [@bakkot](https://github.com/bakkot)
|
||||
|
||||
Another underused feature of JavaScript is sequence expressions. We used to do a bad job at printing them when they would go multi-line, this has been corrected :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
(a = b ? c : "lllllllllllllllllllllll"), (a = b
|
||||
? c
|
||||
: "lllllllllllllllllllllll"), (a = b ? c : "lllllllllllllllllllllll"), (a = b
|
||||
? c
|
||||
: "lllllllllllllllllllllll"), (a = b ? c : "lllllllllllllllllllllll");
|
||||
|
||||
// After
|
||||
(a = b ? c : 'lllllllllllllllllllllll'),
|
||||
(a = b ? c : 'lllllllllllllllllllllll'),
|
||||
(a = b ? c : 'lllllllllllllllllllllll'),
|
||||
(a = b ? c : 'lllllllllllllllllllllll'),
|
||||
(a = b ? c : 'lllllllllllllllllllllll')
|
||||
```
|
||||
|
||||
#### Trim trailing whitespace from comments ([#2494](https://github.com/prettier/prettier/pull/2494)) by [@azz](https://github.com/azz)
|
||||
|
||||
We took the stance with prettier to remove all the trailing whitespaces. We used to not touch comments because it's user generated, but that doesn't mean that they should have whitespace :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
// There is some space here ->______________
|
||||
|
||||
// After
|
||||
// There is some space here ->
|
||||
```
|
||||
|
||||
#### Fix interleaved comments in class decorators ([#2660](https://github.com/prettier/prettier/pull/2660), [#2661](https://github.com/prettier/prettier/pull/2661))
|
||||
|
||||
Our handling for comments inside of the class declaration was very naive, we would just move all the comments to the top. We now are more precise and respect the comments that are interleaved inside of decorators and around `extends`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
// A
|
||||
// B
|
||||
// C
|
||||
@Foo()
|
||||
@Bar()
|
||||
class Bar {}
|
||||
|
||||
// After
|
||||
// A
|
||||
@Foo()
|
||||
// B
|
||||
@Bar()
|
||||
// C
|
||||
class Bar {}
|
||||
```
|
||||
|
||||
#### Improve bind expression formatting ([#2493](https://github.com/prettier/prettier/pull/2493)) by [@azz](https://github.com/azz)
|
||||
|
||||
Bind expressions are being discussed at TC39 and we figured we could print it with prettier. We used to be very naive about it and just chain it. Now, we use the same logic as we have for method chaining with the `.` operator for it. We also fixed some edge cases where it would output invalid code.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
observable::filter(data => data.someTest)::throttle(() =>
|
||||
interval(10)::take(1)::takeUntil(observable::filter(data => someOtherTest))
|
||||
)::map(someFunction);
|
||||
|
||||
// After
|
||||
observable
|
||||
::filter(data => data.someTest)
|
||||
::throttle(() =>
|
||||
interval(10)::take(1)::takeUntil(observable::filter(data => someOtherTest))
|
||||
)
|
||||
::map(someFunction);
|
||||
```
|
||||
|
||||
#### Add support for printing optional catch binding ([#2570](https://github.com/prettier/prettier/pull/2570)) by [@existentialism](https://github.com/existentialism)
|
||||
|
||||
It's being discussed at TC39 to be able to make the argument of a `catch(e)` optional. Let's make sure we can support it in prettier if people use it.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
Syntax error
|
||||
|
||||
// After
|
||||
try {} catch {}
|
||||
```
|
||||
|
||||
#### Add support for printing optional chaining syntax ([#2572](https://github.com/prettier/prettier/pull/2572)) by [@azz](https://github.com/azz)
|
||||
|
||||
Another new proposal being discussed at TC39 is an optional chaining syntax. This is currently a [stage 1 proposal](https://github.com/tc39/proposal-optional-chaining), so the syntax may change at any time.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
obj?.prop // optional static property access
|
||||
obj?.[expr] // optional dynamic property access
|
||||
func?.(...args) // optional function or method call
|
||||
```
|
||||
|
||||
#### Handle Closure Compiler type cast syntax correctly ([#2484](https://github.com/prettier/prettier/pull/2484)) by [@yangsu](https://github.com/yangsu)
|
||||
|
||||
Comments are tricky to get right, but especially when they have meaning based on where they are positioned. We're now special casing the way we deal with comments used as type cast for Closure Compiler such that they keep having the same semantics.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
let assignment /** [@type](https://github.com/type) {string} */ = getValue();
|
||||
|
||||
// After
|
||||
let assignment = /** [@type](https://github.com/type) {string} */ (getValue());
|
||||
```
|
||||
|
||||
#### Inline first computed property lookup in member chain ([#2670](https://github.com/prettier/prettier/pull/2670)) by [@azz](https://github.com/azz)
|
||||
|
||||
It looks kind of odd to have a computed property lookup on the next line, so we added a special case to inline it.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
data
|
||||
[key]('foo')
|
||||
.then(() => console.log('bar'))
|
||||
.catch(() => console.log('baz'));
|
||||
|
||||
// After
|
||||
data[key]('foo')
|
||||
.then(() => console.log('bar'))
|
||||
.catch(() => console.log('baz'));
|
||||
```
|
||||
|
||||
### Flow
|
||||
|
||||
#### Support opaque types and export star ([#2543](https://github.com/prettier/prettier/pull/2543), [#2542](https://github.com/prettier/prettier/pull/2542)) by [@existentialism](https://github.com/existentialism)
|
||||
|
||||
The flow team introduced two very exciting features under a new syntax. We now support them in prettier. I've personally been waiting for [opaque types](https://medium.com/flow-type/hiding-implementation-details-with-flows-new-opaque-type-aliases-feature-40e188c2a3f9) for a veerrryyyy long time!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
Syntax error
|
||||
|
||||
// After
|
||||
opaque type ID = string;
|
||||
export type * from "module";
|
||||
```
|
||||
|
||||
#### Strip away unnecessary quotes in keys in type objects and interfaces ([#2643](https://github.com/prettier/prettier/pull/2643)) by [@jackyho112](https://github.com/jackyho112)
|
||||
|
||||
We've been doing this on JavaScript objects since the early days of prettier but forgot to apply the same thing to Flow and TypeScript types.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type A = {
|
||||
"string": "A";
|
||||
}
|
||||
|
||||
// After
|
||||
type A = {
|
||||
string: "A";
|
||||
}
|
||||
```
|
||||
|
||||
#### Print TypeParameter even when unary function type ([#2406](https://github.com/prettier/prettier/pull/2406)) by [@danwang](https://github.com/danwang)
|
||||
|
||||
Oopsy, we were dropping the generic in this very specific case.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
type myFunction = A => B;
|
||||
|
||||
// After
|
||||
type myFunction = <T>(A) => B;
|
||||
```
|
||||
|
||||
#### Keep parens around FunctionTypeAnnotation inside ArrayTypeAnnotation ([#2561](https://github.com/prettier/prettier/pull/2561)) by [@azz](https://github.com/azz)
|
||||
|
||||
Parenthesis... someday we'll get all of them fixed :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
const actionArray: () => void[] = [];
|
||||
|
||||
// After
|
||||
const actionArray: (() => void)[] = [];
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
#### Support TypeScript 2.5 RC ([#2672](https://github.com/prettier/prettier/pull/2672)) by [@azz](https://github.com/azz)
|
||||
|
||||
[TypeScript 2.5 RC](https://blogs.msdn.microsoft.com/typescript/2017/08/17/announcing-typescript-2-5-rc/) was recently announced, allowing you to use the upcoming "optional catch binding" syntax in TypeScript, too. :tada:
|
||||
|
||||
#### Don't add namespace keyword to global declaration ([#2329](https://github.com/prettier/prettier/pull/2329)) by [@azz](https://github.com/azz)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
namespace global {
|
||||
export namespace JSX { }
|
||||
}
|
||||
|
||||
// After
|
||||
global {
|
||||
export namespace JSX {}
|
||||
}
|
||||
```
|
||||
|
||||
#### Fix <this.Component /> ([#2472](https://github.com/prettier/prettier/pull/2472)) by [@backus](https://github.com/backus)
|
||||
|
||||
Thanks to the untyped and permissive nature of JavaScript, we've been able to concat undefined to a string and get some interesting code as a result. Now fixed for this case :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<undefined.Author />
|
||||
|
||||
// After
|
||||
<this.Author />
|
||||
```
|
||||
|
||||
#### Allow type assertions to hug ([#2439](https://github.com/prettier/prettier/pull/2439)) by [@azz](https://github.com/azz)
|
||||
|
||||
We want to make sure that all the special cases that we added for JavaScript and Flow also work for TypeScript constructs. In this case, objects should also hug if they are wrapped in a `as` operator.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const state = JSON.stringify(
|
||||
{
|
||||
next: window.location.href,
|
||||
nonce,
|
||||
} as State
|
||||
);
|
||||
|
||||
// After
|
||||
const state = JSON.stringify({
|
||||
next: window.location.href,
|
||||
nonce,
|
||||
} as State);
|
||||
```
|
||||
|
||||
#### Remove parens for type assertions in binary expressions ([#2419](https://github.com/prettier/prettier/pull/2419)) by [@azz](https://github.com/azz)
|
||||
|
||||
Most of the time we add parenthesis for correctness but in this case, we added them for nothing, so we can just get rid of them and have a cleaner code :)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
(<x>a) || {};
|
||||
|
||||
// After
|
||||
<x>a || {};
|
||||
```
|
||||
|
||||
#### Print parens around type assertion as LHS in assignment ([#2525](https://github.com/prettier/prettier/pull/2525)) by [@azz](https://github.com/azz)
|
||||
|
||||
Yet another case of missing parenthesis. Thankfully we're getting very few of them nowadays and they are for extremely rare edge cases.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
foo.bar as Baz = [bar];
|
||||
|
||||
// After
|
||||
(foo.bar as Baz) = [bar];
|
||||
```
|
||||
|
||||
#### Print declare for TSInterfaceDeclaration ([#2574](https://github.com/prettier/prettier/pull/2574)) by [@existentialism](https://github.com/existentialism)
|
||||
|
||||
The `declare` keyword doesn't do anything for `interface` so we never put it there. However, it felt weird if you were in a declaration file and seeing everything have `declare` before it except for interfaces. So now we reprint `declare` if it was there in the first place.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
interface Dictionary<T> {
|
||||
[index: string]: T
|
||||
}
|
||||
|
||||
// After
|
||||
declare interface Dictionary<T> {
|
||||
[index: string]: T
|
||||
}
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
#### Normalize quotes in CSS ([#2624](https://github.com/prettier/prettier/pull/2624)) by [@lydell](https://github.com/lydell)
|
||||
|
||||
In order to get a first version of CSS to ship, we kept string quotes as is. We are now respecting the `singleQuote` option of prettier. The difficulty here was to make sure that we output correct code for all the crazy escapes, unicode characters, emoji, special rules like charset which only work with double quotes...
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// Before
|
||||
div {
|
||||
content: "abc";
|
||||
}
|
||||
|
||||
// After
|
||||
div {
|
||||
content: 'abc';
|
||||
}
|
||||
```
|
||||
|
||||
#### Normalize numbers in CSS ([#2627](https://github.com/prettier/prettier/pull/2627)) by [@lydell](https://github.com/lydell)
|
||||
|
||||
Another place where we can reuse the logic we've done for JavaScript to improve CSS printing.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// Before
|
||||
foo {
|
||||
border: 1px solid rgba(0., 0.0, .0, .3);
|
||||
}
|
||||
|
||||
// After
|
||||
foo {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
```
|
||||
|
||||
#### Quote unquoted CSS attribute values in selectors ([#2644](https://github.com/prettier/prettier/pull/2644)) by [@lydell](https://github.com/lydell)
|
||||
|
||||
I can never quite remember the rules behind quotes around attributes so we're now always putting quotes there.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
a[id=test] {}
|
||||
|
||||
// After
|
||||
a[id="test"] {}
|
||||
```
|
||||
|
||||
#### Add support for css keyword ([#2337](https://github.com/prettier/prettier/pull/2337)) by [@zanza00](https://github.com/zanza00)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const header = css`.top-bar {background: black;margin: 0;position: fixed;}`
|
||||
|
||||
// After
|
||||
const header = css`
|
||||
.top-bar {
|
||||
background: black;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
}
|
||||
`;
|
||||
```
|
||||
|
||||
#### Support styled-components with existing component ([#2552](https://github.com/prettier/prettier/pull/2552), [#2619](https://github.com/prettier/prettier/pull/2619)) by [@azz](https://github.com/azz)
|
||||
|
||||
styled-components has a lot of different variants for tagging template literals as CSS. It's not ideal that we've got to encode all those ways inside of prettier but since we started, might as well do it for real.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
styled(ExistingComponent)`
|
||||
css: property;
|
||||
`;
|
||||
|
||||
styled.button.attr({})`
|
||||
border: rebeccapurple;
|
||||
`;
|
||||
```
|
||||
|
||||
#### Trim whitespace in descendant combinator ([#2411](https://github.com/prettier/prettier/pull/2411)) by [@azz](https://github.com/azz)
|
||||
|
||||
The CSS parsers we use do not give us a 100% semantic tree: in many occasions they bail and just give us what is being entered. It's up to us to make sure we clean this up while maintaining correctness. In this case, we just printed spaces between selectors as is but we know it's correct to always replace it by a single space.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```cs
|
||||
// Before
|
||||
.hello
|
||||
|
||||
.how-you-doin {
|
||||
height: 42;
|
||||
}
|
||||
|
||||
// After
|
||||
.hello .how-you-doin {
|
||||
height: 42;
|
||||
}
|
||||
```
|
||||
|
||||
#### Strip BOM before parsing ([#2373](https://github.com/prettier/prettier/pull/2373)) by [@azz](https://github.com/azz)
|
||||
|
||||
I still have nightmares from dealing with [BOM](https://en.wikipedia.org/wiki/Byte_order_mark) in a previous life. Thankfully, in 2017 it's no longer a big issue as most tooling is now aware of it. Thanks [@azz](https://github.com/azz) for fixing an edge cases related to CSS parsing.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// Before
|
||||
[BOM]/* Block comment *
|
||||
html {
|
||||
content: "#{1}";
|
||||
}
|
||||
```
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
// After
|
||||
[BOM]/* Block comment */
|
||||
html {
|
||||
content: "#{1}";
|
||||
}
|
||||
```
|
||||
|
||||
### GraphQL
|
||||
|
||||
#### Add support for range-formatting GraphQL ([#2319](https://github.com/prettier/prettier/pull/2319)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
If you tried to use the range formatting feature in a GraphQL file, it would throw an exception, now it properly worked again and only reformats the piece you selected.
|
||||
|
||||
#### Add `.gql` file extension to be parsed as GraphQL ([#2357](https://github.com/prettier/prettier/pull/2357)) by [@rrdelaney](https://github.com/rrdelaney)
|
||||
|
||||
At Facebook, we use `.graphql` extension but it looks like it's common to have `.gql` as well, doesn't cost a lot to support it in the heuristic that figures out what parser to use.
|
||||
|
||||
### CLI
|
||||
|
||||
#### Support multiple patterns with ignore pattern ([#2356](https://github.com/prettier/prettier/pull/2356)) by [@evilebottnawi](https://github.com/evilebottnawi)
|
||||
|
||||
It was already possible to have multiple glob patterns but they would be additive, with this change, you can add a glob pattern to ignore some files. It should be very handy to ignore folders that are deeply nested.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```sh
|
||||
prettier --write '{**/*,*}.{js,jsx,json}' '!vendor/**'
|
||||
```
|
||||
|
||||
#### Make --list-different to work with --stdin ([#2393](https://github.com/prettier/prettier/pull/2393)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
This is a handy way of knowing if prettier would print a piece of code in a different way. We already had all the concepts in place, we just needed to wire them up correctly.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```shellsession
|
||||
$ echo 'call ( ) ;' | prettier --list-different
|
||||
(stdin)
|
||||
$ echo $?
|
||||
1
|
||||
```
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
---
|
||||
author: @suchipi
|
||||
authorURL: https://twitter.com/suchipi
|
||||
title: "Prettier 1.7: JSX tweaks, Pragma, TypeScript and CSS fixes"
|
||||
---
|
||||
|
||||
This release features some bugfixes and tweaks around JSX, TypeScript, CSS, and JavaScript formatting, as well as a couple new features.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## 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:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
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:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
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](https://github.com/prettier/prettier/issues/2729):
|
||||
|
||||
|
||||
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](https://github.com/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](https://github.com/lydell) [did some work to normalize letter case](https://github.com/prettier/prettier/issues/2653).
|
||||
|
||||
So now, almost everything in CSS will print using `lower case`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
/* 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-ignore -->
|
||||
```js
|
||||
/**
|
||||
* @prettier
|
||||
*/
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
/**
|
||||
* @format
|
||||
*/
|
||||
```
|
||||
|
||||
This was [@ajhyndman](https://github.com/ajhyndman)'s idea and it was implemented by [@wbinnssmith](https://github.com/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:
|
||||
|
||||
```ts
|
||||
Observable.empty<never>();
|
||||
```
|
||||
|
||||
Also, Prettier 1.6.1 was incorrectly removing the `declare` keyword from `enum` declarations in `*.d.ts` files:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// In
|
||||
declare const enum Foo {}
|
||||
|
||||
// Out
|
||||
const enum Foo {}
|
||||
```
|
||||
|
||||
Both of these issues have been fixed. Thanks to [@JamesHenry](https://github.com/JamesHenry) and [@existentialism](https://github.com/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`](https://github.com/davidtheclark/cosmiconfig/pull/78) by [@sudo](https://github.com/sudo)-suhas, [@ikatyang](https://github.com/ikatyang) was able to add support for this to the prettier API.
|
||||
|
||||
### PRs merged in this release
|
||||
|
||||
* [**Update README.md**](https://github.com/prettier/prettier/pull/2690) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**Fix config file finding when using stdin**](https://github.com/prettier/prettier/pull/2692) by [@lydell](https://github.com/lydell)
|
||||
* [**docs(readme): add and sort cli options**](https://github.com/prettier/prettier/pull/2700) by [@levithomason](https://github.com/levithomason)
|
||||
* [**Add Transloadit as a user**](https://github.com/prettier/prettier/pull/2706) by [@kvz](https://github.com/kvz)
|
||||
* [**Ensure parens around LogicalExpression inside ExperimentalSpreadProperty**](https://github.com/prettier/prettier/pull/2710) by [@existentialism](https://github.com/existentialism)
|
||||
* [**Fix printing declare modifier for TS enum**](https://github.com/prettier/prettier/pull/2711) by [@existentialism](https://github.com/existentialism)
|
||||
* [**Handle +/- before numbers in CSS**](https://github.com/prettier/prettier/pull/2713) by [@xtian](https://github.com/xtian)
|
||||
* [**Add Tradeshift as a user**](https://github.com/prettier/prettier/pull/2719) by [@sampi](https://github.com/sampi)
|
||||
* [**feat(resolve-config): add `.sync()` method**](https://github.com/prettier/prettier/pull/2722) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**refactor(bin): use `resolveConfigFile.sync()`**](https://github.com/prettier/prettier/pull/2728) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**refactor(cli): separate files and make it pure as possible**](https://github.com/prettier/prettier/pull/2730) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**Fix cosmiconfig dependency branch**](https://github.com/prettier/prettier/pull/2731) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
* [**Upgrade chalk to v2.1.0**](https://github.com/prettier/prettier/pull/2732) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
* [**Add CLI option '--config-precedence'**](https://github.com/prettier/prettier/pull/2733) by [@mitermayer](https://github.com/mitermayer)
|
||||
* [**Normalize CSS case**](https://github.com/prettier/prettier/pull/2736) by [@lydell](https://github.com/lydell)
|
||||
* [**Make run-external-typescript-tests.js cross-platform**](https://github.com/prettier/prettier/pull/2737) by [@lydell](https://github.com/lydell)
|
||||
* [**test(integration): add more tests**](https://github.com/prettier/prettier/pull/2738) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**chore(deps): remove devDependency `cross-spawn`**](https://github.com/prettier/prettier/pull/2739) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**Ignore some things in coverage**](https://github.com/prettier/prettier/pull/2741) by [@lydell](https://github.com/lydell)
|
||||
* [**Generalize run-external-typescript-tests.js**](https://github.com/prettier/prettier/pull/2742) by [@lydell](https://github.com/lydell)
|
||||
* [**Improve lint-staged setup example by adding more filetypes**](https://github.com/prettier/prettier/pull/2746) by [@MoOx](https://github.com/MoOx)
|
||||
* [**fixes dynamic imports**](https://github.com/prettier/prettier/pull/2748) by [@rkurbatov](https://github.com/rkurbatov)
|
||||
* [**Refactor error handling**](https://github.com/prettier/prettier/pull/2750) by [@azz](https://github.com/azz)
|
||||
* [**chore(github): add issue template**](https://github.com/prettier/prettier/pull/2755) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**Fix: TypeScript never keyword (fixes [#2718](https://github.com/prettier/prettier/pull/2718))**](https://github.com/prettier/prettier/pull/2756) by [@JamesHenry](https://github.com/JamesHenry)
|
||||
* [**Group last argument if it's an empty object with a comment**](https://github.com/prettier/prettier/pull/2758) by [@duailibe](https://github.com/duailibe)
|
||||
* [**Use `files:` over `types:` in pre-commit configuration**](https://github.com/prettier/prettier/pull/2759) by [@asottile](https://github.com/asottile)
|
||||
* [**refactor(runPrettier): reduce duplicate code**](https://github.com/prettier/prettier/pull/2764) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**Change when to print ternaries in JSX mode**](https://github.com/prettier/prettier/pull/2768) by [@duailibe](https://github.com/duailibe)
|
||||
* [**Fix chained logical expressions with objects/array/etc inlined**](https://github.com/prettier/prettier/pull/2770) by [@duailibe](https://github.com/duailibe)
|
||||
* [**Add option to require @prettier or @format pragma**](https://github.com/prettier/prettier/pull/2772) by [@wbinnssmith](https://github.com/wbinnssmith)
|
||||
* [**chore(build): update ISSUE_TEMPLATE.md before publish**](https://github.com/prettier/prettier/pull/2776) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**Fix break on conditional expressions inside return**](https://github.com/prettier/prettier/pull/2779) by [@duailibe](https://github.com/duailibe)
|
||||
* [**Support graphql(schema, `query`)**](https://github.com/prettier/prettier/pull/2781) by [@azz](https://github.com/azz)
|
||||
* [**fix(prettierignore): support absolute filename**](https://github.com/prettier/prettier/pull/2783) by [@ambar](https://github.com/ambar)
|
||||
* [**Keep conditional expressions in one line on method chains**](https://github.com/prettier/prettier/pull/2784) by [@duailibe](https://github.com/duailibe)
|
||||
* [**fix(build): update ISSUE_TEMPLATE using regex `?:` instead of `?!`**](https://github.com/prettier/prettier/pull/2785) by [@ikatyang](https://github.com/ikatyang)
|
||||
* [**Break closing paren of ConditionalExpression in member chains**](https://github.com/prettier/prettier/pull/2786) by [@duailibe](https://github.com/duailibe)
|
||||
* [**fix webstorm integration guide**](https://github.com/prettier/prettier/pull/2796) by [@xsburg](https://github.com/xsburg)
|
||||
|
||||
### Issues resolved in this release
|
||||
|
||||
* [**Document missing CLI options**](https://github.com/prettier/prettier/issues/2698) reported by [@levithomason](https://github.com/levithomason)
|
||||
* [**Formatting of Spread Properties differs between Babylon and TypeScript**](https://github.com/prettier/prettier/issues/2708) reported by [@mariusschulz](https://github.com/mariusschulz)
|
||||
* [**Removal of the `declare` modifier from `enum`**](https://github.com/prettier/prettier/issues/2709) reported by [@mariusschulz](https://github.com/mariusschulz)
|
||||
* [**Decimal formatting doesn't get all decimals in a rule.**](https://github.com/prettier/prettier/issues/2712) reported by [@itsgreggreg](https://github.com/itsgreggreg)
|
||||
* [**Use resolveConfigFile.sync in the CLI**](https://github.com/prettier/prettier/issues/2726) reported by [@azz](https://github.com/azz)
|
||||
* [**CSS: Normalize case (lower vs upper) on stuff**](https://github.com/prettier/prettier/issues/2653) reported by [@lydell](https://github.com/lydell)
|
||||
* [**Dynamic import with webpackChunkName comment fails**](https://github.com/prettier/prettier/issues/1489) reported by [@pbomb](https://github.com/pbomb)
|
||||
* [**Typescript: never as type parameter causes error: unknown type: undefined**](https://github.com/prettier/prettier/issues/2718) reported by [@hccampos](https://github.com/hccampos)
|
||||
* [**commented object values**](https://github.com/prettier/prettier/issues/2617) reported by [@sylvainbaronnet](https://github.com/sylvainbaronnet)
|
||||
* [**Configuring pre-commit for jsx, Typescript, tsx**](https://github.com/prettier/prettier/issues/2745) reported by [@reywright](https://github.com/reywright)
|
||||
* [**JSX ternaries include parens**](https://github.com/prettier/prettier/issues/2729) reported by [@jasonLaster](https://github.com/jasonLaster)
|
||||
* [**Chained Short Circuit Conditionals in JSX**](https://github.com/prettier/prettier/issues/2714) reported by [@brycehill](https://github.com/brycehill)
|
||||
* [**Support @prettier pragma comment**](https://github.com/prettier/prettier/issues/2397) reported by [@ajhyndman](https://github.com/ajhyndman)
|
||||
* [**No indentation after breaking return statement**](https://github.com/prettier/prettier/issues/2777) reported by [@jwbay](https://github.com/jwbay)
|
||||
* [**Support graphql() fn and so make 2nd arg prettier**](https://github.com/prettier/prettier/issues/2780) reported by [@brikou](https://github.com/brikou)
|
||||
* [**prettierignore: cannot use absolute filename**](https://github.com/prettier/prettier/issues/2782) reported by [@ambar](https://github.com/ambar)
|
||||
* [**Weird Javascript format**](https://github.com/prettier/prettier/issues/2775) reported by [@maxime1992](https://github.com/maxime1992)
|
||||
|
||||
---
|
||||
|
||||
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!
|
||||
|
|
@ -0,0 +1,666 @@
|
|||
---
|
||||
author: Lucas Azzola (@azz)
|
||||
authorURL: https://twitter.com/lucasazzola
|
||||
title: "Prettier 1.8: Markdown Support"
|
||||
---
|
||||
|
||||
This release adds Markdown support, a new `--insert-pragma` flag, fixes a number of formatting issues, adds support for some new _experimental_ operators, and improves our editor integration support.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## Highlights
|
||||
|
||||
### Markdown Support
|
||||
|
||||
#### Support markdown ([#2943](https://github.com/prettier/prettier/pull/2943)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
You can now run Prettier on Markdown files! :tada:
|
||||
|
||||
The implementation is highly compliant with the [CommonMark spec](http://commonmark.org/), and backed by the excellent [`remark-parse`](https://github.com/wooorm/remark/tree/master/packages/remark-parse) package.
|
||||
|
||||
**Word Wrap**
|
||||
|
||||
One of Prettier's core features is its ability to wrap code at a specified line length. This applies to Markdown too, which means you can maintain nice and clean 80-character-wide Markdown files without having to re-adjust line breaks manually when you add or delete words.
|
||||
|
||||
Input:
|
||||
|
||||
```
|
||||
Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valourous visitation of a bygone vexation stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition! The only verdict is vengeance; a vendetta held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it's my very good honour to meet you and you may call me V.
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
```
|
||||
Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim
|
||||
and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity,
|
||||
is a vestige of the vox populi, now vacant, vanished. However, this valourous
|
||||
visitation of a bygone vexation stands vivified and has vowed to vanquish these
|
||||
venal and virulent vermin vanguarding vice and vouchsafing the violently vicious
|
||||
and voracious violation of volition! The only verdict is vengeance; a vendetta
|
||||
held as a votive, not in vain, for the value and veracity of such shall one day
|
||||
vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage
|
||||
veers most verbose, so let me simply add that it's my very good honour to meet
|
||||
you and you may call me V.
|
||||
```
|
||||
|
||||
> ~~Note: We're considering adding an option for this, check [#3183](https://github.com/prettier/prettier/pull/3183) for discussion.~~
|
||||
> Update: We've added an option in `1.8.2` called [`--no-prose-wrap`](https://prettier.io/docs/en/options.html#prose-wrap)
|
||||
|
||||
> Note for CJK users: If your markdown renderer does not support CJK line ending, you'll have to use plugin like [markdown-it-perfect-newline-for-cjk](https://www.npmjs.com/package/markdown-it-perfect-newline-for-cjk), [hexo-filter-fix-cjk-spacing](https://www.npmjs.com/package/hexo-filter-fix-cjk-spacing), etc. to remove additional spaces.
|
||||
>
|
||||
> ```
|
||||
> // Source
|
||||
> 一二三
|
||||
> 四五六
|
||||
> 七八九
|
||||
>
|
||||
> // Rendered content with unsupported renderer
|
||||
> 一二三 四五六 七八九
|
||||
>
|
||||
> // Rendered content with supported renderer or via plugin
|
||||
> 一二三四五六七八九
|
||||
> ```
|
||||
|
||||
**Code Formatting**
|
||||
|
||||
Powered by Prettier's generic "multiparser", Prettier will format code blocks in Markdown! We use the language code provided with the code block to determine which language it is, and thus we can format any language that Prettier supports (including Markdown itself, if you're into that).
|
||||
|
||||
Input:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
````md
|
||||
```js
|
||||
reallyUgly (
|
||||
javascript
|
||||
)
|
||||
```
|
||||
|
||||
```css
|
||||
.h1 { color : red }
|
||||
```
|
||||
````
|
||||
|
||||
Output:
|
||||
|
||||
````md
|
||||
```js
|
||||
reallyUgly(javascript);
|
||||
```
|
||||
|
||||
```css
|
||||
.h1 {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
> Note: In some cases you may not want to format your code in Markdown, and just like in other languages, in Markdown you can use an ignore comment before the code block to ignore it from formatting:
|
||||
>
|
||||
> ````md
|
||||
> <!-- prettier-ignore -->
|
||||
> ```js
|
||||
> ugly ( code ) ;
|
||||
> ```
|
||||
> ````
|
||||
|
||||
**Lists**
|
||||
|
||||
When rearranging list items, after running Prettier all the numbers will be fixed!
|
||||
|
||||
|
||||
|
||||
> Note: you can actually opt out of this by using `1.` for all list items if you want to optimize for cleaner diffs.
|
||||
|
||||
**Tables**
|
||||
|
||||
Tables will also automatically be adjusted to fit their contents. This could be completely unmaintainable without an automated tool.
|
||||
|
||||
|
||||
|
||||
**Markdown-in-JS**
|
||||
|
||||
By using either `md` or `markdown` tagged template literals, you can format markdown code inside JavaScript.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
const markdown = md`
|
||||
# heading
|
||||
|
||||
1. list item
|
||||
`;
|
||||
```
|
||||
|
||||
### CLI
|
||||
|
||||
#### Add option to insert `@format` to first docblock if absent ([#2865](https://github.com/prettier/prettier/pull/2865)) by [@samouri](https://github.com/samouri)
|
||||
|
||||
In 1.7, we added an option called `--require-pragma` to require files contain an `/** @format */` pragma to be formatted. In order to add this pragma to a large set of files you can now use [`--insert-pragma`](https://prettier.io/docs/en/cli.html#insert-pragma) flag.
|
||||
|
||||
```
|
||||
prettier --write "folder/**/*.js" --insert-pragma
|
||||
```
|
||||
|
||||
#### Add `--loglevel` option ([#2992](https://github.com/prettier/prettier/pull/2992)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
This [nifty feature](https://prettier.io/docs/en/cli.html#loglevel) allows you to opt in (or out) of Prettier's logging. We've also cleaned up the logging substantially since 1.7.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```bash
|
||||
$ prettier --loglevel=debug blarg
|
||||
$ ./bin/prettier.js --loglevel=debug blarg
|
||||
[debug] normalized argv: {"_":["blarg"],"bracket-spacing":false,"color":true,"debug-check":false,"debug-print-doc":false,"flow-parser":false,"insert-pragma":false,"jsx-bracket-same-line":false,"list-different":false,"require-pragma":false,"semi":false,"single-quote":false,"stdin":false,"use-tabs":false,"version":false,"with-node-modules":false,"write":false,"loglevel":"debug","ignore-path":".prettierignore","config-precedence":"cli-override"}
|
||||
[error] No matching files. Patterns tried: blarg !**/node_modules/** !./node_modules/**
|
||||
|
||||
```
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### Fix indentation for JSDoc comments ([#2470](https://github.com/prettier/prettier/pull/2470)) by [@maxdeviant](https://github.com/maxdeviant)
|
||||
|
||||
This has been a long-time known issue with Prettier. When formatting code that results in a change of indentation level, the JSDoc comments would end up being out of alignment. We're happy to report this is now fixed!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
function theFunction2(action$, store) {
|
||||
/*
|
||||
* comments
|
||||
*/
|
||||
return true;
|
||||
}
|
||||
|
||||
// After
|
||||
function theFunction2(action$, store) {
|
||||
/*
|
||||
* comments
|
||||
*/
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
#### Print pipeline and nullish-coalescing operators ([#3036](https://github.com/prettier/prettier/pull/3036)) by [@azz](https://github.com/azz)
|
||||
|
||||
We've added support for two new proposed operators to Prettier: the _pipeline operator_ and the _nullish coalescing operator_.
|
||||
|
||||
The [pipeline operator](https://github.com/tc39/proposal-pipeline-operator/) is currently a stage one proposal.
|
||||
|
||||
> This proposal introduces a new operator |> similar to F#, OCaml, Elixir, Elm, Julia, Hack, and LiveScript, as well as UNIX pipes. It's a backwards-compatible way of streamlining chained function calls in a readable, functional manner, and provides a practical alternative to extending built-in prototypes.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
let result = exclaim(capitalize(doubleSay("hello")));
|
||||
|
||||
// After
|
||||
let result = "hello"
|
||||
|> doubleSay
|
||||
|> capitalize
|
||||
|> exclaim;
|
||||
```
|
||||
|
||||
The [nullish coalescing operator](https://github.com/tc39-transfer/proposal-nullish-coalescing) is another stage one proposal.
|
||||
|
||||
> When performing optional property access in a nested structure in conjunction with the optional chaining operator, it is often desired to provide a default value if the result of that property access is null or undefined.
|
||||
|
||||
This operator is similar to `||` except it only evaluates the right-hand-side if the left is `undefined` or `null`, not `""`, `0`, `NaN`, etc.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
const foo = object.foo ?? "default";
|
||||
```
|
||||
|
||||
#### Improved template literal expresions line breaks ([#3124](https://github.com/prettier/prettier/pull/3124)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
This was another known issue with Prettier, when printing a template literal string with expressions inside that went over the print width, it would wrap the code in weird places inside the expressions. Now, if Prettier needs to insert a line break, it should happen right between `${` and `}`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
const description = `The value of the ${cssName} css of the ${this
|
||||
._name} element`;
|
||||
|
||||
const foo = `mdl-textfield mdl-js-textfield ${className} ${content.length > 0
|
||||
? "is-dirty"
|
||||
: ""} combo-box__input`;
|
||||
|
||||
// After
|
||||
const description = `The value of the \${cssName} css of the \${
|
||||
this._name
|
||||
} element`;
|
||||
|
||||
const foo = `mdl-textfield mdl-js-textfield ${className} ${
|
||||
content.length > 0 ? 'is-dirty' : ''
|
||||
} combo-box__input`
|
||||
```
|
||||
|
||||
### JSX
|
||||
|
||||
#### Don't inline trailing `}` for arrow functions attributes ([#3110](https://github.com/prettier/prettier/pull/3110)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
In order to align closer to the [Airbnb style guide](https://github.com/airbnb/javascript/), and since it was never intentionally printed this way, we've moved the `}` from to the next line in JSX. This is more diff friendly, and makes it easier to move code around by shifting lines in your editor.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<BookingIntroPanel
|
||||
logClick={data =>
|
||||
doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)}
|
||||
/>;
|
||||
|
||||
// After
|
||||
<BookingIntroPanel
|
||||
logClick={data =>
|
||||
doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
|
||||
}
|
||||
/>;
|
||||
```
|
||||
|
||||
## Other Changes
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### Make the factory detection handle multiple elements ([#3112](https://github.com/prettier/prettier/pull/3112)) by [@vjeux](https://github.com/vjeux)
|
||||
|
||||
There was a bug in the heuristic that Prettier uses to determine whether an expression is a factory or not. It now works correctly with longer member expressions.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
window.FooClient
|
||||
.setVars({
|
||||
locale: getFooLocale({ page }),
|
||||
authorizationToken: data.token
|
||||
})
|
||||
.initVerify("foo_container");
|
||||
|
||||
// After
|
||||
window.FooClient.setVars({
|
||||
locale: getFooLocale({ page }),
|
||||
authorizationToken: data.token
|
||||
}).initVerify("foo_container");
|
||||
```
|
||||
|
||||
#### Handle comments between function name and open paren ([#2979](https://github.com/prettier/prettier/pull/2979)) by [@azz](https://github.com/azz)
|
||||
|
||||
Printing comments in the right place is an endless challenge 😉. This fix ensures that comments next to function names are re-printed correctly.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
function f(/* comment*/ promise) {}
|
||||
|
||||
// After
|
||||
function f /* comment*/(promise) {}
|
||||
```
|
||||
|
||||
#### Support sequential CallExpressions in member chains ([#2990](https://github.com/prettier/prettier/pull/2990)) by [@chrisvoll](https://github.com/chrisvoll)
|
||||
|
||||
Member chains are one of the most complex parts of Prettier. This PR fixes an issue where repeated calls lead to the next method not being pushed to the next line.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
wrapper
|
||||
.find("SomewhatLongNodeName")
|
||||
.prop("longPropFunctionName")().then(function() {
|
||||
doSomething();
|
||||
});
|
||||
|
||||
// After
|
||||
wrapper
|
||||
.find("SomewhatLongNodeName")
|
||||
.prop("longPropFunctionName")()
|
||||
.then(function() {
|
||||
doSomething();
|
||||
});
|
||||
```
|
||||
|
||||
#### Account for empty lines in long member call chain ([#3035](https://github.com/prettier/prettier/pull/3035)) by [@jackyho112](https://github.com/jackyho112)
|
||||
|
||||
Previously, Prettier would delete all newlines within a member chain. Now we keep up to one if it's in the source. This is nice for fluent APIs that you want to break up over multiple lines.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
angular
|
||||
.module("AngularAppModule")
|
||||
|
||||
// Constants.
|
||||
.constant("API_URL", "http://localhost:8080/api")
|
||||
|
||||
// App configuration.
|
||||
.config(appConfig)
|
||||
.run(appRun);
|
||||
```
|
||||
|
||||
#### Fix issue where first argument is left behind when line breaks ([#3079](https://github.com/prettier/prettier/pull/3079)) by [@mutdmour](https://github.com/mutdmour)
|
||||
|
||||
This addresses an issue where due to our special object inline behaviour, the indentation missing from the function call.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
db.collection("indexOptionDefault").createIndex({ a: 1 },
|
||||
{
|
||||
indexOptionDefaults: true
|
||||
},
|
||||
function(err) {
|
||||
// code
|
||||
});
|
||||
|
||||
// After
|
||||
db.collection("indexOptionDefault").createIndex(
|
||||
{ a: 1 },
|
||||
{
|
||||
indexOptionDefaults: true
|
||||
},
|
||||
function(err) {
|
||||
// code
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
#### Break parens for binaries in member expression ([#2958](https://github.com/prettier/prettier/pull/2958)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
Similarly, there was another edge case where indentation was missing from logical expressions. This is fixed, too.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
const someLongVariable = (idx(
|
||||
this.props,
|
||||
props => props.someLongPropertyName
|
||||
) || []
|
||||
).map(edge => edge.node);
|
||||
|
||||
// After
|
||||
const someLongVariable = (
|
||||
idx(this.props, props => props.someLongPropertyName) || []
|
||||
).map(edge => edge.node);
|
||||
```
|
||||
|
||||
#### Prevent breaking MemberExpression inside NewExpression ([#3075](https://github.com/prettier/prettier/pull/3075)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
There are so many ways to break a line. Some of them look much worse than others. Breaking between in this case looked really weird, so it has been fixed!
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
function functionName() {
|
||||
if (true) {
|
||||
this._aVeryLongVariableNameToForceLineBreak = new this
|
||||
.Promise((resolve, reject) => {
|
||||
// do something
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// After
|
||||
function functionName() {
|
||||
if (true) {
|
||||
this._aVeryLongVariableNameToForceLineBreak = new this.Promise(
|
||||
(resolve, reject) => {
|
||||
// do something
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Fix array acessors in method chains ([#3137](https://github.com/prettier/prettier/pull/3137)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
In a method chain we split lines by grouping elements together and accessing an array should be printed in the end of a group instead of the beginning.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
find('.org-lclp-edit-copy-url-banner__link')
|
||||
[0].getAttribute('href')
|
||||
.indexOf(this.landingPageLink)
|
||||
|
||||
// After
|
||||
find('.org-lclp-edit-copy-url-banner__link')[0]
|
||||
.getAttribute('href')
|
||||
.indexOf(this.landingPageLink)
|
||||
```
|
||||
|
||||
### Flow and TypeScript
|
||||
|
||||
#### Fix indentation of intersection object types ([#3074](https://github.com/prettier/prettier/pull/3074)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
This was a minor alignment bug in intersection types, and has now been fixed.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
type intersectionTest = {
|
||||
propA: X
|
||||
} & {
|
||||
propB: X
|
||||
} & {
|
||||
propC: X
|
||||
} & {
|
||||
propD: X
|
||||
};
|
||||
|
||||
// After
|
||||
type Props = {
|
||||
propA: X
|
||||
} & {
|
||||
propB: X
|
||||
} & {
|
||||
propC: X
|
||||
} & {
|
||||
propD: X
|
||||
};
|
||||
```
|
||||
|
||||
#### Keep parens around TSAsExpression in ConditionalExpression ([#3053](https://github.com/prettier/prettier/pull/3053)) by [@azz](https://github.com/azz)
|
||||
|
||||
We missed a case where we need to keep the parenthesis with TypeScript's `as` assertions. This is now fixed.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Before
|
||||
aValue as boolean ? 0 : -1;
|
||||
|
||||
// After
|
||||
(aValue as boolean) ? 0 : -1;
|
||||
```
|
||||
|
||||
### JSX
|
||||
|
||||
#### Collapse multiple JSX whitespaces ([#2973](https://github.com/prettier/prettier/pull/2973)) by [@karl](https://github.com/karl)
|
||||
|
||||
This fixes up the issue where JSX formatting occasionally needed to be run twice to become stable. This occurred when you had multiple JSX whitespace elements or JSX whitespace followed by a space.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Before
|
||||
<div>
|
||||
{" "} <Badge src={notificationIconPng} />
|
||||
</div>;
|
||||
|
||||
// After
|
||||
<div>
|
||||
{" "}
|
||||
<Badge src={notificationIconPng} />
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Don't print JSX bracket on same line when it has trailing comments ([#3088](https://github.com/prettier/prettier/pull/3088)) by [@azz](https://github.com/azz)
|
||||
|
||||
This was an issue with the `--jsx-bracket-same-line` option. Turns out you can't _always_ put the bracket on the same line...
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
<div
|
||||
// comment
|
||||
>
|
||||
{foo}
|
||||
</div>
|
||||
|
||||
// Before
|
||||
<div>
|
||||
// comment
|
||||
{foo}
|
||||
</div>;
|
||||
|
||||
// After
|
||||
<div
|
||||
// comment
|
||||
>
|
||||
{foo}
|
||||
</div>;
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
#### Preserve line breaks in grid declarations ([#3133](https://github.com/prettier/prettier/pull/3133)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
Prettier will now preserve line breaks included in the source code when formatting the `grid` and `grid-template-*` rules, since those are important to keep in separate lines, but still applies the formatting like other rules (e.g., numbers and quotes).
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```css
|
||||
/* Original Input */
|
||||
div {
|
||||
grid:
|
||||
[wide-start] 'header header header' 200.000px
|
||||
[wide-end] "footer footer footer" .50fr
|
||||
/ auto 50.000px auto;
|
||||
}
|
||||
|
||||
/* Before */
|
||||
div {
|
||||
grid: [wide-start] "header header header" 200px [wide-end]
|
||||
"footer footer footer" 0.5fr / auto 50px auto;
|
||||
}
|
||||
|
||||
/* After */
|
||||
div {
|
||||
grid:
|
||||
[wide-start] "header header header" 200px
|
||||
[wide-end] "footer footer footer" 0.5fr
|
||||
/ auto 50px auto;
|
||||
}
|
||||
```
|
||||
|
||||
### SCSS
|
||||
|
||||
#### Format SCSS maps like CSS rules ([#3070](https://github.com/prettier/prettier/pull/3070)) by [@asmockler](https://github.com/asmockler)
|
||||
|
||||
Turns out SCSS maps are much prettier when printed over multiple lines.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```scss
|
||||
// Before
|
||||
$map: (color: [#111111](https://github.com/prettier/prettier/pull/111111), text-shadow: 1px 1px 0 salmon)
|
||||
|
||||
// After
|
||||
$map: (
|
||||
color: [#111111](https://github.com/prettier/prettier/pull/111111),
|
||||
text-shadow: 1px 1px 0 salmon
|
||||
);
|
||||
```
|
||||
|
||||
### CSS-in-JS
|
||||
|
||||
#### Fix formatting styled(Foo).attrs(...)`` ([#3073](https://github.com/prettier/prettier/pull/3073)) by [@existentialism](https://github.com/existentialism)
|
||||
|
||||
Prettier will now format the CSS in styled-components code that looks like this:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
styled(Component).attrs({})`
|
||||
color: red;
|
||||
`;
|
||||
```
|
||||
|
||||
### GraphQL
|
||||
|
||||
#### Prevent formatting GraphQL template literals with expressions ([#2975](https://github.com/prettier/prettier/pull/2975)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
Prettier doesn't support formatting JavaScript expressions in GraphQL. See [#2640](https://github.com/prettier/prettier/pull/2640) for tracking. There was a bug where formatting an expression lead to invalid code, so we've completely disabled formatting GraphQL when it contains JavaScript expressions until we fully support it.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
(invalid code)
|
||||
|
||||
// After
|
||||
graphql(schema, `{ query test { id }} ${fragment}`)
|
||||
```
|
||||
|
||||
### CLI
|
||||
|
||||
#### Don't use ANSI codes if stdout isn't a TTY ([#2903](https://github.com/prettier/prettier/pull/2903)) by [@Narigo](https://github.com/Narigo)
|
||||
|
||||
Previously, piping the output of `--list-different` to other tools was troublesome due to the ANSI color codes we use to show whether a file was modified or not. This PR disables the use of color when Prettier is piped to a different process.
|
||||
|
||||
### Configuration
|
||||
|
||||
#### Use relative paths with CLI ([#2969](https://github.com/prettier/prettier/pull/2969)) by [@ahmedelgabri](https://github.com/ahmedelgabri)
|
||||
|
||||
This fixes a bug where passing a path starting with `./` to the CLI wouldn't match patterns used in `.prettierignore`.
|
||||
|
||||
```
|
||||
## .prettierignore
|
||||
path/to/*.js
|
||||
```
|
||||
|
||||
After this fix, no files will be written to when executing:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```bash
|
||||
$ prettier --write ./path/to/*.js
|
||||
```
|
||||
|
||||
#### Resolve file paths relative to config file ([#3037](https://github.com/prettier/prettier/pull/3037)) by [@azz](https://github.com/azz)
|
||||
|
||||
This fixes an issue where `.prettierrc` overrides, under certain conditions, were not being respected for absolute paths with the `resolveConfig` API.
|
||||
|
||||
### Core
|
||||
|
||||
#### Respect CJK width and Combined Characters ([#3003](https://github.com/prettier/prettier/pull/3003), [#3015](https://github.com/prettier/prettier/pull/3015)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
Chinese, Japanese and Korean characters are now considered two characters wide.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before (exceeds print width when CJK characters are 2x monospace chars)
|
||||
const x = ["中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文"];
|
||||
|
||||
// After
|
||||
const x = [
|
||||
"中文",
|
||||
// ...
|
||||
"中文"
|
||||
];
|
||||
```
|
||||
|
||||
#[#3015](https://github.com/prettier/prettier/pull/3015) also ensures that combining characters (e.g. `Á`) are counted as one character.
|
||||
|
||||
### Editor Support
|
||||
|
||||
#### Implement getSupportInfo() and use it for inference ([#3033](https://github.com/prettier/prettier/pull/3033)) by [@azz](https://github.com/azz)
|
||||
|
||||
We've added a new function to the API (`prettier.getSupportInfo([version])`), and the CLI `--support-info`. This can be used to interrogate Prettier to find out which languages the current version, or an older version, supports. It also provides useful information such as CodeMirror IDs, tmScopes, etc, which can be used to automate some of the work done with lookup tables in text editor integrations.
|
||||
|
||||
Internally, we use this information to drive which extensions trigger which parsers, and support some common files that don't have extensions, like `.prettierrc`, `Jakefile`, etc.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```bash
|
||||
## prettier knows that this file is JSON now.
|
||||
$ prettier --write .prettierrc
|
||||
```
|
||||
|
||||
#### Split source elements relative to their language. ([#3069](https://github.com/prettier/prettier/pull/3069)) by [@CiGit](https://github.com/CiGit)
|
||||
|
||||
This fixes an issue in editors that support range formatting, where formatting an object would cause Prettier to crash.
|
||||
|
||||
---
|
||||
|
||||
## Thanks! :heart:
|
||||
|
||||
Thanks to everyone who contributed to this release, as well as those who raised issues! Prettier has become a highly stable piece of software that a large amount of people trust with their code. We take that trust seriously, and fix rare issues that break code with the highest priority. We can't fix these issues if we don't know about them, so never be afraid to [create an issue](https://github.com/prettier/prettier/issues/new)!
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
---
|
||||
author: Lucas Duailibe (@duailibe)
|
||||
authorURL: https://twitter.com/duailibe
|
||||
title: "Prettier 1.9: JSX Fragments, EditorConfig and Arrow Parens"
|
||||
---
|
||||
|
||||
This release adds an option for arrow function parens in arguments, support for the [new JSX fragment syntax (`<>`)](https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html), support for `.editorconfig` files, and nice additions to our GraphQL and Markdown support.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## Highlights
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### Option to add parens in arrow function arguments ([#3324](https://github.com/prettier/prettier/pull/3324)) by [@rattrayalex](https://github.com/rattrayalex) and [@suchipi](https://github.com/suchipi)
|
||||
|
||||
When printing arrow functions, Prettier omitted parens around the arguments if they weren’t strictly necessary, like so:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// no parens
|
||||
foo => {};
|
||||
|
||||
// parens
|
||||
(foo: Number) => {};
|
||||
|
||||
// parens
|
||||
({ foo }) => {}
|
||||
|
||||
// parens
|
||||
(foo = 5) => {}
|
||||
```
|
||||
|
||||
This lead to the [most commented thread](https://github.com/prettier/prettier/issues/812) 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 parens
|
||||
|
||||
#### JSX fragment syntax ([#3237](https://github.com/prettier/prettier/pull/3237)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
Prettier will now recognize and format JSX with the [new fragment syntax](https://github.com/facebook/jsx/issues/84), like the code below:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
function MyComponent() {
|
||||
return (
|
||||
<>
|
||||
<Children1 />
|
||||
<Children2 />
|
||||
<Children3 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Fix slow formatting long texts in JSX ([#3268](https://github.com/prettier/prettier/pull/3268), [#3273](https://github.com/prettier/prettier/pull/3273)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
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.
|
||||
|
||||
### Markdown
|
||||
|
||||
#### Add an option to preserve text line breaks ([#3340](https://github.com/prettier/prettier/pull/3340)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
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.
|
||||
|
||||
### GraphQL
|
||||
|
||||
#### Support top-level interpolations ([#3370](https://github.com/prettier/prettier/pull/3370)) by [@lydell](https://github.com/lydell)
|
||||
|
||||
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](https://www.apollographql.com/) 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 -->
|
||||
```js
|
||||
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.)
|
||||
|
||||
#### Preserve intentional new lines in GraphQL ([#3252](https://github.com/prettier/prettier/pull/3252)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
Prettier will now respect intentional line breaks inside GraphQL queries (but limit to 1), where before it would remove them.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```graphql
|
||||
query User {
|
||||
name
|
||||
|
||||
age
|
||||
}
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
#### Don't lowercase element names and attribute names in selectors ([#3317](https://github.com/prettier/prettier/pull/3317)) by [@lydell](https://github.com/lydell)
|
||||
|
||||
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.
|
||||
|
||||
### Configuration
|
||||
|
||||
#### Add EditorConfig support ([#3255](https://github.com/prettier/prettier/pull/3255)) by [@josephfrazier](https://github.com/josephfrazier)
|
||||
|
||||
It's taken a while, but Prettier will finally respect your `.editorconfig` file. This includes:
|
||||
|
||||
* `indent_style`
|
||||
* `indent_size`/`tab_width`
|
||||
* `max_line_length`
|
||||
|
||||
The `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](https://github.com/prettier/prettier/pull/3255#discussion_r152259674) for details). To opt in, add `editorconfig: true` to the `prettier.resolveConfig` options.
|
||||
|
||||
## Other changes
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### Don't break simple elements in JSX ([#3250](https://github.com/prettier/prettier/pull/3250)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
Prettier won't break an element with no attributes anymore, keeping elements like `<br />` as an unit.
|
||||
|
||||
#### Don't break identifiers inside template literals expressions ([#3299](https://github.com/prettier/prettier/pull/3299)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
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 -->
|
||||
```js
|
||||
const foo = `Hello ${username}. Today is ${month} ${day}. You have ${newMessages} new messages`.
|
||||
```
|
||||
|
||||
#### Fix formatting of comment inside arrow function ([#3334](https://github.com/prettier/prettier/pull/3334)) by [@jackyho112](https://github.com/jackyho112)
|
||||
|
||||
Fixes an edge case where Prettier was moving comments around breaking tools like Webpack:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
const API = {
|
||||
loader: () => import('./test' /* webpackChunkName: "test" */),
|
||||
};
|
||||
|
||||
// would get formatted to
|
||||
|
||||
const API = {
|
||||
loader: (/* webpackChunkName: "test" */) => import("./test")
|
||||
};
|
||||
```
|
||||
|
||||
#### Fix printing of comments around decorators and class properties ([#3382](https://github.com/prettier/prettier/pull/3382)) by [@azz](https://github.com/azz)
|
||||
|
||||
There was a case where comments between a decorator and a class property were moved to an invalid position.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
class Something {
|
||||
@decorator
|
||||
static // comment
|
||||
property = 1;
|
||||
}
|
||||
|
||||
// After
|
||||
class Something {
|
||||
@decorator
|
||||
// comment
|
||||
static property = 1;
|
||||
}
|
||||
```
|
||||
|
||||
### Flow
|
||||
|
||||
#### Do not break on empty type parameters ([#3281](https://github.com/prettier/prettier/pull/3281)) by [@Vjeux](https://github.com/Vjeux)
|
||||
|
||||
It won't break empty type parameters (`foo: Type<>`) anymore.
|
||||
|
||||
#### Add support for flow mixins when using babylon ([#3391](https://github.com/prettier/prettier/pull/3391)) by [@bakkot](https://github.com/bakkot)
|
||||
|
||||
We were accidentally dropping flow mixins, this has been fixed, but only for the `babylon` parser.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```js
|
||||
// Before
|
||||
class Foo extends Bar {}
|
||||
|
||||
// After
|
||||
class Foo extends Bar mixins Baz {}
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
#### Don't print a trailing comma after object rest spread ([#3313](https://github.com/prettier/prettier/pull/3313)) by [@duailibe](https://github.com/duailibe)
|
||||
|
||||
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 -->
|
||||
```js
|
||||
const {
|
||||
bar,
|
||||
baz,
|
||||
...rest
|
||||
} = foo;
|
||||
```
|
||||
|
||||
#### Print parens around type assertions for decorators ([#3329](https://github.com/prettier/prettier/pull/3329)) by [@azz](https://github.com/azz)
|
||||
|
||||
We were omitting parens around type assertions inside decorators:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```typescript
|
||||
@(bind as ClassDecorator)
|
||||
class Decorated {}
|
||||
```
|
||||
|
||||
### Markdown
|
||||
|
||||
#### Don't break `inlineCode` ([#3230](https://github.com/prettier/prettier/pull/3230)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
Prettier won't break text inside `inlineCode` meaning it will only break of after it.
|
||||
|
||||
#### No extra whitespace between non-CJK and CJK-punctuation and vice-versa ([#3244](https://github.com/prettier/prettier/pull/3244), [#3249](https://github.com/prettier/prettier/pull/3249)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
Fixes cases where Prettier would insert extra whitespace like in the following examples:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```markdown
|
||||
扩展运算符（spread ）是三个点（`...`）。
|
||||
|
||||
This is an english paragraph with a CJK quote " 中文 ".
|
||||
```
|
||||
|
||||
#### Escape all emphasis-like text ([#3246](https://github.com/prettier/prettier/pull/3246)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
Fixes the case where `\_\_text\_\_` would be formatted as `__text__`.
|
||||
|
||||
#### Handle punctuation variants ([#3254](https://github.com/prettier/prettier/pull/3254)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
Prettier now considers not only ASCII punctuation characters but Unicode as well.
|
||||
|
||||
#### Support TOML front matter ([#3290](https://github.com/prettier/prettier/pull/3290)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
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 -->
|
||||
```markdown
|
||||
+++
|
||||
date: '2017-10-10T22:49:47.369Z'
|
||||
title: 'My Post Title'
|
||||
categories: ['foo', 'bar']
|
||||
+++
|
||||
|
||||
This is the markdown body of my post.
|
||||
```
|
||||
|
||||
#### Only indent the first non-list node in checkbox list item ([#3297](https://github.com/prettier/prettier/pull/3297)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
Fixes a bug where it would indent lines after a list when it shouldn't:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```markdown
|
||||
* parent list item
|
||||
|
||||
* child list item
|
||||
|
||||
* [x] parent task list item
|
||||
|
||||
* [x] child task list item
|
||||
```
|
||||
|
||||
would become:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```markdown
|
||||
* parent list item
|
||||
|
||||
* child list item
|
||||
|
||||
* [x] parent task list item
|
||||
|
||||
* [x] child task list item
|
||||
```
|
||||
|
||||
#### Preserve non-breaking whitespaces ([#3327](https://github.com/prettier/prettier/pull/3327)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
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.
|
||||
|
||||
#### Do not break before special prefix ([#3347](https://github.com/prettier/prettier/pull/3347)) by [@ikatyang](https://github.com/ikatyang)
|
||||
|
||||
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:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```markdown
|
||||
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?
|
||||
```
|
||||
|
||||
#### Omit semicolon in simple JSX expressions ([#3330](https://github.com/prettier/prettier/pull/3330)) by [@sapegin](https://github.com/sapegin)
|
||||
|
||||
Prettier will omit the semicolon (before and after) inside code samples if it's a simple JSX expression:
|
||||
|
||||
````markdown
|
||||
No semi:
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
<div>Example</div>
|
||||
```
|
||||
````
|
||||
|
|
@ -65,9 +65,8 @@ class Footer extends React.Component {
|
|||
</div>
|
||||
<div>
|
||||
<h5>More</h5>
|
||||
{/*<a href={this.props.config.baseUrl + "blog"}>Blog</a>*/}
|
||||
<a href={this.props.config.baseUrl + "blog"}>Blog</a>
|
||||
<a href={this.props.config.githubUrl}>GitHub</a>
|
||||
<a href={this.props.config.githubUrl + "/releases"}>Releases</a>
|
||||
<a href={this.props.config.githubUrl + "/issues"}>Issues</a>
|
||||
<GithubButton config={this.props.config} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/playground.css">
|
||||
<link rel="stylesheet" href="/separate-css/playground.css">
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111350464-1"></script>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ const siteConfig = {
|
|||
{ href: "/playground/", label: "Playground" },
|
||||
{ doc: "index", label: "About" },
|
||||
{ doc: "install", label: "Usage" },
|
||||
{ blog: true, label: "Blog" },
|
||||
{ search: true },
|
||||
{ href: GITHUB_URL, label: "GitHub" }
|
||||
],
|
||||
|
|
@ -74,7 +75,7 @@ const siteConfig = {
|
|||
);
|
||||
}
|
||||
],
|
||||
separateCss: "/playground.css",
|
||||
separateCss: ["static/separate-css"],
|
||||
gaTrackingId: "UA-111350464-1"
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
.post a {
|
||||
.post p a {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.post a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 735px) {
|
||||
footer .sitemap {
|
||||
|
|
@ -20,3 +23,21 @@
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mainContainer .wrapper .post h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.mainContainer .wrapper .post h3 {
|
||||
font-size: 1.5em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mainContainer .wrapper .post h4 {
|
||||
font-size: 1.25em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue