Comments (24)
After pinning to 1.4.4 your tests are still failing. The reported issue might not affect your project. These imprecisions are caused by inconsistent test results.
from gulp-documentation.
Version 1.5.1 just got published.
Your tests are still failing with this version. Compare the changes ๐จ
from gulp-documentation.
Version 1.5.2 just got published.
Your tests are still failing with this version. Compare the changes ๐จ
from gulp-documentation.
Version 1.5.3 just got published.
Your tests are still failing with this version. Compare the changes ๐จ
from gulp-documentation.
Version 1.6.0 just got published.
Your tests are still failing with this version. Compare the changes ๐จ
Release Notes
1.6.0: Config File, JSXI want to give a special shout out to @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) by @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.
// .prettierrc { "trailingComma": "es5", "singleQuote": true }
For more information on configuration file support, see the README.
Support .prettierignore files (#2412) by @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) by @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
// 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
// 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
// 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) by @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.
// 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) by @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.
// 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) by @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.
// Before Syntax error// After
{ / some comment / "a": 1 }
JavaScript
Add more supervisory parens (#2423) by @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: +-*/
.
// Before x !== y === z; x * y % z;// After
(x !== y) === z;
(x * y) % z;
Implement prettier-ignore inside JSX (#2487) by @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.
// Before <Component> {/*prettier-ignore*/} <span ugly format="" /> </Component>// Before
<Component>
{/prettier-ignore/}
<span ugly format='' />
</Component>
Do not swallow prettier-ignore comments (#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.
// Before push( <td> :) </td>, );// After
push(
// prettier-ignore
<td> :)
</td>,
);
Fix indentation of a do-while condition (#2359) by @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.
// Before do {} while ( someVeryLongFunc( someVeryLongArgA, someVeryLongArgB, someVeryLongArgC ) );// After
do {} while (
someVeryLongFunc(
someVeryLongArgA,
someVeryLongArgB,
someVeryLongArgC
)
);
Break sequence expressions (#2388) by @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 :)
// 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) by @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 :)
// Before // There is some space here ->______________// After
// There is some space here ->
Fix interleaved comments in class decorators (#2660, #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
.
// Before // A // B // C @Foo() @Bar() class Bar {}// After
// A
@Foo()
// B
@Bar()
// C
class Bar {}
Improve bind expression formatting (#2493) by @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.
// 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) by @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.
// Before Syntax error// After
try {} catch {}
Add support for printing optional chaining syntax (#2572) by @azz
Another new proposal being discussed at TC39 is an optional chaining syntax. This is currently a stage 1 proposal, so the syntax may change at any time.
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) by @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.
// Before let assignment /** @type {string} */ = getValue();// After
let assignment = /** @type {string} */ (getValue());
Inline first computed property lookup in member chain (#2670) by @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.
// 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, #2542) by @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 for a veerrryyyy long time!
// Before Syntax error// After
opaque type ID = string;
export type * from "module";
Strip away unnecessary quotes in keys in type objects and interfaces (#2643)
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.
// Before type A = { "string": "A"; }// After
type A = {
string: "A";
}
Print TypeParameter even when unary function type (#2406) by @danwang
Oopsy, we were dropping the generic in this very specific case.
// Before type myFunction = A => B;// After
type myFunction = <T>(A) => B;
Keep parens around FunctionTypeAnnotation inside ArrayTypeAnnotation (#2561) by @azz
Parenthesis... someday we'll get all of them fixed :)
// Before const actionArray: () => void[] = [];// After
const actionArray: (() => void)[] = [];
TypeScript
Support TypeScript 2.5 RC (#2672) by @azz
TypeScript 2.5 RC was recently announced, allowing you to use the upcoming "optional catch binding" syntax in TypeScript, too. ๐
Don't add namespace keyword to global declaration (#2329) by @azz
// Before namespace global { export namespace JSX { } }// After
global {
export namespace JSX {}
}
Fix <this.Component /> (#2472) by @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 :)
// Before <undefined.Author />// After
<this.Author />
Allow type assertions to hug (#2439) by @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.
// 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) by @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 :)
// Before (<x>a) || {};// After
<x>a || {};
Print parens around type assertion as LHS in assignment (#2525) by @azz
Yet another case of missing parenthesis. Thankfully we're getting very few of them nowadays and they are for extremely rare edge cases.
// Before foo.bar as Baz = [bar];// After
(foo.bar as Baz) = [bar];
Print declare for TSInterfaceDeclaration (#2574) by @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.
// Before interface Dictionary<T> { [index: string]: T }// After
declare interface Dictionary<T> {
[index: string]: T
}
CSS
Normalize quotes in CSS (#2624) by @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...
// Before div { content: "abc"; }// After
div {
content: 'abc';
}
Normalize numbers in CSS (#2627) by @lydell
Another place where we can reuse the logic we've done for JavaScript to improve CSS printing.
// Before border: 1px solid rgba(0., 0.0, .0, .3);// After
border: 1px solid rgba(0, 0, 0, 0.3);
Quote unquoted CSS attribute values in selectors (#2644) by @lydell
I can never quite remember the rules behind quotes around attributes so we're now always putting quotes there.
// Before a[id=test] {}// After
a[id="test"] {}
Add support for css keyword (#2337) by @zanza00
// Before const header = css`.top-bar {background: black;margin: 0;position: fixed;}`// After
const header = css</span></span> <span class="pl-s"> .top-bar {</span> <span class="pl-s"> background: black;</span> <span class="pl-s"> margin: 0;</span> <span class="pl-s"> position: fixed;</span> <span class="pl-s"> }</span> <span class="pl-s"><span class="pl-pds">
;
Support styled-components with existing component (#2552, #2619) by @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.
styled(ExistingComponent)` css: property; `;styled.button.attr({})
</span></span> <span class="pl-s"> border: rebeccapurple;</span> <span class="pl-s"><span class="pl-pds">
;
Trim whitespace in descendant combinator (#2411) by @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.
// Before .hello.<span class="pl-smi">how</span><span class="pl-k">-</span>you<span class="pl-k">-</span>doin {
height: 42;
}// After
.hello .how-you-doin {
height: 42;
}Strip BOM before parsing (#2373) by @azz
I still have nightmares from dealing with BOM in a previous life. Thankfully, in 2017 it's no longer a big issue as most tooling is now aware of it. Thanks @azz for fixing an edge cases related to CSS parsing.
// Before [BOM]/* Block comment * html { content: "#{1}"; }// After [BOM]/* Block comment */ html { content: "#{1}"; }GraphQL
Add support for range-formatting GraphQL (#2319) by @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) by @rrdelaneyAt 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) by @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 --write '{**/*,*}.{js,jsx,json}' '!vendor/**'Make --list-different to work with --stdin (#2393) by @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.
$ echo 'call ( ) ;' | prettier --list-different (stdin) $ echo $? 1from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.6.1 just got published.
Your tests are still failing with this version. Compare the changes ๐จ
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.7.0 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
Release Notes
1.7.0: JSX tweaks, Pragma, TypeScript and CSS fixesThis release features some bugfixes and tweaks around JSX, TypeScript, CSS, and JavaScript formatting, as well as a couple new features.
Highlights
JSX Changes
We received a lot of community feedback about the changes we made to JSX formatting in the 1.6.0 release, and have made changes to bring formatting closer to community standards and expectations.
In 1.6.0, we added a second style for ternaries (conditional expressions,
a ? b : c
), based on a format popular in the community where parentheses are used to demarcate JSX content:const DinnerOptions = ({ willEatMeat, willEatEggs, willEatVegetables }) => ( <div> <div>Let's get some dinner...</div> {willEatMeat ? ( <FullMenu /> ) : willEatEggs ? ( <VegetarianMenu /> ) : willEatVegetables ? ( <VeganMenu /> ) : ( <BackupMenu /> )} </div> );Before this was added, prettier only formatted ternaries with one consistent style:
willEatMeat ? "Full Menu" : willEatEggs ? "Vegetarian Menu" : willEatVegetables ? "Vegan Menu" : "Backup Menu";In 1.6.0, we used the following heuristic to decide when to use the new "JSX mode ternaries":
We should print a ternary using JSX mode if: * The ternary contains some JSX in it OR * The ternary appears inside of some JSX
However, this heuristic caused some unexpected formatting:
So, in 1.7.0, we have revised our heuristic to just be:
We should print a ternary using JSX mode if: * The ternary contains some JSX in it
We hope that this change will result in fewer surprising ternaries.
A big thanks goes out to @duailibe who implemented this change in addition to several other JSX-related formatting issues that were reported.
CSS Letter Case Consistency
We spent some time this release polishing our CSS formatting, and as part of that, @lydell did some work to normalize letter case.
So now, almost everything in CSS will print using
lower case
./* Before */ DIV.Foo { HEIGHT: 12PX; }/ After /
div.Foo {
height: 12px;
}Don't worry, though โ Prettier won't touch your
$scss-variables
,@less-variables
, orFunctionNames()
. Preprocess on!Pragma Support
There is a new option called
--require-pragma
(requirePragma
via the API) which will change prettier's behavior so that it only reformats a file if it has a special "pragma" comment at the top of it, that looks like this:/** * @prettier */or
/** * @format */This was @ajhyndman's idea and it was implemented by @wbinnssmith.
Other Changes
TypeScript
There was a bug in Prettier 1.6.1 where an error would be thrown while parsing any TypeScript using the
never
type, for example:Observable.empty<never>();Also, Prettier 1.6.1 was incorrectly removing the
declare
keyword fromenum
declarations in*.d.ts
files:// In declare const enum Foo {}// Out
const enum Foo {}Both of these issues have been fixed. Thanks to @JamesHenry and @existentialism for these fixes which support our TypeScript community!
Configuration
Configurable Config Precedence
There is a new CLI option
--config-precedence
which configures how prettier should prioritize config sources. Valid values are:
cli-override
(default) - CLI options take precedence over config file
file-override
- Config file take precedence over CLI options
prefer-file
- If a config file is found will evaluate it and ignore other CLI options. If no config file is found CLI options will evaluate as normal.This option adds support to editor integrations where users define their default configuration but want to respect project specific configuration.
prettier.resolveConfig.sync
Previously, there was no way via the API to resolve configuration for a source file synchronously. Thanks to some new additions to
cosmiconfig
by @sudo-suhas, @ikatyang was able to add support for this to the prettier API.PRs merged in this release
- Update README.md by @ikatyang
- Fix config file finding when using stdin by @lydell
- docs(readme): add and sort cli options by @levithomason
- Add Transloadit as a user by @kvz
- Ensure parens around LogicalExpression inside ExperimentalSpreadProperty by @existentialism
- Fix printing declare modifier for TS enum by @existentialism
- Handle +/- before numbers in CSS by @xtian
- Add Tradeshift as a user by @sampi
- feat(resolve-config): add
.sync()
method by @ikatyang- refactor(bin): use
resolveConfigFile.sync()
by @ikatyang- refactor(cli): separate files and make it pure as possible by @ikatyang
- Fix cosmiconfig dependency branch by @josephfrazier
- Upgrade chalk to v2.1.0 by @josephfrazier
- Add CLI option '--config-precedence' by @mitermayer
- Normalize CSS case by @lydell
- Make run-external-typescript-tests.js cross-platform by @lydell
- test(integration): add more tests by @ikatyang
- chore(deps): remove devDependency
cross-spawn
by @ikatyang- Ignore some things in coverage by @lydell
- Generalize run-external-typescript-tests.js by @lydell
- Improve lint-staged setup example by adding more filetypes by @MoOx
- fixes dynamic imports by @rkurbatov
- Refactor error handling by @azz
- chore(github): add issue template by @ikatyang
- Fix: TypeScript never keyword (fixes #2718) by @JamesHenry
- Group last argument if it's an empty object with a comment by @duailibe
- Use
files:
overtypes:
in pre-commit configuration by @asottile- refactor(runPrettier): reduce duplicate code by @ikatyang
- Change when to print ternaries in JSX mode by @duailibe
- Fix chained logical expressions with objects/array/etc inlined by @duailibe
- Add option to require @prettier or @format pragma by @wbinnssmith
- chore(build): update ISSUE_TEMPLATE.md before publish by @ikatyang
- Fix break on conditional expressions inside return by @duailibe
- Support graphql(schema,
query
) by @azz- fix(prettierignore): support absolute filename by @ambar
- Keep conditional expressions in one line on method chains by @duailibe
- fix(build): update ISSUE_TEMPLATE using regex
?:
instead of?!
by @ikatyang- Break closing paren of ConditionalExpression in member chains by @duailibe
- fix webstorm integration guide by @xsburg
Issues resolved in this release
- Document missing CLI options reported by @levithomason
- Formatting of Spread Properties differs between Babylon and TypeScript reported by @mariusschulz
- Removal of the
declare
modifier fromenum
reported by @mariusschulz- Decimal formatting doesn't get all decimals in a rule. reported by @itsgreggreg
- Use resolveConfigFile.sync in the CLI reported by @azz
- CSS: Normalize case (lower vs upper) on stuff reported by @lydell
- Dynamic import with webpackChunkName comment fails reported by @pbomb
- Typescript: never as type parameter causes error: unknown type: undefined reported by @hccampos
- commented object values reported by @sylvainbaronnet
- Configuring pre-commit for jsx, Typescript, tsx reported by @reywright
- JSX ternaries include parens reported by @jasonLaster
- Chained Short Circuit Conditionals in JSX reported by @brycehill
- Support @prettier pragma comment reported by @ajhyndman
- No indentation after breaking return statement reported by @jwbay
- Support graphql() fn and so make 2nd arg prettier reported by @brikou
- prettierignore: cannot use absolute filename reported by @ambar
- Weird Javascript format reported by @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!
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.7.1 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.7.2 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.7.3 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.7.4 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.8.0 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
Release Notes
1.8.0: Markdown SupportThis 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.Highlights
Markdown Support
Support markdown (#2943) by @ikatyang
You can now run Prettier on Markdown files! ๐
The implementation is highly compliant with the CommonMark spec, and backed by the excellent
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 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, 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:
```js reallyUgly ( javascript ) ```.h1 { color : red } ```</pre></div> <p>Output:</p> <div class="highlight highlight-source-lisp"><pre>```js reallyUgly(javascript)<span class="pl-c"><span class="pl-c">;</span></span>.h1 { color: red<span class="pl-c"><span class="pl-c">;</span></span> } ```</pre></div> <blockquote> <p>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 <code><!-- prettier-ignore --></code> before the code block to ignore it from formatting.</p> </blockquote> <p><strong>Lists</strong></p> <p>When rearranging list items, after running Prettier all the numbers will be fixed!</p> <p><a href="https://camo.githubusercontent.com/50f76500c503763c50019ad61ff531716ff7f3c9/687474703a2f2f672e7265636f726469742e636f2f4d4174616e5a4d5a526f2e676966" target="_blank"><img src="https://camo.githubusercontent.com/50f76500c503763c50019ad61ff531716ff7f3c9/687474703a2f2f672e7265636f726469742e636f2f4d4174616e5a4d5a526f2e676966" alt="Markdown Lists" style="max-width:100%;"></a></p> <blockquote> <p>Note: you can actually opt out of this by using <code>1.</code> for all list items if you want to optimize for cleaner diffs.</p> </blockquote> <p><strong>Tables</strong></p> <p>Tables will also automatically be adjusted to fit their contents. This could be completely unmaintainable without an automated tool.</p> <p><a href="https://camo.githubusercontent.com/7f33126347f155262873500e5068016d2e71a773/687474703a2f2f672e7265636f726469742e636f2f33356a61383836636b542e676966" target="_blank"><img src="https://camo.githubusercontent.com/7f33126347f155262873500e5068016d2e71a773/687474703a2f2f672e7265636f726469742e636f2f33356a61383836636b542e676966" alt="Markdown Tables" style="max-width:100%;"></a></p> <p><strong>Markdown-in-JS</strong></p> <p>By using either <code>md</code> or <code>markdown</code> tagged template literals, you can format markdown code inside JavaScript.</p> <div class="highlight highlight-source-js"><pre><span class="pl-k">const</span> <span class="pl-c1">markdown</span> <span class="pl-k">=</span> md<span class="pl-s"><span class="pl-pds">`</span></span> <span class="pl-s"> # heading</span> <span class="pl-s"></span> <span class="pl-s"> 1. list item</span> <span class="pl-s"><span class="pl-pds">`</span></span>;</pre></div> <h2>CLI</h2> <h3>Add option to insert <code>@format</code> to first docblock if absent (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2865" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="258974830" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2865">#2865</a>) by <a href="https://urls.greenkeeper.io/samouri" class="user-mention">@samouri</a></h3> <p>In 1.7, we added an option called <code>--require-pragma</code> to require files contain an <code>/** @format */</code> pragma to be formatted. In order to add this pragma to a large set of files you can now use <a href="https://prettier.io/docs/en/cli.html#insert-pragma"><code>--insert-pragma</code></a> flag.</p> <pre><code>prettier --write "folder/**/*.js" --insert-pragma </code></pre> <h3>Add <code>--loglevel</code> option (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2992" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="263707174" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2992">#2992</a>) by <a href="https://urls.greenkeeper.io/ikatyang" class="user-mention">@ikatyang</a></h3> <p>This <a href="https://prettier.io/docs/en/cli.html#loglevel">nifty feature</a> allows you to opt in (or out) of Prettier's logging. We've also cleaned up the logging substantially since 1.7.</p> <div class="highlight highlight-source-shell"><pre>$ prettier --loglevel=debug blarg $ ./bin/prettier.js --loglevel=debug blarg [debug] normalized argv: {<span class="pl-s"><span class="pl-pds">"</span>_<span class="pl-pds">"</span></span>:[<span class="pl-s"><span class="pl-pds">"</span>blarg<span class="pl-pds">"</span></span>],<span class="pl-s"><span class="pl-pds">"</span>bracket-spacing<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>color<span class="pl-pds">"</span></span>:true,<span class="pl-s"><span class="pl-pds">"</span>debug-check<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>debug-print-doc<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>flow-parser<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>insert-pragma<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>jsx-bracket-same-line<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>list-different<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>require-pragma<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>semi<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>single-quote<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>stdin<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>use-tabs<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>version<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>with-node-modules<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>write<span class="pl-pds">"</span></span>:false,<span class="pl-s"><span class="pl-pds">"</span>loglevel<span class="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>debug<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>ignore-path<span class="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>.prettierignore<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>config-precedence<span class="pl-pds">"</span></span>:<span class="pl-s"><span class="pl-pds">"</span>cli-override<span class="pl-pds">"</span></span>} [error] No matching files. Patterns tried: blarg <span class="pl-k">!</span><span class="pl-k">**</span>/node_modules/<span class="pl-k">**</span> <span class="pl-k">!</span>./node_modules/<span class="pl-k">**</span> </pre></div> <h2>JavaScript</h2> <h3>Fix indentation for JSDoc comments (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2470" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="242554023" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2470">#2470</a>) by <a href="https://urls.greenkeeper.io/maxdeviant" class="user-mention">@maxdeviant</a></h3> <p>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!</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-k">function</span> <span class="pl-en">theFunction2</span>(<span class="pl-smi">action$</span>, <span class="pl-smi">store</span>) { <span class="pl-c"><span class="pl-c">/*</span></span> <span class="pl-c"> * comments</span> <span class="pl-c"> <span class="pl-c">*/</span></span> <span class="pl-k">return</span> <span class="pl-c1">true</span>; } <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-k">function</span> <span class="pl-en">theFunction2</span>(<span class="pl-smi">action$</span>, <span class="pl-smi">store</span>) { <span class="pl-c"><span class="pl-c">/*</span></span> <span class="pl-c"> * comments</span> <span class="pl-c"> <span class="pl-c">*/</span></span> <span class="pl-k">return</span> <span class="pl-c1">true</span>; }</pre></div> <h3>Print pipeline and nullish-coalescing operators (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3036" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="265544605" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3036">#3036</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3> <p>We've added support for two new proposed operators to Prettier: the <em>pipeline operator</em> and the <em>nullish coalescing operator</em>.</p> <p>The <a href="https://urls.greenkeeper.io/tc39/proposal-pipeline-operator/">pipeline operator</a> is currently a stage one proposal.</p> <blockquote> <p>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.</p> </blockquote> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-k">let</span> result <span class="pl-k">=</span> <span class="pl-en">exclaim</span>(<span class="pl-en">capitalize</span>(<span class="pl-en">doubleSay</span>(<span class="pl-s"><span class="pl-pds">"</span>hello<span class="pl-pds">"</span></span>))); <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-k">let</span> result <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>hello<span class="pl-pds">"</span></span> <span class="pl-k">|</span><span class="pl-k">></span> doubleSay <span class="pl-k">|</span><span class="pl-k">></span> capitalize <span class="pl-k">|</span><span class="pl-k">></span> exclaim;</pre></div> <p>The <a href="https://urls.greenkeeper.io/tc39-transfer/proposal-nullish-coalescing">nullish coalescing operator</a> is another stage one proposal.</p> <blockquote> <p>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.</p> </blockquote> <p>This operator is similar to <code>||</code> except it only evaluates the right-hand-side if the left is <code>undefined</code> or <code>null</code>, not <code>""</code>, <code>0</code>, <code>NaN</code>, etc.</p> <div class="highlight highlight-source-js"><pre><span class="pl-k">const</span> <span class="pl-c1">foo</span> <span class="pl-k">=</span> <span class="pl-smi">object</span>.<span class="pl-smi">foo</span> <span class="pl-k">??</span> <span class="pl-s"><span class="pl-pds">"</span>default<span class="pl-pds">"</span></span>;</pre></div> <h3>Improved template literal expresions line breaks (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3124" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="269808048" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3124">#3124</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3> <p>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 <code>${</code> and <code>}</code>.</p> <div class="highlight highlight-source-js-jsx"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-k">const</span> <span class="pl-smi">description</span><span class="pl-k"> =</span><span class="pl-s"> <span class="pl-s">`</span><span class="pl-s">The value of the <span class="pl-e">${<span class="pl-smi">cssName</span>}</span> css of the <span class="pl-e">${<span class="pl-c1">this</span></span></span></span> <span class="pl-s"><span class="pl-s"><span class="pl-e"> <span class="pl-k">.</span><span class="pl-smi">_name</span>}</span> element</span><span class="pl-s">`</span></span>; <span class="pl-k">const</span> <span class="pl-smi">foo</span><span class="pl-k"> =</span><span class="pl-s"> <span class="pl-s">`</span><span class="pl-s">mdl-textfield mdl-js-textfield <span class="pl-e">${<span class="pl-smi">className</span>}</span> <span class="pl-e">${<span class="pl-smi">content</span><span class="pl-k">.</span><span class="pl-smi">length</span><span class="pl-k"> ></span> <span class="pl-c1">0</span></span></span></span> <span class="pl-s"><span class="pl-s"><span class="pl-e"> <span class="pl-k">?</span> <span class="pl-s"><span class="pl-pds">"</span>is-dirty<span class="pl-pds">"</span></span></span></span></span> <span class="pl-s"><span class="pl-s"><span class="pl-e"> <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>}</span> combo-box__input</span><span class="pl-s">`</span></span>; <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-k">const</span> <span class="pl-smi">description</span><span class="pl-k"> =</span><span class="pl-s"> <span class="pl-s">`</span><span class="pl-s">The value of the \${cssName} css of the \${</span></span> <span class="pl-s"><span class="pl-s"> this._name</span></span> <span class="pl-s"><span class="pl-s">} element</span><span class="pl-s">`</span></span>; <span class="pl-k">const</span> <span class="pl-smi">foo</span><span class="pl-k"> =</span><span class="pl-s"> <span class="pl-s">`</span><span class="pl-s">mdl-textfield mdl-js-textfield <span class="pl-e">${<span class="pl-smi">className</span>}</span> <span class="pl-e">${</span></span></span> <span class="pl-s"><span class="pl-s"><span class="pl-e"><span class="pl-smi"> content</span><span class="pl-k">.</span><span class="pl-smi">length</span><span class="pl-k"> ></span> <span class="pl-c1">0</span> <span class="pl-k">?</span> <span class="pl-s"><span class="pl-pds">'</span>is-dirty<span class="pl-pds">'</span></span> <span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span></span></span></span> <span class="pl-s"><span class="pl-s"><span class="pl-e">}</span> combo-box__input</span><span class="pl-s">`</span></span></pre></div> <h2>JSX</h2> <h3>Don't inline trailing <code>}</code> for arrow functions attributes (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3110" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="268739661" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3110">#3110</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3> <p>In order to align closer to the <a href="https://urls.greenkeeper.io/airbnb/javascript/">Airbnb style guide</a>, and since it was never intentionally printed this way, we've moved the <code>}</code> 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.</p> <div class="highlight highlight-source-js-jsx"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <<span class="pl-ent"><span class="pl-c1">BookingIntroPanel</span></span> <span class="pl-e">logClick</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">data</span> <span class="pl-k">=></span></span> <span class="pl-s1"> <span class="pl-en">doLogClick</span>(<span class="pl-s"><span class="pl-pds">"</span>long_name_long_name_long_name<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>long_name_long_name_long_name<span class="pl-pds">"</span></span>,<span class="pl-smi"> data</span>)</span><span class="pl-pse">}</span> />; <span class="pl-c"><span class="pl-c">//</span> After</span> <<span class="pl-ent"><span class="pl-c1">BookingIntroPanel</span></span> <span class="pl-e">logClick</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">data</span> <span class="pl-k">=></span></span> <span class="pl-s1"> <span class="pl-en">doLogClick</span>(<span class="pl-s"><span class="pl-pds">"</span>long_name_long_name_long_name<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>long_name_long_name_long_name<span class="pl-pds">"</span></span>,<span class="pl-smi"> data</span>)</span> <span class="pl-s1"> </span><span class="pl-pse">}</span> />;</pre></div> <h1>Other Changes</h1> <h2>JavaScript</h2> <h3>Make the factory detection handle multiple elements (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3112" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="268967545" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3112">#3112</a>) by <a href="https://urls.greenkeeper.io/vjeux" class="user-mention">@vjeux</a></h3> <p>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.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-c1">window</span>.<span class="pl-smi">FooClient</span> .<span class="pl-en">setVars</span>({ locale<span class="pl-k">:</span> <span class="pl-en">getFooLocale</span>({ page }), authorizationToken<span class="pl-k">:</span> <span class="pl-smi">data</span>.<span class="pl-smi">token</span> }) .<span class="pl-en">initVerify</span>(<span class="pl-s"><span class="pl-pds">"</span>foo_container<span class="pl-pds">"</span></span>); <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-c1">window</span>.<span class="pl-smi">FooClient</span>.<span class="pl-en">setVars</span>({ locale<span class="pl-k">:</span> <span class="pl-en">getFooLocale</span>({ page }), authorizationToken<span class="pl-k">:</span> <span class="pl-smi">data</span>.<span class="pl-smi">token</span> }).<span class="pl-en">initVerify</span>(<span class="pl-s"><span class="pl-pds">"</span>foo_container<span class="pl-pds">"</span></span>);</pre></div> <h3>Handle comments between function name and open paren (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2979" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="263070152" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2979">#2979</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3> <p>Printing comments in the right place is an endless challenge <g-emoji alias="wink" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f609.png" ios-version="6.0">๐</g-emoji>. This fix ensures that comments next to function names are re-printed correctly.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-k">function</span> <span class="pl-en">f</span>(<span class="pl-c"><span class="pl-c">/*</span> comment<span class="pl-c">*/</span></span> <span class="pl-smi">promise</span>) {} <span class="pl-c"><span class="pl-c">//</span> After </span> <span class="pl-k">function</span> f <span class="pl-c"><span class="pl-c">/*</span> comment<span class="pl-c">*/</span></span>(<span class="pl-smi">promise</span>) {}</pre></div> <h3>Support sequential CallExpressions in member chains (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2990" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="263677479" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2990">#2990</a>) by <a href="https://urls.greenkeeper.io/chrisvoll" class="user-mention">@chrisvoll</a></h3> <p>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.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> wrapper .<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">"</span>SomewhatLongNodeName<span class="pl-pds">"</span></span>) .<span class="pl-en">prop</span>(<span class="pl-s"><span class="pl-pds">"</span>longPropFunctionName<span class="pl-pds">"</span></span>)().<span class="pl-en">then</span>(<span class="pl-k">function</span>() { <span class="pl-en">doSomething</span>(); }); <span class="pl-c"><span class="pl-c">//</span> After</span> wrapper .<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">"</span>SomewhatLongNodeName<span class="pl-pds">"</span></span>) .<span class="pl-en">prop</span>(<span class="pl-s"><span class="pl-pds">"</span>longPropFunctionName<span class="pl-pds">"</span></span>)() .<span class="pl-en">then</span>(<span class="pl-k">function</span>() { <span class="pl-en">doSomething</span>(); });</pre></div> <h3>Account for empty lines in long member call chain (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3035" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="265515302" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3035">#3035</a>) by <a href="https://urls.greenkeeper.io/jackyho112" class="user-mention">@jackyho112</a></h3> <p>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.</p> <div class="highlight highlight-source-js"><pre>angular .<span class="pl-en">module</span>(<span class="pl-s"><span class="pl-pds">"</span>AngularAppModule<span class="pl-pds">"</span></span>) <span class="pl-c"><span class="pl-c">//</span> Constants.</span> .<span class="pl-en">constant</span>(<span class="pl-s"><span class="pl-pds">"</span>API_URL<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>http://localhost:8080/api<span class="pl-pds">"</span></span>) <span class="pl-c"><span class="pl-c">//</span> App configuration.</span> .<span class="pl-en">config</span>(appConfig) .<span class="pl-en">run</span>(appRun);</pre></div> <h3>Fix issue where first argument is left behind when line breaks (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3079" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267371127" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3079">#3079</a>) by <a href="https://urls.greenkeeper.io/mutdmour" class="user-mention">@mutdmour</a></h3> <p>This addresses an issue where due to our special object inline behaviour, the indentation missing from the function call.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-smi">db</span>.<span class="pl-en">collection</span>(<span class="pl-s"><span class="pl-pds">"</span>indexOptionDefault<span class="pl-pds">"</span></span>).<span class="pl-en">createIndex</span>({ a<span class="pl-k">:</span> <span class="pl-c1">1</span> }, { indexOptionDefaults<span class="pl-k">:</span> <span class="pl-c1">true</span> }, <span class="pl-k">function</span>(<span class="pl-smi">err</span>) { <span class="pl-c"><span class="pl-c">//</span> code</span> }); <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-smi">db</span>.<span class="pl-en">collection</span>(<span class="pl-s"><span class="pl-pds">"</span>indexOptionDefault<span class="pl-pds">"</span></span>).<span class="pl-en">createIndex</span>( { a<span class="pl-k">:</span> <span class="pl-c1">1</span> }, { indexOptionDefaults<span class="pl-k">:</span> <span class="pl-c1">true</span> }, <span class="pl-k">function</span>(<span class="pl-smi">err</span>) { <span class="pl-c"><span class="pl-c">//</span> code</span> } );</pre></div> <h3>Break parens for binaries in member expression (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2958" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="262164203" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2958">#2958</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3> <p>Similarly, there was another edge case where indentation was missing from logical expressions. This is fixed, too.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-k">const</span> <span class="pl-c1">someLongVariable</span> <span class="pl-k">=</span> (<span class="pl-en">idx</span>( <span class="pl-c1">this</span>.<span class="pl-smi">props</span>, <span class="pl-smi">props</span> <span class="pl-k">=></span> <span class="pl-smi">props</span>.<span class="pl-smi">someLongPropertyName</span> ) <span class="pl-k">||</span> [] ).<span class="pl-en">map</span>(<span class="pl-smi">edge</span> <span class="pl-k">=></span> <span class="pl-smi">edge</span>.<span class="pl-smi">node</span>); <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-k">const</span> <span class="pl-c1">someLongVariable</span> <span class="pl-k">=</span> ( <span class="pl-en">idx</span>(<span class="pl-c1">this</span>.<span class="pl-smi">props</span>, <span class="pl-smi">props</span> <span class="pl-k">=></span> <span class="pl-smi">props</span>.<span class="pl-smi">someLongPropertyName</span>) <span class="pl-k">||</span> [] ).<span class="pl-en">map</span>(<span class="pl-smi">edge</span> <span class="pl-k">=></span> <span class="pl-smi">edge</span>.<span class="pl-smi">node</span>);</pre></div> <h3>Prevent breaking MemberExpression inside NewExpression (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3075" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267232001" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3075">#3075</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3> <p>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!</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-k">function</span> <span class="pl-en">functionName</span>() { <span class="pl-k">if</span> (<span class="pl-c1">true</span>) { <span class="pl-c1">this</span>.<span class="pl-smi">_aVeryLongVariableNameToForceLineBreak</span> <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">this</span> .<span class="pl-en">Promise</span>((<span class="pl-smi">resolve</span>, <span class="pl-smi">reject</span>) <span class="pl-k">=></span> { <span class="pl-c"><span class="pl-c">//</span> do something</span> }); } } <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-k">function</span> <span class="pl-en">functionName</span>() { <span class="pl-k">if</span> (<span class="pl-c1">true</span>) { <span class="pl-c1">this</span>.<span class="pl-smi">_aVeryLongVariableNameToForceLineBreak</span> <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">this.Promise</span>( (<span class="pl-smi">resolve</span>, <span class="pl-smi">reject</span>) <span class="pl-k">=></span> { <span class="pl-c"><span class="pl-c">//</span> do something</span> } ); } }</pre></div> <h3>Fix array acessors in method chains (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3137" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="270637812" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3137">#3137</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3> <p>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.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-en">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.org-lclp-edit-copy-url-banner__link<span class="pl-pds">'</span></span>) [<span class="pl-c1">0</span>].<span class="pl-c1">getAttribute</span>(<span class="pl-s"><span class="pl-pds">'</span>href<span class="pl-pds">'</span></span>) .<span class="pl-c1">indexOf</span>(<span class="pl-c1">this</span>.<span class="pl-smi">landingPageLink</span>) <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-en">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.org-lclp-edit-copy-url-banner__link<span class="pl-pds">'</span></span>)[<span class="pl-c1">0</span>] .<span class="pl-c1">getAttribute</span>(<span class="pl-s"><span class="pl-pds">'</span>href<span class="pl-pds">'</span></span>) .<span class="pl-c1">indexOf</span>(<span class="pl-c1">this</span>.<span class="pl-smi">landingPageLink</span>)</pre></div> <h2>Flow and TypeScript</h2> <h3>Fix indentation of intersection object types (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3074" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267225804" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3074">#3074</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3> <p>This was a minor alignment bug in intersection types, and has now been fixed.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> type intersectionTest <span class="pl-k">=</span> { propA<span class="pl-k">:</span> <span class="pl-c1">X</span> } <span class="pl-k">&</span> { propB<span class="pl-k">:</span> <span class="pl-c1">X</span> } <span class="pl-k">&</span> { propC<span class="pl-k">:</span> <span class="pl-c1">X</span> } <span class="pl-k">&</span> { propD<span class="pl-k">:</span> <span class="pl-c1">X</span> }; <span class="pl-c"><span class="pl-c">//</span> After</span> type Props <span class="pl-k">=</span> { propA<span class="pl-k">:</span> <span class="pl-c1">X</span> } <span class="pl-k">&</span> { propB<span class="pl-k">:</span> <span class="pl-c1">X</span> } <span class="pl-k">&</span> { propC<span class="pl-k">:</span> <span class="pl-c1">X</span> } <span class="pl-k">&</span> { propD<span class="pl-k">:</span> <span class="pl-c1">X</span> };</pre></div> <h3>Keep parens around TSAsExpression in ConditionalExpression (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3053" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="266402555" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3053">#3053</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3> <p>We missed a case where we need to keep the parenthesis with TypeScript's <code>as</code> assertions. This is now fixed.</p> <div class="highlight highlight-source-ts"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <span class="pl-c"></span><span class="pl-smi">aValue</span> <span class="pl-k">as</span> <span class="pl-c1">boolean</span> ? <span class="pl-c1">0</span> : <span class="pl-k">-</span><span class="pl-c1">1</span>; <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-c"></span>(<span class="pl-smi">aValue</span> <span class="pl-k">as</span> <span class="pl-c1">boolean</span>) <span class="pl-k">?</span> <span class="pl-c1">0</span> <span class="pl-k">:</span> <span class="pl-k">-</span><span class="pl-c1">1</span>;</pre></div> <h2>JSX</h2> <h3>Collapse multiple JSX whitespaces (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2973" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="262564212" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2973">#2973</a>) by <a href="https://urls.greenkeeper.io/karl" class="user-mention">@karl</a></h3> <p>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.</p> <div class="highlight highlight-source-js-jsx"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> <<span class="pl-ent">div</span>> <span class="pl-pse">{</span><span class="pl-s1"><span class="pl-s"><span class="pl-pds">"</span> <span class="pl-pds">"</span></span></span><span class="pl-pse">}</span> <<span class="pl-ent"><span class="pl-c1">Badge</span></span> <span class="pl-e">src</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">notificationIconPng</span></span><span class="pl-pse">}</span> /> </<span class="pl-ent">div</span>>; <span class="pl-c"><span class="pl-c">//</span> After</span> <<span class="pl-ent">div</span>> <span class="pl-pse">{</span><span class="pl-s1"><span class="pl-s"><span class="pl-pds">"</span> <span class="pl-pds">"</span></span></span><span class="pl-pse">}</span> <<span class="pl-ent"><span class="pl-c1">Badge</span></span> <span class="pl-e">src</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">notificationIconPng</span></span><span class="pl-pse">}</span> /> </<span class="pl-ent">div</span>></pre></div> <h3>Don't print JSX bracket on same line when it has trailing comments (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3088" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267549517" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3088">#3088</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3> <p>This was an issue with the <code>--jsx-bracket-same-line</code> option. Turns out you can't <em>always</em> put the bracket on the same line...</p> <div class="highlight highlight-source-js-jsx"><pre><span class="pl-c"><span class="pl-c">//</span> Input</span> <<span class="pl-ent">div</span> <span class="pl-c"> <span class="pl-c">//</span> comment</span> > <span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">foo</span></span><span class="pl-pse">}</span> </<span class="pl-ent">div</span>> <span class="pl-c"><span class="pl-c">//</span> Before</span> <<span class="pl-ent">div</span>> // comment <span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">foo</span></span><span class="pl-pse">}</span> </<span class="pl-ent">div</span>>; <span class="pl-c"><span class="pl-c">//</span> After</span> <<span class="pl-ent">div</span> <span class="pl-c"><span class="pl-c">//</span> comment</span> > <span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">foo</span></span><span class="pl-pse">}</span> </<span class="pl-ent">div</span>>;</pre></div> <h2>CSS</h2> <h3>Preserve line breaks in grid declarations (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3133" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="270384528" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3133">#3133</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3> <p>Prettier will now preserve line breaks included in the source code when formatting the <code>grid</code> and <code>grid-template-*</code> rules, since those are important to keep in separate lines, but still applies the formatting like other rules (e.g., numbers and quotes).</p> <div class="highlight highlight-source-css"><pre><span class="pl-c"><span class="pl-c">/*</span> Original Input <span class="pl-c">*/</span></span> <span class="pl-ent">div</span> { <span class="pl-c1"><span class="pl-c1">grid</span></span>: [wide-start] <span class="pl-s"><span class="pl-pds">'</span>header header header<span class="pl-pds">'</span></span> <span class="pl-c1">200.000<span class="pl-k">px</span></span> [wide-end] <span class="pl-s"><span class="pl-pds">"</span>footer footer footer<span class="pl-pds">"</span></span> <span class="pl-c1">.50<span class="pl-k">fr</span></span> / <span class="pl-c1">auto</span> <span class="pl-c1">50.000<span class="pl-k">px</span></span> <span class="pl-c1">auto</span>; } <span class="pl-c"><span class="pl-c">/*</span> Before <span class="pl-c">*/</span></span> <span class="pl-ent">div</span> { <span class="pl-c1"><span class="pl-c1">grid</span></span>: [wide-start] <span class="pl-s"><span class="pl-pds">"</span>header header header<span class="pl-pds">"</span></span> <span class="pl-c1">200<span class="pl-k">px</span></span> [wide-end] <span class="pl-s"><span class="pl-pds">"</span>footer footer footer<span class="pl-pds">"</span></span> <span class="pl-c1">0.5<span class="pl-k">fr</span></span> / <span class="pl-c1">auto</span> <span class="pl-c1">50<span class="pl-k">px</span></span> <span class="pl-c1">auto</span>; } <span class="pl-c"><span class="pl-c">/*</span> After <span class="pl-c">*/</span></span> <span class="pl-ent">div</span> { <span class="pl-c1"><span class="pl-c1">grid</span></span>: [wide-start] <span class="pl-s"><span class="pl-pds">"</span>header header header<span class="pl-pds">"</span></span> <span class="pl-c1">200<span class="pl-k">px</span></span> [wide-end] <span class="pl-s"><span class="pl-pds">"</span>footer footer footer<span class="pl-pds">"</span></span> <span class="pl-c1">0.5<span class="pl-k">fr</span></span> / <span class="pl-c1">auto</span> <span class="pl-c1">50<span class="pl-k">px</span></span> <span class="pl-c1">auto</span>; }</pre></div> <h2>SCSS</h2> <h3>Format SCSS maps like CSS rules (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3070" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267054763" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3070">#3070</a>) by <a href="https://urls.greenkeeper.io/asmockler" class="user-mention">@asmockler</a></h3> <p>Turns out SCSS maps are much prettier when printed over multiple lines.</p> <div class="highlight highlight-source-scss"><pre><span class="pl-c">// Before</span> <span class="pl-smi">$map</span>: (color: <span class="pl-c1">#111111</span>, <span class="pl-c1">text</span><span class="pl-c1">-</span>shadow:<span class="pl-c1"> 1</span><span class="pl-k">px</span><span class="pl-c1"> 1</span><span class="pl-k">px</span><span class="pl-c1"> 0</span> <span class="pl-bu">salmon</span>) // After <span class="pl-smi">$map</span>: ( color: <span class="pl-c1">#111111</span>, <span class="pl-c1">text</span><span class="pl-c1">-</span>shadow:<span class="pl-c1"> 1</span><span class="pl-k">px</span><span class="pl-c1"> 1</span><span class="pl-k">px</span><span class="pl-c1"> 0</span> <span class="pl-bu">salmon</span> );</pre></div> <h2>CSS-in-JS</h2> <h3>Fix formatting styled(Foo).attrs(...)`` (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3073" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="267192603" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3073">#3073</a>) by <a href="https://urls.greenkeeper.io/existentialism" class="user-mention">@existentialism</a></h3> <p>Prettier will now format the CSS in styled-components code that looks like this:</p> <div class="highlight highlight-source-js"><pre><span class="pl-en">styled</span>(Component).<span class="pl-en">attrs</span>({})<span class="pl-s"><span class="pl-pds">`</span></span> <span class="pl-s"> color: red;</span> <span class="pl-s"><span class="pl-pds">`</span></span>;</pre></div> <h2>GraphQL</h2> <h3>Prevent formatting GraphQL template literals with expressions (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2975" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="262809788" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2975">#2975</a>) by <a href="https://urls.greenkeeper.io/duailibe" class="user-mention">@duailibe</a></h3> <p>Prettier doesn't support formatting JavaScript expressions in GraphQL. See <a href="https://urls.greenkeeper.io/prettier/prettier/issues/2640" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="251412470" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2640">#2640</a> 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.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before</span> (invalid code) <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-en">graphql</span>(schema, <span class="pl-s"><span class="pl-pds">`</span>{ query test { id }} <span class="pl-s1"><span class="pl-pse">${</span>fragment<span class="pl-pse">}</span></span><span class="pl-pds">`</span></span>)</pre></div> <h2>CLI</h2> <h3>Don't use ANSI codes if stdout isn't a TTY (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2903" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="260810621" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2903">#2903</a>) by <a href="https://urls.greenkeeper.io/narigo" class="user-mention">@Narigo</a></h3> <p>Previously, piping the output of <code>--list-different</code> 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.</p> <h2>Configuration</h2> <h3>Use relative paths with CLI (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/2969" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="262449905" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/2969">#2969</a>) by <a href="https://urls.greenkeeper.io/ahmedelgabri" class="user-mention">@ahmedelgabri</a></h3> <p>This fixes a bug where passing a path starting with <code>./</code> to the CLI wouldn't match patterns used in <code>.prettierignore</code>.</p> <pre><code># .prettierignore path/to/*.js </code></pre> <p>After this fix, no files will be written to when executing:</p> <div class="highlight highlight-source-shell"><pre>$ prettier --write ./path/to/<span class="pl-k">*</span>.js</pre></div> <h3>Resolve file paths relative to config file (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3037" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="265550594" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3037">#3037</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3> <p>This fixes an issue where <code>.prettierrc</code> overrides, under certain conditions, were not being respected for absolute paths with the <code>resolveConfig</code> API.</p> <h2>Core</h2> <h3>Respect CJK width and Combined Characters (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3003" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="264227112" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3003">#3003</a>, <a href="https://urls.greenkeeper.io/prettier/prettier/pull/3015" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="264803229" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3015">#3015</a>) by <a href="https://urls.greenkeeper.io/ikatyang" class="user-mention">@ikatyang</a></h3> <p>Chinese, Japanese and Korean characters are now considered two characters wide.</p> <div class="highlight highlight-source-js"><pre><span class="pl-c"><span class="pl-c">//</span> Before (exceeds print width when CJK characters are 2x monospace chars)</span> <span class="pl-k">const</span> <span class="pl-c1">x</span> <span class="pl-k">=</span> [<span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>]; <span class="pl-c"><span class="pl-c">//</span> After</span> <span class="pl-k">const</span> <span class="pl-c1">x</span> <span class="pl-k">=</span> [ <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span>, <span class="pl-c"><span class="pl-c">//</span> ...</span> <span class="pl-s"><span class="pl-pds">"</span>ไธญๆ<span class="pl-pds">"</span></span> ];</pre></div> <p><a href="https://urls.greenkeeper.io/prettier/prettier/pull/3015" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="264803229" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3015">#3015</a> also ensures that combining characters (e.g. <code>ร</code>) are counted as one character.</p> <h2>Editor Support</h2> <h3>Implement getSupportInfo() and use it for inference (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3033" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="265494522" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3033">#3033</a>) by <a href="https://urls.greenkeeper.io/azz" class="user-mention">@azz</a></h3> <p>We've added a new function to the API (<code>prettier.getSupportInfo([version])</code>), and the CLI <code>--support-info</code>. 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.</p> <p>Internally, we use this information to drive which extensions trigger which parsers, and support some common files that don't have extensions, like <code>.prettierrc</code>, <code>Jakefile</code>, etc.</p> <div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> prettier knows that this file is JSON now.</span> $ prettier --write .prettierrc</pre></div> <h3>Split source elements relative to their language. (<a href="https://urls.greenkeeper.io/prettier/prettier/pull/3069" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="266872265" data-permission-text="Issue title is private" data-url="https://github.com/prettier/prettier/issues/3069">#3069</a>) by <a href="https://urls.greenkeeper.io/cigit" class="user-mention">@CiGit</a></h3> <p>This fixes an issue in editors that support range formatting, where formatting an object would cause Prettier to crash.</p> <hr> <h1>Thanks! <g-emoji alias="heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png" ios-version="6.0">โค๏ธ</g-emoji></h1> <p>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 <a href="https://urls.greenkeeper.io/prettier/prettier/issues/new">create an issue</a>!</p> </details>from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.8.1 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.8.2 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.9.0 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
Release Notes
1.9.0: JSX Fragments, EditorConfig and Arrow ParensThis release adds an option for arrow function parens in arguments, support for the new JSX fragment syntax (
<>
), support for.editorconfig
files, and nice additions to our GraphQL and Markdown support.Highlights
JavaScript
Option to add parens in arrow function arguments (#3324) by @rattrayalex and @suchipi
When printing arrow functions, Prettier omitted parens around the arguments if they werenโt strictly necessary, like so:
// no parens foo => {};// parens
(foo: Number) => {};// parens
({ foo }) => {}// parens
(foo = 5) => {}This lead to the most commented thread in our issue tracker. Prettier now has the
--arrow-parens
option (arrowParens
in the config) that can assume two values today:
"avoid"
- (default) preserve the behavior that omits parens when possible"always"
- always includes parensJSX fragment syntax (#3237) by @duailibe
Prettier will now recognize and format JSX with the new fragment syntax, like the code below:
function MyComponent() { return ( <> <Children1 /> <Children2 /> <Children3 /> </> ); }Fix slow formatting long texts in JSX (#3268, #3273) by @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) by @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) by @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 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:
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) by @duailibe
Prettier will now respect intentional line breaks inside GraphQL queries (but limit to 1), where before it would remove them.
query User { nameage
}CSS
Don't lowercase element names and attribute names in selectors (#3317) by @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) by @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 for details). To opt in, addeditorconfig: true
to theprettier.resolveConfig
options.Other changes
JavaScript
Don't break simple elements in JSX (#3250) by @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) by @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:
const foo = `Hello ${username}. Today is ${month} ${day}. You have ${newMessages} new messages`.Fix formatting of comment inside arrow function (#3334) by @jackyho112
Fixes an edge case where Prettier was moving comments around breaking tools like Webpack:
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) by @azz
There was a case where comments between a decorator and a class property were moved to an invalid position.
// 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) by @vjeux
It won't break empty type parameters (
foo: Type<>
) anymore.Add support for flow mixins when using babylon (#3391) by @bakkot
We were accidentally dropping flow mixins, this has been fixed, but only for the
babylon
parser.// Before class Foo extends Bar {}// After
class Foo extends Bar mixins Baz {}TypeScript
Don't print a trailing comma after object rest spread (#3313) by @duailibe
This was inconsistent with JavaScript and Flow, Prettier won't print a trailing comma in the following cases, when using the TypeScript parser:
const { bar, baz, ...rest } = foo;Print parens around type assertions for decorators (#3329) by @azz
We were omitting parens around type assertions inside decorators:
@(bind as ClassDecorator) class Decorated {}Markdown
Don't break
inlineCode
(#3230) by @ikatyangPrettier 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, #3249) by @ikatyang
Fixes cases where Prettier would insert extra whitespace like in the following examples:
ๆฉๅฑ่ฟ็ฎ็ฌฆ๏ผspread ๏ผๆฏไธไธช็น๏ผ`...`๏ผใThis is an english paragraph with a CJK quote " ไธญๆ ".
Escape all emphasis-like text (#3246) by @ikatyang
Fixes the case where
\_\_text\_\_
would be formatted as__text__
.Handle punctuation variants (#3254) by @ikatyang
Prettier now considers not only ASCII punctuation characters but Unicode as well.
Support TOML front matter (#3290) by @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.
+++ 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) by @ikatyang
Fixes a bug where it would indent lines after a list when it shouldn't:
* parent list item<span class="pl-v">*</span> child list item
* [x] parent task list item
<span class="pl-v">*</span> [x] child task list item</pre></div>
would become:
* parent list item* child list item
* [x] parent task list item
<span class="pl-v">*</span> [x] child task list item</pre></div>
Preserve non-breaking whitespaces (#3327) by @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) by @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: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) by @sapegin
Prettier will omit the semicolon (before and after) inside code samples if it's a simple JSX expression:
No semi:
jsx</span><span class="pl-s1"></span> <span class="pl-s1"><div>Example</div></span> <span class="pl-s1"></span><span class="pl-c1">
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.9.1 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.9.2 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.10.0 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
Release Notes
1.10: One Year of Prettier ๐from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.10.1 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.10.2 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.11.0 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
Release Notes
Prettier 1.11: CSS fixes and new TypeScript feature supportfrom gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.11.1 just got published.
Your tests are passing again with this version. Explicitly upgrade to this version ๐
from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.12.0 just got published.
Your tests are still failing with this version. Compare the changes ๐จ
Release Notes
Prettier 1.12: Fixes, Features, and Formatting, Oh My!from gulp-documentation.
greenkeeper commented on June 14, 2024 Version 1.12.1 just got published.
Your tests are still failing with this version. Compare the changes ๐จ
from gulp-documentation.
Related Issues (20)
- How might one go about configuring a project to automatically set the title? HOT 3
- The code generator has deoptimised the styling of "..." as it exceeds the max of "100KB" HOT 2
- Allow usage of custom instance of documentation.js HOT 1
- TypeError: Cannot read property 'forEach' of undefined HOT 17
- Ignores description
- Please add License file HOT 1
- how do i run for all my files? HOT 6
- Name inference repeatedly documents the same items HOT 8
- ES6 babel project: Cannot read property 'reduce' or 'forEach' of undefined HOT 2
- `polyglot` gives me a blank documentation HOT 6
- Pass config and theme options HOT 1
- An in-range update of vinyl is breaking the build ๐จ HOT 1
- An in-range update of lint-staged is breaking the build ๐จ HOT 14
- Project name and version not included in HTML output HOT 2
- An in-range update of husky is breaking the build ๐จ
- An in-range update of standard-version is breaking the build ๐จ HOT 2
- An in-range update of concat-stream is breaking the build ๐จ HOT 1
- Version 10 of node.js has been released
- options do not seem to be working HOT 1
Recommend Projects
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
Recommend Topics
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web
Some thing interesting about web. New door for the world.
server
A server is a program made to process requests and deliver data to clients.
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization
Some thing interesting about visualization, use data art
Game
Some thing interesting about game, make everyone happy.
Recommend Org
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
from gulp-documentation.