Prettier & Beautify

Prettier is an “opinionated code formatter.” I highly suggest using it. But Prettier doesn’t do all languages. Notably HTML. It’s great at JSX, and I’ve gotten really used to enjoying that. But then when I switch to WordPress site where I’m editing a .php file, or even a plain ol’ .html file… no Prettier.

For now, I was compelled to try an HTML prettification tool that’s been out in the wild and through the ringer. The VS Code plugin Beautify does it and has 6.5 million installs, so that seemed like a good bet. By using this plugin, that means you can configure it, rather than use VS Code’s internal version of it which is apparently non-configurable.

But The problem is…

The first time I tried this, I found that it made my Prettier stop working. That was unacceptable to me as I want Prettier to be the top priority formatter. I’m not sure if it was running both of them but placing Prettier last, if it was running Beautify on its own instead, or exactly what, but I couldn’t figure it out at the time.

The trick for me was to tell it to only care about certain file types!

In my settings.json:

“beautify.language”: {

“html”: [

“html”,

“php”,

],

“css”: [],

“js”: []

},

Now I can have Prettier doing all the languages it does, and fall back to Beautify for the HTML stuff that Prettier doesn’t do yet. So far so good.