My Favorite VS Code Extensions of 2022

As a software engineer and student

Photo by Gabriel Heinzer on Unsplash

I use VSCode for just about everything, working as a web developer, mobile applications developer, and most recently as an embedded systems developer in C.

Here are some of my favorite extensions that I use to make my VSCode look the way I want and make my life a little easier.

1. Atom One Dark Theme

I’ve tried plenty of themes and color schemes, but the Atom One Dark theme is my favorite because the colors have useful contrast and look great.

Screenshot from the vscode marketplace.

Sample React code before/after theme. Code from author

Install with ext install akamud.vscode-theme-onedark

2. VSCode Great Icons

Slightly less popular than the most common icon extension, vscode-icons, but my personal favorite. I think the icons here look so much better than the default, and the folder icons make it easier to tell which directory I’m in.

Screenshot by author

Install with ext install emmanuelbeziat.vscode-great-icons

3. Hungry Delete

Pretty simple but very convenient. This is helpful when deleting a few empty lines by getting rid of all the whitespace. It saves me from having to select multiple lines or hitting Ctrl-Backspace all the time.

Moving the catch to the top only takes one ctrl-backspace. Gif was taken from the extension listing.

ext install jasonlhy.hungry-delete

4. Live Server

This one is just for web development, but super easy for static and dynamic pages. Its most useful feature to me is auto-reloading when changes are made.

Auto-reload feature. Gif was taken from the extension listing.

ext install ritwickdey.LiveServer

5. TabOut

Like Hungry Delete, this is a handy little keybinding that gets your cursor out of parentheses, quotes, and brackets with a tab. I find this useful since VSCode auto-completes parenthesis for you; you can press the tab key instead of going to the arrow keys.

ext install albert.TabOut

6. Snippets

If you don’t know about snippets, you should. They’re super useful when there are blocks of code you tend to repeat in a language.

Snippets are small preprogrammed strings from an extension or that you write yourself that autocomplete into larger blocks of code. I find this especially useful when writing React components where a lot of the boilerplate code gets repetitive.

Some of the snippets that come with the React Snippets Extension

Install the React Snippets Extension shown above with ext install runningcoder.react-snippets

7. Bracket Pair Colorizer 2

This extension makes it easy to see at a glance the context I’m in by highlighting brackets and parenthesis in unique colors. It also draws a line between your closing and opening brackets when you select them.

̶A̶v̶a̶i̶l̶a̶b̶l̶e̶ ̶h̶e̶r̶e̶,̶ ̶o̶r̶ ̶i̶n̶s̶t̶a̶l̶l̶ ̶i̶t̶ ̶d̶i̶r̶e̶c̶t̶l̶y̶ ̶b̶y̶ ̶o̶p̶e̶n̶i̶n̶g̶ ̶V̶S̶C̶o̶d̶e̶,̶ ̶t̶y̶p̶i̶n̶g̶ ̶C̶t̶r̶l̶+̶P̶ ̶t̶h̶e̶n̶ ̶p̶a̶s̶t̶i̶n̶g̶ ̶e̶x̶t̶ ̶i̶n̶s̶t̶a̶l̶l̶ ̶C̶o̶e̶n̶r̶a̶a̶d̶S̶.̶b̶r̶a̶c̶k̶e̶t̶-̶p̶a̶i̶r̶-̶c̶o̶l̶o̶r̶i̶z̶e̶r̶-̶2̶ ̶t̶o̶ ̶i̶n̶s̶t̶a̶l̶l̶ ̶d̶i̶r̶e̶c̶t̶l̶y̶.̶

Screenshot from the vscode marketplace.

**Update**

It was pointed out to me in the comments as of Sep 2021, colorized brackets come native in VS Code! To enable, change these two lines in settings.json (or just search for them)

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active"
}

Bonus:

Here are a few other tips or other extensions I use or that others have found useful:

1. Vim — Vim has a bit of a learning curve, but once you’re used to it, you can navigate and edit your code much faster.
2. Auto Close Tag — Automatically completes HTML and XML closing tags. A must-have for web developers.
3. Git Graph — Gives a visually appealing linear graph of the branches and changes in your git repo. You can even perform git actions directly from the graph!
4. Windows Default Keybindings — Maybe more experienced Linux users know if there’s a good reason for this, but most of the keyboard shortcuts on Windows/Mac use fewer keys than on Linux. I just switched to Linux full time and was accustomed to Windows keybindings. This made the transition easier so that I didn’t have to re-learn any keyboard shortcuts.
5. Shortcuts — Keyboard shortcuts are one of the best ways to speed up your coding. VSCode has a ton of useful keyboard shortcuts that make typing and editing faster. The full list is linked, but here are a few that I use the most:

Viewer shortcuts:

Ctrl+` — Toggles the terminal.

Ctrl+B — Toggles the side panel so you have more room for your editor.

Ctrl+Shift+P — This brings up the command palette, which contains a plethora of commands relevant to your workspace.

Code navigation:

Ctrl+Shift+O — “Go to symbol” command. This lets you search for your functions and variables, which makes going to and from functions in a file much quicker.

Ctrl+Alt+Up/Down — Copies your line up or down.

Ctrl+X — Works with a selection as normal, but in VSCode, if your cursor is just sitting on a line, it will cut the whole line without a selection. Same with Ctrl-C!

Ctrl+Enter — Moves the cursor to a new line below. I use this one all the time if I’m done editing something in the middle of a statement.

Ctrl+/ — Not specific to VSCode, but one you should know for adding and removing line comments.

Directory Navigation:

Ctrl+P — Opens a search to quickly move to other files in your project.

Ctrl+tab / Ctrl+Shift+tab — The same shortcut with Chrome tabs — this moves you backwards or forwards to previously opened files.

Ctrl+W — Again same as Chrome, this closes your open file.

Ctrl+Shift+F — Searches the whole project instead of just the open file.

Thanks for reading! Let me know your favorite code extensions and keyboard shortcuts in the comments.