Prettier is wrapping attributes in my Vue components and putting the closing bracket on a new line like so:
<transition
leave-active-class="transition duration-1000 ease-in"
leave-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="on" class="text-sm text-gray-600">
<slot />
</div>
</transition>
The wrapping of the attributes I like, but the bracket on a new line is unacceptable for our code. I know some Vue devs like it, but for my team it doesn't work.
In the VS Code settings I have
"prettier.jsxBracketSameLine": true
It seems that bracketSameLine was removed at some point.
I've seen other questions here with answers that mention that the extension comes with Vue disabled, and you should fix that by setting the disabledLanguages array. This setting has also been removed.
I'm seeing a Vue specific setting for the default formatter in the settings json:
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Is it possible to set something here that will stop this bracket wrapping, and if not what can I do to get this fixed?
MORE DISCOVERY:
It seems that the VS Code extension is not compatible with the latest version of Prettier.
Despite the documentation, options that are available in the extension are not compatible with Prettier 2.4.1 which is the version called for in it's package.json
For instance, Prettier 2.4.1 has deprecated jsxBracketSameLine in favor of bracketSameLine yet only the jsxBracketSameLine is available in the extension.
This is probably the reason the extension isn't working.