A prettier prettier (for JSX)
After using prettier to format our javascript codebase for some time now, I must say I am deeply in love. A “gofmt for javascript” it gives you the ability to forget about code style and focus on code content, as it reformats while you’re writing — which is hugely liberating. It however has a flaw — its JSX formatting. Tl; dr; I forked the project specifically to provide an alternative syntax which is well, prettier.
So what is the issue? Imagine you have a lot of attributes for a single HTML tag, like this:
From years of reading bad HTML, I’ve come to have a deep uncontrollable desire to reformat that code immediately. Like OCD. I can’t help myself. Well now with prettier I will never need to do so again, as it will automatically make it all better! Right now there are two ways that this happy development can go down:
Well … I’m not so sure about this. My fingers are still itching, something is still not right. And apparently there is a widespread finger twitching about this at Facebook as well. And I know why that is — those to ways of doing it have some objective issues.
In the first one the attributes and the child of the tag blend together, making it harder to read. Second option is a bit better, readability-wise, but if you have a lot of nested tags with attributes it gets out of hand quickly, with all the attributes and children at the same indentation level. Also It wastes a lot of vertical space, as there are now many lines with a single > in them.
And now my fingers, twitch no more, you can relax as I have a (third) way:
Now children and attributes are clearly separated, no vertical space is wasted, it works well for multiple levels of nesting and most importantly, it’s now pretty.
Since actions are better than words, I’ve made a fork of prettier in order to test this idea in our code. So far it has been great.
Though there is another teeny-tiny improvement that this fork has. I know, I know don’t be mad. It’s worth it. At the moment prettier will start to break tags into multiline when the length of the line exceeds the set limit (--print-width) which can end up with significant attributes being stranded at the end of the line:
Now, you’ll never going to completely miss that right? Well even if that’s the case, it’s still strains a bit to have to make sure you’ve read the whole line and not missed anything important. I do like to make it easy on myself and future readers of my code (which is most likely myself again).
And so this prettier fork multilines tags whenever there are two or more attributes. With that change you no longer need to “pay attention” every time you see a long tag line, that somehow got just below the line limit, and removes the perverse incentive to make your attribute names shorter just so you fit in that magic number, which might vary between projects.
There is a discussion with the prettier team about this, and I do support their decision to not include an option for it. Too many options are really not a good thing and it’s better to have one consistent style. Though this particular style has some objective merits going for it, and hopefully can be more widely adopted.
This idea has been suggested to me by Haralan Dobrev way back in my PHP days and so it works better with 4 spaces per indent, as is the standard for PHP not the chosen default of 2 for prettier. And I think having 4 spaces is a better default specifically for HTML (and JSX), but that’s a whole different discussion.
