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/
In this article
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.
VS Code Extensions For Everyone By Category
Best of the Best Extensions in Each Category
|GitHub Copilot, Prettier, ESLint, GitLens, Settings Sync, Live Server, Auto Rename Tag, Better Comments, Bookmarks, Remote – SSH
|Syntax Highlighter, TODO Highlight, Beautify, Prettier – Code formatter, YAML, Python, GO, PHP Intelephense, C/C++, Formatting Plugins for various languages, Debugger extensions for various languages
|Git Lens, GitHub Pull Requests and Issues, Git History, Git Graph, Settings Sync, Live Share, Duckly, Live Share MDNS
|Extensions for multiple programming languages (Java, C++, Python, Ruby, GO, etc.)
|Data and Databases
|vscode-database, Database Client, SQLTools, SQLite, DVC
|UI/UX Enhancement – Themes
|Material Theme, Dracula Official, One Dark Pro, Monokai Pro, Night Owl, Peacock
|UI/UX Enhancement – Icons
|vscode-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
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
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.
TODO Highlight : Highlight TODO, FIXME and other annotations within your code.
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
Prettier – Code formatter: Code formatter using prettier
YAML : Format the file along with On type formatting auto-indent for array items
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
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
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
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.
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
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:
|AI-powered coding assistant. Paid.
|Free alternative to GitHub Copilot.
|Opinionated code formatter.
|Enhances Git capabilities in VSCode.
|Synchronizes VSCode settings across multiple machines using GitHub Gist.
|Launches a local development server with live reload feature.
|Auto Rename Tag
|Automatically renames paired HTML/XML tags.
|Helps create more human-friendly comments in code.
|Allows adding bookmarks to code for quick navigation.
|Remote – SSH
|Allows using any remote machine with a SSH server as a development environment.
|Supports syntax highlighting for multiple languages.
|Highlights TODO, FIXME and other annotations within code.
|Prettier – Code formatter
|Code formatter using prettier.
|Formats the file along with On type formatting auto-indent for array items.
|Provides Code Formatting, IntelliSense (Pylance), Linting, Debugging, refactoring, unit tests, and more for Python.
|Supports saved snippets, formatting and code organization, and automatic organization of imports for Go.
|Formats combined HTML/PHP/JS/CSS files.
|Provides IntelliSense, debugging, and code browsing for C/C++.
|Provides built-in debugging support for the Node.js runtime.
|Allows for debugging PHP applications from within VSCode.
|Debugger for Java
|Allows users to debug Java code using VSCode.
|Provides rich support for the Python language, including debugging.
|Adds language support for C/C++, including debugging.
|Provides support for the Go language, including debugging.
|Provides enhanced Ruby language and debugging support.
|Provides rich PowerShell language support, including debugging.
|Supercharges the Git capabilities built into VSCode.
|GitHub Pull Requests and Issues
|Allows to review and manage GitHub pull requests and issues in VSCode.
|Allows to view git log, file history, compare branches or commits inside VSCode.
|Provides an interactive Git Graph for viewing the commit history and the relationships between branches, tags, and commits.
|Allows to synchronize VSCode settings across multiple machines using GitHub Gist.
|Allows to share workspace with team members, including sharing code, terminals, local servers, and debugging sessions.
|Provides video chat with real-time collaborative code sharing for remote teams.
|Live Share MDNS
|Allows to use the live share with people in the same Network.
|Data and Databases
|Supports MySQL, PostgreSQL, and other SQL databases.
|Data and Databases
|Database manager for various databases.
|Data and Databases
|Provides a rich interface for managing databases, writing and executing queries, and exploring database structures.
|Data and Databases
|Allows to explore and query SQLite databases directly within VSCode.
|Data and Databases
|Helps to version control large data files, models, and experiments.
|One of the most popular themes for VSCode.
|A dark theme that’s easy on the eyes.
|One Dark Pro
|Theme based on Atom’s default One Dark theme.
|A color scheme and customized user interface theme for code editors.
|Theme designed for people who like to code late into the night.
|Subtly changes the workspace color of your workspace.
|Provides a lot of icons for different file types.
|Material Icon Theme
|Provides a set of Material Design icons for VSCode.
|City Lights Icons
|Provides a beautiful set of icons that match the City Lights color palette.
|Helium Icon Theme
|Provides a vibrant and comprehensive icon theme.