HERE IS THE EMMET VIDEO YOU HAVE ALL BEEN ASKING FOR :) th-cam.com/video/EzGWXTASWWo/w-d-xo.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 TH-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! 👍
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.
"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.
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!!
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.
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
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).
-.- 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 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.
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
With 1 mill views and counting, maybe a good idea to add some annotation to tell the Bracket pair color thing is now baked in... Luckily the description gives a link to the setting for enabling it.
![“อ.เบียร์ คนตื่นธรรม” มาตามคำเรียกร้อง แหกศาสตร์ฮวงจุ้ย เตือนสติอย่างมงาย | แฉ 7 พ.ย. 67 [1/3]](http://i.ytimg.com/vi/5fc4S3xBNfc/mqdefault.jpg)
HERE IS THE EMMET VIDEO YOU HAVE ALL BEEN ASKING FOR :)
th-cam.com/video/EzGWXTASWWo/w-d-xo.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 TH-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
+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
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
"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.
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.
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!
As a beginner I was struggling with VS Code, your tutorial really helped, excellent
C. Pcccp
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 had been using VsCode , but i was wondering why the hell "prettier" was not working.Thank you . Now its working.
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!
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
Prettier is build in to VSCode, you could also change the settings so that VSCode formats your code on save
This channel will help me a lot . I will be thankful to Dev Ed for shout out . Great contents ,keep it up.
Much appreciated!
I was literally asking myself how to do the last part then you said to while I'm thinking. Nice Video! thanks!
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
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 😁
th-cam.com/video/EzGWXTASWWo/w-d-xo.html
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
Tutorial was really helpful, made my vscode easier to use
Everytime he goes to light theme..... "Uuuuhhhh!"
Lol
I feel the same.
No one say the name kkkkkkkk, just 'uhhh!'
I agree
"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.
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!
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
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.
Great video! I am thinking of moving from studio to code, and this helped me out a lot.
Glad it was helpful!
Man that bracket pair would save so many students from confusion.
For sure!
The most useful one I found here is the auto rename tag....thanks bro
Thank you for video. Finally configured my Prettier in VS Code.
Glad I could help
ThanX sir for these professional VS Code extensions.
TH-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 get a thumbs up from me just for knowing the difference between brackets, parenthesis and curly braces.
You actually sounds like the one form ted ed, which is smooth...
Css peek was best for me, thankyou
I am practising Python, but I can use some of extensions you've shown.
Thanks a lot.
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, TH-cam is the next one to learn, for 'php tutorials' 'php oop' etc.
thanks you for your fast switch from lighter theme :)
Omg I’m starting out coding and this is such fantastic advice
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).
I'm new here and just by seeing ur video, you just earned yourself a subscriber... Well done
Thank you!
if you wanna use sass/scss, I recommend you to use Prepros app. It's quicker than extension and more convenient
Thanks for this great list. I have installed 3. The REST Client is my favorite.
-.- 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.
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?
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.
Oooff those lights!
Dark theme ( not just in vs code ) is a blessing. 😍
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.
It was very useful, I install all them on my VS code.
Would be cool to see this updated for 2021!
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!!
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!
Viasfora for VS is the way to go for colorizing and formatting your code like what you're doing here but with 1 extension.
I like Bracket Pair Colorizer!
Thenk you for the suggestion
Haha your reaction when browsing through the light themes 😱
Thanks for sharing, that will make programming much easier
Thank you :)
From Bangladesh
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
try those Color themes maybe you will get in love with them Cobalt Next, Monokai, Palenight
Awesome extensions for vs code helped a lot
Glad it helped!
Great video! Really helps me alot!
Is their is any extension for MySQL testing in vs code. So that we can check the query results
"2020" in title.
Published 1 year ago.
OBJECTION!
This looks... muuuuuch useful than i thought
THANK YOU SO MUCH FOR THIS VIDEO
Thanks so much.I learned a lot from that.
Glad it was helpful!
Feeling confident again after having those extesions again in my tool bar :v
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: th-cam.com/video/EzGWXTASWWo/w-d-xo.html
these plugins are awesome! great collection!
Supper helpful. thanks man
Emmet feature is awesome!
An emmit video would be great, thanks!
I like how you're doing through the themes and you just immediately skips over the light themes
Very good and interesting content bro! Thank you for this and continues doing these nice videos!
Thank you for making my VS Code extremely amazing ☺️
No problem 😊
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
Amazing! Thank you very much for this. I'm a beginner and I'm very noob but your video gave me some skills.
You should have mentioned TabNine, it's absolutely helpful thing that makes my programming more fast and comfortable!
I'll check it out. Thanks!
Thank you for your video!! Very nice content!!
Glad you liked it!
Great tutorial .no waste of time
Glad you liked it
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
Amazingly useful visual extensions! Would you consider a video on great Python extensions?
For sure!
Yet again, awesome! Thanks!
Thank you!
Thank you great video demonstration! It surely helped a lot.
You're welcome!
Awesome channel. Help me a lot. Thank you
Glad it was helpful!
Thank you so much!
It helped me a lot 😊
You're welcome 😊
Thank you this was really helpful.
Best explanation.
You're welcome!
Very detailed and useful. Thank you so much
Glad it was helpful!
Emmet is the most useful extension or feature ever ❤️❤️❤️❤️
Very good! Thanks!
Glad you liked it!
With 1 mill views and counting, maybe a good idea to add some annotation to tell the Bracket pair color thing is now baked in... Luckily the description gives a link to the setting for enabling it.
Thank you so much. It is very helpful video for me.
Grate job man! I installed some of them. almost all ))
Great 👍
Great video ! Recommend to everyone who wants to speed up coding.
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!