HERE IS THE EMMET VIDEO YOU HAVE ALL BEEN ASKING FOR :) ua-cam.com/video/EzGWXTASWWo/v-deo.html 📚 My Favorite Web Design Books 📚 Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link) amzn.to/2JaiCL8
There is a plugin that does the opposite of 10:00. I mean that in css it recognizes the classes that you have HTML, because by default it does not, it does not recognize the classes that I have in html and I have to be writing the classes by hand and it would be much better if it recognized the classes that I already have in html. Hopefully you can help me and pass the plugin or some VSCode configuration to do that.
codeSTACKr LOL. I just commented on this video thinking it was brand new. The UA-cam algorithm is playing tricks on me. 🤣Glad you made the Emmet video. Cheers.
01) Material Theme (Darker Hight Contrast) & Material Icon Theme 02) Prettier - Code formatter 03) Bracket Pair Colorizer 2 04) Auto Rename Tag 05) REST Client 06) CSS Peek 07) HTML CSS Support 08) Live Sass Compiler 09) Live Server 10) Emmet
@@grzegorzkrzyzanski8060 15:00 Emmet is baked into VS Code by default so you don't need to add it as an extension, but is still quite useful even with 5 minutes of learning (also grab the cheat sheet from their website) code.visualstudio.com/docs/editor/emmet
When coding in a bright environment dark themes will eventually hurt eyes. Pupils will open to compensate low brightness of the dark theme, letting ambient light to sneak through, forces your eyes to do extra work. It's like using sunglasses without UV filter. Using the light themes in bright conditions and dark themes in dark conditions will decrease the eye's stress.
This video is great! I've been coding for 10 years, and I get very precious about my code editor. I've tried new extensions from time to time but have ended up with bad experiences such as buggy behavior or an unstable editor. I probably adopted 5 of the extensions shown above, which is unheard of, for me. Two thumbs up! I feel like Christmas came early.
bro you literally changed my life. Can't tell you how many hours combined I wasted trying to debug my html code and trying to write the classes, ids, etc into the tags without using these shortcuts you gave. Thank! Liked and Subscribed.
Outstanding suggestions! Gold!! And YES on the future Emmet video. I’m constantly dazzled by Emmet. I generally prefer pure JS over most frameworks that seem only to have been invented to save keystrokes but ultimately muddy up the software architecture. Emmet saves more keystrokes than any framework and gives you well-formed native code literally instantly. And thanks for the excellent advice. Most appreciated. Subscribed! 👍
Wow! Thank you so much for sharing your knowledge. Not only did I like the video but subscribed as well. I'll be looking forward to seeing more of your vids and putting into practice what I learn.
Thx! I was trying to figure out how to get those color coded parenthesis for a while now. I thought it was a customization of syntax highlighting at first.
"Auto Rename Tag".... I've been waiting for this feature since my early days of web coding. I always hated the fact that I had to change both tags. Why won't my editor change them for me? Thanks for the incredible list. I plan on downloading / installing all of these.
for those who want to install the Live Server and activate the Browser preview on your VSCode you have to activate in the settings of the extension. Also i had to install another extension called "browser preview" since Live Server didnt allow me to use this feature without this another extension. Good video i downloaded almost all the extensions :D
Thank you so much. What extension do I install in vscode to split my screen to view my live server(to the right of my screen) as you did in this tutorial?
Yes I think Emmet deserves a video. I'm just passing through here but I can imagine myself wanting to watch such things. Especially if it just showed up in my feed. You know, algorithmicly. Like this video did.
I learned more from this one video then I have in the last 6 weeks using VSCode. The REST extension is very exciting. You have gained a new subscriber. Keep broadcasting!!
Thank you for this valuable video. What screen recording tool are you using? I like it a lot. I will soon need to create a training course and want to use a good and not-so-complicated screen recording. Thanks! ..Ben
I did not install *Emmet* extension, but VSCode already comes with the line shortcuts (e.g ul>li*4). But thanks for the tip because I didn't know you could do that anyway, you just made my coding much fun.
I use PhpStorm it's just the best for me, everything can be changed whoever i want and can set shortcuts. The extensions are optional and the power on larger projects it's insane.
Do you know a good site for me to learn php in other than udemy I’m interested in learning a php framework but I want to understand object oriented php first and understand it. Do
-.- many of us (light theme user) love it so much. for my reasons for loving white + I'm an early bird, so i code in day time + switch from chrome to code if I have dark theme, my eyes strained due to the color changes.
Instead of using the Liveserver extension I use the default debug tool and change the "reload debug" shortcut to CTRL+S. So every time I save a change in any of my files in the project it will automatically reload the page in the debug browser. (NB debugging mode has to be running).
wow!!!! you are awesome!! thank you very much!! As I am new student, I am using all different editor to comapre such as bracket, sublime, atom, vs.....but I feel something is missing every editor.....and now I got perfect VS editor with those extensions. thank you thank you thank you!! oh i have one question, what is undo button like if I deleted few codes and I want to undo to restore it, then what is button for that? other editor has ctrl + u key. but I coudln't find it in VS.
Some very useful stuff here, thank you. I wonder if you use snippets? I'm currently using 'Easy-Snippet 0.1.7' have struggled with others but still find this one a little unwieldy. Do you have a favourite and have you any plans to create a video that includes Snippet use? Many thanks for all your work
Thank you. I was going to include some snippet libraries but decided I should just create a video on only snippets. So look for that coming soon. Thanks for watching!
Great vid.! Do You know any way/program that can show the included libraries in a sketch as a map diagram with connections to those libraries (like sql tables)?? Thabks a lot! .
Great video man! another tool Ive always liked was my css properties sorted and grouped so they keep the same respective order. Keep s things easier to find. I run "CSS Sorter" by Zascal, and it does the trick. Id love to know if you have any thoughts or alternatives on this. I've always wondered if there's a way to do this with prettier. Thanks again for the helpful videos.
in the 24th or 6th second you talked about the functional extension, which I do not find in this video. Do you have one, can you please point to your top 10 functional VS Code extensions video, please???
HERE IS THE EMMET VIDEO YOU HAVE ALL BEEN ASKING FOR :)
ua-cam.com/video/EzGWXTASWWo/v-deo.html
📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)
amzn.to/2JaiCL8
Emmet is included by default.
@@klarnorbert Yep, that's what I say in the video. But I've gotten a lot of questions about it so wanted to cover it quickly at the end.
There is a plugin that does the opposite of 10:00.
I mean that in css it recognizes the classes that you have HTML, because by default it does not, it does not recognize the classes that I have in html and I have to be writing the classes by hand and it would be much better if it recognized the classes that I already have in html.
Hopefully you can help me and pass the plugin or some VSCode configuration to do that.
What about the code spliter and we can view output by side of the editor ? Please tell me about this extension.
codeSTACKr LOL. I just commented on this video thinking it was brand new. The UA-cam algorithm is playing tricks on me. 🤣Glad you made the Emmet video. Cheers.
"I don't know why would anyone use light theme"...
Liked and subscribed.
😉
e-ink monitor
Maybe there are not programmer
Because it's very difficult to read on gorilla glass due to reflection.
Liked and subscribed.
I don't know who this Jason guy is, but he sure is famous.
He is. His full name is jason stathom, along with his brothet jason momoa.
@@notyoursurya Oh, thank you for letting me know. Much appreciated.
HES HECTIC
Jason Newsted is Metallica's former bassist. Go check him out.🙂
Jason is the first red ranger
01) Material Theme (Darker Hight Contrast) & Material Icon Theme
02) Prettier - Code formatter
03) Bracket Pair Colorizer 2
04) Auto Rename Tag
05) REST Client
06) CSS Peek
07) HTML CSS Support
08) Live Sass Compiler
09) Live Server
10) Emmet
+3.5) Indent-rainbow. Also, 02) +Don't forget to change settings on file save
Sorry, which Emmet ?
@@grzegorzkrzyzanski8060 15:00 Emmet is baked into VS Code by default so you don't need to add it as an extension, but is still quite useful even with 5 minutes of learning (also grab the cheat sheet from their website) code.visualstudio.com/docs/editor/emmet
@@Zen-rl5pv thank you
;)
Hey u forgot Butter
marketplace.visualstudio.com/items?itemName=SaiRohith.DarkButter
When coding in a bright environment dark themes will eventually hurt eyes. Pupils will open to compensate low brightness of the dark theme, letting ambient light to sneak through, forces your eyes to do extra work. It's like using sunglasses without UV filter. Using the light themes in bright conditions and dark themes in dark conditions will decrease the eye's stress.
@Саша yes you can..
love the subtle "ugh" when light theme pops up
This video is great! I've been coding for 10 years, and I get very precious about my code editor. I've tried new extensions from time to time but have ended up with bad experiences such as buggy behavior or an unstable editor. I probably adopted 5 of the extensions shown above, which is unheard of, for me. Two thumbs up! I feel like Christmas came early.
As a beginner I was struggling with VS Code, your tutorial really helped, excellent
C. Pcccp
I had been using VsCode , but i was wondering why the hell "prettier" was not working.Thank you . Now its working.
The bracket pair colorizer is simple but some god level stuff which will make my life simpler. Thanks
CSS peek is a lifesaver, thanks man!
Is it working for styled-components too?
I was literally asking myself how to do the last part then you said to while I'm thinking. Nice Video! thanks!
bro you literally changed my life. Can't tell you how many hours combined I wasted trying to debug my html code and trying to write the classes, ids, etc into the tags without using these shortcuts you gave. Thank! Liked and Subscribed.
Glad I could help!
Outstanding suggestions! Gold!! And YES on the future Emmet video. I’m constantly dazzled by Emmet. I generally prefer pure JS over most frameworks that seem only to have been invented to save keystrokes but ultimately muddy up the software architecture. Emmet saves more keystrokes than any framework and gives you well-formed native code literally instantly. And thanks for the excellent advice. Most appreciated. Subscribed! 👍
Thank you!
This channel will help me a lot . I will be thankful to Dev Ed for shout out . Great contents ,keep it up.
Much appreciated!
wow thanks for clarifying things out, i was wondering what the whole bunch of icon on the VS do... am sticking around for more tutoring
Wow! Thank you so much for sharing your knowledge. Not only did I like the video but subscribed as well.
I'll be looking forward to seeing more of your vids and putting into practice what I learn.
bro video is straight fire!! thank you for giving facts and showing examples
Prettier is build in to VSCode, you could also change the settings so that VSCode formats your code on save
Thx! I was trying to figure out how to get those color coded parenthesis for a while now. I thought it was a customization of syntax highlighting at first.
Tutorial was really helpful, made my vscode easier to use
"Auto Rename Tag".... I've been waiting for this feature since my early days of web coding. I always hated the fact that I had to change both tags. Why won't my editor change them for me?
Thanks for the incredible list. I plan on downloading / installing all of these.
for those who want to install the Live Server and activate the Browser preview on your VSCode you have to activate in the settings of the extension. Also i had to install another extension called "browser preview" since Live Server didnt allow me to use this feature without this another extension. Good video i downloaded almost all the extensions :D
UA-cam recommended your Channel. You have really nice content. Subscribed!
Awesome, hope it helps. More on the way. Thank you for your support!
@@codeSTACKr Looking forward man!
You actually sounds like the one form ted ed, which is smooth...
I'm new here and just by seeing ur video, you just earned yourself a subscriber... Well done
Thank you!
Thank you so much. What extension do I install in vscode to split my screen to view my live server(to the right of my screen) as you did in this tutorial?
For me very useful are:
1) CodeSnap
2) GitBlame
3) Filesize
4) REST Client
5) Prettier
Everytime he goes to light theme..... "Uuuuhhhh!"
Lol
I feel the same.
No one say the name kkkkkkkk, just 'uhhh!'
I agree
thanks you for your fast switch from lighter theme :)
Yes I think Emmet deserves a video. I'm just passing through here but I can imagine myself wanting to watch such things. Especially if it just showed up in my feed. You know, algorithmicly. Like this video did.
Here's the Emmet video 😁
ua-cam.com/video/EzGWXTASWWo/v-deo.html
Man that bracket pair would save so many students from confusion.
For sure!
Great video! I am thinking of moving from studio to code, and this helped me out a lot.
Glad it was helpful!
Thank you for video. Finally configured my Prettier in VS Code.
Glad I could help
Feeling confident again after having those extesions again in my tool bar :v
You get a thumbs up from me just for knowing the difference between brackets, parenthesis and curly braces.
I am practising Python, but I can use some of extensions you've shown.
Thanks a lot.
ThanX sir for these professional VS Code extensions.
Omg I’m starting out coding and this is such fantastic advice
I learned more from this one video then I have in the last 6 weeks using VSCode. The REST extension is very exciting. You have gained a new subscriber. Keep broadcasting!!
Thank you for your feedback and support!
Css peek was best for me, thankyou
Just with the "wordwrap" setting, u my good sir, have convinced me to susbscribe ... 🖖🖖🖖 ... "Live long and prosper"
Much appreciated!
I am quite new to VS Code. This is super helpful. May I know if you use any extension to format your text code, like color?
Thank you for this valuable video.
What screen recording tool are you using? I like it a lot. I will soon need to create a training course and want to use a good and not-so-complicated screen recording.
Thanks!
..Ben
Thanks! I use OBS
The most useful one I found here is the auto rename tag....thanks bro
I did not install *Emmet* extension, but VSCode already comes with the line shortcuts (e.g ul>li*4). But thanks for the tip because I didn't know you could do that anyway, you just made my coding much fun.
Thanks for this great list. I have installed 3. The REST Client is my favorite.
Thank you for sharing and tutoring us so much valuable tips, let us have a great start to learn html, CSS!
You're very welcome!
Thanks for sharing, that will make programming much easier
It was very useful, I install all them on my VS code.
I use PhpStorm it's just the best for me, everything can be changed whoever i want and can set shortcuts. The extensions are optional and the power on larger projects it's insane.
Yep, I've found that code editors are sometimes personal. Once you've found one that works for you, stick with it. :)
Do you know a good site for me to learn php in other than udemy I’m interested in learning a php framework but I want to understand object oriented php first and understand it. Do
@@Kanexxable glad that you think like that, UA-cam is the next one to learn, for 'php tutorials' 'php oop' etc.
try those Color themes maybe you will get in love with them Cobalt Next, Monokai, Palenight
Very good and interesting content bro! Thank you for this and continues doing these nice videos!
-.- many of us (light theme user) love it so much. for my reasons for loving white
+ I'm an early bird, so i code in day time
+ switch from chrome to code if I have dark theme, my eyes strained due to the color changes.
I like Emmet! I want to see more!
I use Dracula theme, n i love it,
+ FireCode font (download in github) with FontLigature: *true*
I'll check out that theme. Thanks for sharing!
That bootcamp
Instead of using the Liveserver extension I use the default debug tool and change the "reload debug" shortcut to CTRL+S. So every time I save a change in any of my files in the project it will automatically reload the page in the debug browser. (NB debugging mode has to be running).
Great video! Really helps me alot!
As a hobbyist and VS Code newbie there was so much good stuff in here. Had to familiarize myself & then come back. Please can you do a video on emmet?
Thanks! I did a video on Emmet a while back: ua-cam.com/video/EzGWXTASWWo/v-deo.html
Wow, all things I am interested in using. Thanks.
Learning that you can put random lorem text with emmet was like discovering fire to me xD
Thank you :)
From Bangladesh
Amazing! Thank you very much for this. I'm a beginner and I'm very noob but your video gave me some skills.
An emmit video would be great, thanks!
One important extension you forgot is Gitlens, which enables you to see every commit and who commited that code. Please try it ones.
For sure! It's a great extension!!
Haha your reaction when browsing through the light themes 😱
these plugins are awesome! great collection!
Is their is any extension for MySQL testing in vs code. So that we can check the query results
well done Sir this video helps me a lot in web develop, keep going making more nice courses ! so many thanks!
Thank you for your support!
Hey, nice video. Emmet seems to be really interesting. Would love to have a video on this subject. Keep up the good job !
On the way.. Thanks for your support!
Try to use 'inline parameter' extension, it will help you when making an instance or using a method. It really helps me
Thanks! I'll give it a try.
if you wanna use sass/scss, I recommend you to use Prepros app. It's quicker than extension and more convenient
Would be cool to see this updated for 2021!
THANK YOU SO MUCH FOR THIS VIDEO
Thank you great video demonstration! It surely helped a lot.
You're welcome!
Thenk you for the suggestion
This looks... muuuuuch useful than i thought
Oooff those lights!
Dark theme ( not just in vs code ) is a blessing. 😍
Thank you so much. It is very helpful video for me.
1.38 He said, "Idk why anyone would use lighter"
Me: Paused video and changed my theme to dark from lighter😂🤣
🤣
😂 😂 lol...
my CTO uses light theme... What a time to be alive...
wow!!!! you are awesome!! thank you very much!! As I am new student, I am using all different editor to comapre such as bracket, sublime, atom, vs.....but I feel something is missing every editor.....and now I got perfect VS editor with those extensions. thank you thank you thank you!!
oh i have one question, what is undo button like if I deleted few codes and I want to undo to restore it, then what is button for that? other editor has ctrl + u key. but I coudln't find it in VS.
Thanks! Ctrl+z
Some very useful stuff here, thank you. I wonder if you use snippets? I'm currently using 'Easy-Snippet 0.1.7' have struggled with others but still find this one a little unwieldy. Do you have a favourite and have you any plans to create a video that includes Snippet use? Many thanks for all your work
Thank you. I was going to include some snippet libraries but decided I should just create a video on only snippets. So look for that coming soon.
Thanks for watching!
@@codeSTACKr thank you, that will be great.
Thank you, very helpful extensions.
Awesome extensions for vs code helped a lot
Glad it helped!
Thanks so much.I learned a lot from that.
Glad it was helpful!
Supper helpful. thanks man
Viasfora for VS is the way to go for colorizing and formatting your code like what you're doing here but with 1 extension.
Amazingly useful visual extensions! Would you consider a video on great Python extensions?
For sure!
I like Bracket Pair Colorizer!
Thank you this was really helpful.
Best explanation.
You're welcome!
"2020" in title.
Published 1 year ago.
OBJECTION!
Great vid.!
Do You know any way/program that can show the included libraries in a sketch as a map diagram with connections to those libraries (like sql tables)??
Thabks a lot! .
Wow, I've never looked into that. I'll do some research and let you know what I come up with.
Thanks for watching!
Amazing , got any mate later ?
Great video man! another tool Ive always liked was my css properties sorted and grouped so they keep the same respective order. Keep s things easier to find. I run "CSS Sorter" by Zascal, and it does the trick. Id love to know if you have any thoughts or alternatives on this. I've always wondered if there's a way to do this with prettier. Thanks again for the helpful videos.
Great tip! I'll check that one out.
Good video. Question: how do you blur your screen and highlight only snippets of code you want to focus on?
I use Davinci Resolve to edit my videos. It's all in the editing :)
in the 24th or 6th second you talked about the functional extension, which I do not find in this video. Do you have one, can you please point to your top 10 functional VS Code extensions video, please???
These are great. Keep up the good work
Thank you for your video!! Very nice content!!
Glad you liked it!
Thanks for great vid. Is there any VS Code extension that copies classes and ides from html and pasts them into css file?
Hmm. I've never looked for that. Let me see what I can find.
nice one. However for me the first necessary plugin i would never miss is VSCodeVim, i cant do coding without it...
Very detailed and useful. Thank you so much
Glad it was helpful!
Thank you so much!
It helped me a lot 😊
You're welcome 😊