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!

[@fleboho]

Would you kindly explain how it is not "technically" an IDE and give a juxtaposition of it and and IDE.

[@dev_ression]

@@fleboho certainly. An IDE typically comes with highly integrated tools like preconfigured compilers, a debugger, code completion and many more. VS Code is essentially a glorified text editor. There are plenty of extensions like those listed in the video that can be used to mimic the actions of an IDE. But if you want to get technical about it, the out-of-the-box standard version of VS Code is simply a text editor. Even with the extensions installed, it won’t be as powerful as an IDE like Visual Studio. But a lot of the time, especially in web development, VS Code works perfectly and an IDE like Visual Studio simply isn’t necessary. If you prefer a more light weight environment, VS code is the tool for you. I hope this explanation helps :)

[@fleboho]

@@dev_ression It certainly does. VS Code is no different from Notepad++ on the general level. Thanks.

[@user-yk8yb5xy8r]

True, there were many times when the code throws some random error (literally for no reason) even with extension installed, I don't know if I have to do something extra for it, one example is running tensorflow in vscode a simple code like tf = zeros([1,2,3]) throws an error, like you iust can't run this program, and it works perfectly fine in idle, can someone please tell me what is wrong

[@solvedfyi]

VS Code is a most popular development environment and it is fully integrated in all kinds of ways. It's more capable than a lot of IDEs we remember. I can't think of a reasonable excuse to insist it's not an IDE. Text editors don't typically come with built in language servers and terminal integration and debuggers and git for version control.

[@deepdarkdaun3649]

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

[@jabed8436]

You're a life saver

[@K.Huynh.]

Thank you so much !

[@minemaxblade]

@@jabed8436 not life saver It is called time saver sacrificing his own time

[@rifatibntaher-rt6cx]

thanks for saving my 20minutes.

[@KrishnaPrasad-oc1ez]

Tabnine is no more free

[@sathvikchowdaryveerapaneni1290]

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

[@dev_ression]

Thank you bro! I’m glad it helped :)

[@marktherobloxguy]

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

[@dev_ression]

That’s a good idea, thank you bro. You’ve earned yourself a sub :)

[@marktherobloxguy]

@@dev_ression thanks :)

[@mahidulislam3103]

he's baiting people to watch the full vid.

[@dev_ression]

@@mahidulislam3103 nah bro, I just figured out how to use chapters lol

[@ragedfalcon2397]

Amazing video man. Good editing, clear voice, and simple explanations.

[@dev_ression]

I appreciate that bro! Glad it helped :)

[@gadavis1701]

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.

[@keebroll3388]

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

[@dev_ression]

Thank you! Happy to help :)

[@gabegonzalez764]

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!

[@TotoCodeFR]

Question for the Excel Viewer extension : does it work with OpenOffice files?

[@BadWithie]

Thanks! Watched all the way till the end.

[@dev_ression]

Wow, thank you 🙏

[@user-tk1re2hd2y]

A computer that has the ability to turn on 😂

[@dev_ression]

It’s a good start 🥹

[@4klife922]

😂

[@AnibalTafur]

He lost me there 😢 lol

[@rockcaesarpaper291]

This video was really helpful. Great job.

[@dev_ression]

Glad I could help bro!

[@Teymuur]

Even tho i knew most of these extensions tabnine was so useful u was looking for a free copilot alternative. Thank you!

[@dev_ression]

Glad I could help bro! That was the same as me. I didn’t want to pay for GitHub copilot so Tabnine was a life saver!

[@_craftmenia_]

@@dev_ression try cursor ide once

[@aliyassin5631]

@@dev_ressiongithub copilot is free for students tho

[@areebnadir5778]

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.

[@premium-ware]

What’s AI Nane?

[@areebnadir5778]

@@premium-ware Merlin Ai Chrome Extension

[@yesterkester6407]

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

[@dev_ression]

Happy to help bro!

[@luigidabro]

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

[@huynhhuynh982]

Anyone using Vibrancy should add this into settings.json to apply transparency effect to the terminal: "terminal.integrated.gpuAcceleration": "off",

[@kingg1272]

Thank you! i hope you make more front end tutorials

[@dev_ression]

I will!

[@NiteshKumar-dy8rv]

is there any linux wayland alternative of vibrancy cotinued

[@Sharada_Gaming_YT]

bro i found the vedio ,but diddnt get the proper one ,but now you are the one who gave me thw solution of error

[@user_4515xqya]

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

[@dev_ression]

Glad this helped you bro :) thanks for watching

[@nermeenaliabdelhakeem422]

That is very helpful Great Thanks so much

[@mariaali9935]

Very helpful 👌 Thanks for making such a good content

[@dev_ression]

Thank you for watching :)

[@abdelazeezmabrouk]

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

[@zl3ph858]

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

[@dev_ression]

Honestly both are fantastic. I can’t choose haha

[@lolly4171]

The only reason I did not use vs code is we need to manually run it the code runner is really usefull

[@Take-the-Ticket]

Great video :) I would switch to VS immediately if there was an extension to allow an ftp manager in a separate window (an extra monitor.) Maybe this exists and I just haven't found it yet? Added bonus automatically save on server when I press Ctrl+S or the like...

[@anandshindey]

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

[@dev_ression]

Palenight (Mild Contrast)

[@bhargavkumar]

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

[@dev_ression]

Thank you bro! I use QuickTime on Mac OS :)

[@getcass]

Ideal, didnt know there was a drawio extension.. cheers!

[@youtubey-gz7yg]

Good job, this is going to be a great channel in the future ❤

[@dev_ression]

Thank you!

[@littleslime101]

Thank you very much for so many useful extensions!

[@dev_ression]

Im glad this video helped :)

[@d3thvizion]

So I'm new to VS code and to programming. Say that I want to write in Python would I still need to download a python extension or does Code Runner replace the need to download extensions not found on VS code like python, C, etc...

[@d3thvizion]

Or am i misunderstanding what Code runner is doing in the first place?

[@ahmadumar9387]

hi devression, do you think vibrancy still works with the new VScode 1.8 update?

[@dev_ression]

I have been experiencing issues with it

[@ahmadumar9387]

@@dev_ression and do you know a solution for it? because in my case after 1.86 vibrancy doesn't work anymore

[@ariroth1278]

This might sound really dumb, but is your desktop background by any chance a screen capture from the horror movie Gaia? The opening shot is beautiful and I took a very similar one myself.

[@dev_ression]

Firstly, there are no dumb questions here sir! Secondly, I’m afraid not. It’s just one of the default wallpapers in the Mac OS desktop background library

[@user-vu1cr3zr6j]

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.

[@dev_ression]

thank you for sharing your experience :)

[@lukemarshall1892]

I'm in school right now and it's super frustrating working with people who use extensions for everything because as soon as you go slightly outside the bounds of what they can do you all the sudden have a teammate who's more of a liability, needing to be taught how to open their terminal, than any sort of an asset.

[@himanshuatri3232]

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.

[@dev_ression]

It’s a shame because I really like the glass look too. Unfortunately I haven’t been able to find anything else that looks as good yet.

[@himanshuatri3232]

@@dev_ression I found one called glassit but it's actually more transparent than a glass look. if somehow we could reduce its transparency then it might work

[@himanshuatri3232]

@@dev_ression Well I found a way. you can use the glassit extension. it also works similarly. Although it might look very transparent you can use this shortcut ctrl+alt+c to reduce transparency. press it multiple times to reduce more and if you want to increase the transparency use ctrl+alt+z.

[@user-rm2lq5fz8v]

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

[@dev_ression]

MacBook Pro 14 inch. Highly recommend. Not the air

[@peika8324]

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

[@dev_ression]

I agree! So much potential 👍

[@oblivikun]

try emacs bro, it has unlimited extension capability, isnt an electron app and is actually fast. isnt stupid like vim and has a web browser, email client, two irc clients, and aton of keybinds. it also has a stupidly large package(or extension) database called the melpa that comes with everything

[@BloodswordFW]

What is the best extension for auto imports? (importing them and sorting them properly)

[@cyningli8139]

Thank you for sharing. It helps me a lot.

[@dev_ression]

Glad it helped!

[@KamalSharma-fw3ko]

When I sign in tabnine i'm not getting the token, can you help me with that

[@vasu-zadafiya]

Nice content really appreciate bro. Keep it up 👍🏻

[@dev_ression]

Thank you bro!

[@rakshithofficial4851]

Very informative video, mainly tabnine, spell checker and prettier.

[@Kashiskthakur]

I think vibrancy works with mac only. I tried in windows it just doesn't work.

[@tapadiptobanerjee2284]

Which theme are you using to write the code

[@rithez6898]

I'll waiting for the theme name 😅

[@davidmurphy563]

"My day to day work as a full time CS student" This made me giggle. In a nice way, don't worry.

[@dev_ression]

It’s a hard life 😉😂

[@clintonkami-sama3575]

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

[@dev_ression]

It’s ok, Vibrancy is buggy af. Wouldn’t recommend anymore

[@clintonkami-sama3575]

@@dev_ression Thanks for that! I found an extension called glassit-vsc and it works fine. btw, i love your theme. Do you mind telling me what theme it is?

[@dev_ression]

@@clintonkami-sama3575 awesome! I’ll check it out. The theme I use is called Palenight

[@RuchitGhoghari-tg2ck]

THANKSH BROTHAR

[@ikhsansdq]

Thanks for sharing great tips, but I think the Vibrancy extension in this case is not working and causing glitch to the VS Code if you installed it with latest version of vscode.

[@dev_ression]

Correct, I no longer recommend this extension

[@zerdnelemo]

I prefer TODO Tree, because it shows a tree with all the files that contain TODO or FIXME comments, along with the highlight in each comment like Todo Highlight.

[@dev_ression]

I’ll have to check it out, thanks for sharing bro!

[@zerdnelemo]

@@dev_ression Thanks you.

[@mohamadalsaleh4773]

Nice bro What is your vs code theam

[@oopaopao]

I wonder what your editor theme is, he looks very comfortable, thank you ！！！

[@yashchopda5332]

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

[@dev_ression]

You may need to reinstall VS code. Since making this video I have been having issues with the vibrancy extension also

[@emcolaboracaocom2181]

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.

[@dev_ression]

Reinstall vs code and don’t use vibrancy. Since I made the video there have been issues with the extension

[@aaravgargofficial]

Amazing Bro! Keep it Up!

[@dev_ression]

Thank you bro!

[@jabed8436]

Adding timestamps would be majestic!

[@dorklol2969]

great video, thanks for your suggestions!

[@dev_ression]

No problem bro, thanks for watching!

[@dtyavvmj]

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

[@dev_ression]

I would suggest uninstalling the extension and reload VS Code. Then install the extension again

[@Love_dhiman]

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

[@dev_ression]

buy a Mac :)

[@khangle6872]

Interesting, my Vs code list is a little bit different 1. Productivity booster 2. Productivity increaser 3. Productivity Manager 4. Productivity multiplier 5. Productivity enhancer 6. Productivity improver 7. Productivity enricher 8. Productivity upgrader 9. Productivity advance 10. Productivity-GPT My productivity was like 50x with those

[@dev_ression]

I’m going to try all of these!

[@carlitos9613]

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

[@dev_ression]

Check pinned comment :)

[@carlitos9613]

@@dev_ressionoh, ok thanks!

[@myferonyoutube]

what theme do you use?? i LOVE it

[@dev_ression]

Palenight :)

[@RapLyricalVideos]

Nice video bro, keep it up ❤

[@dev_ression]

Thank you bro!

[@RapLyricalVideos]

@@dev_ression Welcome bro ❤

[@imdevil1323]

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 !!!!!!

[@95karin]

which font r u using in vscode?

[@dev_ression]

I’m pretty sure it’s just the default font

[@shahinalam9903]

Bro which theme you are using on your VS code

[@dev_ression]

Palenight

[@erict5750]

Todo Tree is a nice addition to todo highlight.

[@dev_ression]

Thanks for suggesting. I’ll check it out!

[@baaghimichaelcreation7653]

Thanks buddy ❤

[@dev_ression]

just trying to do my part in the community :)

[@baaghimichaelcreation7653]

@@dev_ression hey bro....... I'm learning C++ so tell me some useful extensions and themes. Actually I'm theme lover...

[@chiranjalitha5596]

How to get C/ C++ extensions to work properly on VS Code?

[@bkachama7223]

What font are you using?

[@dev_ression]

Menlo, Monaco, 'Courier New', monospace

[@i.sahilnayeem]

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

[@dev_ression]

Search C++ compiler in VS Code extensions

[@gonzamartinezvisintini4428]

THANK YOU

[@momenshtayeh67]

vibrance created problems in my vs code, it runs bad now

[@rakeshkanna-rk]

You can you Live Preview by Microsoft rather than using Live Server Whereas Live Preview gives real time editing and makes easy when you share a port

[@dev_ression]

I haven’t used that before but I’m definitely going to check it out, thanks for sharing bro!

[@kamoliddinshukurov7339]

Thank you Master

[@radskowak]

Thumbs up for the 1st tip❤

[@dev_ression]

Thank you for watching!

[@talbarak8861]

When you have a Python script in VS Code, you already have that "Play" button to run the code (in addition to the extensive options provided by the "Run and Debug" option), so what are the benefits of using code runner in this case?

[@user-ys8uu5vd2f]

Useful, Great Video for developers

[@dev_ression]

Glad I can help bro :)

[@_simplejack]

yew thanks legend!

[@soroushdianaty7915]

very informative video thanks dude

[@dev_ression]

Happy to help bro!

[@ijlalaprilijar6968]

my vscode cant open when i install vibrancy, any help please? :(

[@Saurabhsingh0k]

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

[@dev_ression]

Palenight

[@Saurabhsingh0k]

Thank you sir

[@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

[@mechanisedbeat]

which theme is that in vs code with purple buttons and stuff

[@londonalexander7868]

dracula

[@funckysom7817]

Thank you so much

[@dev_ression]

Glad I could help :)

[@toufikahmed8974]

What is this purple theme name bro, pls mention the extension

[@dev_ression]

Palenight (mild contrast)

[@ninavanleeuwen1183]

I really like the dracula theme extension

[@dev_ression]

Haven’t used it before but I’ll try it out!

[@nyitigvilaga]

Thank you!

[@dev_ression]

Glad this helped :)

[@RicardoOliveira-yw4vb]

Como instalo aquelas 3 bolas (vermelho, amarelo e verde) no canto superior esquerdo?

[@dev_ression]

Você precisa ter um MacBook da Apple

[@RicardoOliveira-yw4vb]

@@dev_ression obrigado! Inscrito aqui do Brasil!!

[@nextleveltech267]

Thank you ❤️🙏

[@dev_ression]

Glad it helped :)

[@n-i-n-o]

Wallpaper Link please? :) Thanks for your video.

[@mrsra1.x561]

great work

[@TheGiraffe]

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

[@dev_ression]

Tabnine is free

[@rounak7178]

loved it.

[@dev_ression]

Cheers for watching bro!

[@magicredragon2541]

With Vibrancy Continued now i fucked up the vs code with ghosting when scroll or open a menu what can i say

[@joeking5211]

So Code Runner is a two line batch file then ?????.

[@user-nz7ww6lq1v]

Excellent content!

[@dev_ression]

Thank you bro

[@paintingland18]

Which is the suitable laptop for programming under 1000$

[@SnowyRVulpix]

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

[@dev_ression]

we are always learning!