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
Cool extensions to know! good quality video and appreciate for editing. Keep Going.
Thank you bro! I’m glad it helped :)
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!
Amazing video man. Good editing, clear voice, and simple explanations.
I appreciate that bro! Glad it helped :)
A computer that has the ability to turn on 😂
It’s a good start 🥹
😂
He lost me there 😢 lol
Awesome video! You’ve given me all the extensions that i needed 🙌🏽
Thank you! Happy to help :)
This video was really helpful. Great job.
Glad I could help bro!
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!
Thanks man! These extentions really helped me a lot, thanks for the cool suggestions.
Happy to help bro!
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
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
Drawio & polacode is a game changer for me 💕💕💕💕💕 Thank you 😘😘😘
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.
Anyone using Vibrancy should add this into settings.json to apply transparency effect to the terminal:
"terminal.integrated.gpuAcceleration": "off",
Thank you bro! These extensions are helping me a lot :)
Happy to help bro!
I use Vim Dark, as it is an AYU like theme.
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
That is very helpful
Great
Thanks so much
Thank you! i hope you make more front end tutorials
I will!
Thank you very much for so many useful extensions!
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.
What’s AI Nane?
@@premium-ware Merlin Ai Chrome Extension
Question for the Excel Viewer extension : does it work with OpenOffice files?
Very helpful 👌
Thanks for making such a good content
Thank you for watching :)
The only reason I did not use vs code is we need to manually run it the code runner is really usefull
🎯 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
Thank you so much good Sir!
No problem Geralt of Rivia 🙏
Ideal, didnt know there was a drawio extension.. cheers!
Thank you for sharing. It helps me a lot.
Glad it helped!
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
Very informative video, mainly tabnine, spell checker and prettier.
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 :) 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...
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.
Todo Tree is a nice addition to todo highlight.
Thanks for suggesting. I’ll check it out!
Adding timestamps would be majestic!
I wonder what your editor theme is, he looks very comfortable, thank you
！！！
great video, thanks for your suggestions!
No problem bro, 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
I’m going to try all of these!
Good job, this is going to be a great channel in the future ❤
Thank you!
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
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
THANK YOU
Thank you Master
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 :)
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.
What is the best extension for auto imports? (importing them and sorting them properly)
is there any linux wayland alternative of vibrancy cotinued
Nice content really appreciate bro. Keep it up 👍🏻
Thank you bro!
Thank you ❤️🙏
Glad it helped :)
Thank you!
Glad this helped :)
I really like the dracula theme extension
Haven’t used it before but I’ll try it out!
Nice video bro thanks
Thanks for watching!
Thank you so much
Glad I could help :)
Very good purpose, many thanks !
Tabnine vs GH Copilot, what do you think ?
Honestly both are fantastic. I can’t choose haha
I like Todo Tree to keep track of TODOs in the sidebar.
Yeah so do I!
Thumbs up for the 1st tip❤
Thank you for watching!
thank you very much
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.
It’s a hard life 😉😂
loved it.
Cheers for watching bro!
Good video. Thanks. Had a question. What theme do you use for vscode?
Palenight (Mild Contrast)
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...
Useful, Great Video for developers
Glad I can help bro :)
Amazing Bro! Keep it Up!
Thank you bro!
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.
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?
very informative video thanks dude
Happy to help bro!
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
"I still don't know what I'm doing" this is so me, even after coding for 20 years xD
we are always learning!
yew thanks legend!
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.
Nice video bro, keep it up ❤
Thank you bro!
@@dev_ression Welcome 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!
thank you
Thanks for watching :)
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!
what theme do you use?? i LOVE it
Palenight :)
What is that wallpaper? It’s gorgeous!
it's just a default Apple wallpaper
Nice bro
What is your vs code theam
Amazing!!!
Glad it helped you :)
I really like your wallpaper❤ could send the free link (google drive) link to download it.
THANKSH BROTHAR
Wallpaper Link please? :) Thanks for your video.
i like 4 extentions , others i dont need but thanks
Happy to help!
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
thanks!!!!!
Glad it helped!
Excellent content!
Thank you bro
hi devression, do you think vibrancy still works with the new VScode 1.8 update?
I have been experiencing issues with it
@@dev_ression and do you know a solution for it? because in my case after 1.86 vibrancy doesn't work anymore
Nice contents👍
Thank you!
I'm glad that I ran to this video
And I’m glad I could help :)
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.
Reinstall vs code and don’t use vibrancy. Since I made the video there have been issues with the extension
Which theme are you using to write the code
I'll waiting for the theme name 😅
I think vibrancy works with mac only. I tried in windows it just doesn't work.
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
hey i am getting ghosting effect after i have installed the vibracy extension and its not going away even after the uninstallation
You may need to reinstall VS code. Since making this video I have been having issues with the vibrancy extension also
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?
great work
When I sign in tabnine i'm not getting the token, can you help me with that
Ok you suggest to us getting more trash mails... Security wise, I'll remember
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 !!!!!!