12 VS Code Extensions to INCREASE Productivity 2024 

Disclaimer! Whilst VS Code is not technically an IDE, with the right set of extensions it can behave similarly to an IDE 😊 Also, since making this video Vibrancy Continued has been causing me and many others some issues with their VS Code. So I would personally no longer suggest this extension!

0:46 - code runner 2:04 - tabnine 6:35 - live server 7:58 - excel viewer 9:31 - code tour 12:48 - todo 15:06 - material icon 16:16 - draw io 18:10 - polacode 19:59 - spell checker 22:30 - prettier 24:14 - vibrancy

A computer that has the ability to turn on 😂

🎯 Key Takeaways for quick navigation: 00:29 🖥️ *VS Code Extension Setup* - Setting up VS Code for productivity. - Introduction to VS Code extensions and their importance. - Initial steps to navigate and utilize extensions effectively. 01:39 ⚙️ *Code Runner Extension* - Streamlining the process of compiling and running code. - Simplifying Java program execution with automated compilation and output. - Enhancing efficiency in checking program outputs and making quick iterations. 02:08 🤖 *AI Coding Assistant (Tab 9)* - Implementing an AI-driven coding assistant for real-time suggestions. - Integrating Tab 9 for code autocompletion and intelligent assistance. - Simplifying code writing and enhancing productivity with AI support. 06:35 🌐 *Live Server Extension* - Utilizing the Live Server extension for web development. - Enabling real-time preview and simultaneous coding in VS Code. - Streamlining web development workflow and enhancing productivity. 08:01 📊 *Excel Viewer Extension* - Integrating the Excel Viewer extension for data visualization in VS Code. - Facilitating seamless viewing of Excel spreadsheets within VS Code. - Enhancing workflow for data scientists and analysts. 09:37 🚶‍♂️ *Code Tour Extension* - Utilizing the Code Tour extension for code walkthroughs and explanations. - Creating guided tours within code files to facilitate understanding. - Enhancing collaboration and code comprehension among team members. 12:58 📝 *To-Do Highlights Extension* - Implementing the To-Do Highlights extension for task management within code. - Utilizing keywords to highlight pending tasks or areas needing attention. - Improving code organization and productivity with visual task reminders. 15:06 💻 *VS Code Aesthetic Enhancements* - Enhancing VS Code aesthetics with Material Icon extension. - Material Icon extension replaces default icons with visually appealing ones, improving the overall look of the development environment. - Icons are customized for different file types, enhancing visual organization and navigation within the project. 16:16 📊 *Quick UML Diagrams with Draw IO* - Introduction of Draw IO extension for creating quick UML diagrams within VS Code. - Draw IO extension integrates an offline version of Draw IO directly into VS Code, allowing seamless diagram creation. - Users can create various types of diagrams, customize shapes, and export diagrams in different formats. 18:06 🖼️ *Professional Code Snippets with Polar Code* - Polar Code extension facilitates the creation of professional-looking code snippets within VS Code. - Users can customize snippet appearance with options for shadows, transparency, and background colors. - Export functionality enables saving snippets in PNG format for easy sharing and presentation. 19:59 📝 *Avoiding Compilation Errors with Code Spell Checker* - Installation and usage of Code Spell Checker extension to identify spelling errors within code. - Extension highlights misspelled words and offers suggestions for corrections, improving code quality and readability. - Helps in avoiding compilation errors caused by spelling mistakes, enhancing overall code reliability. 22:38 🔄 *Automatic Code Formatting with Prettier* - Introduction of Prettier extension for automatic code formatting in VS Code. - Prettier ensures consistent code formatting, enhancing readability and maintainability, especially in collaborative projects. - Configuration options allow for customization of formatting rules and integration with the VS Code editor. 24:15 🎨 *Decorative Enhancement with Vibrancy* - Installation and customization of Vibrancy extension for aesthetic enhancement of VS Code. - Vibrancy adds a glass morphism effect to the VS Code interface, improving visual appeal. - Despite being purely decorative, Vibrancy enhances the overall look of VS Code and can be used with different themes. Made with HARPA AI

In my opinion, knowing how to manually compile your programs can be useful in certain situations. Personally, I just use the vs code terminal or CMD for the fun of it.

After what felt like 3 days of punching myself in the face just trying to get the msvc compiler to work right, I found your video. The first step of deleting the suggestions would’ve solved all my problems 😅 Thanks for the video!

Very underrated tutorial, I recommend you adding chapters/timestamps to make it easier for other people to navigate around the video

Thanks for making this video. I love VSCode extension that makes our lives easier and devs happy. I knew some of the extensions but a lot of them were completely new for me and I think it will make a difference in my "dev life". Thank you again.

Live Server is a God-send. Thanks for showing Vibrancy Continued - VSCode looks glorious now!

Great video! I've just started using VS Code and I'm sure these extensions will help me a lot!

Nice list! Though for beginners, I'd personally recommend not using an assistant like tabnine or copilot. I see too many times where people will try to use it before instilling the basics in their brain, and then when they don't have it, they act like a magikarp out of water.

00:01 VS Code extensions can enhance productivity and quality of work. 01:39 Using Code Runner to streamline program checking process 05:01 Using Tab 9 extension to generate code and run programs in VS Code. 06:37 Live server extension for real-time preview and easy project navigation 10:11 Creating tours to explain code walkthroughs 11:57 VS Code Explorer code tour feature and to-do highlights extension 15:23 Install material icon extension for better file icons and appearance. 17:10 VSCode extension to create diagrams and export them in different formats 20:29 Code Spell Checker extension highlights spelling errors and can prevent compilation errors 21:54 Using Quick Fix function and manually typing in VS Code 24:52 Install dark plus theme before installing extension 26:17 Change VS Code background with vibrant wallpaper Crafted by AI.

Awesome. Thank you. I'm new to VS Code and most of these extensions will help a lot. :)

Cool extensions to know! good quality video and appreciate for editing. Keep Going.

Great Video. Thank you for not only sharing the extensions, but showing how you like to use them and a few other details, but not too many. NOTE: I am not seeing Excel Viewer by Grape City (in my extension options it shows a different name - MESCIUS). This is a new video, so I'm wondering what I might be doing wrong. Suggestions. I installed the one it showed, but I haven't tested it yet.

Thank you bro! These extensions are helping me a lot :)

Extremely useful extensions - thank you so much!

Awesome video! You’ve given me all the extensions that i needed 🙌🏽

thank you alot . what is your theme name?

Very useful video. Thanks!

I don't know who you are. But I can't thank you enough for sharing your knowledge with us. Good luck and keep educating us... ❤❤❤

17:00 i really need this 🤩 Thank you very much brooo

Lots of great extensions. I added several to my standard set. That said, I chose "TODO Tree" instead of "TODO Highlight" because it seems a bit more flexible. The only one I would argue isn't a great choice is "Vibrancy Continued". It makes code viewing harder on the eyes.

Bro how doy make your videos these are sick!

what is your macbook model and are you happy with it also I have a question about macbooks; macbook air or macbook pro for software developers

Todo Tree is a nice addition to todo highlight.

13:00 todo tree much better in my opinion.

Ur vs code theme looks awesome, what's its name ?

This video was really helpful. Great job.

Good video. Thanks. Had a question. What theme do you use for vscode?

Thanks! Watched all the way till the end.

I cant remove the vibrancy extension somehow and my vscode is now extremely buggy and barely reacting

I use Vim Dark, as it is an AYU like theme.

Useful, Great Video for developers

I love all the extensions you mentioned, but I particularly enjoy Vibrancy Continued. It was also new to me, Thanks for sharing 🤝 . . . High quality content as always 🥂

TY a lot 😃

I did all the steps to install the Vibrancy Continued but my vs code got a ghost effect after everything I do i.e. open/close a menu. How do i fix it? I already unistalled the extension.

Amazing Bro! Keep it Up!

Which screen recorder do you use to record these amazing tutorials in high quality. I really like your videos. ❤❤

should I be using tabnine as a beginner?

I'm glad that I ran to this video

Hi Which theme do you use? Size and other config?

very informative video thanks dude

Thanks man! These extentions really helped me a lot, thanks for the cool suggestions.

"You'll know that creating a UML diagram is one of the most beneficial things you can do before even starting your program" As a developer working on a large Java project, this is a recipe for disaster.

thank you

great, now my maximise button for the whole vs code window is not working

what the font you are using for editor?

Thank you ❤️🙏

live server or live preview? which is best? tabnine or codeium? again which is better

Broooo the thumbnail❤

how to add those three dots in my vs code present at top left corner of vs code page????

Yo great vid. Just a question, what theme do you got???????

I use vim bdw I use Arch btw

Best macbook for coding?

Drawio & polacode is a game changer for me 💕💕💕💕💕 Thank you 😘😘😘

Nice video bro thanks

Hey can you please add the time stamps 🙏

Thanks for sharing

After downloading vibrancy on my mac vs code showed me message about reinstalling vscode. Why?

"I still don't know what I'm doing" this is so me, even after coding for 20 years xD

Thank you! i hope you make more front end tutorials

thank you🎉🎉

thank you very much

Thanks for the video. I think it's very informative. I'm using visual code studio for documentation. Lately, whenever I edit a document the cursor automatically jumps to either the start of the window or the end of the editing window. I'm not sure what has changed and how to get that back so the cursor stays right where it is. Any suggestions would be most helpful. Thanks.

Nice contents👍

May I ask for what theme he's using in the video ?

i installed drawio but shapes are adding in that grapgh page , what i need to do

Very good purpose, many thanks ! Tabnine vs GH Copilot, what do you think ?

Loved these! Unfortunately vibrancy isn't supported on Linux systems and that's a bummer but everything else was excellent. Subscribed!

Bro can you please help me how can i install compiler for C and C++ in mac

What is that wallpaper? It’s gorgeous!

Thank you so much

how many of them work for c++?

Thank you!

I really like the dracula theme extension

hey i am getting ghosting effect after i have installed the vibracy extension and its not going away even after the uninstallation

co-pilot extension codium (gives test cases)

"Close that shit ASAP" instant like😂

thank tou alot what is your theme name?

small addendum to your list of extensions, which would slot in quite nicely at 24:14 after the Prettier extension.... especially if you use "format on save". "Formatting Toggle" by "tombonnike", which add a convenient button at the bottom right edge of the VSCode bottom status bar that will explicitly toggle the "format on save", "format on paste", and "format on type" settings. disclaimer: I'm not affiliated with that plugin in any way, but I do work with someone who swears that "code auto formatters are evil" and refuses point-blank to use any of them. so in the interest of smoothing collaboration, I simply don't auto format any code that we both work on.

Amazing video

bro when i installed vibrancy not only it didn't had this opacity thing but also when I tried to move my vs code page It was kinda delayed and buggy like if it was trying to make the movement smoother but terribly doing it

i like 4 extentions , others i dont need but thanks

great work

Nice video bro, keep it up ❤

WHY TABNINE, CAN'T USE COPILOT?

I use many of these. But I hate prettier. It has always caused more problems than it tries to solve. It is better to just use code reviews to teach new developers how to properly format code.

Very helpful 👌 Thanks for making such a good content

What is name of the Theme that has been used in this video.

Tabnine over Codeium? Are you sure about that?

What's the difference between Github Co-pilot and Tabnine?

i wish i read you comment before installing vibrancy extension. it gave me nightmare especially because i wasn't aware it was the one causing problem. any alternative of vibrancy? i really liked that glass look of vibrancy.

vibrancy creating lots of error in my pc ,it's creating gitter after effect which is so annoying for me so please help me to fix this problem , I disable the extension and also uninstall it and the effect are still there and creating error , so please help me !!!!!!

Man I love coding extensions, is like playing games with mods. It made coding so much fun and enjoyable

Thank you for sharing. It helps me a lot.

great video, thanks for your suggestions!

after installing vibrancy i can no longer maximize/restore vs code...i disabled and uninstalled vibrancy but still its stuck...anyone with a solution...(i don't want to uninstall vs code)

as a professional with degrees and several years in the field I would recommend everyone to use as little extra as possible. some are cool but you dont really need much, get familiar with regex so you can do advanced sed commands - oh and of course (even sad that this point has to be made) learn unix commands.

You saved my time ⌚ 😂❤cool 😎 🔥