How to force prettier html formatting to format tags in one line?

Question

I use prettier in my VSC, so how to force prettier HTML formatting to format tags in one line, not multiple lines?

I want to format something like this all in one line

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

Does exist any config for prettier HTML formatter?

Answer 1

Prettier has the option printWidth. If you set that option to a high number, it will break fewer lines.

In your .prettierrc.json file, you can override this option for your HTML files:

{
  // Other options...
  "overrides": [
    {
      // change .html with .vue if you are using Vue files instead of HTML
      "files": "src/**/*.html", 
      "options": {
        "printWidth": 140
      }
    }
  ]
}

Is not recommendable to use a line-lenght higher than 140. Prettier is opitionated, so it should be used without too many customizations.