prettier-plugin-astro icon indicating copy to clipboard operation
prettier-plugin-astro copied to clipboard

🐛 BUG: HTML elements formatting differently than HTML files

Open steveg152 opened this issue 1 year ago • 1 comments

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

  1. npm init astro using template <NAME>
  2. ...
  3. ...
  4. ...
  5. Error! Describe what went wrong (and what was expected instead)...

steveg152 avatar Oct 03 '23 17:10 steveg152

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

VoxelMC avatar Feb 16 '24 23:02 VoxelMC