VS Code Extensions you absolutely need in 2021
ΠΡΡΠ°Π²ΠΊΠ°
- ΠΠΏΡΠ±Π»ΡΠΊΠΎΠ²Π°Π½ΠΎ 26 ΡΠ΅Ρ 2024
- VS Code Extensions you absolutely need in 2021
If you use vscode every day as I do, you need these extensions to improve your workflow, make fewer bugs, and making daily coding easier.
Each year I format my computer, start from scratch, and check what I am using and what I won't be for my coding. This year's programming includes developing HTML, CSS, JavaScript as well as making react websites and react native applications. These are the plugins I use as part of my vscode extensions 2020.
#vscode #estensions #2021
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
π Enhance UI: www.enhanceui....
Feel free to follow me on:
π¦ Twitter: in...
π¬ Discord: / discord
πΈ Patreon: / adriantwarog
Software & Discounts:
π¦ Admin Templates and UI Kits: bit.ly/themese...
πΎ Webflow: webflow.grsm.i...
πΏ Envato: 1.envato.marke...
πΏ Envato Elements: 1.envato.marke...
π΄ Elementor: elementor.com/...
β Editor X: www.editorx.co...
Computer Gear:
β¬ Monitor: amzn.to/3f9DOQI
β¨ Keyboard: amzn.to/3eA5UFD
π Mouse: amzn.to/3xVJO8l
π€ Mic: amzn.to/3hgCfms
π± Tablet: amzn.to/3ewt7sa
π‘ Lighting: amzn.to/3vOZeZY
π‘ Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
π· Camera: amzn.to/3uCv4J9
πΈ Primary Lens: amzn.to/3vT6wMm
πΈ Secondary Lens: amzn.to/3tyqWIX
π₯ Secondary Camera: amzn.to/3o2zCGi
π Camera Mic: amzn.to/33tCz9l
π USB to HDMI: amzn.to/33yW9RE - ΠΠ°ΡΠΊΠ° ΡΠ° ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΡΡ
00:00 Intro
00:18 Theme: One Dark Pro
01:32 Auto Close Tag
02:44 Auto Rename Tag
03:28 React Native Tools + ES7 React/Redux/GraphQL/React-Native Snippets
07:07 Code Spell Checker
05:00 Tipp: Filter for popular extensions
05:20 ESLint
05:33 Prettier - Code formatter
06:08 Liver Server
06:35 vscode-icons
07:10 Bracket Pair Colorizer
07:55 Live Share (colloborative editing)
08:58 DotENV
09:22 Quokka.js
10:10 Outro
Thank you
Thank you
Thank you, saved me like 10 min :)
Thanks ππ
thx
To make this video better, you could have timed the extensions in the timeline, as well as write them down in the description.
Donβt tell me donβt have time to watch 8 mins video?
1:45 auto close and auto rename are now available inbuilt with vs code you just needs to turn them on in setting.json and no extra extension are required
Thatβs cool didnβt know!
β@@AdrianTwarog You don't even need to turn nothing on, since I installed VSCode almost 6 months ago is been that way
Auto rename is not
@@MrTHOMASisBack it's present
If it's not working in your vs code just add
"editor.linkedEditing": "true" in your setting.json file
@@parbezbarbhuiya7009 Thanks mate!
I downloaded all the extentions, happy to start programing :)
1. You don't need auto close tag if you have Emmet, which you most certainly do.
2. You don't need auto rename tag either. There's a setting called "linked editing" in vscode itself to enable that.
3. No need to brackets pair colorizer either, this feature has been added to VsCode recently
I'm very new and I must say that the plugins shown in this video will surely save me a lot of headache. So, thanks for making this video.
you're definitely my favourite coding youtube!
great content.
That's great to hear! thanks :)
Thumbs up!
Now VS Code has its own Bracket Pair Colorizer feature btw.
Instead of Auto Rename Tag, you could click on the tag you wanna rename, and press F2. It will update the tag's pair. #oneLessExtension
Great extensions! I never liked the diffently colored brackets, but I'll give it another try. Also, I installed the icons extension. I never heard of it before and as a first impression, it looks great! Thanks for sharing your best VS Code extensions with us, Adrian!
Hey Claudio! for sure! :)
Good collection!
Another one to consider adding for your next video on these is Vuln Cost.
It adds immersive security insights while programming - detect vulnerabilities in third-party open source packages automatically while you code.
Im gonna check that out
I love the camera spins haha! awesome transitions :)
Thank you!! π
I love the design of his office, and theme of course.
Thanks!
Thank you!
4:30 yesterday I spent hours trying to solve an error that I had with styled-components... turns out I wrote "theme.color" instead of what should have been "theme.colors"... I was ready to flip the desk when I found out what caused the error ππ
I've done something similar!
I think youβre my guest for a beer! How awesome is the bracket pair colorizer extension!!
Wait, my VS Code auto closes tags already. Without the extension. Maybe it's not needed after all
Fyi regarding the auto close tag thing, there's actually an even faster way. If you're using VS Code it has Emmet already integrated into it. So let's say you're looking for a H2 tag - if you were to type the letter "h" with nothing else it'll suggest H1 through H6 and arrow keys + tab or a simple mouse click and you've got | written out for you so you can type in the middle of it right away. No plugins needed :)
Can you add timestamps please? That will be quite helpful
My setup is:
- Fira Code font
- Minimal Fedu theme
- Sidebar, notification bar are hidden. I toggle the file explorer using Ctrl Shift E
- Chalice Icons
based
Thanks a lot for this video sir.
I loved those extensions.
Glad to hear that
Canβt wait for the 2021 edition! :D
Cannot undo!
Auto Close Tag and Auto Rename Tag functionality was added to VS Code. You don't need those now. Great list btw.. :)
How to set?
Great video!
Thabks
Nice video adrian twarog , although I had some of these extensions,this video made me discover more extensions to ease my workflow
Great to hear!
ayu is good to, its a theme i recommend it if you're watching for cool themes
I've been stalling to customize my vs code out of laziness to search. You gave out most of the functionalities I've been wishing for! Thank you!
Awesome
Thanks for this. I had been using a proprietary workspace and had to figure out the different between editors and ides and it was just a bit more than I wanted to deal with on a Friday night. This helped.
I love the turning
Hahah trying to mix it up a little!
amaaaaaziiiiiiing
1:17 "having a harsh light isn't the best thing" - telling this having harsh lights all around in the room :)
ive just jumped from coffeecup to vscode and vscode is a revelation, its brill. but i fear too many addons because if i end up working at a company that doesn't use vscode, ill lose the luxuries and probably suffer
Auto close tag is very good but you can type the name of the tag like div and press tab it will create it automatically
The most needed extensions
One dark pro
Auto close tag
Auto rename tag
React native tools+
Code spell checker
Prettier
Vs code icons
None are groundbreaking must haves as you hyped them up for.
Can you please make a video about designing like an E-Commerce dashboard, It's really hard to design a good one, and You're really know what you're doing in designing and development too.
Yeah sure!
For administrators such dashboard comes with time..
@@AdrianTwarog π― Oh thank you
I highly recommend Leaper for tabbing out of quotations and parentheses etc.
Thank you, Adrianπ
This is awesome! Thanks for these valuable plugins, especially for us learning code!
Perfect video !! Tks ππ»
thanx now i finally can make what ever game i want π€©π€©π₯°
They are all very helpful, wish this video was post early and it will save me hundreds of hours to debug.
Iβll try!
Thank you so so much!!! You are a life saviour
thank you . helped me a lot as a beginner programmer
10/10 no bs straight to the point thanks
do we have a 2022 version?
What's a functionless react component?π€π€
Interesting question! I think maybe, a class one?! Or maybe I meant to say functional.... whoops!
Probably, a component without behaviors. Just contains the state and UI. Not sure if that's what it means. It's just an assumption.
Completed at wits end.
If you like the colors of One Dark Pro, but the contrast is too low for you (it looks very whitish/high gamma), check out Atom One Darker theme. Thank me later.
Hey check Material Product Icons it is a new feature in vscode I love it I bet u will too
I will, haven't seen that one before
but we actually don't need closing tag additional extension because it is appears by default in html coding in vs code
Oh thatβs cool!
Nice video, thank you for sharing it with us, very helpful.
Being expressive is good and makes people invested
But when you are TOO expressive, it jumps to uncanny valley.
Hi, Iβm new to coding , I added prettier to vs code but I canβt get it to work. I have seen several videos that say change it to your default formatter and format on save in settings which I have done. Neither made a difference. Iβm getting the prettier icon on the bottom right of the application. If anyone can help it would be appreciated thanks.
I love you, thanks!
Bracket pair coloring has been added as built in since 1.60
You forgot that the year just went by
Completely!
I recently started using VIM.
How is it?
@@AdrianTwarog Iβm using my mouse too much lol
Hello I have a problem : on my extension Bracket Pair Colorizer 2 , it says [Deprecated] .What it means and how to fix it?
thx it helped me a lot :)
Great to hear
Can you tell me why this is show like
Pls how I enable c# error squiggles in vscode?
When save your file then auto indentation of your code.
What is the name of vs code extension.
Auto beautify on save?
what do you do if you don't have this side menu? i tried to look up Prettier and its not coming up when i click main menu Extensions.
Anyone know a good scratch pad extension, where you can just click on a button inside vscode and access an ongoing simple file that you're making continual notes on?
If I search youtube all I get is a little of "best extensions" videos like this one, and you don't know, if any of them even mention it.
video is awesome a lot of useful stuffy, but i am stucked in that, whenever i mix php and html, the vscode autocompletions got mess up, php autocompletions are showing in html area and html autocompletions are showing in php area , and i don't want that. I want the php autocompletes only inside and html autocompletes in html area only_______
i have asked this question but no good solution found
As Atom is closing ,I'm a bit desperate as I'm going to miss Hydrogen extension. I'm going to switch to VS Code and I'd like to know if exists an extension similar to Hydrogen for executing codes just below my code lines (and NOT in the terminal window)
Great tips!
I am trying to build a 3d printer firmware (Marlin) but when I have finished the config files and am ready to build I get an error with a request to update my include path and I am informed that squiggles are disabled, How can I fix this?
I have problem with VS Code Live Server. It doesn't refresh automatically. It's very annoying and time consuming. Please help!!
Auto rename tag is now a VS built-in function
I learned this now, very cool!
Thank you so much§
I saw in another video that you for example type .enabled and it gives you a tag an a class and a closing-tag. What's the name of the extension?
Hi π , I want create a simple *exchange website by cloning and cutting 80% of the function, what extentions may help? What could may help?
I use this theme - " The best theme " ...Probably the best try it
I can't add python to vs code so l can start writting my first code in it.
Please some help.π
What is the problem?
Thank you.
How do I auto complete commands in terminal (based on prev commands)...have seen a lot of youtubers used it...never figured out how to... please share if you know how to.π
tabnine!
All extensions are awesome ... but code spell checker is so cool I need some extension like that but I can't find that one ... Thanks π
Great!
the fact that Sublime Text already has auto tag close... Such a great thing could be good as Vscode
how can i download the vscode 32bit for widnows 7, i am using an old machine somewhere, i can't find the
Does anyone know of an vscode extension that suggests css variables (--variable) from another JS file for styled component files?
Not sure on that one
what is the screenbrush software that he used? someone pls help!
I have vsc and use pythonn3.9.5. Now I cant debug. Message: I dont have a batch
I hate themes with red fonts, it always makes me think something is wrong.
Me too lol
You don't have an extension for debugging YAML. ππΌππΌππΌ Please make a video about this
isn't there any extensions that recommends attributes after a tag is typed for HTML?
How many takes to the opening scene?
More than one, less than a hundred!
@@AdrianTwarog π€£π
the super bight white light in the background in this video is really causing strain on the viewers eyes....
@Adrian why don't we use Kite more?
You can't miss IndentRainbow
hey @Adrian Twarog, why do you produce content in 4k60? its a huge file size.
Didn't really consider it too much, do you reckon I should reduce it, I just assumed youtube will downsample it to all quality versions?
Is it 2020 or 2021...π€
Whoops!
Very informative
What do you use to create the arrow in 3:11?
I want some tutorial type video from your side . I hope you will made it
I have a big one coming up, I prefer doing extra long ones when I can but they always take lots of work, and sadly they also seem to go poorly :(
Auto/rename tags are already built into vscode
Great!
can you suggest me some projects to practice in html CSS and JavaScript like website template
frontend mentor
how do I get onyx on vs code