Write Code Faster using Visual Studio Code & Error Lens

If you’re in a professional role where you’re writing lots of code, it pays to write better code, faster. Following onto that, the better your tool-chain is, the faster you can write code. You generally expect your tools to provide feedback as quickly as possible, so that you can fix errors ⚠, structure your code more logically, and resolve performance ⏱ issues.

Microsoft’s Visual Studio Code is a popular and widely used tool for writing code. However, there are lots of development tools that don’t make it into the core product. Instead, there’s a rich ecosystem of third-party extensions that build on top of the VSCode core and provide valuable workflow enhancements.

The VSCode Problems View

One of the core features that works nicely in VSCode is the Problems view. For most programming languages, a static analysis tool will evaluate your project for issues, and report them into the Problems view. These static analysis tools are also known as code linters. This feature works well in PowerShell, JavaScript, Python, and many other languages.

The VSCode Problems view helps you write code faster by consolidating errors and warnings

Although I don’t have anything negative to say about the Problems view, there is something missing. Why is that, you ask?

In order to see what’s in the Problems view, you have to navigate over to that view. Or, you can use keyboard shortcuts to move forward and backward through the list of code problems (F8 or SHIFT + F8, by default).

This isn’t a huge deal, but if you’re working on a single file, it would be nice to get more immediate feedback. After all, context switching is costly! Wouldn’t you agree?

Write Code Faster with Error Lens!

This is where the Error Lens extension comes to the rescue! Error Lens injects the Problems directly into the code editor view. That way, you don’t need to worry about switching contexts in order to see what’s wrong.

Here’s a screenshot of Error Lens in action, on a JavaScript file. Instead of having to navigate to the Problems view, I can see the error message right next to my code!

Write code faster with in-line error messages in JavaScript

Here’s another example, where I have a syntax problem in a PowerShell script.

Write code faster with in-line error messages in PowerShell

Other VSCode Extension Recommendations

In case you’re wondering what color theme I’m using, it’s the beautiful Nord theme from Arctic Ice Studio!

I highly recommend using Git Lens, which functions similarly to Error Lens. Git Lens shows you who made changes to a specific line, along with the commit message.

Another extension that I consider a favorite is called Code Runner. Code Runner makes it easy to invoke a script, in virtually any programming language. A simple keyboard ⌨ shortcut is mapped to this function by default (CTRL + SHIFT + N).

Do you have any extensions that you would recommend to the community? Leave a comment 💬 with your suggestions, and maybe I will feature one of them here!

Here are some other articles from my website that might interest you!