Home

 › 

Reviews

 › 

The 12 Best VS Code Extensions Today 

Two programmers doing high five hand gesture at desk with multiple screens running code celebrating successful algorithm. Software developers colleagues enjoying teamwork results in it agency

The 12 Best VS Code Extensions Today 

Key Points

  • Visual Studio Code (VS Code) is a popular text editor among programmers and developers, with 73% of developers using it according to a survey.
  • VS Code’s key feature is its extensions marketplace, which offers a wide range of tools and features to customize and enhance the coding experience.
  • Some popular AI coding tools for VS Code include GitHub Copilot, Amazon CodeWhisperer, and Safurai, each offering unique features and language support.
  • Other productivity-focused extensions for VS Code include Console Ninja for JavaScript debugging, Excel Viewer for viewing and editing CSV and Excel files, and Git Graph for visualizing and managing Git repositories.
  • VS Code also offers language support extensions for popular programming languages like Python, C/C++, and R.

If you’re a programmer or developer, chances are you use Visual Studio Code (commonly called VS Code). According to the Stack Overflow 2023 developer survey, 73% of developers use VS Code. It’s this popular thanks to its customizability and near-limitless features.

This description sounds hyperbolic, but there is one key feature to thank for this personalization: extensions. In today’s article, we are going to explore a few of the most popular and handy extensions you should have on your radar if you want to be a productive coder. Let’s dive in!

What Is VS Code?

VS Code is, front and center, a text editor. Out of the box, it has a few key features, such as code completion for JavaScript and TypeScript, debugging and console tools, Source Control Management, and tons of text navigation and editing tools. The real power of VS Code is that for any features you might think are missing, it is likely someone had added them.

Visual Studio Code’s lifeblood is its extensions marketplace. From code completion tools for almost any coding language and natural language conversion packs to AI assistance tools and automatic code formatting, VS Code has almost any tool you can think of. It’s so popular because whether you want something lightweight and simple or something closer to a full IDE, VS Code can provide. 

The Best VS Code Extensions Categorized for You

Now that we’re more excited about using VS Code, let us jump into what we can add to streamline your workflow. Since there are thousands of extensions, they won’t be ranked in a particular order. Instead, these will be grouped into different sections based on the function they serve.

We’ll also be skipping over language extension packs, such as adding support for international languages or a programming language not natively supported by VS Code. The focus of this article will be on productivity tools and support for additional programming languages rather than base support extensions. 

How to Install Extensions in VS Code

Before we go any further, let’s recap how to install extensions. It is a fairly straightforward process, and the steps will look similar for many extensions. Start by opening VS Code. Look for this icon along the left-hand side of your window:

install VS Code extensions
Installing VS Code extensions starts in the extension marketplace.

From here, you can search for any extension you want. To install, just hit the blue ‘install’ button.

install VS Code extensions
You can search for VS Code extensions or select popular ones from the list.

Best Picks for AI Tools

Whether you’re a fan of AI or not, it’s impossible to ignore how big of an influence it is right now. AI coding tools promise to think as fast as you and intelligently create the code you already intended to write.

Most of these tools make use of a model more tailored to coding than your standard GPT release and are tuned to support several different languages. These models are trained to understand what your language of choice is expecting. As a result, they offer relevant suggestions to reduce boilerplate and allow you to focus on problem-solving.

GitHub Copilot

GitHub copilot
GitHub Copilot is a popular AI pair programming extension.

You can’t mention AI coding assistance without mentioning Copilot. GitHub was one of the first companies to offer AI as a service for coding, and it’s unsurprising why. Parent company Microsoft showed huge interest in AI projects even before the concepts became mainstream. 

Github Copilot is a premium extension, so it requires a subscription before it’ll work. At $10 per month as of this writing, it is not a bad deal by any means — perhaps the extra fee will keep you motivated to keep using it and reaping the benefits. Once subscribed, Copilot works as an AI pair programmer.

The exact way Copilot works has been changed over time, but as of writing, it will offer inline suggestions, usually of anywhere between a single line completed, to the frame of a function based on the function name. Previously, Copilot would also generate code based on a comment describing the functionality you’d like, but this feature has sadly been removed to a separate extension related to Copilot, Copilot Chat.

Copilot has been steadily tuned with user feedback in mind. Over time, it’s gone from feeling like an overexcited autocomplete to a metered suggestion. This doesn’t mean you can’t coax it into writing a lot of code, but it won’t be as aggressive in making suggestions unless you leave it the room to.

Copilot is updated regularly and has most of the code posted to Github to use as a reference. It also has language support for 12 languages and counting. If you’ve got the money to spend, Copilot has a strong base to stand on. 

Amazon CodeWhisperer

If the mention of “Microsoft” next to AI coding assistant has you excited, then you’ll be glad to hear that Amazon has a leg in the race next to them. Amazon has an alternative to Copilot named CodeWhisperer. CodeWhisperer is competitive with Copilot in every sense.

CodeWhisperer offers language support for 15 languages, variable suggestion size, attribution help, and vulnerability detection. The best part of all these features is that CodeWhisperer is free! The developers at AWS also have fine-tuned to work seamlessly with AWS.

If you find yourself using AWS in almost any language, CodeWhisperer can help you use best practices. Amazon’s wide range of AWS services can be daunting with no experience, but with CodeWhisperer to guide you, it becomes much easier. 

CodeWhisperer also responds exceptionally well to descriptions provided in the comments of your code. Unlike Copilot, this functionality is native to CodeWhisperer. You can describe what you want your code to do in some initial comments, and CodeWhisperer will suggest entire pages — and even help you attribute any code it may have borrowed from a licensed source. 

Lastly, CodeWhisperer is free! If you’re looking to try out AI assistance, CodeWhisperer is a great place to start. CodeWhisperer is a great alternative to Copilot in every way and looks to be expanding just as fast. 

AWS Code extension
AWS makes a suite of utilities all wrapped up in a single extension: the AWS Toolkit.

Safurai

A relatively new player in the AI Assistance scene, Safurai offers a unique assistance experience. Rather than offering inline suggestions, Safurai is more like having GPT in a second window. This extension focuses on prompts and conversation, so you’re more having a conversation than coding in parallel with it. 

Don’t let the lack of inline suggestions take away from the many other features that Safurai has. This extension focuses on achieving specific tasks, and only when requested. 

Safurai promises to be a transparent and secure AI solution. They claim to not store any data and use ethical synthetic data to train their models. They also allow you to include your codebase to generate training data for better suggestions.

The features offered here focus on targeted prompting over selections of code or generating code a section at a time. If you’re hesitant about becoming too reliant on AI, this is a great extension to check out.

Best Picks for Productivity

Sometimes, all you need to stay in the zone while you’re working is a little assistance. These extensions are all focused on keeping your work clear, concise, and easy to edit. Some extensions may be a bit language-specific, but there’s almost guaranteed to be an alternative available. 

Console Ninja

For the 64% of developers that use Javascript, Console Ninja is a must. Logging results to the console is very useful when debugging, but it can be a bit messy. Console Ninja displays your results in line with each log statement and even allows you to see results on hover. 

It’s hard to imagine without seeing it, but Console Ninja is the perfect debugging tool. Rather than having to jump between editing and scrolling around your console to get an idea of what’s happening in your code, you can view it all directly as it’s compiled. 

Console Ninja also works without any setup or configuration process — simply add it to your editor. If you use JavaScript in any capacity, this free extension is a great addition.

Console Ninja
Console Ninja is a powerful extension with a ton of useful debugging features.

Excel Viewer

CSV files are extremely useful for managing and transferring large data sets, but viewing them without a proprietary program is a pain. Excel Viewer is an extension that’s extremely self-descriptive. 

If you have a CSV or Excel file, you can now view them directly in the editor as they’re meant to be viewed. The other major benefit of this, is you can also edit these files directly in this view as well, while retaining correct formatting. 

This extension is also very configurable, so no matter what formatting you have, it will be able to accurately view and display your data. This is also open source and is regularly updated, so expect this extension to age well.

Git Graph

Git is an amazing tool, but tracking branches in a larger repository can be confusing. Rather than paying for a premium tool to help with management, Git Graph is a free tool that allows users to visualize their repository tree. 

With this extension, you can see exactly where your branches are in relation to each other, and even perform git actions directly from the graphical view. This extension also offers a surprisingly deep capability compared to its initial view. You can enjoy extensive git management and comparison tools with just a few hotkeys.

Git graph
Git Graph is a helpful extension for visualizing your Git activity. You can access it from the toolbar at the bottom of your VS Code window.

Multiple Cursor Case Preserve

Refactoring and renaming can be a hassle. Sometimes, the amazingly descriptive naming scheme you started with becomes muddy as you work. If you’re using multiple instances of camel case, Pascal case, or any other similar naming scheme, then refactoring can take hours in the worst scenarios. 

Multiple Cursor Case Preserve is simple in concept. If you select multiple instances of the same word, but in different cases, you can edit the content while retaining the original convention. This isn’t an extension you’ll use all the time, but when you need it you’ll be glad to have installed it.

Material Icon Theme

You may not think a customization pack could add to your productivity significantly, but Material Icon Theme is more than just theming. This icon theme pack makes your file explorer in VS Code a lot more navigable. For almost any framework or file type, there is a descriptive icon. 

Framework-specific files will already be marked with that framework logo and common folder names will get custom representative icons. You’ll also have the ability to add custom icons if you have internal files you’d like to separate. 

Prettier

Maintaining correct formatting isn’t the most complicated task, but it’s something that can get in the way of doing real work. Prettier takes this work out of your hands. This extension targets JavaScript and its frameworks, but Prettier also offers formatting for CSS, HTML, JSON, and several other file types. 

Prettier also allows configuration per project, meaning that everyone who is on the project can share settings. You can configure this extension for any new file type if you have the time, and it has extensive configuration options.

Live Server

As someone who works on a lot of static sites, this is one of my most often-used extensions. Editing a site becomes frustrating when you have to recompile or run a command to check changes without a framework with live editing support. Live Server adds this to any html file you’d like to run.

This extension is great for people trying to make a static site and even has a further extension for dynamic pages. Automatic reloading becomes instant, every time you save. Keep your site open in one tab, and VS Code open in another, and the site will reload every time you hit Command + S or CTRL + S. Your workflow will speed up noticeably, especially if you are a front-end designer making small adjustments and changes often. 

VS Code extensions - Live Server
Live Server is a helpful extension for viewing changes in your sites as you make them.

How to Find Language Support Extensions

An important part of using VS Code is making sure you can code the way you want to. This means in any language. If you’re not a fan of JavaScript, Microsoft offers language support extensions for most major languages. Framework-specific extensions also exist and are usually available directly from the makers of your chosen framework.

These exist for anything from SQL Frameworks to JS Frameworks and almost anything along your tech stack. When looking, always prioritize official support — but feel free to follow the crowd if there is a third-party extension with hundreds of thousands to millions of installations. 

Python Language Support

This extension includes all of the default functionality that VS Code offers for JavaScript tuned to work with Python. Produced by Microsoft, this allows you to select your Python interpreter, use Intellisense, and have basic formatting settings. Run and debug your Python Code directly in the editor. 

C/C++ Language Support

Just like the Python extension, this is another Mircosoft package that adds language support. Expect all the previously mentioned features, as well as some themes, to change the look of your editor to match.

R Language Support

If you’re working in data science, you will undoubtedly come across the R programming language. Once again, VS Code does not support R right out of the box, but you can quickly find an extension for it. Downloading the R extension will let you create a data science environment and work with complex data sets in a jiffy.

VS Code extensions - R
VS Code extensions are valuable for letting you use different languages, such as this extension for working with R code.

Other Extensions to Look Out For

If you use cloud tools like AWS or application managers like Docker, then there is an extension out there. Look specifically for tools you use in your tech stack, and you’ll find an extension to benefit your workflow.

VS Code, at its core, is a text editor, but it was made to fit your needs. You can look at a hundred different developers and see a hundred different-looking programs. Colors, fonts, and editor tools are all yours to choose from. Play around with different extensions in the marketplace — if you don’t like something or don’t find it useful, you can always uninstall it.

Frequently Asked Questions

What is the most popular extension for VS Code?

The most downloaded extension on VS Code is the Python language support. But you will also see extensions like Live Server, GitHub Copilot, and other programming language extensions getting a lot of downloads, too.

What is the pretty extension for VS Code?

You’re likely referring to the ‘Prettier’ extension. This is an extension to automatically format your code depending on the file type and formatting rules set.

What is the best color extension in VS Code?

If you’re looking for a color change for your editor, then consider when and how you use VS Code. Consider themes that are good for eye strain or fonts good for dyslexia. Sort these options by your preferences for light/dark mode or a specific color.

What is the best formatter extension for VS Code?

This depends on your language. Some language support extensions include formatting to match that language syntax, but these will likely be modifiable.

Is VS Code still the best?

It’s hard to rank one editor as the best, but VS Code is the most versatile. If you’re using multiple languages, you might find it difficult to find an IDE as flexible as VS Code; however, if you’re using one language consider an IDE for that language.

How do you make VS Code look pretty?

Start with theming and your font and then adjust to what looks best for you. It’s possible to create your own theme or adjust one that’s close enough. Find these settings under ‘Preferences.’

To top