Instructor: 0:00 We have a following idea for our component. We would like to have a main target. Inside of it, an h1 with a title "Welcome to egghead," and deal with a list with the class name of list with three TODO items.
0:11 In order to implement that quickly, we're going to use Emmet which is built into Visual Studio code. If I start typing main followed by h1, we can see over here that this is the html that we're going to get as soon as I press tab. I can go ahead and type my titles over here.
0:24 Emmet is so much more powerful than that. In fact, we are going to be able to implement all of that in a single line. If we would like to provide the title for this header, we need to wrap it in curly brackets. I am going to put "Welcome to egghead" over here.
0:36 Next, we need to define the sibling to this header, which is going to be a list. In order to do that, type in plus list. Next, we're going to assign it a class name of list. In order to do that, use the dot. We can see the result over here.
0:49 This is going to have three TODO, which are going to be of type li. In order to make feature of them, we need to multiply li tag by three. I am going to put in the tags TODO inside each one of them.
1:02 Now, we have a single line. If I press tab, we're going to end up with all of the beautiful schema that we didn't really have to write. If I save that, we can see the result over here.
1:12 What if we copy this code from somewhere else, for instance from CircularFLO and did up like this? We'd like to be able to format this code automatically so then we can we can move onto implementing more interesting features.
1:22 In order to do that, we're going to install Prettier. First, click on the extension stuff over here. I am going to search for Prettier, which is the first result. I am going to click install.
1:31 It's going to take a second. After it's done, go back to your code. Select the piece of code that we would like to format. Right click, and select format selection. We can see the keyboard shortcut over here as well.
1:42 Now, we have the beautifully formatted code. If you wanted to, we can enable Prettier to format our code every single time we save the file. In order to do that, go to settings. You can find settings under code preferences and settings. There is also a keyboard shortcut over here.
1:55 Inside of settings, you can type in format and click on format on save.