I have VSCodium 1.51.1 and Vetur extension v0.30.3 and I work with .vue files.
I configured Vetur to be the default formatter for vue files:
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.pug": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"printWidth": 100,
"singleQuote": false,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"trailingComma": "all",
"vueIndentScriptAndStyle": false
}
},
but when I format a .vue like the following:
<template>
<v-row
justify="center"
align="center"
>
<v-col
cols="12"
sm="8"
md="10"
>
<v-card class="main_card">
<v-card-title class="headline text-center">
</v-card-title>
<v-card-text>
</v-card-text>
<v-card-actions />
</v-card>
</v-col>
</v-row>
</template>
<script>
export default {
"components": {
},
data () {
return {
test: "test"
};
}
};
</script>
<style lang="scss">
@import "~/assets/style/utils.scss";
.test {
border-radius: 50px;
background-repeat: no-repeat;
background-size: cover;
}
</style>
it gets formatted like this:
<template>
<v-row justify="center" align="center">
<v-col cols="12" sm="8" md="10">
<v-card class="main_card">
<v-card-title class="headline text-center"> </v-card-title>
<v-card-text> </v-card-text>
<v-card-actions />
</v-card>
</v-col>
</v-row>
</template>
<script>
export default {
components: {},
data() {
return {
test: "test",
};
},
};
</script>
<style lang="scss">
@import "~/assets/style/utils.scss";
.test {
border-radius: 50px;
background-repeat: no-repeat;
background-size: cover;
}
</style>
and it's totally fine for me that all the tags get formatted, but for the <template> port I want to keep the multiline for html attributes (even for 1 attribute):
<v-row
justify="center"
align="center"
>
<v-col
cols="12"
sm="8"
md="10"
>
How can I tell Vetur (or VSCodium) to do it?
Thanks