The Best VS Code Extensions (according to me)
As web developers, we’re required to use innumerable tools throughout the day, picking up this hammer or that chisel to write better code everyday. But luckily for us, our tools are a lot more sophisticated than the run of the mill hand tools.
One of the things I love most about building software is the ability to work on technology as advanced as integrated development environments (IDEs, for short). To be sure, Microsoft’s VS Code is one of the best tools in the space.
If this sounds like it’s going to be a free ad for Microsoft’s Visual Studio Code, that’s because it is! And it’s not like they need my endorsement; a recent Stack Overflow survey revealed that VS Code is the most-used development environment by professional software engineers!
Although it’s a seemingly simple text editing program, modern IDEs like VS Code are optimized to best fit each developer’s needs. This is extremely powerful. As software engineers, we know that our code needs to be flexible. By following design patterns and writing more flexible code, we make our code more usable in the long run, which leads to less developer maintenance and ultimately the enhanced productivity we desired by building that software in the first place. What I find most fascinating about VS Code is that it lets you make your text editor itself flexible, allowing you to customize your programming experience.
Extensions
Nothing allows you to customize your development experience quite like VS Code’s extensions. Put simply, VS Code’s extensions library allows you to add languages, debuggers, and innumerable other tools to make your developer experience unique to your needs. There are far too many extensions for you to become skilled with; Microsoft even has an extension API to allow users to create their own extensions! Suffice it to say, there are many ways you can make your developer experience much more enjoyable with VS Code, and I’m excited to show you some of my favorites.
Just to make sure we keep you up to speed, to visit VS Code’s Extension Marketplace (for Mac users), you can type Shift + Command + X, or you can click on this icon in the sidebar:
For the remainder of this blog post, I will be reviewing some of my most-relied upon VS Code extensions. Please note: this is a very in-my-humble-opinion-type of blog post. The following extensions work well for me, but might slow you down or even hinder your overall workflow. The important thing when customizing your development space is focusing on what works best for you. With that, let’s check out some extensions!
Prettier
I feel like I reference back to this book in every blog post, but if you haven’t yet read Bob Martin’s Clean Code you’re missing out. In one of the chapters Uncle Bob talks about formatting, and his basic point is this:
“Code formatting is about communication, and communication is the professional developer’s first order of business.”
Easier said than done. Anyone who has worked with code before knows how quickly your code formatting can get out of control. To use a contrived example, review the following code to see a truly abysmal inattention to formatting:
We can see that this code works, but good luck being able to read it. And as software developers, we know full well that these 20-ish lines are about as small as a program can get. As our programs get more complex, it will become more difficult for our team members to read what our code intends to accomplish, which will almost certainly slow us down.
Thankfully, tools like Prettier can vastly improve our code. Prettier is an “opinionated code formatter,” enabling you to use a consistent formatting style in the code that you write. By applying Prettier to the code above, we get something a little more readable:
Consistently indented lines and close attention to the vertical distance of relevant variables makes even this simple program much, much easier to read, and subsequently, maintain. The more you use Prettier, the more you come to rely on it. As with most VS Code extensions, Prettier is highly customizable in its own right, allowing you to take control over the rules you want to enforce. If I could only use one extension for the remainder of my web development career it would be Prettier.
VS Code Styled Components
As a self-professed JavaScript junkie, I love working with React. Working with components is where web development really clicked for me, and I love being part of the ever-growing React community.
One of my favorite parts of web development is the dopamine hit I get watching my computer change based on what I tell it to do. I know more than one developer who got involved in programming after learning how to change the html on their browser with the Chrome Developer Tools. As such, any tool that streamlines the process of showing me what I’m rendering to the screen will become a consistent tool in my tool belt. This is where VS Code Styled Components comes in.
Using template literals, styled-components allows you to write CSS code to style your components. To demonstrate, you can write the following code for your React component:
And the following will be rendered to your browser:
This is very powerful. By quickly giving your components some basic styling, you’re able to spend more time, well, designing the web. As some people in the space say, Web Design is design in the Web, and noting gets you working in web design quite as quickly as styled-components. What’s more, styled-components is compatible with both React and React Native, so you can use it for styling all of your React components.
Bracket Pair Colorizer
When first starting out as a web developer, you rarely get a sense for how dense and confusing your programs can get. If you’re, say, solving Leetcode problems, it’s fairly easy to follow the story your program is trying to tell in about 20 lines. However, people who have worked in complex systems know just how quickly things can get hard to follow. As every JavaScript developer knows all too well:
Thankfully, there are tools like the Bracket Pair Colorizer that can dramatically reduce the likelihood of your program crashing to its knees because of a bracket with no pair. Let’s consider our previous code snippet to find the most frequent item in an array. It’s not that much code, and VS Code already highlights two associated brackets when we’re paused on that line and column:
This is very useful, but what if we wanted additional clues as to which brackets were paired with the other brackets in our program? Using the Bracket Pair Colorizer, we can do just that. Implementing this tool, we get a much better idea of which brackets go with which, as can be demonstrated below:
I think we can agree that this second code snippet stands out quite a bit more than the previous example. Note that the Bracket Pair Colorizer also draws an illustrative line from one bracket to its partner. While this is helpful, what I really like about the Bracket Pair Colorizer is that it will grow with your programs, matching ever-more deeply nested brackets depending on the code that you write:
The Bracket Pair Colorizer will even highlight when an “orphaned” bracket sneaks into your program!
As you can see, the Bracket Pair Colorizer can be extremely helpful throughout your programs, and is easily customizable. It’s another one of those tools I truly cannot work without!
This list is by no means exhaustive, as there are more VS Code extensions than is probably useful. Like with any tool, my advice for working with a new extension is to focus on slowly integrating it into your workflow. Rely on it little by little, and you’ll be putting in the reps to more effectively use that tool. In a few weeks of writing code with that new extension, it’ll start to feel like second nature, and it’ll just become a natural part of your workflow.
More importantly, don’t rely on this blog alone to configure your extension setup. The absolute best part of working with extensions is the ability to mix and match your tools to fit your needs. To really belabor the tools metaphor, imagine if you could customize your hammer in real time, perhaps to better fit your hand or to adjust its curvature based on how you swing it, or maybe you just prefer a periwinkle handle to a red one. Using VS Code’s extensions is just such a custom hammer, giving you the ability to update your tools as you like it. Hopefully this has given you some insight into working more closely with VS Code.
