[Article] List of VS Code extensions with descriptions

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.

The Must-Haves :sparkles:

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

  1. 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).

  2. 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.

  3. Bracket Pair Colorizer: this extension is most helpful for Javascript, but can be used with other languages. Bracket Pair Colorizer color-matches code and parentheses, and maintains a line between the opening and closing brackets to better keep track of where the code is and to ensure that you never get lost in bracket ■■■■. It’s really helpful in finding missing brackets.

  4. 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.

  5. 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

  1. 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.

  2. 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.

  3. ESLint: A linter is a program that analyzes your code for potential programmatic and stylistic errors. It is a static analysis tool that can spot errors before you debug, and can ensure that your code adheres to a specific style guide, which is especially important when multiple people are working on code together. Linting your code will help you ensure that you’re following the formatting requirements of your project or your employer. Think of it as a kind of spelling and grammar check for your source code. It’s especially useful to lint code in interpreted programming languages, such as Javascript, Python, HTML, and CSS. There are linters for each of those languages. We highly recommend installing a linter, and suggest starting with ESLint (Javascript). A quick search for programming language + lint will yield a linter for other programming languages (CSSLint, etc.).

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

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 html , haml , jade , slim , jsx , xml , xsl , css , scss , sass , less and stylus files, as well as any language that inherits from any of the above like handlebars and 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).

demonstration of Emmet

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).

For a little more on Emmet for HTML and CSS, check out this quick run through. If you find yourself in need of a cheat sheet to Emmet documentation, you can find one here.

Intellisense

Intellisense is a code completion tool. It automatically supports JavaScript, TypeScript, JSON, HTML, CSS, Less, and Sass. When you start typing a code item, VS Code will offer suggestions that you can use. Intellisense covers a few languages out of the box(Javascript, Typescript, HTML, JSON, CSS, Lisp, and SAS) but if you are using one that isn’t covered (like Python) you can search for “Python” in the extension marketplace and find the extension for Python that helps with Intellisense. Intellisense can show you what may be coming next in your code, and can autocomplete variables you make on the same page. See the screenshot below, from the 35:00 mark in the webinar:

demonstration of intellisense

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!

Auto Rename and Bracket Pair Colorizer are two I wish I’d known about before, these are going to save me so much grief! Thanks for this helpful resource.

3 Likes

I want to add the following extensions to the above list:

  • Code Runner - Lets you run code inside VS Code
  • Code Spell Checker - Spelling Checker for source code
  • GistPad - Manage and sharing code snippets using GitHub Gists
  • GitLens - Supercharge the Git capabilities built into VS Code
  • TabNine - AI-based autocomplete for all languages
2 Likes