incorrect indent format on nested template tag

[ihola777]

before:

after:

prettier settings:

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 4,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none",
  "endOfLine": "auto",
  "vueIndentScriptAndStyle": false,
  "bracketSameLine": true,
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "ignore",
  "plugins": [
    "prettier-plugin-tailwindcss"
  ]
}

plugin settings

[zheung]

same issue here.
Also I found that 2.x will continue to format HTML code even if setting html.format.enable is turned off. This doesn't happen in 1.x.
I think the two issues are related.

[movy]

Had to disable volar for formatting, because of ongoing HTML indent issues, and completely switch to ESLint.

Another example of broken format (possibly related to #3242):

    <div class="col-4">
      <Listbox
        v-if="experimentNames?.length > 0"
        ref="listbox"
        v-model="selectedExperiment"
        :focused="true"
        :options="experimentNames"
        filter
        :select-on-focus="true"
        :filter-placeholder="`Filtered by at least ${binsToFilter} bins with ${binsFilter}`"
        list-style="max-height:90px"
        class="text-xs"
        @change="setChartData"
      >
        <template #option="slotProps">
          <div class="flex align-items-center">
            <div
              style="font-family: Menlo"
              @click="copyToClipboard"
            >
              <!-- exp29_all_indicators-ago avgCandles:5 indTf:2h sourceType:high period1:32 period2:70 srsiAvgCandles:9 srsiPeriod:14 srsiLimit:0 srsiSourceType:open srsiFlip:1 barsInterval:1h maxBars:40 slAdjust:0.6 stratLifeSpan:0 prnSL:0 escapeTP:1.6 escapePnl:-0.3 SL:-9 -->
              <!-- split slotProps.option into object and get only srsiLimit srsiFlip and SL -->
              {{ slotProps.option.split(' ')[0] + ' ' + JSON.stringify(slotProps.option.split(',').reduce((acc, curr) => {
            const [key, value] = curr.split(':')
            // split on comma and map to trim each value, then check if key is in the array
            if (parametersToDisplay.split(',').map((value) => value.trim()).includes(key)) {
                acc[key] = value
            }
            return acc
            }, {})).replaceAll(/",/g, '') }}
            </div>
          </div>
        </template>
</Listbox>
</div>

I don't recall html-comments being a problem a month ago, but now every HTML block with comments has indent issues when formatted by volar.
ESLint handles this correctly.

[ihola777]

downgraded official plugin to 1.8.27 and issue's gone.