All right boys and girls before we get busy building our application why don't we first check out these
setup files as well as my setup in the text letter.
Well first and foremost you're probably wondering well why do we need to have these setup files.
Well here's the thing I will want to work mostly with a javascript.
So what happened here.
I already prepared all the products that were going to have locally.
So if you click on it you'll notice that these are going to be items and I'm gonna go into greater detail
once we actually start working with the product.
But this basically is gonna be our local data.
So before we set up anything in a continent full This is gonna be your lifeline because you're all going
to be able to finish the whole project actually without doing anything within the content.
I also would want to skip on the CSX.
So this is the reason why you gonna have all your rules and everything set up already.
Now what we're gonna do is we're just gonna build a section with a camel and then we're just gonna add
the main to assess where we're gonna go over what is happening.
So basically we're not gonna type line by line and then I'm going to explain it.
What we're going to do is we're just gonna copy and paste the section that we currently worked on and
then I'm gonna go over quickly what happened because again this is a javascript project.
Now last but not least.
But within the set of files you're gonna have images and these are just images that I was using for
setting up the product.
And later on you can obviously use these images if you're setting up with a content for now also you'll
notice there is gonna be my famous logo.
And by the way this is going to be a G so this is gonna be displayed like that but you are also going
to see it later on as we're working with.
So this would be a short version of what is happening within the setup files.
No like I promised I would like to go over also my setup in the visuals the area code because that is
my text error and mostly you're probably interested in the extensions that I'm using and I have to tell
you right away a bunch of extensions are not going to make sense right now because I'm using them for
my react project.
But let's start line by line and by the way if you are interested if you have to have the extension
that I have and obviously the extension would be under this extension icon like so.
And if you want to search for extension you just need to type it here in this we're going to search
in the marketplace and these are the extensions that you wore in this case me have on my machine.
So I'm going to start with Barack or hair color riser and I will gonna move over swiftly because I mean
most of them are very safe for explanatory.
So with bracket per colorized colorized if you were gonna have nested blocks so let's say you're writing
one function but then within the function there is let's say an object or another object then what's
going to happen is that these brackets will gonna be colorized differently that pretty much is a short
version of that then this is gonna be my snippet that I'm using for react like I said in this project
we're not going to make sense then this is very nifty to have highlight matching tags because what happens
is let's say we will gonna be obviously working with the email and you can basically see where your
HDMI element starts and ends and this is what I'm using for highlighting matching tags.
Now for this particular extension.
If you go over into documentation you notice that you obviously have more styling options because that
particular styling will not be right after the box.
So you're gonna have to do a little bit tweaking in your settings.
So if you're strolling down you'll see that this is what they're offering you to pass into your Jason
and just obviously customize it all but.
So what I did is if you're going to go to your settings this is going to be the Jason object and you
notice that I have highlighting matching tags so basically I copied pasted what I got here and I just
added a little bit different values.
So the solid one the yellow color more radius 5 and with is 3.
That's pretty much the idea.
And then rainbow is for indentation.
I don't think it does not require any more explanation than I have the life server.
But in fact for this project I'm gonna be using preview on the web server and both of them are exactly
the same.
I'm just sometimes not happy with some of the things life server does.
And as far as ISIS is concerned with the screen us no normally probably that wouldn't affect you but
I'm not the biggest fan the more of life server.
This is why the reason why I'm using the preview on a web server I do want to let you know that since
we we're going to be using this Jason data locally.
It is important and not even important it is crucial that you use the one of the servers.
I mean you can get maybe some other extension but it is important that you're using some type of server.
Otherwise if you're gonna try to see this in a browser the way we're gonna be setting up the project.
This will not work.
Now the project will definitely going to work with local data.
If you're using one of the servers as well as it will going to work on ratify.
So it's not like I'm telling you yeah there's going to be a project but nothing is going to work while
you're building it but it is important that you use one of these servers.
Otherwise again it's just not going to make sense.
Now I also use prior to actually format the code and again for prior.
You do need to have your setup where you have the error format on save and then let's say on page.
So the way you do that you're just gonna go to the settings and here you just write.
I don't know Ed I believe that was the case.
And then notice there should be format on save.
So let me type maybe that format and let's see I have format on paste as well as format on site.
So it just clicked both of these boxes.
So what's happening is as we are typing JavaScript or HDMI out for that matter it pretty much is going
to format the code because the moment we're going to save it or pasted the code we're going to be nicely
format.
Like I said this will gonna be the second dev server.
The one that I'm currently using but again a lot of things are going to be exactly the same as it is
with live server.
So it's really up to you which when you're choosing and this pretty much is going to start the local
level server where our project will to be hosted.
Now last but not least.
But maybe it is least in this project it is EA style components which we will not use in this project.
But I tend to use in most of my react project.
Now let's head over to the settings if you're interested what I have.
But again this is gonna be strictly kind of for the screen cast where my zoom all those three.
But again depending whether I'm gonna be zooming in zooming out this is going to be changing font size
26 tab size 1.
I don't like the RSA especially as you're writing javascript what rap is going to be on I want to start
a new line I don't want you to do any horizontal scrolling like I said format paste save.
This is going to be for prettier than I got rid of the mini map I already talked about highlighting
matching tags and this will gonna be obviously for J sex.
So again this shouldn't concern you.
And for the terminal I have the font size of 26 All right.
Now this is supposed to fix the live server but in my case it does not do that.
So the probably you can disregard this last property.
All right.
So this will be my setup and the text that are as well as this kind of explains you why I strongly strongly
suggest working with a set of files.
Now you can technically skip them but I think you are going to have far better experience if you don't
mind if you just download them and we work together and that way we're going to do our work much more
faster.