I'd say in the last couple of years, configuring code editors to run a code formatter when you save the file has become a standard. Thanks in no small part to Prettier I'm sure. We use (and love) Prettier on our own codebase as well along with tools like Rubocop (which also can/does auto-formatting) to keep our code formatted as we work.
We're happy to announce we're making this feature available as you work on CodePen as well!
You can flip it on/off anytime in your global user settings
Everyone has these settings:
But that's just a default, you can turn it on/off at the Pen Settings level too
This means if you like this feature only on some Pens, you can leave the global setting off and flip it on for those Pens. Or turn the global default on and flip it off for Pens you'd prefer not to.
This is under Pen Settings > Behavior:
It works like this when it's on
You either hit Command (Mac) / Control (PC) + S, or click/tap the Save button itself:
That's mostly Prettier at work there (which we just switched to somewhat recently), but also stuff like js-beautify for HTML as the HTML formatting is a little more chill than what Prettier does to HTML.
You might notice the editor temporarily goes into a read-only mode while it's formatting. This is just so when the formatting is complete it doesn't wipe out any changes you might have made otherwise.
Autosave does not affect this. When Autosave kicks on (if you have it on), it will still save on a timer, but it will not trigger formatting as it does. That's so it won't catch you off guard when you're in the middle of coding!
There is a keyboard command too
Command (Mac) / Control (PC) + Shift + F
That will run the formatting in a single editor on command.
You might see a modal when you log in letting you know about this
Hey, chances are a lot higher you're going to see that than see this.
We think it's neat how you can flip on the setting right there in the modal. We had good luck with that when we released Private by Default, so it's a thing now.
The post New Editor Setting: Format on Save appeared first on CodePen Blog.