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
Пікірлер: 463
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
3 ай бұрын
Would you kindly explain how it is not "technically" an IDE and give a juxtaposition of it and and IDE.
@dev_ression
3 ай бұрын
@@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
3 ай бұрын
@@dev_ression It certainly does. VS Code is no different from Notepad++ on the general level. Thanks.
@user-yk8yb5xy8r
3 ай бұрын
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
3 ай бұрын
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.
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
3 ай бұрын
You're a life saver
@K.Huynh.
3 ай бұрын
Thank you so much !
@minemaxblade
3 ай бұрын
@@jabed8436 not life saver It is called time saver sacrificing his own time
@rifatibntaher-rt6cx
3 ай бұрын
thanks for saving my 20minutes.
@KrishnaPrasad-oc1ez
3 ай бұрын
Tabnine is no more free
A computer that has the ability to turn on 😂
@dev_ression
2 ай бұрын
It’s a good start 🥹
@sforshoaib
Ай бұрын
😂
@AnibalTafur
Ай бұрын
He lost me there 😢 lol
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!
Cool extensions to know! good quality video and appreciate for editing. Keep Going.
@dev_ression
3 ай бұрын
Thank you bro! I’m glad it helped :)
Live Server is a God-send. Thanks for showing Vibrancy Continued - VSCode looks glorious now!
@UberDuberClips
8 күн бұрын
Check the pinned comment! Vibrancy contains bugs!
Drawio & polacode is a game changer for me 💕💕💕💕💕 Thank you 😘😘😘
bro i found the vedio ,but diddnt get the proper one ,but now you are the one who gave me thw solution of error
Very underrated tutorial, I recommend you adding chapters/timestamps to make it easier for other people to navigate around the video
@dev_ression
3 ай бұрын
That’s a good idea, thank you bro. You’ve earned yourself a sub :)
@marktherobloxguy
3 ай бұрын
@@dev_ression thanks :)
@mahidulislam3103
2 ай бұрын
he's baiting people to watch the full vid.
@dev_ression
2 ай бұрын
@@mahidulislam3103 nah bro, I just figured out how to use chapters lol
Thanks! Watched all the way till the end.
@dev_ression
3 ай бұрын
Wow, thank you 🙏
Awesome video! You’ve given me all the extensions that i needed 🙌🏽
@dev_ression
3 ай бұрын
Thank you! Happy to help :)
Amazing video man. Good editing, clear voice, and simple explanations.
@dev_ression
3 ай бұрын
I appreciate that bro! Glad it helped :)
This video was really helpful. Great job.
@dev_ression
3 ай бұрын
Glad I could help bro!
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.
I use Vim Dark, as it is an AYU like theme.
For Java compile isn't the case unless your IDE does that for you. For example, NetBeans is compiling and running your changes directly with no need to enter to command prompt 1st. Though, this extension for VSC is lovely and helpful.
Even tho i knew most of these extensions tabnine was so useful u was looking for a free copilot alternative. Thank you!
@dev_ression
3 ай бұрын
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_
3 ай бұрын
@@dev_ression try cursor ide once
@aliyassin5631
2 ай бұрын
@@dev_ressiongithub copilot is free for students tho
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
3 ай бұрын
Glad this helped you bro :) thanks for watching
Thanks man! These extentions really helped me a lot, thanks for the cool suggestions.
@dev_ression
3 ай бұрын
Happy to help bro!
Anyone using Vibrancy should add this into settings.json to apply transparency effect to the terminal: "terminal.integrated.gpuAcceleration": "off",
The only reason I did not use vs code is we need to manually run it the code runner is really usefull
Ideal, didnt know there was a drawio extension.. cheers!
🎯 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
Man I love coding extensions, is like playing games with mods. It made coding so much fun and enjoyable
@dev_ression
2 ай бұрын
I agree! So much potential 👍
@oblivikun
2 ай бұрын
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
Question for the Excel Viewer extension : does it work with OpenOffice files?
That is very helpful Great Thanks so much
Very informative video, mainly tabnine, spell checker and prettier.
Thank you bro! These extensions are helping me a lot :)
@dev_ression
22 күн бұрын
Happy to help bro!
Thank you! i hope you make more front end tutorials
@dev_ression
3 ай бұрын
I will!
Thank you very much for so many useful extensions!
@dev_ression
3 ай бұрын
Im glad this video helped :)
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
3 ай бұрын
What’s AI Nane?
@areebnadir5778
3 ай бұрын
@@premium-ware Merlin Ai Chrome Extension
Thank you so much good Sir!
@dev_ression
8 күн бұрын
No problem Geralt of Rivia 🙏
Thank you for sharing. It helps me a lot.
@dev_ression
2 ай бұрын
Glad it helped!
Very helpful 👌 Thanks for making such a good content
@dev_ression
3 ай бұрын
Thank you for watching :)
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
2 ай бұрын
thank you for sharing your experience :)
@lukemarshall1892
2 ай бұрын
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.
Thanks for sharing
@dev_ression
Күн бұрын
Thanks for watching
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...
yew thanks legend!
Thank you Master
great video, thanks for your suggestions!
@dev_ression
2 ай бұрын
No problem bro, thanks for watching!
Good job, this is going to be a great channel in the future ❤
@dev_ression
2 ай бұрын
Thank you!
Thumbs up for the 1st tip❤
@dev_ression
3 ай бұрын
Thank you for watching!
"My day to day work as a full time CS student" This made me giggle. In a nice way, don't worry.
@dev_ression
3 ай бұрын
It’s a hard life 😉😂
Adding timestamps would be majestic!
Nice video bro thanks
@dev_ression
14 күн бұрын
Thanks for watching!
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
3 ай бұрын
I’m going to try all of these!
Todo Tree is a nice addition to todo highlight.
@dev_ression
2 ай бұрын
Thanks for suggesting. I’ll check it out!
Amazing Bro! Keep it Up!
@dev_ression
2 ай бұрын
Thank you bro!
THANK YOU
Nice content really appreciate bro. Keep it up 👍🏻
@dev_ression
Ай бұрын
Thank you bro!
Loved these! Unfortunately vibrancy isn't supported on Linux systems and that's a bummer but everything else was excellent. Subscribed!
@dev_ression
2 ай бұрын
It’s ok, Vibrancy is buggy af. Wouldn’t recommend anymore
@clintonkami-sama3575
2 ай бұрын
@@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
2 ай бұрын
@@clintonkami-sama3575 awesome! I’ll check it out. The theme I use is called Palenight
I really like the dracula theme extension
@dev_ression
2 ай бұрын
Haven’t used it before but I’ll try it out!
Thank you!
@dev_ression
3 ай бұрын
Glad this helped :)
loved it.
@dev_ression
3 ай бұрын
Cheers for watching bro!
Good day I am a frontend developer and I sometimes have issues converting figma to code, can you explain the easiest way to convert a figma design to code without much stress.
Nice contents👍
@dev_ression
14 күн бұрын
Thank you!
Useful, Great Video for developers
@dev_ression
2 ай бұрын
Glad I can help bro :)
THANKSH BROTHAR
Nice video bro, keep it up ❤
@dev_ression
3 ай бұрын
Thank you bro!
@RapLyricalVideos
3 ай бұрын
@@dev_ression Welcome bro ❤
Thank you ❤️🙏
@dev_ression
2 ай бұрын
Glad it helped :)
Amazing!!!
@dev_ression
3 ай бұрын
Glad it helped you :)
Thank you so much
@dev_ression
3 ай бұрын
Glad I could help :)
I wonder what your editor theme is, he looks very comfortable, thank you !!!
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
3 ай бұрын
I’ll have to check it out, thanks for sharing bro!
@zerdnelemo
3 ай бұрын
@@dev_ression Thanks you.
Which screen recorder do you use to record these amazing tutorials in high quality. I really like your videos. ❤❤
@dev_ression
2 ай бұрын
Thank you bro! I use QuickTime on Mac OS :)
at prettier extention, take a look at Biome bro that is the combination of Eslint and Prettier, and it's quick AF give it a shoot
@dev_ression
Күн бұрын
I’ll take a look, thank you bro!
What is the best extension for auto imports? (importing them and sorting them properly)
great work
"I still don't know what I'm doing" this is so me, even after coding for 20 years xD
@dev_ression
2 ай бұрын
we are always learning!
Thanks buddy ❤
@dev_ression
3 ай бұрын
just trying to do my part in the community :)
@baaghimichaelcreation7653
3 ай бұрын
@@dev_ression hey bro....... I'm learning C++ so tell me some useful extensions and themes. Actually I'm theme lover...
is there any linux wayland alternative of vibrancy cotinued
I'm glad that I ran to this video
@dev_ression
2 ай бұрын
And I’m glad I could help :)
Very good purpose, many thanks ! Tabnine vs GH Copilot, what do you think ?
@dev_ression
Ай бұрын
Honestly both are fantastic. I can’t choose haha
thank you very much
@dev_ression
2 ай бұрын
Thank you for watching :)
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
2 ай бұрын
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
2 ай бұрын
@@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
2 ай бұрын
@@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.
I just subscribed
very informative video thanks dude
@dev_ression
2 ай бұрын
Happy to help bro!
I would use AWS instead of tabnine as an autocomplete. I have tried tabnine, i just does not give long autocompletes without the paid thing. AWS is free and give the same length autocomplete for free. Oh and it also has the chat for free as well.
@dev_ression
23 күн бұрын
Ill check it out
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
2 ай бұрын
MacBook Pro 14 inch. Highly recommend. Not the air
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
3 ай бұрын
I haven’t used that before but I’m definitely going to check it out, thanks for sharing bro!
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
Excellent content!
@dev_ression
Ай бұрын
Thank you bro
I like Todo Tree to keep track of TODOs in the sidebar.
@dev_ression
2 ай бұрын
Yeah so do I!
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
3 ай бұрын
Or am i misunderstanding what Code runner is doing in the first place?
Good video. Thanks. Had a question. What theme do you use for vscode?
@dev_ression
2 ай бұрын
Palenight (Mild Contrast)
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
2 ай бұрын
Correct, I no longer recommend this extension
19:55 I wold highly recommend not exporting code as png. Maybe svg could be fine, but that's an overkill too. Just copy-paste your code into a word document. Faster, no need to install extension... (Make sure that in Word pasting from other programs is set to keep source formatting in advanced options, which is the default. But it works in LibreOffice too.) Styling your code snippets is not a productivity improvement... it's a marketing tactic. Productivity improvement is when other people can also copy-paste and use your code!
thank you
@dev_ression
2 ай бұрын
Thanks for watching :)
i like 4 extentions , others i dont need but thanks
@dev_ression
2 ай бұрын
Happy to help!
You saved my time ⌚ 😂❤cool 😎 🔥
@dev_ression
2 ай бұрын
Happy to help!
Very good!
@dev_ression
3 ай бұрын
Thank you bro
thanks!!!!!
@dev_ression
2 ай бұрын
Glad it helped!
hi devression, do you think vibrancy still works with the new VScode 1.8 update?
@dev_ression
3 ай бұрын
I have been experiencing issues with it
@ahmadumar9387
3 ай бұрын
@@dev_ression and do you know a solution for it? because in my case after 1.86 vibrancy doesn't work anymore
Amazing video
@dev_ression
2 ай бұрын
Thank you bro!
what theme do you use?? i LOVE it
@dev_ression
3 ай бұрын
Palenight :)
What is that wallpaper? It’s gorgeous!
@dev_ression
8 күн бұрын
it's just a default Apple wallpaper
Emojisense, Console Ninja, Error Lens, Path Intellisense,
Which theme are you using to write the code
@rithez6898
Ай бұрын
I'll waiting for the theme name 😅
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
2 ай бұрын
Reinstall vs code and don’t use vibrancy. Since I made the video there have been issues with the extension
When I sign in tabnine i'm not getting the token, can you help me with that