12 VS Code Extensions to INCREASE Productivity 2024
ฝัง
- เผยแพร่เมื่อ 13 ก.พ. 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
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!
Would you kindly explain how it is not "technically" an IDE and give a juxtaposition of it and and IDE.
@@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 :)
@@dev_ression It certainly does. VS Code is no different from Notepad++ on the general level. Thanks.
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
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
You're a life saver
Thank you so much !
@@jabed8436 not life saver
It is called time saver sacrificing his own time
thanks for saving my 20minutes.
Tabnine is no more free
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!
Awesome video! You’ve given me all the extensions that i needed 🙌🏽
Thank you! Happy to help :)
Amazing video man. Good editing, clear voice, and simple explanations.
I appreciate that bro! Glad it helped :)
Very underrated tutorial, I recommend you adding chapters/timestamps to make it easier for other people to navigate around the video
That’s a good idea, thank you bro. You’ve earned yourself a sub :)
@@dev_ression thanks :)
he's baiting people to watch the full vid.
@@mahidulislam3103 nah bro, I just figured out how to use chapters lol
A computer that has the ability to turn on 😂
It’s a good start 🥹
😂
He lost me there 😢 lol
Thanks! Watched all the way till the end.
Wow, thank you 🙏
Live Server is a God-send. Thanks for showing Vibrancy Continued - VSCode looks glorious now!
Check the pinned comment! Vibrancy contains bugs!
Cool extensions to know! good quality video and appreciate for editing. Keep Going.
Thank you bro! I’m glad it helped :)
This video was really helpful. Great job.
Glad I could help bro!
Thanks man! These extentions really helped me a lot, thanks for the cool suggestions.
Happy to help bro!
Even tho i knew most of these extensions tabnine was so useful u was looking for a free copilot alternative. Thank you!
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!
@@dev_ression try cursor ide once
@@dev_ressiongithub copilot is free for students tho
bro i found the vedio ,but diddnt get the proper one ,but now you are the one who gave me thw solution of error
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... ❤❤❤
Glad this helped you bro :) thanks for watching
Anyone using Vibrancy should add this into settings.json to apply transparency effect to the terminal:
"terminal.integrated.gpuAcceleration": "off",
Drawio & polacode is a game changer for me 💕💕💕💕💕 Thank you 😘😘😘
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.
What’s AI Nane?
@@premium-ware Merlin Ai Chrome Extension
Thank you! i hope you make more front end tutorials
I will!
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.
Thank you very much for so many useful extensions!
Im glad this video helped :)
Thank you bro! These extensions are helping me a lot :)
Happy to help bro!
🎯 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
Very helpful 👌
Thanks for making such a good content
Thank you for watching :)
Yo great vid. Just a question, what theme do you got???????
That is very helpful
Great
Thanks so much
Ideal, didnt know there was a drawio extension.. cheers!
I use Vim Dark, as it is an AYU like theme.
The only reason I did not use vs code is we need to manually run it the code runner is really usefull
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.
Thank you for sharing. It helps me a lot.
Glad it helped!
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.
thank you for sharing your experience :)
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.
Question for the Excel Viewer extension : does it work with OpenOffice files?
Man I love coding extensions, is like playing games with mods. It made coding so much fun and enjoyable
I agree! So much potential 👍
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
great video, thanks for your suggestions!
No problem bro, thanks for watching!
Good job, this is going to be a great channel in the future ❤
Thank you!
Very informative video, mainly tabnine, spell checker and prettier.
Good video. Thanks. Had a question. What theme do you use for vscode?
Palenight (Mild Contrast)
Which screen recorder do you use to record these amazing tutorials in high quality. I really like your videos. ❤❤
Thank you bro! I use QuickTime on Mac OS :)
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...
Thank you so much good Sir!
No problem Geralt of Rivia 🙏
Nice content really appreciate bro. Keep it up 👍🏻
Thank you bro!
Amazing Bro! Keep it Up!
Thank you bro!
Very good purpose, many thanks !
Tabnine vs GH Copilot, what do you think ?
Honestly both are fantastic. I can’t choose haha
"My day to day work as a full time CS student"
This made me giggle. In a nice way, don't worry.
It’s a hard life 😉😂
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
I’m going to try all of these!
Thank you!
Glad this helped :)
Nice video bro, keep it up ❤
Thank you bro!
@@dev_ression Welcome bro ❤
Adding timestamps would be majestic!
Todo Tree is a nice addition to todo highlight.
Thanks for suggesting. I’ll check it out!
Amazing!!!
Glad it helped you :)
"I still don't know what I'm doing" this is so me, even after coding for 20 years xD
we are always learning!
Useful, Great Video for developers
Glad I can help bro :)
Thank you Master
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.
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
loved it.
Cheers for watching bro!
Which theme are you using to write the code
I'll waiting for the theme name 😅
Loved these! Unfortunately vibrancy isn't supported on Linux systems and that's a bummer but everything else was excellent. Subscribed!
It’s ok, Vibrancy is buggy af. Wouldn’t recommend anymore
@@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?
@@clintonkami-sama3575 awesome! I’ll check it out. The theme I use is called Palenight
great work
Thank you so much
Glad I could help :)
what theme do you use?? i LOVE it
Palenight :)
yew thanks legend!
THANK YOU
Thumbs up for the 1st tip❤
Thank you for watching!
Thank you ❤️🙏
Glad it helped :)
Nice video bro thanks
Thanks for watching!
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
MacBook Pro 14 inch. Highly recommend. Not the air
Thanks for sharing
Thanks for watching
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
I’ll take a look, thank you 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.
very informative video thanks dude
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.
Ill check it out
THANKSH BROTHAR
I wonder what your editor theme is, he looks very comfortable, thank you
！！！
What is the best extension for auto imports? (importing them and sorting them properly)
Excellent content!
Thank you bro
Thanks buddy ❤
just trying to do my part in the community :)
@@dev_ression hey bro.......
I'm learning C++ so tell me some useful extensions and themes.
Actually I'm theme lover...
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.
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.
@@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
@@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.
thank you very much
Thank you for watching :)
I really like the dracula theme extension
Haven’t used it before but I’ll try it out!
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 🥂
Thank you bro! It’s one of my favourites as well. It makes the whole environment so much cleaner 👍
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.
I’ll have to check it out, thanks for sharing bro!
@@dev_ression Thanks you.
Nice bro
What is your vs code theam
Very good!
Thank you bro
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
I haven’t used that before but I’m definitely going to check it out, thanks for sharing bro!
What is that wallpaper? It’s gorgeous!
it's just a default Apple wallpaper
Thanks to these extensions my vs code won't maximize
anymore :)
I'm glad that I ran to this video
And I’m glad I could help :)
is there any linux wayland alternative of vibrancy cotinued
Amazing video
Thank you bro!
thanks!!!!!
Glad it helped!
I think vibrancy works with mac only. I tried in windows it just doesn't work.
I like Todo Tree to keep track of TODOs in the sidebar.
Yeah so do I!
thank you
Thanks for watching :)
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.
Correct, I no longer recommend this extension
Nice contents👍
Thank you!
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...
Or am i misunderstanding what Code runner is doing in the first place?
I just subscribed
Bro which theme you are using on your VS code
Palenight
You saved my time ⌚ 😂❤cool 😎 🔥
Happy to help!