Use emmet and prettier in VSCode to quickly write and format JSX
As developers, we strive to be quick and productive. We love to automate things so we spend less time on daunting, manual work and more time on solving interesting problems.
In this lesson we're going to learn how to use emmet (which is built into VSCode) to quickly write HTML/JSX and how to use prettier (which we're going to install from extensions tab) to automatically format it so we may work faster and be more productive.
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.
[2:02] Now, if you go back to our JavaScript file and mess up the formatting a little bit and save the file, we can see that our code is beautifully formatted and we can move on to develop another feature.
In the video I didn't mention that (sorry!) but you might want to enable:
in settings.json in order to make emmet work when pressing TAB