Write code faster in VS Code with Emmet shortcuts

hey everybody and Stacy toriel I'm going to show you how you can use ms shortcuts to save time when you're writing code emma is an extension in a BS code that comes with a ton of shortcuts that you can use to write your code more quickly and easily we're not going to cover every single shortcut in this video but I am gonna show you the ones that I use most often sound good let's get into it [Music] okay I have v/s code open so let's jump right into the first shortcut first what I wanted to show you is how to add boilerplate HTML into your files so I have a blank index.html file to start off and if we type in an exclamation point we can see the emmett abbreviation tool tip pop up it tells you what its gonna put in when we press enter and when we press ENTER it's added in all the tags that you need and pretty much every HTML file we have the doctype HTML head and body tags as well as some of the meta tags and title tags that we need in the head next for code I'm going to show you this probably the one that I use the most often myself and that is when you're writing tags using Emmet you don't actually need to type in the angle brackets or even the closing tag it'll do it all for you let's look at an example here in the head tag we usually want to load our CSS file using a link tag so if we only type in the name of the tag link and as we start typing we can see that it immediately will pop up all the different options we can use tool select CSS hit enter and voila Emmit has added the full tag for us this applies pretty much any other HTML tag you might want to add so if we go down into our body let's say we wanted to add an h1 tag you type in h1 and hit enter it's automatically added both the opening and closing tags and even better let's place the cursor between the two so all we have to do is type in the actual content of our h1 tag you can do this for let's say a section tag and a div tag we just type in div paragraph tag and an anchor link we type an a colon it'll tell you the different options for the anchor tag so we want to link one and it's gonna give us the option here so we just have to fill it in so in my opinion being able to type in all the tags without having to type in all the angle brackets and the closing tags is a pretty big time-saver so I definitely just won all the time the next one I'm going to show you is how you can add a class or ID value to a tag so let's go into our HTML and let's just delete what we have here and make some more room so let's say we wanted to write a section tag that had a class of content start off we would type in section and before we hit enter instead we're gonna type in dot content and press Enter and as you know the dot is the class selector in CSS so Emmet is kind of using the same language in order to let you add a class and let's say we wanted to add instead of a class of content an ID of content so again I'll type in sections and instead of dot we'll add in the pound or hash and content and then when we hit enter it's created the section tag with an ID of content and to make this shortcut even shorter when you're creating a div tag that has a class or an ID you don't even have to type in the word div and it will automatically default to a div if you're creating an element with a class or an ID so let's say we want to create a div with a class of title if we simply type in dot title and hit enter and it creates that div with the proper class for us and let's say we want to create a div that has an ID of title instead we type in hash title and hit enter it's created that div that has the right ID this is a pretty big time-saver when you're writing a lot of HTML tags now the next trick I want to show you is how you can create nested tags using the right or greater than angle bracket let's say we want to create a section tag with a div tag nested inside it do that we'll type in section right angle bracket and then div and enter and we've created the div tag method inside the section tag and the cool thing about this is that we can also combine this with the class or ID functionality so let's say we want to create a div with a class of flex parent and inside that div we want to create another div with class flex child let's see what that would look like so first we'll type in the Flex parent if so we don't need a type and div since we're adding a class type in flex - parent in right angle bracket and then dot flex - child if we hit enter it's created those nested divs with the proper classes now in addition to creating nested or child tags we can also create sibling tags meaning tags are on the same level as one another using the plus sign so going back to this example we just created let's say we wanted to create a Flex parent div and inside we want to create not one but two divs of class Flex child let's start over and let's see how we would do that so first we'll start by typing the dot Flex parent and then using the right angle bracket we'll add our child elements so we'll add 1 dot flex child and then we want to add the second Flex child so we'll add a plus sign dot flex child then when we press ENTER we can see and it's created the two flex child lives inside the Flex parent and believe it or not we can actually make writing this markup even more efficient by using a multiplication symbol so we'll delete this we're gonna create the exact same markup but instead of having to use the sibling selector first we'll add our Flex parent and then the right angle bracket and then we want to add the Flex child elements and we want two of them but instead of typing plus Flex child because of the same class we can actually just multiply it by two so we'll add the multiplier symbol which is the star asterisk and then - hit enter and it's done so we can create as many as we want and you can use this most often when you're writing lists like an ordered list so if we have an unordered list we have a child lector then we want to create a bunch of list items if we just type in Li times let's say 5 and then hit enter it'll create an unordered list with the 5 child list items next drawer code I'm going to show you is how you can add in placeholder lorem ipsum text let's delete what we got here and if we simply type in lorem L REM and then we can type in the number of lorem ipsum words we want so I'm gonna type in 20 hit enter and it's added 20 words of lorem ipsum text so obviously we can use any number of words we want if we want to type in 100 then it's added a hundred words so what I use this most often with is in tags let's say I have a paragraph tag if I want to add some lorem ipsum text to that we use the child selector I've been lorem and let's just say 10 we hit enter and we have our paragraph tag with alarm if some placeholder text all right the next shortcut I'm going to show you is how you can use groupings in parenthesis to have a little more control over how your markup is generated so going back into our paragraph lorem ipsum example let's say instead of one paragraph we wanted to create five paragraphs of lorem ipsum text now to create one we already just did that we'll say P right angle bracket and then lorem and let's just say 20 words now if we wanted to multiply this by 5 we know we can use the asterisks for that but we don't want to just multiply you know alarm 20 and that's actually not really gonna do anything anyway what we have to do is use parentheses that'd grouping around the paragraph with lorem ipsum text and then outside of that we'll add the asterisk and times 5 now if we hit enter we can see that Emmett has generated 5 paragraphs with alarm if some text that we wanted alright this / worker that I'm going to show you is how you can toggle wrapping lines so if you type in alt Z you'll either turn word wrapping on or off so right now I do have it on you can see these paragraphs are wrapping I hit alt Z it will not wrap the paragraph tags and we're going to need to horizontally scroll if I hit alt Z again it'll go back to wrapping lines now the shortcut isn't actually an emic shortcut it's just a vs code shortcut but I could asked about it quite a lot in my videos and my live streams so I figured this would be a good place to put it and that's it for Emmett shortcuts I hope this video helped you and if I forgot your favorite and shortcut don't forget to leave a comment down below thanks for watching and keep on coding

Channel: Coder Coder

Views: 138,991

Keywords: web development, html, css, learntocode

Id: 45eWEO0gRHI

Length: 8min 39sec (519 seconds)

Published: Wed Apr 22 2020