Top 10 Visual Studio Code Extensions 2022

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

File Utils

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

Beautify

I have featured this extension in previous extension recommendations on multiple code editors. I use this extension all the time in my projects. VS Code comes with a built-in code beautifier. This extension gives you more options on how you want to format your files. For example, you can include a .jsbeautifyrc file in your root folder. This gives you more control over tab length and formatting. Beautify has support for HTML, JavaScript, JSON, CSS and Sass and is accessible via the command palette.

Visit Beautify on the Visual Studio Marketplace

CSS Navigation

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

Code Runner

If you haven’t already guessed Code Runner enables you to run code snippets or files from within the If you haven’t already guessed Code Runner enables you to run code snippets or files. This can be an ultimate time-saver. Code Runner has support for many languages including Python, JavaScript, PHP, C/C++, C# and Java. There are many ways to run code, via the command palette, by pressing F1 on Windows and selecting run. You can also bring up the context menu via right-click.

Visit Code Runner on the Visual Studio Marketplace

GitLens

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

NPM

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

Projects

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

Todo Tree

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

Command List

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

Conclusion

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.