With each Visual Studio Code update, extensions can change. Some extensions may become built into the current release or stop being actively maintained. For whatever reason, it’s always good to try out new extensions and check old ones. Here are the Top 10 Visual Studio Code extensions 2022 that I use the most. Spoiler alert: Some of which are not the most popular.
The Command Palette
If you are new to Visual Studio Code you will interact with the editor. The command palette is an easy way to get things done without ever leaving your keyboard. You can access your files in your current workspace by using the key combination Ctrl + p (Windows/Linux) or Cmd + p (Mac). This removes the need for the sidebar to be open and gives you more working space.
To run utilities or extensions you use the key combination Ctrl + Shift + p (Window/Linux) or
Cmd + Shift + p (Mac). Although it can take a while to get used to I recommend practising and you will never have to reach for the mouse again.
Top Visual Studio Code Extensions 2022
If you find yourself creating folders and files by hand. You may find this super useful utility handy. You can summon the Command Palette and select fIle. This brings up options to create, duplicate, delete, move and create new files and folders.
Visit File Utils on the Visual Studio Marketplace
Visit Beautify on the Visual Studio Marketplace
CSS files can become long and complex. With CSS Navigation you can access your CSS definition from your HTML file. Simply right-click on the id or class from within your HTML file and you can peek or go to the definition in your CSS file(s). You can also search using the command palette. CSS Navigation also offers code completion for your classes.
Visit CSS Navigation on the Visual Studio Marketplace
Visit Code Runner on the Visual Studio Marketplace
GitLens is a no brainer if you are working with GitHub repositories. It has a wealth of options for both novice and advanced users. At the time of writing, there have been over 14 million downloads. You can do everything in the integrated sidebar or via the command palette that you can do on the terminal. The bonus is you never have to leave your VS Code editor. If you haven’t used Git because it can be daunting then try GitLens.
Visit GitLens on the Visual Studio Marketplace
Live Server (Five Server)
Five Server is a development server for HTML and server-side projects. I have recommended the alternative version of Live Server in the past. This is very similar except it has support for PHP built-in. Five server highlights the text you are currently editing in the browser as you edit in the editor. It also has support for express.js.
Visit Live Server on the Visual Studio Marketplace
If you use the Node Package Manager this handy utility checks and validates your current package.json. If you use the Node Package Manager this handy utility checks and validates package.json. It will warn you if the packages are defined but not installed and vice-versa. It will also warn you if you are using the incorrect version. NPM gathers all the commands to build, run etc which you can run from the command palette or via the sidebar. It takes the hassle out of typing out the commands in the terminal.
Visit NPM on the Visual Studio Marketplace
Manage all your projects and workspaces with ease. If you have lots of projects and you want to switch between them then install projects. Projects has plenty of options. You can set favourites, assign tags and colours to the footer of your projects. You can add custom groups where you can assign projects that are similar together. It autodetects git repositories, Visual Studio Code folders and workspaces. Projects have built-in support for the Diff folders extension.
Visit Projects on the Visual Studio Marketplace
If you write code you are likely to have todos that will need attending to later. Todo Tree searches through your project files and displays all your TODOS and FIXMES. This makes it easy to access and reduces the need to search through all your code. There are lots of configurable options available including highlighting and scanning individual workspaces.
Visit Todo Tree on the Visual Studio Marketplace
If you are running the same commands in the terminal then Command List is a useful utility to store them. You can store and execute your commands in the terminal. Commands can be global and available to all projects or only for the workspace you are currently in.
Visit Command List on the Visual Studio Marketplace
Visual Studio Code has become the free ultimate code editor. It has overtaken both Atom and Brackets in popularity. There is a comprehensive marketplace of extensions to use but these can be difficult to find. Do you have a favourite extension that is fantastic but not popular? If so please leave your recommendation in the comments section.