Note: Read this comment to make sure you’re up-to-speed on what this issue is and is not about: #5377 (comment)
For React/JSX - Prettier has an option to allow tags to close on the same line as the declaration, rather then on a new line:
jsxBracketSameLine: true:
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}>
Click Here
</button>
jsxBracketSameLine: false:
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}
>
Click Here
</button>
With Prettier 1.15.1, at least for the Angular parser, there is no corresponding option, so all HTML is formatted like this:
Input:
<my-component class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
[foo]="bar">
</my-component>
Output:
<my-component
class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
[foo]="bar"
>
</my-component>
Playground link
It would be nice to have a flag to set it such that the output of the above would be:
<my-component
class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
[foo]="bar">
</my-component>
Note: Read this comment to make sure you’re up-to-speed on what this issue is and is not about: #5377 (comment)
For React/JSX - Prettier has an option to allow tags to close on the same line as the declaration, rather then on a new line:
jsxBracketSameLine: true:jsxBracketSameLine: false:With Prettier 1.15.1, at least for the Angular parser, there is no corresponding option, so all HTML is formatted like this:
Input:
Output:
Playground link
It would be nice to have a flag to set it such that the output of the above would be: