How to disable attributes breaking in element tags with Prettier

Question

I generated a new Vue project using Vue CLI. For the linter option prompt, I chose Prettier. How do I disable the breaking of attributes to new lines? For instance:

This is my markup:

<v-navigation-drawer
  v-model="drawer"
  :clipped="$vuetify.breakpoint.lgAndUp"
  app
>
   ...
</v-navigation-drawer>

and my expected output is this:

<v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
   ...
</v-navigation-drawer>

I tried to create .prettierrc file, and added this configuration:

{
  "htmlWhitespaceSensitivity": "ignore"
}

but that didn't work for me, and the HTML still looks the same.

Answer 1

The Prettier option being enforced here is printWidth, which has a default of 80. The markup line in question is 82 characters long plus the length of the preceding tab space, which causes the linter/formatter to break up the line.

You could increase the printWidth to address the issue:

// .eslintrc.js
module.exports = {
  rules: {
    //...
    "prettier/prettier": [
      "warn",
      {
        printWidth: 180,  // default = 80
      }
    ]
  }
}