prettier-plugin-astro
prettier-plugin-astro copied to clipboard
🐛 BUG: HTML elements formatting differently than HTML files
Describe the Bug
The following HTML code from a .astro
file is not formatting correctly. Prettier is running and there are no errors in the extension logs, all prettier rules in the config are working in .astro
files, the issue is simply the HTML structure.
Dep versions
"prettier": "^3.0.3",
"prettier-plugin-astro": "^0.12.0"
Current Formatting
<nav>
<ul><li>Item 1</li><li>Item 2</li></ul>
</nav>
Expected Result
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
.prettierrc
{
"semi": false,
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"plugins": ["prettier-plugin-astro"]
}
VS Code settings.json
"prettier.documentSelectors": ["**/*.astro"],
"[astro]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Steps to Reproduce
-
npm init astro
using template <NAME> - ...
- ...
- ...
- Error! Describe what went wrong (and what was expected instead)...
This also occurs for the following:
<!-- Observed -->
<div><div></div><div></div></div>
<!-- Expected, as they are the epitome of block-level -->
<div>
<div></div>
<div></div>
</div>
Perhaps it is just a caveat of block-level tags, where newline and indentation are not required by the formatter? @Princesseuh