Prettier & Beautify
Aww, what a cute blog post title, right?
Prettier is an “opinionated code formatter.” I highly suggest using it. They have a document going deeper into the reasons, but their three marketing bullet points say it best:
- You press save and code is formatted
- No need to discuss style in code review
- Saves you time and energy
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 a Rails .erb template or a WordPress site where I’m editing a .php file, or even a plain ol’ .html file… no Prettier.
They have a development branch for it, but I haven’t tried that yet. 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.
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", "erb"],
"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.
The post Prettier & Beautify appeared first on CSS-Tricks.
