Skip to content

Disable self-closing tag if empty #284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lacherogwu opened this issue Apr 8, 2022 · 4 comments · Fixed by #380
Closed

Disable self-closing tag if empty #284

lacherogwu opened this issue Apr 8, 2022 · 4 comments · Fixed by #380
Labels
enhancement New feature or request

Comments

@lacherogwu
Copy link

lacherogwu commented Apr 8, 2022

Describe the bug

Hello,

I think when the html tag is empty, it should use self-closing on format.
image

When I'm writing code, sometimes I write just boilerplate of HTML tags before I implement any styles and it's kinda annoying that it's closing empty elements, and to be honest it doesn't really make sense...

If the tag is not empty and contains any attribute so I believe self-closing will be the right way to go
for e.g.

<div class="a" /> ✅
<div /> ❌
<div></div> ✅

Thanks!

Reproduction

Write any HTML tag and save the file
I use Prettier for formatting, and auto-format on save

Logs

No response

System Info

System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Xeon(R) CPU           X5690  @ 3.47GHz
    Memory: 2.86 GB / 48.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
    Firefox: 98.0.2
    Firefox Developer Edition: 98.0
    Safari: 13.1.1
  npmPackages:
    svelte: ^3.44.0 => 3.46.6

Severity

annoyance

@dummdidumm dummdidumm transferred this issue from sveltejs/svelte Apr 8, 2022
@dummdidumm dummdidumm added the enhancement New feature or request label Apr 8, 2022
@khaki32
Copy link

khaki32 commented Jul 18, 2022

I agree. In fact I'd prefer the option to completely self closing tags for plain HTML elements. It even self-closes auto-closing tags like <br> or <input>. I think it makes the code actually uglier.

@JounQin
Copy link

JounQin commented Jul 28, 2022

I think html compliant should be preferred like prettier core and we can adopt the core option.

@ajikia15
Copy link

Have you fixed the issue somehow?

dummdidumm added a commit that referenced this issue Jul 14, 2023
- add `svelteSelfCloseComponents` and `svelteSelfCloseElements` to specify whether or not empty elements/components should self-close. `svelteStrictMode` no longer has any effect on this behavior
- `svelteAllowShorthand` now takes precedence over `svelteStrictMode`, which no longer has any effect on that behavior
- `svelteStrictMode` is deprecated as future Svelte versions might coerce numbers coming from mustache tags inside strings into strings

closes #348
closes #284
closes #279
closes #238
related to #377
dummdidumm added a commit that referenced this issue Jul 14, 2023
- whether or not empty elements/components should self-close is now left to the user - in other words, if you write `<div />` or `<Component />` that stays as is, and so does `<div></div>`/`<Component></Component>`. `svelteStrictMode` no longer has any effect on this behavior
- `svelteAllowShorthand` now takes precedence over `svelteStrictMode`, which no longer has any effect on that behavior
- `svelteStrictMode` is deprecated as future Svelte versions might coerce numbers coming from mustache tags inside strings into strings

closes #348
closes #284
closes #279
closes #238
related to #377
superseeds / closes #379 as less options = better
dummdidumm added a commit that referenced this issue Jul 17, 2023
- whether or not empty elements/components should self-close is now left to the user - in other words, if you write `<div />` or `<Component />` that stays as is, and so does `<div></div>`/`<Component></Component>`. `svelteStrictMode` only has effect on elements (not allowing self-closing non-void-ones)
- `svelteAllowShorthand` now takes precedence over `svelteStrictMode`, which no longer has any effect on that behavior

closes #284
closes #279
closes #238
related to #348
related to #377
superseeds / closes #379 as less options = better
@dummdidumm
Copy link
Member

In prettier-plugin-svelte version 3 tags will be left as-is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
5 participants