51 Best Have VS Code Extensions to Help You Work Better [2024]

Advertisements

We all know VS Code is a great tool for developers, but did you know that VS Code extensions will also help you with your productivity?

VS Code plugins can range from simple to more complex and they are really easy to install. VS Code plugins help you work faster and more efficiently in VS Code.

In this blog post, we will go over 20 must-have VS Code plugins that will make your development life a lot easier!

Quick Run Down of What VS Code offers:

  • VS Code is a free and open-source code editor that runs on Windows, OSX, and Linux.
  • It has an extensible architecture with support for more than 20 programming languages
  • Themes can be customized to match your coding style or mood.
  • You can use the built-in Git control panel to commit changes and push them up to GitHub without ever leaving the app.
  • There’s also a built-in terminal, so you don’t have to switch between apps when working with multiple files at once.
  • To get started, head over to https://code.visualstudio.com/

Understanding VS Code Plugins

You can add languages, debuggers, and tools to your VS Code system with extensions. This helps your programming process. The rich expansion model of VS Code lets extension writers plug right into the VS Code user interface and add features by using the same APIs as VS Code.

Advertisements

VS Code Extensions For Everyone By Category

Best of the Best Extensions in Each Category

CategoryExtension(s)
ProductivityGitHub Copilot, Prettier, ESLint, GitLens, Settings Sync, Live Server, Auto Rename Tag, Better Comments, Bookmarks, Remote – SSH
Coding EfficiencySyntax Highlighter, TODO Highlight, Beautify, Prettier – Code formatter, YAML, Python, GO, PHP Intelephense, C/C++, Formatting Plugins for various languages, Debugger extensions for various languages
CollaborationGit Lens, GitHub Pull Requests and Issues, Git History, Git Graph, Settings Sync, Live Share, Duckly, Live Share MDNS
Language SupportExtensions for multiple programming languages (Java, C++, Python, Ruby, GO, etc.)
Data and Databasesvscode-database, Database Client, SQLTools, SQLite, DVC
UI/UX Enhancement – ThemesMaterial Theme, Dracula Official, One Dark Pro, Monokai Pro, Night Owl, Peacock
UI/UX Enhancement – Iconsvscode-icons, Material Icon Theme, City Lights Icons, Helium Icon Theme

VS Code Extensions for Productivity

Visual Studio Code (VSCode) offers a variety of extensions that can enhance your productivity. Here are some of the most popular ones:

GitHub Copilot : This AI-powered coding assistant helps you write code faster by suggesting whole lines or blocks of code as you type. It’s Paid. If you are looking for free version alternative then try Codeium

Prettier : An opinionated code formatter that enforces a consistent code style across your projects

ESLint : A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs

Advertisements

GitLens : Supercharges the Git capabilities built into VSCode, helping you visualize code authorship at a glance via Git blame annotations and code lens

Settings Sync : Synchronizes VSCode settings, snippets, themes, file icons, launch, keybindings, workspaces and extensions across multiple machines using GitHub Gist

Live Server : Launches a local development server with live reload feature for static & dynamic pages

Auto Rename Tag : Automatically renames paired HTML/XML tags, similar to how it’s done in Visual Studio IDE

Better Comments : Helps you create more human-friendly comments in your code

Bookmarks : Allows you to add bookmarks to your code, helping you quickly navigate and easily jump back and forth

Remote – SSH : Allows you to use any remote machine with a SSH server as your development environment.

Must-Have VS Code Extensions for Coding Efficiency 

Here are three must-have VS Code extensions one can use to achieve efficiency in coding:

Syntax Highlighting Extensions

Syntax highlighting colours and styles Visual Studio Code source code. It colours JavaScript keywords like if and for differently than strings, comments, and variable names.

There are two parts to syntax highlighting:

  • Transforming text into tokens
  • Mapping tokens to colours and styles using themes or user preferences

VS Code by default supports most of the well-known common programming languages syntax, you only need to install Syntax Highlighting plugins when VS Code do not support it.

Syntax Highlighter : Supports Languages – C++, C, Python, TypeScript, TypeScriptReact, JavaScript, Go, Rust, Php, Ruby, ShellScript, Bash, OCaml, Lua

TODO Highlight : Highlight TODO, FIXME and other annotations within your code.

syntax highlighting

To see all VS Code Syntax highlighting extensions, visit this page Syntax Highlighting Extensions for VS Code

Code Formatting Extensions

Code formatting extension allows you to work more with your code better.

You can format your code in VSCode by right-clicking on your source code and selecting “Format Document”. If you have multiple formatter extensions installed for a specific language, you can select “Format Document With…” and choose the appropriate formatter. You can also use keyboard shortcuts to format code: Shift + Alt + F for Windows users, Shift + Option + F for macOS users, and Ctrl + Shift + I for Linux users

Beautify: Works for Javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

Prettier – Code formatter: Code formatter using prettier

YAML : Format the file along with On type formatting auto-indent for array items

Advertisements

Python : Code Formatting, IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), refactoring, unit tests, and more.

GO : Support for saved snippets, formatting and code organization, and automatic organization of imports.

PHP Intelephense : Formats combined HTML/PHP/JS/CSS files

C/C++ : IntelliSense, debugging, and code browsing.

As there are so many languages and custom frameworks there are Plugins for each one which can be found here: Best Code Formatting Plugins

Debugging Plugins

VSCode’s debugging architecture allows extension authors to easily integrate existing debuggers into VSCode, while having a common user interface with all of them.

It supports features like debug configuration management, debug actions for starting/stopping and stepping, breakpoints, stack traces, navigating through complex data structures in views and hovers, variable values shown in hovers or inlined in the source, managing watch expressions, and a debug console for interactive evaluation with autocomplete

JavaScript (Node.js) : VSCode has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript

PhP Debug : The PHP Debug extension allows for debugging PHP applications from within VSCode. It leverages Xdebug, a PHP extension for providing debugging and profiling capabilities

Debugger for Java : It allows users to debug Java code using Visual Studio Code (VS Code).

Here’s a list of features: Launch/Attach, Breakpoints/Conditional Breakpoints/Logpoints, Exceptions, Pause & Continue, Step In/Out/Over, Variables, Callstacks, Threads, Debug console, Evaluation, Hot Code Replace

Python : The Python extension for VSCode provides rich support for the Python language, including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, unit tests, snippets, and more

C++ : The C/C++ extension adds language support for C/C++, including features such as IntelliSense and debugging

Go : The Go extension provides support for the Go language, including features like IntelliSense, code navigation, symbol search, bracket matching, snippets, and more. It also integrates with Delve, a debugger for the Go programming language

Ruby : The Ruby extension provides enhanced Ruby language and debugging support. It includes features like automatic Ruby environment detection with support for rvm, rbenv, chruby, and asdf, lint support via RuboCop, Standard, and Reek, and debugging support via the Debugging gem

PowerShell : The PowerShell extension provides rich PowerShell language support, including features like syntax highlighting, code snippets, IntelliSense, and more. It also includes a powerful PowerShell debugger

Essential VS Code Plugins for Collaboration 

With the right tools, coders can improve how much they get done and speed up the creation process. Here are some essential VS Code Extensions for collaboration:

Version Control Extensions 

A version control plugin is a must-have for any WordPress site, especially if more than one person is making changes or if you need a copy of the changes made in the past. Find out how the best WordPress version control plugins can help you run your site better.

Also, a version control plugin with a tracking system keeps track of all the changes and updates made to WordPress over time. This lets users see how a file changes as it goes through its different steps. The project keeps track of what different writers or volunteers do.

Git Lens : GitLens supercharges the Git capabilities built into VSCode. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

GitHub Pull Requests and Issues : (Official Github Extension) – This extension allows you to review and manage GitHub pull requests and issues in VSCode. You can checkout branches, validate pull requests, and even manage issues without leaving the editor

Git History : Git History allows you to view git log, file history, compare branches or commits inside VSCode. It provides a clear and detailed view of the commit history and changes

Git Graph : This extension provides an interactive Git Graph for viewing the commit history and the relationships between branches, tags, and commits. It also includes features like viewing commit details and changes, creating and checking out branches, and more.

Settings Sync : Settings Sync allows you to synchronize your VSCode settings, snippets, themes, file icons, launch, keybindings, workspaces and extensions across multiple machines using GitHub Gist.

Live Share Extensions

Visual Studio Code (VSCode) offers a feature called Live Share, which is not just a single extension but a suite of extensions that enable real-time collaborative development with others. Here are the main extensions related to Live Share:

Live Share : The core Live Share extension allows you to share your workspace with team members, including sharing code, terminals, local servers, and debugging sessions. It provides an interactive and collaborative environment where multiple developers can work on the same project simultaneously

Duckly : Video chat with real-time collaborative code sharing for remote teams. Code together with any IDEs.

Live Share MDNS : It’s a basic utility where if you want to use the live share with the people who are in the same Network, so you don’t have to create, copy and share the links. They can find your live share instantly if you are connected on the same network.

VS Code Plugins for Language Support

VSCode has almost all the official extensions for all the programming languages in the store which can be found here on the dedicated page for programming language extensions for VS Code

Most of the extensions have been covered earlier in the post already for Java, C++, Python, Ruby, GO etc.

VS Code Extensions to work with Data and Databases

There are extensions available for Visual Studio Code that allow you to stay in the IDE while working with databases.

vscode-database : This extension supports MySQL, PostgreSQL, and other SQL databases. It allows you to execute SQL queries and view the results within VSCode. It also detects installed databases available on your system path

Database Client : This extension is a database manager for various databases including MySQL/MariaDB, PostgreSQL, SQLite, Redis, ElasticSearch, and more. It provides features such as executing SQL queries, viewing table data, and managing database structures. Note that some features may require payment to unlock

SQLTools : SQLTools is an extension that provides a rich interface for managing databases, writing and executing queries, and exploring database structures. It supports a variety of databases including MySQL, PostgreSQL, SQLite, and others.

SQLite : The SQLite extension allows you to explore and query SQLite databases directly within VSCode

DVC : Data Version Control (DVC) is an extension that helps you version control large data files, models, and experiments, which is useful for machine learning projects

overview

VS Code Extensions for UI/UX Enhancement 

Many available extensions for Visual Studio Code allow you to change the editor’s colours and themes to something more to your liking.

Theme Extensions 

These extensions let you expand your site’s functionality by adding new features. Themes, meanwhile, allow you to change how your web pages look.

Material Theme : This is one of the most popular themes for VSCode. It offers a variety of color schemes and custom settings, providing a pleasing and comfortable interface for coding

Dracula Official : This is a dark theme that’s easy on the eyes and available across many platforms. It’s a great option for those who prefer darker themes

One Dark Pro : This theme is based on Atom’s default One Dark theme. It’s one of the most installed themes for VSCode and offers a clean and elegant look

Monokai Pro : Monokai Pro is a color scheme and customized user interface theme for code editors. It’s designed with a focus on the easy-on-the-eyes color palette and minimal distracting effects

Night Owl : This theme is designed with a focus on people who like to code late into the night. It offers a darker color palette that’s easy on the eyes

Peacock : Peacock subtly changes the workspace color of your workspace. Ideal when you have multiple VSCode instances and you want to quickly identify which project you are working on

Icon Extensions

vscode-icons: This extension provides a lot of icons for different file types, making it easier to navigate through your project’s files. It also allows you to bring your own custom icons and supports project auto-detection for certain frameworks like Angular

Material Icon Theme : This extension provides a set of Material Design icons for VSCode. It offers several customization options, including the ability to choose folder icons, file icons, and color themes

City Lights Icons : This extension is part of the City Lights suite of themes for VSCode. It provides a beautiful set of icons that match the City Lights color palette

Helium Icon Theme : This extension provides a vibrant and comprehensive icon theme that’s designed to be easy on the eyes, making your coding environment more enjoyable

Best VS Code Extensions:

Here is a summary of everything we have discussed in short:

CategoryExtension NameDescription
ProductivityGitHub CopilotAI-powered coding assistant. Paid.
ProductivityCodeiumFree alternative to GitHub Copilot.
ProductivityPrettierOpinionated code formatter.
ProductivityESLintTool for identifying and reporting on patterns in ECMAScript/JavaScript code.
ProductivityGitLensEnhances Git capabilities in VSCode.
ProductivitySettings SyncSynchronizes VSCode settings across multiple machines using GitHub Gist.
ProductivityLive ServerLaunches a local development server with live reload feature.
ProductivityAuto Rename TagAutomatically renames paired HTML/XML tags.
ProductivityBetter CommentsHelps create more human-friendly comments in code.
ProductivityBookmarksAllows adding bookmarks to code for quick navigation.
ProductivityRemote – SSHAllows using any remote machine with a SSH server as a development environment.
Coding EfficiencySyntax HighlighterSupports syntax highlighting for multiple languages.
Coding EfficiencyTODO HighlightHighlights TODO, FIXME and other annotations within code.
Code FormattingBeautifyWorks for Javascript, JSON, CSS, Sass, and HTML in VSCode.
Code FormattingPrettier – Code formatterCode formatter using prettier.
Code FormattingYAMLFormats the file along with On type formatting auto-indent for array items.
Code FormattingPythonProvides Code Formatting, IntelliSense (Pylance), Linting, Debugging, refactoring, unit tests, and more for Python.
Code FormattingGOSupports saved snippets, formatting and code organization, and automatic organization of imports for Go.
Code FormattingPHP IntelephenseFormats combined HTML/PHP/JS/CSS files.
Code FormattingC/C++Provides IntelliSense, debugging, and code browsing for C/C++.
DebuggingJavaScript (Node.js)Provides built-in debugging support for the Node.js runtime.
DebuggingPhP DebugAllows for debugging PHP applications from within VSCode.
DebuggingDebugger for JavaAllows users to debug Java code using VSCode.
DebuggingPythonProvides rich support for the Python language, including debugging.
DebuggingC++Adds language support for C/C++, including debugging.
DebuggingGoProvides support for the Go language, including debugging.
DebuggingRubyProvides enhanced Ruby language and debugging support.
DebuggingPowerShellProvides rich PowerShell language support, including debugging.
CollaborationGit LensSupercharges the Git capabilities built into VSCode.
CollaborationGitHub Pull Requests and IssuesAllows to review and manage GitHub pull requests and issues in VSCode.
CollaborationGit HistoryAllows to view git log, file history, compare branches or commits inside VSCode.
CollaborationGit GraphProvides an interactive Git Graph for viewing the commit history and the relationships between branches, tags, and commits.
CollaborationSettings SyncAllows to synchronize VSCode settings across multiple machines using GitHub Gist.
CollaborationLive ShareAllows to share workspace with team members, including sharing code, terminals, local servers, and debugging sessions.
CollaborationDucklyProvides video chat with real-time collaborative code sharing for remote teams.
CollaborationLive Share MDNSAllows to use the live share with people in the same Network.
Data and Databasesvscode-databaseSupports MySQL, PostgreSQL, and other SQL databases.
Data and DatabasesDatabase ClientDatabase manager for various databases.
Data and DatabasesSQLToolsProvides a rich interface for managing databases, writing and executing queries, and exploring database structures.
Data and DatabasesSQLiteAllows to explore and query SQLite databases directly within VSCode.
Data and DatabasesDVCHelps to version control large data files, models, and experiments.
UI/UX EnhancementMaterial ThemeOne of the most popular themes for VSCode.
UI/UX EnhancementDracula OfficialA dark theme that’s easy on the eyes.
UI/UX EnhancementOne Dark ProTheme based on Atom’s default One Dark theme.
UI/UX EnhancementMonokai ProA color scheme and customized user interface theme for code editors.
UI/UX EnhancementNight OwlTheme designed for people who like to code late into the night.
UI/UX EnhancementPeacockSubtly changes the workspace color of your workspace.
UI/UX Enhancementvscode-iconsProvides a lot of icons for different file types.
UI/UX EnhancementMaterial Icon ThemeProvides a set of Material Design icons for VSCode.
UI/UX EnhancementCity Lights IconsProvides a beautiful set of icons that match the City Lights color palette.
UI/UX EnhancementHelium Icon ThemeProvides a vibrant and comprehensive icon theme.
Share on:

More to Read from Internet, Software, Windows

Let's Be Friends 🤘