Keep attributes in multi lines when formantting <template> with Vetur

412 Views Asked by At

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

0

There are 0 best solutions below