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.
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 😂💀
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.
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!
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 :)
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
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.
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
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.
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)
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.
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.
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?
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
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.
" *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?
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 downloaded all the extentions, happy to start programing :)
I love the design of his office, and theme of course.
Thanks!
you're definitely my favourite coding youtube!
great content.
That's great to hear! thanks :)
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'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.
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
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 love the camera spins haha! awesome transitions :)
Thank you!! 😁
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 :)
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
Thumbs up!
Now VS Code has its own Bracket Pair Colorizer feature btw.
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?
1:17 "having a harsh light isn't the best thing" - telling this having harsh lights all around in the room :)
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'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
I love the turning
Hahah trying to mix it up a little!
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
Can you add timestamps please? That will be quite helpful
I think you’re my guest for a beer! How awesome is the bracket pair colorizer extension!!
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!
Can’t wait for the 2021 edition! :D
Cannot undo!
Thanks a lot for this video sir.
I loved those extensions.
Glad to hear that
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!
Wait, my VS Code auto closes tags already. Without the extension. Maybe it's not needed after all
You forgot that the year just went by
Completely!
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
Being expressive is good and makes people invested
But when you are TOO expressive, it jumps to uncanny valley.
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.
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
This is awesome! Thanks for these valuable plugins, especially for us learning code!
do we have a 2022 version?
10/10 no bs straight to the point thanks
None are groundbreaking must haves as you hyped them up for.
Auto rename tag is now a VS built-in function
I learned this now, very cool!
thank you . helped me a lot as a beginner programmer
I highly recommend Leaper for tabbing out of quotations and parentheses etc.
Thank you, Adrian👍
ayu is good to, its a theme i recommend it if you're watching for cool themes
When save your file then auto indentation of your code.
What is the name of vs code extension.
Auto beautify on save?
I recently started using VIM.
How is it?
@@AdrianTwarog I’m using my mouse too much lol
I use this theme - " The best theme " ...Probably the best try it
How many takes to the opening scene?
More than one, less than a hundred!
@@AdrianTwarog 🤣😂
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?
They are all very helpful, wish this video was post early and it will save me hundreds of hours to debug.
I’ll try!
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!
the fact that Sublime Text already has auto tag close... Such a great thing could be good as Vscode
I hate themes with red fonts, it always makes me think something is wrong.
Me too lol
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?
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)
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.
Great video!
Thabks
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.
@Adrian why don't we use Kite more?
Hello I have a problem : on my extension Bracket Pair Colorizer 2 , it says [Deprecated] .What it means and how to fix 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?
If you don't want to publish theme but want to use it, just copy to extensions folder :D
Can you tell me why this is show like
Thank you so so much!!! You are a life saviour
thanx now i finally can make what ever game i want 🤩🤩🥰
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.
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!
I have problem with VS Code Live Server. It doesn't refresh automatically. It's very annoying and time consuming. Please help!!
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.
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?
how can i download the vscode 32bit for widnows 7, i am using an old machine somewhere, i can't find the
You don't have an extension for debugging YAML. 🙏🏼🙏🏼🙏🏼 Please make a video about this
Hi 👋 , I want create a simple *exchange website by cloning and cutting 80% of the function, what extentions may help? What could may help?
What do you use to create the arrow in 3:11?
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
Pls how I enable c# error squiggles in vscode?
Is it 2020 or 2021...🤔
Whoops!
isn't there any extensions that recommends attributes after a tag is typed for HTML?
what is the screenbrush software that he used? someone pls help!
can you suggest me some projects to practice in html CSS and JavaScript like website template
frontend mentor
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 ... 🔥🔥
I have vsc and use pythonn3.9.5. Now I cant debug. Message: I dont have a batch
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!
hey, how do you earn. do you work for a company as a developer ?
Nice video, thank you for sharing it with us, very helpful.
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.
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
how do I get onyx on vs code
Perfect video !! Tks 👍🏻
Great tips!
Completed at wits end.
thx it helped me a lot :)
Great to hear
the super bight white light in the background in this video is really causing strain on the viewers eyes....
You can't miss IndentRainbow
" *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
amaaaaaziiiiiiing
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 :(
trust me material theme icon is better! I have used both of them!
2:05 you don't need this extension, VSCODE have it built in
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