CODEWITHSUNDEEP
visual-studio-codecode-formatting
k-code
k-code

Reputation: 104

How make Veture extension in VS code format .vue file so that html attributes are preserved on a single line?

I am using VS Code and Veture extension when writing .vue files.

Currently the formatter automatically places all html attributes on a new line. Like so

<v-item-group
            class="shopCategoriesImageGroup"
            multiple
            v-for="(item, index) in getProductCategoryIcons"
            :key="index"
>

I would like to keep them on one line. Desired result:

<v-item-group class="shopCategoriesImageGroup" multiple v-for="(item, index) in getProductCategoryIcons":key="index" >

From VS Code setting panel Veture has these formatting options:

Following the docs:

https://vuejs.github.io/vetur/formatting.html

I tried using prettier, configured html whitespacing, no luck there. These does not seem to be a configuration option that allows for html attribute preservation on a single line.

The desired effect appears only if I use none as a formatter. But that requires me to manually format the code.

Any idea what configuration options I should set so that the code formats on a single line automatically on save ?

Or should I try another extension ?

Upvotes: 2

Views: 1842

Answers (2)

DarckBlezzer
DarckBlezzer

Reputation: 4764

UPDATED

VETUR changed default html formatter to "prettier", it says in documentation...

// settings.json from vscode
"vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 120
    }
    // "prettyhtml": {
    //   "printWidth": "80",
    //   "wrapAttributes": true,
    //   "sortAttributes": true
    // }
  },

Upvotes: 1

k-code
k-code

Reputation: 104

Solved It !!!

You have to set the print width property to a bigger number. Like this:

"vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 250, // No line exceeds 250 characters
    }
  }

Found the information here: https://github.com/vuejs/vetur/issues/114 thanks to Phill's comment.

Upvotes: 1

Related Questions