Hello!
First of all, awesome job, I really love this project. I would like to know if it is possible to avoid multi line attributes inside <template> tags in a .vue file. I would like to preserve the following format:
<template>
<div id="app" class="wrapper" v-model="{{ something }}">
<topband></topband>
</div>
</template>
But when I format the file the template change to:
<template>
<div id="app"
class="wrapper"
v-model="{{ something }}">
<topband></topband>
</div>
</template>
It is possible to avoid that?
Working on a formatter setting right now...
Awesome @octref, any help that I can provide just let me know.
Let's keep it open -- I want to verify the update would solve this problem.
nice! can't wait to have this setting!
This is resolved in master. Will be publishing 0.6 with release notes soon.
@octref I didn't get it.. What are the option to turn off multiline attributes? Thanks!
@MarceloLuis1997 You should read https://vuejs.github.io/vetur/formatting.html
In short:
"vetur.format.defaultFormatter.html" configures which formatter you want to use for HTML"vetur.format.defaultFormatterOptions" for configuring its options"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 100, // No line exceeds 100 characters
"singleQuote": false // Prefer double quotes over single quotes
}
}
@octref that config now looks deprecated, is there some other setting?
Having tried all these:
"html.format.wrapAttributes": "auto",
"html.format.enable": false,
"html.format.wrapLineLength": 0,
"prettier.printWidth": 1000,
"vetur.validation.template": false,
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 1000, // No line exceeds 100 characters
"singleQuote": false // Prefer double quotes over single quotes
}
}
Still, formats looking horrid, turning 4 simple lines
<a :href="`/stories/${id}/${$slugify(name)}`">
<img v-lazy="`/images/petpicture/${child.picture}?w=190&h=130`" alt class="rounded-top img-fluid object-fit" />
<span class="name">{{ name }}</span>
</a>
into this unreadable mess
<a
:href="`/stories/${id}/${$slugify(name)}`"
>
<img
v-lazy="
`/images/petpicture/${child.picture}?w=190&h=130`
"
alt
class="rounded-top img-fluid object-fit"
/>
<span
class="name"
>
{{ name }}
</span>
</a>
@octref thanks for replying, I didn't have any .prettierrc in project or home as is though vs-code remote containers.
What I did to fix it all, was to go through and set the settings I'm used to, then copy the same settings over into vetur.format.defaultFormatterOptions, and use "editor.defaultFormatter": "esbenp.prettier-vscode" to not use vetur but have them settings in place if defaultFormatter is changed, then obviously copy the final working settings.json over to .dev-container.json "settings": {...}
I think it must have been falling back to either not use vetur or just use prettier, either way settings were not applied, so having a copy in both seems to work.
So config looks like:
{
...
"vetur.validation.template": false,
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 1000,
"singleQuote": false,
"semi": false,
"useEditorConfig": false,
"arrowParens": "avoid",
"trailingComma": "none"
}
},
"prettier.printWidth": 1000,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.useEditorConfig": false,
"prettier.arrowParens": "avoid",
"prettier.trailingComma": "none",
"editor.defaultFormatter": "esbenp.prettier-vscode"
...
}
Woop back to work
Yeah you need to set Vetur as the defaultFormatter for Vue files, and Vetur is explicit about what setting you are reading. If you only want prettier you can indeed use esbenp.prettier-vscode.
Most helpful comment
Let's keep it open -- I want to verify the update would solve this problem.