Fix for prettier splitting HTML tags in VSCode

🎉🎉🎉 ng on an Angular application can be a joyous experience, but when prettier starts splitting your HTML tags, it can quickly turn into a nightmare 😱. Fear not, for I have found a solution that will have you dancing 💃 in your chair with joy.

After trying a few different settings, it turned out that the print width was the key to fixing the tag splitting issue. By increasing the print width, prettier was able to keep the HTML tags on one line, just the way we want them.

So, without further ado, here are the settings that fixed the issue for me:

Create the prettier file:

Once you have created the file, enter the config from below:

{
  "tabWidth": 2,
  "useTabs": false,
  "maxInlineAttributesPerLine": 1,
  "htmlWhitespaceSensitivity": "strict",
  "printWidth": 600
}

Save the file. Now you can then test the settings. Open a HTML file and press Shift+ Alt+F you should see your code format adopt the new configuration 👍

With these settings in place, your HTML tags will remain intact, and your code will look as pretty as ever 🤩.

Don’t let pesky tag splitting ruin your Angular experience. Give these settings a try and enjoy a beautifully formatted codebase. Happy coding! 💻🚀