So I faced this problem recently in a Vue.js project where the html template is, well, html and lines tend to become longer and longer especially if you use bootstrap or tailwind or anything similar and your class attributes are just well, long. In this particular case, prettier was just not doing it’s job and was spliting code all over the place, on multiple lines.

I tried few things I found on stack overflow but none of them worked for me. I eventually ended up on prettier’s documentation page where they tell you to put your prettier config in package.json so I did that and it works. So here is how my prettier configs are looking like now:

    "prettier":{
        "arrowParens": "avoid",
        "bracketSpacing": true,
        "htmlWhitespaceSensitivity": "css",
        "insertPragma": false,
        "jsxBracketSameLine": false,
        "jsxSingleQuote": false,
        "printWidth": 140,
        "proseWrap": "preserve",
        "quoteProps": "as-needed",
        "requirePragma": false,
        "semi": true,
        "singleQuote": false,
        "tabWidth": 4,
        "trailingComma": "none",
        "useTabs": false,
        "vueIndentScriptAndStyle": false,
        "rangeStart": 0
      }

That’s it. Works for me. If you know a way to enable this globally shoot me a tweet at @mvpopuk