Prettier has become the predominant code formatting tool used by web designers and developers. It has a nice set of defaults that work great for CSS, JavaScript, and even HTML (and most of the preprocessor we support, like SCSS).
We've long offered one-click access to formatting, and now those are powered by Prettier.
Here's an extreme example (video) of minimized CSS:
Your CSS is more likely to have minor indentation weirdnesses and such, but hey this thing can whip anything into shape. As long as it's valid, that is, which is an important point: if your code has syntax errors, we won't format it. It's just a silent failure for now, we'll have to see if we can improve the error messaging there, but if your code doesn't format after selecting the option, that's probably why.
Here's some vanilla JavaScript:
And here's some HTML:
Note the formatting is a little unusual for some folks, with attributes on their own line and force-truncated line lengths. That's valid HTML and how it's commonly seen in JSX.
The post Prettier appeared first on CodePen Blog.