My prettier format breaking vue code (ref<number>(0)) with typescript

Question

Before Format:

const activeIndex = ref<number>(0)

After Format:

const activeIndex = ref < number > 0

Prettier Output: enter image description here

Prettier Config:

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

Can you suggest any solution or configuration that could help to resolve this issue? Thank you.

well, if i use const activeIndex = ref(0) which without type declaration, it would not cause this issue.

WANTED: Prettier formatting do not change this code

Answer 1

maybe you can try to add this to your config of prettier:

vueIndentScriptAndStyle: true,

Hope it works !