Looking for the best VS-code extensions to take your productivity to next level in 2022? If you use Visual Studio Code and you want to be as productive as a mofo can be... this is the guide for you! This 2022 guide lists over 20 Visual Studio extensions that will make the editor look better, work more optimally and make you look like a VSCode legend 🔥🔥🔥
Since I recorded my last video 10 Great Visual Studio Extensions For 2021 a lot of my go-to extensions have changed. I often get asked by watchers about the theme and the extensions I use in my videos so here is my 2022 update! All the extensions listed below are ones that I genuinely use on a weekly basis and that I think will aid any developer in their quest to be the best developer that they can be.
1. Productivity
The first set of extensions are focused on improving your productivity:
Project Manager: This is a new tool in my toolbox even though it was released in 2016. This extension will allow you to switch between different repositories and folders more efficiently.
Project Manager renders a tab in the VsCode sidebar that provides a consolidated list of all the repositories on your PC. If you have lots of folders and repositories dotted around your computer, this extension will give a single view of all of them combined. You can also create a list of your favourite and most used projects, so you no longer need to rely on file explorer so much!
📁 Download Here 📁
WakaTime: WakaTime is a time monitoring and tracking extension. WakaTime provides analytics based upon your VSCode usage. WakaTime will get you access to a dashboard that will summarise where you have been spending your time. You will also get a free weekly summary via email as well.
The report will detail what repositories you have worked on, for how long, and which languages you have been using.
📁 Download Here 📁
Thunderclient: Thunderclient is a Postman alternative that is built entirely within Visual Studio:
Thunderclient is a lightweight rest API client that will allow you to query remote APIs. Its very easy to learn and provides all the features you need to test any API. Asides from being able to send all the standard HTTP requests with headers, Thunderclient will allow you to save your most frequent API calls, make use of variables and do environment management via collections. I have found Thunderclient helps me to keep in flow state longer, as I spent more time inside of VS-Code.
📁 Download Here 📁
2. Theming
These second set of extensions focus on improving the UI inside of VSCode. Installing a custom theme and an icon pack can allow you to completely change the appearance of VSCode. There are thousands of different packs available for VSCode and in this section, I will look at two of the most popular ones released in 2022:
Icons: Released in 2022 by Mhammed Talhaouy, this extension will render a nice-looking set of icons within solution explorer:
📁 Download Here 📁
Catppuccin Noctis: A new theme based on the Catpuccin palette written by Alex Dauenhauer. I love this theme and I will be using it for the rest of the year:
📁 Download Here 📁
Color Highlight: Highlights the CSS colour within a box around any HEX code defined in CSS:
📁 Download Here 📁
Indent-rainbow: Makes your code more readable by adding coloured tab indentation. Once installed, a different colour will be rendered within the editor per tab indent. This extension will help you to more quickly understand the flow of how your code is structured:
📁 Download Here 📁
Rainbow Brackets: This extension renders different colours for each brace, square bracket and parentheses. This gives an improved visual experience of how code is structured:
📁 Download Here 📁
Power Mode: This extension will display a flame effect whenever you type a keystroke. If flames are not your thing, it has additional modes like fireworks and particals. Power Mode may sound like a silly and pointless extension, however, I find it can help me to focus on the current line. Also... flames look badass!
📁 Download Here 📁
Rainbow CSV: With this extension installed, whenever you load a CSV file within VSCode a different colour will be used to render each column. This can be very useful to aid in readability:
📁 Download Here 📁
3. Developer Tools & Javascript
The extensions within this section will improve your overall development workflow:
Import Cost: Shows the bundle size for each import in React:
📁 Download Here 📁
Prettier Now: Prettier now is an opinionated code formatter that will auto-format your Javascript files on save. Prettier Now prevents you from having to format code as you type. Implementing a well-used coding standard can also make your code more standardised.
📁 Download Here 📁
Turbo Console Log: Turbo Console Log will automatically create console.log() statements for you. Using a shortcut key, you can quickly add a variable to a console statement. Highlight the variable you want to inspect, click Ctrl + Alt +L and a console statement will be generated with the filename, the method name and the variable added:
📁 Download Here 📁
Live Server: This extension will provide a little button in VsCode that will load a lightweight web server. Handy when you need to write pages using vanilla Javascript, JQuery and HTML:
📁 Download Here 📁
Tab Nine: TabNine brings machine learning to the VSCode auto-complete. TabNine is trained on open source code and can offer some good suggestions on a per-line basis. Install it and say type l, the autocomplete engine will look at what is your most recent l or what is the most used l in the database. Using TabNine can speed up your workflow and prompt you to write code in new ways that you may not have previously considered.
There are some downsides to this app. There is a free version, however, the paid version is better. The free version hogs a lot of your system resources, so this might be a deal-breaker for some readers. Github recently release Copilot which does a similar task. I have a feeling Copilot will replace this within my 2023 list so you might want to check that out as well!
📁 Download Here 📁
Auto Rename Tag: If you write a lot of HTML, auto-tag rename will save you a lot of time. Auto rename tag will automatically update the closing tag of any element that you update:
📁 Download Here 📁
4. Content Creation
The final set of extensions will help improve writing and content creation inside of VSCode:
Polacode: If you create content that needs to reference code, you will quickly find that creating good looking code snippets can be a challenge. Polacode provides the ability to create a screenshot of your code. Simply copy the code, open the extension, paste your code and click on create a new image button. Job done 💥
📁 Download Here 📁
Markdown Preview Enhanced: Adds a preview screen within VsCode. Very handy if you need to write README.md files!
📁 Download Here 📁
Markdown Lint: Adds linting capabilities to any file with a .md file extension. Very useful if you need to write a lot of content using Markdown to help you spot errors while you type... like a book!
Spell Checker: Does what it says on the tin! Click Ctrl and . to access the spelling correction suggestions. When you make a typo it will be highlighted within the editor:
📁 Download Here 📁
Trailing Whitespace: After installing this extension, you can configure it so that on save all trailing white-space will be removed. Removing needed white-space is a nit-pick activity, however, it can reduce GIT merge conflicts.
The trailing whitespace extension takes seconds to install, so why not?
📁 Download Here 📁
Happy Coding 🤘
