Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
A few days ago we released inline error messages for JS Hint. We liked using it so much, we decided to really dig in make preprocessor errors show the same way. This was a much bigger undertaking and we’ve been burning some serious midnight oil getting it out!
Rather than the abrasive errors we had before, which covered the entire preview area and only referenced the problem from a distance, errors now show right next to the line of code that caused them. A simple example:
Here’s a five-minute video showing you exactly how it works:
When an error is found, the the preview of your code doesn’t go away, it just stays in the state it was in before.
We think you’re going to love using this feature. I know I’ve been using it for a few days now and I wish my local text editors would give me feedback this good and immediate. Let us know what you think!