Bug: Cannot format expressions in Vue using TS types

[jjlorenzo]

Info

Tool	Version
Plugin	v1.20.0
Prettier	v2.6.1
Framework	vue
Node	v17.7.1
OS	mac

Prettier config

// @ts-check
/// <reference types="@prettier/plugin-pug/src/prettier" />

/**
 * @type {import("prettier").Options}
 */
module.exports = {
  plugins: [require.resolve("@prettier/plugin-pug")],
  printWidth: 120,
  pugClassNotation: "attribute",
  pugFramework: "vue",
  pugSortAttributes: "asc",
  pugSortAttributesEnd: ["^:", "^@"],
  quoteProps: "consistent",
  semi: false,
  trailingComma: "all",
}

Input

<template lang="pug">
n-modal(
  preset="card",
  transform-origin="center",
  v-model:show="show",
  :closable="false",
  :close-on-esc="false",
  :footer-style="{ textAlign: 'center' }",
  :header-style="{ textAlign: 'center' }",
  :mask-closable="false",
  :style="{ backgroundColor: theme.inputColorDisabled, width: '600px' }"
)
  template(#header) Enter the PIN code
  template(#default)
    n-space(justify="space-around", :wrap="false")
      n-input(
        readonly,
        size="large",
        v-for="(value, index) in pinChrs",
        v-model:value="pinChrs[index]",
        :key="index",
        :maxlength="1",
        :show-button="false",
        :style="{ textAlign: 'center', width: '60px' }",
        :theme-overrides="{ fontSizeLarge: '40px', heightLarge: '80px' }"
        :ref="(el:any) => pinRefs[index] = el",
      )
  template(#footer) You should have received by a phone call or by SMS
</template>

Output or Error

The `:ref="(el:any) => pinRefs[index] = el",` doesn't get ordered, in general no ordering occurs either in the parent component

Expected Output

In this case, is expected that `:ref="(el:any) => pinRefs[index] = el",` gets reordered to before `:maxlength="1",`

Additional Context

[Shinigami92]

Could you try remove :any in this case and confirm that it works without it? If this is the case, I have an assumption where the problem is

[jjlorenzo]

Sorry for forgetting to test this before. Your'e right, without the type information, it works as expected.

[Shinigami92]

https://github.com/prettier/plugin-pug/blob/0d70a7f587ba93b5ed3fb471a26e735ca13f6737/src/printer.ts#L679-L681

https://github.com/prettier/plugin-pug/blob/0d70a7f587ba93b5ed3fb471a26e735ca13f6737/src/printer.ts#L654

I think we need to forward this bug to upstream prettier 🤔

@fisker Does prettier already support Vue 3's types in template?

[fisker]

I don't use TS myself, but we may have a related issue https://github.com/prettier/prettier/issues/12414

Hope I didn't misunderstand this issue, they are all TS in template, right?

[jjlorenzo]

Hope I didn't misunderstand this issue, they are all TS in template, right?

Yes

[fisker]

We need to update the vue expression parser to allow typescript syntax, luckily we have babel-ts, so we don't need use typescript parser.