Skip to content

Commit 4c8d8dc

Browse files
antonyfarisantonyfaris
authored
Use Prettier option: 'singleAttributePerLine' (#241)
1 parent e28c355 commit 4c8d8dc

File tree

9 files changed

+111
-2
lines changed

9 files changed

+111
-2
lines changed

‎.changeset/happy-sheep-shave.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'prettier-plugin-astro': patch
3+
---
4+
5+
Use Prettier option: 'singleAttributePerLine'

‎src/printer.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,10 @@ function print(path: AstPath, opts: ParserOptions, print: printFn): Doc {
248248
const isSelfClosingTag =
249249
isEmpty && (node.type !== 'element' || selfClosingTags.indexOf(node.name) !== -1);
250250

251-
const attributes = path.map(print, 'attributes');
251+
const attributeLine =
252+
opts.singleAttributePerLine && node.attributes.length > 1 ? breakParent : '';
253+
const attributes = join(attributeLine, path.map(print, 'attributes'));
254+
252255
if (isSelfClosingTag) {
253256
return group(['<', node.name, indent(group(attributes)), line, `/>`]);
254257
// return group(['<', node.name, indent(group([...attributes, opts.jsxBracketNewLine ? dedent(line) : ''])), ...[opts.jsxBracketNewLine ? '' : ' ', `/>`]]);
@@ -297,7 +300,7 @@ function print(path: AstPath, opts: ParserOptions, print: printFn): Doc {
297300
node.name,
298301
indent(
299302
group([
300-
...attributes,
303+
attributes,
301304
hugStart
302305
? ''
303306
: !isPreTagContent(path) && !opts.bracketSameLine

‎test/fixtures/options/single-attribute-per-line-false/input.astro‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div data-a="1">
2+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3+
</div>
4+
<div data-a="1" value>
5+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
6+
</div>
7+
<div data-a="1" data-b="2">
8+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
9+
</div>
10+
<div data-a={1 -2} data-b='2' data-c=`3`>
11+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
12+
</div>
13+
{[1,2,3].map((num) => {
14+
return <div key={num} id={num}>{num}</div>
15+
}
16+
)
17+
}

‎test/fixtures/options/single-attribute-per-line-false/options.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleAttributePerLine": false
3+
}

‎test/fixtures/options/single-attribute-per-line-false/output.astro‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div data-a="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
2+
<div data-a="1" value>
3+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4+
</div>
5+
<div data-a="1" data-b="2">
6+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
7+
</div>
8+
<div data-a={1 - 2} data-b="2" data-c=`3`>
9+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
10+
</div>
11+
{[1, 2, 3].map((num) => {
12+
return (
13+
<div key={num} id={num}>
14+
{num}
15+
</div>
16+
);
17+
})}

‎test/fixtures/options/single-attribute-per-line-true/input.astro‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div data-a="1">
2+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3+
</div>
4+
<div data-a="1" value>
5+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
6+
</div>
7+
<div data-a="1" data-b="2">
8+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
9+
</div>
10+
<div data-a={1 -2} data-b='2' data-c=`3`>
11+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
12+
</div>
13+
{[1,2,3].map((num) => {
14+
return <div key={num} id={num}>{num}</div>
15+
}
16+
)
17+
}

‎test/fixtures/options/single-attribute-per-line-true/options.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleAttributePerLine": true
3+
}

‎test/fixtures/options/single-attribute-per-line-true/output.astro‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div data-a="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
2+
<div
3+
data-a="1"
4+
value
5+
>
6+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
7+
</div>
8+
<div
9+
data-a="1"
10+
data-b="2"
11+
>
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
13+
</div>
14+
<div
15+
data-a={1 - 2}
16+
data-b="2"
17+
data-c=`3`
18+
>
19+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
20+
</div>
21+
{[1, 2, 3].map((num) => {
22+
return (
23+
<div
24+
key={num}
25+
id={num}
26+
>
27+
{num}
28+
</div>
29+
);
30+
})}

‎test/tests/options.test.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,20 @@ test(
185185
'options/option-html-whitespace-sensitivity-ignore'
186186
);
187187

188+
// https://prettier.io/docs/en/options.html#single-attribute-per-line
189+
test(
190+
'Can format an Astro file with prettier "singleAttributePerLine: true" option',
191+
files,
192+
'options/single-attribute-per-line-true'
193+
);
194+
195+
// https://prettier.io/docs/en/options.html#single-attribute-per-line
196+
test(
197+
'Can format an Astro file with prettier "singleAttributePerLine: false" option',
198+
files,
199+
'options/single-attribute-per-line-false'
200+
);
201+
188202
// // astro option: astroSortOrder
189203
// test('Can format an Astro file with prettier "astroSortOrder: markup | styles" option', 'option-astro-sort-order-markup-styles');
190204

0 commit comments

Comments
 (0)