How to force Special Elements to always be above HTML

sveltejs / prettier-plugin-svelte

Format your svelte components using prettier.

MIT License

745 stars 97 forks source link

How to force Special Elements to always be above HTML #338

Closed dmarc-unicity closed 1 year ago

dmarc-unicity commented 1 year ago

I'm aware of svelteSortOrder, but I can't figure out how to set it so that Special Elements, like <svelte:head> and <svelte:window> are always above the "normal" HTML. My ideal order is:

JavaScript
Special Elements
HTML
CSS

Prettier doesn't seem to enforce Special Elements being either before or after the normal HTML.

dummdidumm commented 1 year ago

There's no such order setting which supports this, and I don't think we should have one, as this goes too deep into "personal preference" territory. Use the none option instead to not reorder anything if the existing options reorder things in a way you don't like.

dmarc-unicity commented 1 year ago

@dummdidumm, I find this comment to be a little ironic, given that Prettier is a tool created around personal preferences with justifications.

I think what would be most ideal would be to sort the Special Elements that have a justification to be sorted. For instance, <svelte:options>, <svelte:head> and <svelte:window> all makes sense to be above the HTML.

<svelte:options> - You're setting compiler options, so it makes sense to have that above the HTML, as it's a setting, which is most logical to read as early as possible in the file.
<svelte:head> People are accustomed to the <head> being at the top, especially to add an external CSS file, for instance.
<svelte:window> - This is replicating the window object in JavaScript. You would expect JavaScript to come before the HTML.

dummdidumm commented 1 year ago

Prettier is an opinionated code formatter with limited configurability, and being a plugin of Prettier we'd like to follow their standards of "not too many options". svelte:options we made an exception for since it has nothing to do with the HTML, but window/head do, so grouping them with HTML makes sense to me.

dmarc-unicity commented 1 year ago

Well to you it makes sense to group with HTML, but to me it doesn't, given that in a normal HTML head you would do something like this, which is clearly meant to go above the HTML:

<svelte:head>
    <link rel="stylesheet" href="/tutorial/dark-theme.css">
</svelte:head>

As for window, it seems more logical to group it with other JavaScript.

I'm surprised my issue was immediately closed given that I think that there is good justification to at least provide the option.

dummdidumm commented 1 year ago

Since we can't make everyone happy with the given options, there's also the sort order option none which does not restructure it but you are then free to order it the way you like.