Disable self-closing tag if empty
#284
Development PRs
Moved to separate PR from ota-meshi#186
svelte/html-self-closing
A simple rule which automatically closes html tags.
<div></div>
<!-- gets fixed to -->
<div>vue/html-self-closing also supports custom setting for svg and math elements, which I couldn't simply extract from Svelte AST, so I didn't include it. It can be simply added by checking whether element name is known svg / math element (just like it's done with void elements)
Coverage
100% test coverage.
Issues
svelte:self</svelte:self> seems to be affected by the normal option, but I think they need to share the component option or have different option.
is yet to be resolved
solved
- add
svelteSelfCloseComponentsandsvelteSelfCloseElementsto specify whether or not empty elements/components should self-close.svelteStrictModeno longer has any effect on this behavior.- an alternative to this would to not have these options and instead do whatever the user specified. In other words, if the user says
<div></div>it stays as this, and if the user says<div />that also stays like this. This is what Prettier currently does in both HTML and JSX
- an alternative to this would to not have these options and instead do whatever the user specified. In other words, if the user says
svelteAllowShorthandnow takes precedence oversvelteStrictMode, which no longer has any effect on that behaviorsvelteStrictModeis 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
- 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>.svelteStrictModeonly has effect on elements (not allowing self-closing non-void-ones) svelteAllowShorthandnow takes precedence oversvelteStrictMode, 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
Issue
Describe the bug
Hello,
I think when the html tag is empty, it should use self-closing on format.
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.6Severity
annoyance
Info
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.
I think html compliant should be preferred like prettier core and we can adopt the core option.
Have you fixed the issue somehow?
In prettier-plugin-svelte version 3 tags will be left as-is.