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.

Answer 2

It depends on your IDE settings but as documentation states, you should have a config file where you should look for the html.format.wrapLineLength property and apply the line length value which satisfy you. This will prevent Prettier to break your lines until assigned line length to the property is reached. This will only apply for HTML. For overall purposes you should use prettier.printWidth property which

Fit code within this line limit

Mind that tabulation / indention spaces also count in the line length.

Unfortunately when code line exceed the above numbers it will be spited to multi-lines, each property per line. So far I did not find solution to just wrap to extra line, without spiting to multi.

UPDATE Mentioned and desired by me behavior it is not affordable with Prettier, but the line length trick still can do the job ... partially.

Answer 3

I know this topic is old but maybe others still have this issue. In the Prettier setting you can adjust the width of the Print Width. 120 width does the job for me.

Answer 4

First check if you have a filename .prettierrc in the root. If no, create it and then put these values in it.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 3000,
  "bracketSpacing": true
}

Set printWidth to something large value and toggle wrapping text with your editor whenever you want; for example, in VS Code: Alt+Z .