Indent <script> and <style> tags’ content in *.vue files

[nakatanakatana]

Fixes #3888

• I’ve added tests to confirm my change works.
• (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory)
• I’ve read the contributing guidelines.

✨Try the playground for this PR✨

[Kocal]

Is it configurable with vue/script-indent, or no matter what <script> and <style> will be indented? 😕

[j-f1]

@Kocal <script> & <style> will always be indented no matter what.

[Kocal]

Hum okay.

[duailibe]

I have no opinion on this.. we just need to choose between people complaining that it's indented vs people complaining that it's NOT indented..

🤷‍♂️

[chrisvfritz]

As a member of the Vue team, I personally don't think this should have anything to do with Vue. There does seem to be a huge split on people who prefer an indent or not for embedded languages, but this isn't a Vue-specific thing. It should behave the same everywhere there's XML.

[lipis]

🍻 🍾

[chrisvfritz]

To end bikeshedding on XML indentation for good, maybe it'd be best to just have an option like:

"htmlNoIndentTags": ["html", "script", "style"]

Then indentation behavior could be the same across XML everywhere, even .vue files, maintaining the current default to indent inside every tag since it's the conceptually simplest option.

[lydell]

To end bikeshedding on XML indentation for good, maybe it'd be best to just have an option

No, then we'd just end the bikeshedding in this repo, moving the bikeshedding to every team using Prettier. See our option philosophy.

highly controversial

[chrisvfritz]

@lydell I'm familiar with the option philosophy and one of the cases when you add new configuration is when there's huge demand. I completely understand having to draw a line, so what would sufficiently demonstrate that demand for this is huge enough? In the past, it looks like configuration requests with 30-100 upvotes have been accepted and the issue to resist adding configuration currently has 426 upvotes.

[chrisvfritz]

As an aside, my understanding is that another of Prettier's primary goals is consistency (and like any project, maintainability). As an open source maintainer myself, my worry is that special rules for .vue files set a precedent for more file-specific formatting. This would not only be a pain to implement and maintain, but also potentially confuse users. Something I really don't want is the same languages formatted differently depending on whether the extension is js, jsx, ts, tsx, vue, ejs, erb, etc - especially when the same extensions are used by multiple communities.

[ikatyang]

Based on the discussion in #3888, we're going to add an option for it and defaults to not indent to avoid unnecessary breaking change.

Could you add an option (maybe --vue-script-indent) for it and document the change in CHANGELOG.unreleased.md?

[lipis]

@nakatanakatana are you still around to add the option for this?

[lipis]

@prettier/core It looks like @nakatanakatana is not around.. :) Who can take or of that one?

[duailibe]

I can do this

[lipis]

@duailibe and maybe we can start preparing the blog post and the 1.17 release for that?

[azz]

I'm confused, why is this Vue-specific?

The proposed option --vue-script-indent doesn't make any sense to me. I thought the issue was about indenting/not-indenting embedded languages in HTML, not just .vue files?

[lydell]

@azz I agree, I think it makes the most sense to have an option for indent/no-indent for all <script> and <style> tags in any kind of HTML. I think it should default to indenting. That would keep the current default behavior for .html files, but change it for .vue. That should be fine, though?

Also, I’m closing this PR. I think it’s easier to start from scratch now.