In this article, we’ll go through some extensions for VS Code, as well as a number of fancier ones, beyond that initial setup. You likely won’t end up using all of these, as some are better suited for certain languages and personal preferences than others, but you can always refer back to this list in the future.
Let’s get started!
Visual Studio Code (the “Code” is significant, do not confuse this with Visual Studio) is a feature-laden text editor that will allow you to write code on your own computer in a manner reminiscent of the center panel in your three-panel learning environment on Codecademy.com.
As you can see in this post by the VS Code team and this video, using effective shortcuts and increasing productivity is almost always what developers mean when they talk about “using VS Code like a pro.” Which makes sense! Who doesn’t want to get through their work more quickly and efficiently? Here, we’ll review extensions that will help you maximize your productivity in VS Code.
VS Code Extensions
There are a ton of extensions available in VS Code. And you can find all of them in the Marketplace.
Developers use a combination of extensions to make their code easier to write, easier to understand, more accurate, and/or to get through writing large blocks of code more quickly.
We’ll start off here by listing the extensions we think are most helpful to Codecademy learners, regardless of which coding language you are learning… beyond the official Codecademy theme that is.
To find each of these extensions, type the name of the extension into the search bar. We’ve listed each one with its searchable name. (For reference, this section starts at 22:30 in the Codecademy webinar I posted about last week).
The extensions that will keep you organized
Auto Rename Tag: this extension helps you avoid typos or accidentally lose your place. If you change a div name, Auto Rename Tag will automatically change the other end (meaning, if you change the opening, it will automatically change the closing, or vice versa).
Auto Close Tag: as you might guess, it closes your brackets for you. If you’re using Emmet (more on that below) you may not need Auto Close Tag, but if you aren’t, it’s a must.
Indent-rainbow: if you’re not a fan of the whitespace indicator setting mentioned above, this is the extension for you. It creates color-coded rainbow bars to help you line up your code and stay organized. This may be hard to visualize - you’ll find it at 25:16 in the Codecademy webinar.
Bookmarks: speaking of staying organized, this is an extremely handy extension that places small blue bookmarks in the margins of your file and adds a small panel right below your file browser which lists all active bookmarks in the current project. You can then easily switch between places in the file and/or leave reminders for yourself to go back to certain snippets of code. Super useful!
The extensions that will make it easier for others to read your code
Prettier: as the name implies, it makes your code look prettier by formatting it properly. Prettier code is more readable by others. This is very important. When you’re learning, you’re often focused on making sure the code works. In the outside world, you’re usually writing code for others, so having prettier code can give you a real edge in a job interview or in a work presentation, or when you’re collaborating with your team. During the learning process, pay close attention to what Prettier does with your code. You can learn a lot about proper formatting by following along with Prettier instead of just letting it do the work for you.
Beautify: Since Prettier does not work for all coding languages (the biggest one being HTML), Beautify is another good plugin to have. This guide will show you how to install it and adjust your settings so that Beautify doesn’t interfere with your Prettier settings.
For a visual walk through of the configuration of these extensions, check out this Wes Bos video on Prettier + ESLint in VS Code.
Emmet and Intellisense
Emmet and Intellisense are not extensions, per se, as they are both baked into VS Code. (Please review the links to each program for the VS Code user guides). We’re highlighting them here because both can be enormously helpful if you understand the key features of each one.
Emmet abbreviations and shortcuts speed up your code writing process. It kind of looks like autocomplete for code in that it expands snippets for you. Emmet abbreviation and snippet expansions are enabled by default in
stylus files, as well as any language that inherits from any of the above like
php . We highly recommend reviewing the VS Code section of this site for more info on and visuals of configuring Emmet.
For example, Emmet is especially helpful when you’re doing front end work, and can save you a lot of time with its shortcuts to boilerplate language. The screenshot below has an example of Emmet’s shortcut to boilerplate on HTML websites. (P.S. you can also use this HTML Boilerplate extension).
As you can see from the screenshot, the Emmet section of the Codecademy webinar starts around 28:10. Since this may be easier to understand if you can see it, we do suggest checking out this part of the webinar (especially the bit about multicursor functions at the end).
As with Prettier, above, use Intellisense wisely. Pay attention to what it suggests and why, and how often you select certain options. It’s a great tool, but don’t overly rely on it at the expense of your learning.
A special thank you to Codecademy Product Manager, @oduffy, for compiling these resources and drafting this article!