12 VS Code Extensions to INCREASE Productivity 2024

12 VS Code Extensions to Increase Productivity 2024

I made this video to help any newbies out there who are looking for some great VS Code extensions to help increase productivity and write cleaner code.
I know there are PLENTY more extensions out there to try so if you guys have any suggestions, feel free to leave them in comments and I might make a video on them! In this video I cover the 12 best VS Code extensions that I use throughout my studies as a Computer Science student. I hope these tips and tricks help you!

Tags:
vs code tutorial for beginners,vs code installation,vs code tutorial,vs code extension,vs code installation for c,vs code setup,vs code python,vs code theme,vs code vs visual studio,vs code tips,vs code extension for web developer,vs code extensions 2024,top vs code extensions,best vs code extensions,top vscode extensions,best vscode extensions,visual studio code setup,vscode productivity,vscode tips and tricks,vscode extensions,vscode tutorial

[dev_ression]

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!

[esviken]

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

[tkrehdy]

A computer that has the ability to turn on 😂

[marktherobloxguy]

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

[gabegonzalez]

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!

[onhazrat]

🎯 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

[overcolck]

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.

[aaronjenkins]

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.

[JasonHuebel]

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.

[TeemoPwnstar]

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

[kajtek-uzff]

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

[areebnadir]

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.

[user_xqya]

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... ❤❤❤

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

[Nick-]

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

[iot_enthusiast]

Extremely useful extensions - thank you so much!

[klynthomas]

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.

[sathvikchowdaryveerapaneni]

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

[erict]

Todo Tree is a nice addition to todo highlight.

[saudhumayun]

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