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
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
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.
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 :)
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 😂💀
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!
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.
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.
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
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)
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.
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.😀
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?
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.
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.
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.
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
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
" *The token && is not a valid separator in this version* " Please i need _🙏 😫 😭 😩 a solution for this problem whenever I run code this pops up please please_
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
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!
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?
you're definitely my favourite coding youtube!
great content.
That's great to hear! thanks :)
I downloaded all the extentions, happy to start programing :)
I love the camera spins haha! awesome transitions :)
Thank you!! 😁
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
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
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.
Thumbs up!
Now VS Code has its own Bracket Pair Colorizer feature btw.
I love the design of his office, and theme of course.
Thanks!
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 :)
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!
Wait, my VS Code auto closes tags already. Without the extension. Maybe it's not needed after all
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! :)
I think you’re my guest for a beer! How awesome is the bracket pair colorizer extension!!
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
Thank you!
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
Pls how I enable c# error squiggles in vscode?
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 the turning
Hahah trying to mix it up a little!
Hello I have a problem : on my extension Bracket Pair Colorizer 2 , it says [Deprecated] .What it means and how to fix it?
Can you tell me why this is show like
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
I highly recommend Leaper for tabbing out of quotations and parentheses etc.
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.
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)
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?
do we have a 2022 version?
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.
Great video!
Thabks
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.
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!
what is the screenbrush software that he used? someone pls help!
Thanks a lot for this video sir.
I loved those extensions.
Glad to hear that
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
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!
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 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?
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?
Can you add timestamps please? That will be quite helpful
When save your file then auto indentation of your code.
What is the name of vs code extension.
Auto beautify on save?
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.
I have problem with VS Code Live Server. It doesn't refresh automatically. It's very annoying and time consuming. Please help!!
how can i download the vscode 32bit for widnows 7, i am using an old machine somewhere, i can't find the
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 can't add python to vs code so l can start writting my first code in it.
Please some help.🙂
What is the problem?
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
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!
Can’t wait for the 2021 edition! :D
Cannot undo!
hey adrian please tell us about google people api .. and how can we use it ... for me in react
I did a video on google firebase api worth checking out
@@AdrianTwarog yes I know but there's less videos on people api please tell us how can we implement .. it
I got one planned like this!
@@AdrianTwarog already man thanks ... 🔥🔥
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
amaaaaaziiiiiiing
@Adrian why don't we use Kite more?
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
1:17 "having a harsh light isn't the best thing" - telling this having harsh lights all around in the room :)
isn't there any extensions that recommends attributes after a tag is typed for HTML?
Perfect video !! Tks 👍🏻
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?
I recently started using VIM.
How is it?
@@AdrianTwarog I’m using my mouse too much lol
How many takes to the opening scene?
More than one, less than a hundred!
@@AdrianTwarog 🤣😂
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
ayu is good to, its a theme i recommend it if you're watching for cool themes
10/10 no bs straight to the point thanks
thanx now i finally can make what ever game i want 🤩🤩🥰
This is awesome! Thanks for these valuable plugins, especially for us learning code!
What do you use to create the arrow in 3:11?
thx it helped me a lot :)
Great to hear
can you suggest me some projects to practice in html CSS and JavaScript like website template
frontend mentor
You don't have an extension for debugging YAML. 🙏🏼🙏🏼🙏🏼 Please make a video about this
The most needed extensions
One dark pro
Auto close tag
Auto rename tag
React native tools+
Code spell checker
Prettier
Vs code icons
Thank you, Adrian👍
I hate themes with red fonts, it always makes me think something is wrong.
Me too lol
What about Mithril Emmet?
Make typing html really fast
They are all very helpful, wish this video was post early and it will save me hundreds of hours to debug.
I’ll try!
None are groundbreaking must haves as you hyped them up for.
how do I get onyx on vs code
thank you . helped me a lot as a beginner programmer
" *The token && is not a valid separator in this version* "
Please i need _🙏 😫 😭 😩 a solution for this problem whenever I run code this pops up please please_
Which language are you using
@@parbezbarbhuiya7009 c++ please help
@@TheZaheer82 oh sorry I m not much familiar with c++. Try to goggle it
@@parbezbarbhuiya7009 even google also don't have much results and the other ones don't work
@@parbezbarbhuiya7009 no problem
Thank you so so much!!! You are a life saviour
Bracket pair coloring has been added as built in since 1.60
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
I love you, thanks!
I have vsc and use pythonn3.9.5. Now I cant debug. Message: I dont have a batch
You forgot that the year just went by
Completely!
Completed at wits end.
If you don't want to publish theme but want to use it, just copy to extensions folder :D
Auto rename tag is now a VS built-in function
I learned this now, very cool!
Nice video, thank you for sharing it with us, very helpful.
Hi Adrian, what would you recommend? Bracket Pair Colorizer version 1 or 2!
Go to Vscode settings and search "bracketPairColorization", just enable it. You don't need to download any extention.
@@iahmadsaeed11 thank you, much appreciated.
the fact that Sublime Text already has auto tag close... Such a great thing could be good as Vscode
1:50 but doesn't emmet do that?
Great tips!
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 :(
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!
Very informative
Being expressive is good and makes people invested
But when you are TOO expressive, it jumps to uncanny valley.
I use this theme - " The best theme " ...Probably the best try it
the super bight white light in the background in this video is really causing strain on the viewers eyes....