Getting rid of VSCode's attribute wrapping in HTML files
How to tell VSCode to stop inserting newlines into your code just because it wants to wrap your HTML attributes

If you've used VSCode to edit HTML files, you may have noticed that it can, when formatting your code, annoyingly and somewhat arbitrarily insert newlines into your code to wrap your lines once they reach a certain length. I'm not a fan of this feature, and wanted to turn it off, but it wasn't immediately apparent what was causing the issue.

After a bit of digging, I found that it was due to the html.format.wrapAttributes setting in VSCode. The default value for wrapAttributes is auto, which instructs VSCode to wrap attributes when a certain line length is exceeded. The line length in this case is set by the html.format.wrapLineLength setting. So, to turn off this feature, you just need to change that wrapLineLength setting. I've found that setting it to 0 works well.

So, in short, if you want to turn off VSCode's HTML attribute wrapping, just go to your settings.json and add:

"html.format.wrapLineLength": 0

I hope you found this blog post helpful.

Posted by Matthew King on 18 December 2020
Permission is granted to use all code snippets under CC BY-SA 3.0 (just like StackOverflow), or the MIT license - your choice!
If you enjoyed this post, and you want to show your appreciation, you can buy me a beverage on Ko-fi or Stripe