Write code faster in VS Code with Emmet shortcuts

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ก.ย. 2024

ความคิดเห็น • 299

  • @tasnimul
    @tasnimul 3 ปีที่แล้ว +49

    You missed this one:
    ul>li*4{list-item-$}
    this will create 4 list items inside an ul and each of them will have an innerText of list-item-1/2/3/4
    there is also something called wrap abbreviation which can be accessed from the command palette and can be used for wrapping elements with containers after creating them

    • @TheCoderCoder
      @TheCoderCoder  3 ปีที่แล้ว +8

      Thanks for sharing! Great tip 🔥

    • @ilovemanga442
      @ilovemanga442 ปีที่แล้ว +4

      yeah yeah. and we can also use it for tags:
      div[class="divs div-$"]*4
      will create 4 div items with class "divs" and a unique class for each div in order "div-1" div-2" "div-3" "div4" classes.

    • @kishorsarania9176
      @kishorsarania9176 ปีที่แล้ว +2

      Thanks dude ,,,,,

    • @todsapon9854
      @todsapon9854 2 หลายเดือนก่อน

      thank you

  • @beccuh
    @beccuh 4 ปีที่แล้ว +81

    Ahhh! This is literally everything I needed to know. Definitely bookmarking this for future reference 😅 Thank you for another great tutorial!

    • @TheCoderCoder
      @TheCoderCoder  4 ปีที่แล้ว +9

      yay!! There are a lot more shortcuts I could probably take advantage of, but I haven't learned them all yet haha 😂

    • @nalleswarannaganathan3783
      @nalleswarannaganathan3783 3 ปีที่แล้ว +4

      @@TheCoderCoder But we would definitely learnt the all the things from u. 😉

    • @mosessamuel6918
      @mosessamuel6918 3 ปีที่แล้ว

      you all prolly dont give a shit but does anybody know a tool to log back into an Instagram account..?
      I was dumb forgot the password. I would appreciate any tricks you can offer me.

    • @MYRZO28
      @MYRZO28 2 ปีที่แล้ว +4

      1 more Emmet shortcut she didn't tell in this video
      For creating type of a tag
      Example
      Input:submit
      Result,

    • @mintesnotmelese7912
      @mintesnotmelese7912 2 ปีที่แล้ว +1

      @@MYRZO28 Thanks! Loved it

  • @joelcurtis562
    @joelcurtis562 3 ปีที่แล้ว +10

    Just started using VS Code and this video is a great jump-start to efficiency. Excellent content. Subscribed.

  • @WackLantern
    @WackLantern 2 ปีที่แล้ว +1

    HEY thanl yu so so much for this video! I moved from Sublime to VS and was absolutely lost on how to use shortcuts for the code typing. This video was incredibly helpful, thank you again!

  • @ashleyhunt4831
    @ashleyhunt4831 3 ปีที่แล้ว +1

    I've been using VSCode for a while and realized recently that I didn't even know how to utilize emmet! This video was awesome and super helpful =)

  • @charlz.
    @charlz. 4 ปีที่แล้ว +1

    I watched this video few weeks back.
    Since then I've been able to write more codes in a shorter time. Thanks Alot, this really helped.

  • @dazecm
    @dazecm 3 ปีที่แล้ว +2

    Thanks for sharing Jessica. Who doesn't like cool stuff that saves time and lessens the pain-points of writing code?

  • @ReadyDesignerOne
    @ReadyDesignerOne 3 ปีที่แล้ว +1

    Nice, love the one which saves you typing div before the class

  • @mmazatae
    @mmazatae 3 ปีที่แล้ว +1

    I am a completely new to the coding world, and your tips are very helpful. Thank you so much for making this video.

  • @thecodingsim6003
    @thecodingsim6003 2 ปีที่แล้ว +1

    YOU ARE SO HELPFUL!!! Thank you so much !

  • @midnightcat6116
    @midnightcat6116 4 ปีที่แล้ว +3

    You deserve more subscribers & have the best tutorials I’ve found on the web so far. 🙌☺️😬🌿

  • @gotem370
    @gotem370 3 ปีที่แล้ว +3

    ive dipped my leg up to my ankle into programming and web development and I am honestly just gobsmacked at the amount of learning, memorization and skill required to code professionally. How do you not just go full Office Space on your hardware?

  • @KineticMusik
    @KineticMusik 2 ปีที่แล้ว +1

    you can press crtl + enter to enter a new line below the one you're on; instead of going to the end of the line and then pressing enter.

  • @polka.dot.
    @polka.dot. 7 หลายเดือนก่อน

    During this whole video, I was just like: WOW! so so so cooool!

  • @medeirosbrendon
    @medeirosbrendon 2 ปีที่แล้ว

    Eventually I always come back to this amazing video!

  • @suchitsheth1192
    @suchitsheth1192 4 ปีที่แล้ว +5

    Thank You,
    it was a great video.
    I also like wrapping the tag functionality of the emmet.

  • @favouritejome
    @favouritejome 4 ปีที่แล้ว +11

    Thanks for this video, especially the word wrap. I've also wanted to figure that out.

    • @TheCoderCoder
      @TheCoderCoder  4 ปีที่แล้ว +2

      Awesome, I'm glad this could help!

  • @keronwilliams5392
    @keronwilliams5392 3 ปีที่แล้ว +2

    Thank you!!! You always get straight to the point! Love it here 🍻

  • @walkingin6375
    @walkingin6375 3 ปีที่แล้ว +1

    Thank you

  • @edlynpamittan194
    @edlynpamittan194 3 ปีที่แล้ว +1

    More videos of this please I am making a list of this for reference just put it on the wall and if I need it I will just pinpoint it. Btw thanks for this video it helps a lot. Blessed you.

  • @bluesdog88
    @bluesdog88 2 ปีที่แล้ว +1

    Amazingly cool tips, thank you!

  • @kevinbegin3049
    @kevinbegin3049 3 ปีที่แล้ว +2

    just what I was looking for. awesome stuff. thank you for posting.

  • @ygcjayalal
    @ygcjayalal 3 ปีที่แล้ว +1

    your guiding way is awesome. thank you for it. but i can not get the tag or any shortcut on my mac. did you install special apps for it . or it comes automatically please help me. i am using the latest version of vs code and already i have install some apps for python programming and javascript
    thank you

  • @mohitkumarsahu3494
    @mohitkumarsahu3494 3 ปีที่แล้ว +1

    great video to watch when starting web dev as a beginner. loved this video.

  • @futurecoder7824
    @futurecoder7824 2 ปีที่แล้ว +1

    Wow! This is going to help out a bunch. I'm still a new coder, so is this package I need to get on VS Code? What are some useful tips you have for a beginner learning Frontend Development?

  • @valandilluinwe7332
    @valandilluinwe7332 3 ปีที่แล้ว +1

    I love your channel on youtube, thanks for help me, greetings from Chile

  • @RadhadasiMinsk
    @RadhadasiMinsk 2 ปีที่แล้ว +1

    Thank you. I appreciate you for such simple explanation of information.

  • @rakshitarenja7123
    @rakshitarenja7123 4 ปีที่แล้ว +2

    Thanks, these shortcuts were much needed

  • @austinMANIFA
    @austinMANIFA ปีที่แล้ว +1

    After using shortcuts to create the elements how do you move cursor from middle of angled brackets to the end of the line? Are you just simply using the "end" key or is there another shortcut?

  • @aseembaranwal
    @aseembaranwal 3 ปีที่แล้ว

    Came after watching your video on freecodecap. You go girl.

  • @sklldllm
    @sklldllm 3 ปีที่แล้ว +5

    Great video! You can write p*5>lorem20 instead of (p>lorem20)*5, at least I find that easier :)

  • @shrihansini1199
    @shrihansini1199 4 ปีที่แล้ว +1

    This is what I was hunting for since long days ..! Thanks.!

  • @kishorsarania9176
    @kishorsarania9176 ปีที่แล้ว

    I have been looking for this for last one month

  • @sadafwaqas3959
    @sadafwaqas3959 3 ปีที่แล้ว +1

    Wounderfull vedio , very helpful.
    plz can you tell me how to move multiple lines in right and left direction (in visual Studio codet) to look code better. thanks

  • @TechnicalMoinBD
    @TechnicalMoinBD 3 ปีที่แล้ว +1

    I learn a lot from this video. Thanks

  • @dheepankarthiksworld6419
    @dheepankarthiksworld6419 3 ปีที่แล้ว +2

    Could you make a video on the pre-built-in VS Code Shortcuts and how we can modify those VS Code Shortcuts?

  • @PeterEvans0
    @PeterEvans0 3 ปีที่แล้ว +2

    That's really helpful, will definitely contribute to my html productivity! Thank you.

  • @ankitgoswami1822
    @ankitgoswami1822 3 ปีที่แล้ว

    These are all my favorite ❤️ Emmet shortcut.

  • @Saaad2
    @Saaad2 2 ปีที่แล้ว

    Not sure either you are excellent programmer or video editor cos we watch your videos for programming stuff and you inspired us with your editing skills!

  • @jellythecube
    @jellythecube 3 ปีที่แล้ว +2

    That was so helpful! Thank you so much!

  • @hetvishah926
    @hetvishah926 2 ปีที่แล้ว

    save lot of my time and help me to code fast thank you coder coder

  • @DecentralEyes
    @DecentralEyes 4 ปีที่แล้ว +1

    Wow amazing productivity booster. Now I need to wean myself away from the mouse and more toward keyboard shortcuts.

  • @laxmigold1225
    @laxmigold1225 4 ปีที่แล้ว +4

    Ahhh! This is literally everything I needed to know. Definitely bookmarking this for future reference 😅 Thank you for another great tutorial!!!!!!!!

  • @matthewhayes9734
    @matthewhayes9734 2 ปีที่แล้ว

    Thank you for this video. It's saved me a lot of time!

  • @slzrkatereeen
    @slzrkatereeen 3 ปีที่แล้ว +1

    Hi you know what I learn HTML and CSS in just one of ur videos its really helpful can I ask something can I make a voting system just using vs code?

  • @tariqsaeid9856
    @tariqsaeid9856 4 ปีที่แล้ว +1

    Exactly what I was looking for, Super Explanation , thank a lot

  • @allyonightmare
    @allyonightmare 3 ปีที่แล้ว +1

    What a great video! Thank you so much!

  • @michaelmolter6180
    @michaelmolter6180 2 ปีที่แล้ว +1

    Can you have the cursor jump between tags? This would be huge when filling out multiple tags (when the {text}) syntax isn't enough).

  • @stormybear4986
    @stormybear4986 2 ปีที่แล้ว +1

    Brilliant tutorial! Very informative and useful!!

  • @revvnijaa4177
    @revvnijaa4177 3 ปีที่แล้ว

    Cool teacher ever lots of love from india..

  • @rusca8
    @rusca8 3 ปีที่แล้ว +1

    This is awesome. Wish I knew it long before, but I'll put it to good use from now on. :)

  • @SaiVocals
    @SaiVocals 3 ปีที่แล้ว

    Thank You helped me, from now on i will watch all your videos.

  • @dorgivaljuniorr
    @dorgivaljuniorr 2 ปีที่แล้ว +1

    this is so great, thank you soooooo much 😁

  • @ProgramWithErik
    @ProgramWithErik 4 ปีที่แล้ว +4

    Good job! Nice video :)

  • @clevermissfox
    @clevermissfox 11 หลายเดือนก่อน +1

    One shortcut I always see is how users are able to delete the whole line their cursor is in without selecting it. I have to experiment when I get on my computer because I found a ton of answers and not sure which is correct… cntrl + L , cntrl + C , cntrl + shift + K, cntrl + alt + K ….. ?

  • @GeekyLOAF
    @GeekyLOAF 2 ปีที่แล้ว

    This is what i was literally looking for tnx!

  • @charityngoma8052
    @charityngoma8052 2 ปีที่แล้ว +1

    Thanks alot for this video..
    They are very helpful

  • @imtheonehero9305
    @imtheonehero9305 ปีที่แล้ว +1

    when i click enter after inputting my text, it just moves the end tag to a new line.
    ex.
    Hello World
    what i want is
    Hello World
    then next line.
    How do I do that? what button to I click without having to move my mouse cursor to the end of the end tag?

  • @isitafake
    @isitafake 3 ปีที่แล้ว +1

    Nice video, but how do I activate this emmt feature? In my VS Code non of the shown examples work.

  • @372dev2
    @372dev2 3 ปีที่แล้ว

    Thank you for the great video. I needed this since I'm trying out the emmet

  • @khaledelhoushi8834
    @khaledelhoushi8834 ปีที่แล้ว

    I know another cool trick you can do that no one's talking about if you do this code "(li*5)*5" it will create 5² li elements which is 25.

  • @MizbahHossain
    @MizbahHossain 2 ปีที่แล้ว +1

    The first one used to work, but suddenly for some reason it doesn't work now. If I type the exclamation mark now, it's just showing the exclamation mark now, not the boilerplate HTML. Can somebody tell me the solution?

  • @sofiagalli5559
    @sofiagalli5559 4 ปีที่แล้ว +1

    You are my coding hero!

  • @Nasir127sb
    @Nasir127sb 2 ปีที่แล้ว

    I am bigner coding.very useful information

  • @jayleebernarte9967
    @jayleebernarte9967 3 ปีที่แล้ว

    I was wondering about the shortcut you use in your videos Tnx for this

  • @merowareinstance
    @merowareinstance 4 ปีที่แล้ว +1

    That’s a pretty awesome tool!! Thanks for sharing.

  • @ujjawaljoshi6420
    @ujjawaljoshi6420 4 ปีที่แล้ว +1

    Being a beginner it meant very helpful..

  • @wcandillon
    @wcandillon 4 ปีที่แล้ว +1

    Great video 👍🏽

  • @shyamsundarsingh1806
    @shyamsundarsingh1806 4 ปีที่แล้ว +1

    how will you add for existing bulk story you have from note pad?

  • @rakshitarenja7123
    @rakshitarenja7123 4 ปีที่แล้ว +1

    I actually have a question
    When we signup on a website
    We feed all the details to create account
    Then in a second we receive mail from that website
    The mail asks to click on the link to verify your account
    As we click on the link
    The web page comes showing your account successfully created
    This is what my question is
    How to generate this automated transaction when the user creates the account and receive a mail

    • @DecentralEyes
      @DecentralEyes 4 ปีที่แล้ว

      rakshit arenja - full stack web development

  • @devanshuthakkar5399
    @devanshuthakkar5399 3 ปีที่แล้ว +1

    If there are 4 div tags and we have edit and write class in every 4 div tag at once how to do ??

  • @ZENlX11
    @ZENlX11 ปีที่แล้ว +1

    How did you jump to the end of the line? I am having trouble because I have a 60% keyboard without arrow keys and I have to know how to move around the lines of code without having to jump to my mouse and move it manually every time😂

  • @emmasiji7586
    @emmasiji7586 3 ปีที่แล้ว +1

    Hi 👋🏾
    Thanks for the shortcuts
    Pls what extensions can i use to get the autocomplete function for bootstrap classes on vs code?

  • @rabbitazteca23
    @rabbitazteca23 3 ปีที่แล้ว +1

    hi! Which emmet are you using? There seems to be a lot of emmet extensions in the marketplace.

  • @samiulislam2100
    @samiulislam2100 2 ปีที่แล้ว

    thanks for making this video. very helpful.

  • @ลุงยุทธ์ยันกัญชา

    That makes my life so easy Thank 😄

  • @sydneysolomon5500
    @sydneysolomon5500 2 ปีที่แล้ว

    Very good do you have a video, on how to code a full website, with VS code?

  • @glorian.8043
    @glorian.8043 4 ปีที่แล้ว +2

    thank you! I learn a lot from you. Which theme are you using in VS Code?

  • @clemencetan9274
    @clemencetan9274 2 ปีที่แล้ว +1

    Thank you so so much !!

  • @ataylortca
    @ataylortca 3 ปีที่แล้ว +1

    Excellent and simple! Thanks!

  • @udaygohil4875
    @udaygohil4875 2 ปีที่แล้ว

    Thank you so much! I had a doubt, is there a short-cut, which adds tag to the sentence?

  • @kwamebohulu6975
    @kwamebohulu6975 3 ปีที่แล้ว +1

    Someone tell me where emmet be so i can shake his/her hand! Pretty useful tutorial, thanks for sharing
    Edit: I am so happy right now!

  • @ajazzy8078
    @ajazzy8078 3 ปีที่แล้ว +1

    thanks so much for the useful video "Love form India"
    [Good Job]*100

  • @Crispypoyo
    @Crispypoyo 3 ปีที่แล้ว

    Excellent tutorial.

  • @aunglaychannel4918
    @aunglaychannel4918 4 ปีที่แล้ว

    thank you for your sharing
    i am study form online
    this is very useful for my life

  • @claudia_ramirez
    @claudia_ramirez 4 ปีที่แล้ว

    thank u so much!! this is a timesaver and its so useful 🙌

  • @dakshvideoeditor
    @dakshvideoeditor 3 ปีที่แล้ว

    I knew this,
    after
    seeeing this video

  • @kieran2347
    @kieran2347 3 ปีที่แล้ว

    Thanks for the video, it helped alot cheers. Happy New Year in advance!

  • @afeezbabatunde5023
    @afeezbabatunde5023 3 ปีที่แล้ว

    You have really helped me with these tips

  • @rubenmedios
    @rubenmedios 3 ปีที่แล้ว +1

    Excelent video, thanks, really i don't know the commands for emmet in vscode, in sublime text are another thing. What extentions do you use in vscode?

  • @SkyKosiner
    @SkyKosiner 4 ปีที่แล้ว

    thanks so much for the useful shortcuts just discovered you from instergram a few weeks ago

  • @Noir-mh3es
    @Noir-mh3es ปีที่แล้ว +1

    i feel like a cavemen discovered fire lmao
    note: also u can just leave it just a "#" or/with " . " and u have blank div ()

  • @JorgeEscobarMX
    @JorgeEscobarMX 4 ปีที่แล้ว

    Wonderful I didn't know you can do this. I'm writing an eBook so this will help me a lot.

  • @jofo9865
    @jofo9865 3 ปีที่แล้ว +1

    When I wanna make Ul tags with ancher links , I don't know how to put # automatically for hrefs . I write
    Ul>li*4>a
    and I have to put # for each link , is there a way I can also give this value to hrefs. Thx a lot

  • @military_grade_dev7087
    @military_grade_dev7087 2 ปีที่แล้ว

    Absolutely amazing

  • @stephenolatunji1971
    @stephenolatunji1971 2 ปีที่แล้ว

    Thanks a lot for the teaching 💞💞🙏🙏👌

  • @YOSRRI
    @YOSRRI 2 ปีที่แล้ว

    thank you so mush this helped me alot

  • @diggee172
    @diggee172 2 ปีที่แล้ว

    adding the boiler plate was driving me crazy. For me I had to type "!" and tab not enter!! Drove me crazy

  • @pedamado
    @pedamado 3 ปีที่แล้ว +2

    Great video, very clear explanations and nice rhythm. I use a lot of console.log() in JS (with turbo console log) is there an emmet shortcut for this one? thanks. Keep up this great channel

    • @TheCoderCoder
      @TheCoderCoder  3 ปีที่แล้ว +2

      Hmm, I'm not aware of a shortcut for console.log() .. Thank you for watching!

    • @DjR4D1C
      @DjR4D1C 2 ปีที่แล้ว +1

      Vscode makes it when you type log() en tab.. thats pretty fast enough for me

    • @jedliu8671
      @jedliu8671 2 ปีที่แล้ว +1

      Try the extension "JavaScript (ES6) code snippets". There are more in the description.