withastro / prettier-plugin-astro

Prettier plugin for Astro
Other
473 stars 33 forks source link

šŸ› BUG: HTML elements formatting differently than HTML files #375

Open steveg152 opened 11 months ago

steveg152 commented 11 months ago

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
  2. ...
  3. ...
  4. ...
  5. Error! Describe what went wrong (and what was expected instead)...
VoxelMC commented 7 months ago

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