right so not theory let’s actually get
to the fun part so what I want to do for
this project is I want to create a small
react library and it’s going to be a
wrapper around CSS
spinners now if you do a quick search
for CSS spinners you’re gonna find out
that there’s actually quite a few on
them online but the website that I
decided to use is loading IO and this
one basically allows you to copy paste
the CSS code in order to create a custom
spinner so for example if I wanted to
make a circle spinner I could basically
pick the source code to copy it into a
CSS file and then copy the underlying
HTML markup as well so this is something
that can be easily encapsulated using
react components and this is exactly
we’re gonna be doing now if you don’t
already have an account on github make
sure that you create one and then once
you do we’re gonna create a new
repository so I’m going to call this one
react CSS spinners now we could call it
react spinners but if we actually go to
NPM repositories I’m going to do NPM
that I am slash react spinners you’re
gonna find out that this package already
exists and in fact it has quite a few
downloads but if we look for something
like react CSS spinners this one doesn’t
exist yet so this could be something
that we can actually use as the name for
our project so we’re gonna call it react
CSS spinners now for the description
we’re gonna say CSS only spinners for
react we are then going to also include
a readme in the repo and we’re going to
also add a license I’m gonna pick an MIT
license and let’s create a repo so now
as you can see this added the license
file and also the readme dot empty file
as well so what I’ll do next is I’ll
click on this clone or download button
and I’m going to copy the link so let’s
go back to our terminal I’ll go to my
directory in workspace called rel so
next up I’m gonna do a git clone of that
people so let’s go to react CSS spinners
as you can see we got the two files so
what I’m gonna do is I’m going to do NPM
in it
– why to initialize an NPM repo so let’s
open it in a vs code now if you look at
package.json you’re gonna find out that
some of the fields are already populated
so things like repository or bugs or
even the home page so that’s pretty good
I’m only going to update the license to
MIT
the author I’m gonna put myself Alex for
the keywords I’m gonna put react CSS
spinners like this so now we’re gonna go
back to the terminal I’m gonna – it gets
status so we can go ahead and add the
package.json file LTI commit initialize
NPM package so – a git push and this
should be reflected on github as well so
now if we go back to our presentation we
talked about several stages in our build
process so the first stage of course
would be the install stage and this one
we can actually skip it because it’s
gonna be done by the CI environment the
next stage will be the Olin stage and
this one we can actually focus on so the
first thing that I’m going to do is I’m
going to create a file which is called
editor config so if we go ahead and look
for editor config now this one can help
us define the coding style for editors
and ITES so what we can do is we can go
back to a project let’s go ahead and
create that file editor config I’m
actually going to go back in here let’s
actually copy some of the coding here so
we’re gonna set route to true at the top
of the file you know for every single
file in the project we’re gonna do is
we’re going to set the end of line into
line feed using the UNIX style syntax
we’re also going to insert the final new
line as well let’s put in that one we’re
also going to put a a character set to
utf-8 as well now besides that we can
also set the indentation and the size
for indentation as well so let’s go
ahead and put those two so we’re gonna
put in the two spaces for indentation
and finally I’m going to put trim
trailing whitespace set the true and
this one as the name suggests is going
to trim any white space between the
identifier z’ in the code now this will
only affect the editors but we also want
to set up some kind of a formal linting
tool now in the past you guys probably
seen me using something known as
standard at j/s so this is a coding
style which also has a CLI tool into
your code and also fix some of the
issues that the code might have so i’m
going to use the standard style but i’m
actually not going to use standard
directly what i’m going to use instead
is going to be es lint of
go ahead and look for es lint the setup
is fairly simple so all we have to do is
we basically need to install it as a dab
dependency so let’s do exactly that back
in the terminal let me clear it out so
I’m gonna do NPM install a dev
dependency of es lint and now in fact
before we do that lets do a quick get
status I’m gonna do an add command on
editor config so I’m gonna do a commit
and editor config file so now that we’ve
done that let’s do a git status again so
we have our package.json modified so the
es length was installed so now if we do
NP xes lint we’re gonna see a bunch of
options that we can specify so for one
thing we could scan all of the files in
a given directory so what we can do is
we can do make directory source so
instead of the source directory we’re
gonna touch a file source index touch
yes now back in a repo I’m going to also
add a git ignore file as well so let’s
to get ignore as you can see I already
get a message in my vs code so we have
to use we need to add node modules so
you get ignore so this way it’s gonna
ignore any files in that node modules
folder once that’s done we’re gonna go
to our index.js file so now as the demo
let’s do a simple console.log we’re
gonna screw up the styling so I’m gonna
put in some extra spaces let’s put in
the brackets and separate lines it’s –
hello plus my add some extra spaces
intentionally let’s also mix up the
quotes my friend something like that and
I’m gonna also put a semicolon at the
end so now before we can run insulin
we’re gonna have to go back to the
documentation so in order to set it up
we need to run es lint – – in it so
let’s do exactly that I’m gonna do an
PXE ass lint – – in it so now in this
case we can pick up a popular style like
I said I’m a big fan of standard so this
is the one I’m gonna be using in this
project so let’s pick up standard we’re
gonna pick up a JSON file format for our
config file now do we want to install
the dependencies yes please
so let’s confirm that all right so once
that’s done you’re gonna see that we get
an es lint RC JSON file and this one is
going to extend
for us so we don’t have to write any
configuration explicitly in fact this is
gonna use the recommended config for
standard GS now if we go back to the
terminal
I’m gonna try MPX ES leant on the source
directory so we’re gonna target e
index.js file so if I run that you’re
gonna see that we find six different
problems so you’re gonna see that we
have a mixed up indentation we are using
double quotes but we are expecting to
use single quotes with standard and we
also have an extra semicolon at the end
so now as the message suggests we can
actually fix some of those issues so if
I try to do es lint that’s 2 NP xes lint
on the source directory da GS file with
the – – fix option so that’s gonna try
to fix the file now if we do in the xes
lint again we don’t have any issues
anymore so now if we go back to the file
you’re gonna see that everything is more
or less consistent with the standard
style but it still looks pretty ugly
because the code is not formatted and
this is where prettier shines so winter
is only one tool that we want to enable
in order to actually format our code and
make it readable we need to use a
different tool which is known as a
formatter
so now for that we can use a tool known
as prettier so there’s actually a
package known as prettier es lint so now
to get started we can actually install
it as a dev dependencies so if I go back
to the terminal it’s doing p.m. install
– d prettier excellent and if you want
to use it as a CLI we also want to
install another dependency known as
prettier es Len CLI so let’s also
install that one as well as you can see
it’s a CLI for prettier es lint so to
use it we can call prettier es lint and
we can also pass the files that we want
to look at so now if I go back to the
terminal
we could try npx prettier es lint and
let’s also look for source we’re gonna
go into any nested directory we’re gonna
look for all JavaScript files and it’s
also recommended to put quotes around it
and just deal with some of the issues
that might come up eventually so let’s
try running it and we get the output
which is a beautifully formatted
console.log statement and on this one we
get to the standard output so to the
terminal but this doesn’t actually write
to the file in order to write to the
file we need to pass in a special right
option so if we look for it it has a
right option that we can pass and this
one will actually modify the file
itself so back in the terminal I’m gonna
do the same command with the – – right
and of course this will actually write
to the file and modify it as you can see
we get a console.log statement so now if
we go back to our package JSON I’m gonna
add if you script so in the script
section I’m going to add a script tool
into our code so I’m going to put es
Lent and instead of only doing it for
the source directory I’m gonna do it for
the root of the project so let’s do any
directory that contains any JavaScript
files and once again we’re gonna wrap it
with single quotes as well and for the
second command we’re gonna run es Lent
call unfix so this will do prettier – es
lint and this will apply the same regex
pattern but it’s also going to pass in
the right option to fix the code and
also write the changes to the files so
if I go back to index Jas let’s put in
some gibberish I’m gonna save the file
and now if i do npm run lint you’re
gonna see that it finds a bunch of
problems but if we do npm run lint call
and fix this will fix all of the issues
in the file and format it successfully
so now it might also be worthwhile to
apply the changes as we save the file so
for that we can actually create a
configuration for vs code so create a
dot vs code directory and we can create
a special settings dot JSON file and so
this is where we can put some of the
custom settings that we want to apply to
the files in the project so for example
we can pass an editor dot format on save
we’re gonna set it to true and all this
will format the files once we save them
and now the next one is actually for the
es lint plugin so the first thing you
would want to do is you want to make
sure that you already have es lint and
prettier installed so if you don’t make
sure to install them first so now if I
go back to the browser
we’re gonna go to prettiest line’ and a
one thing we can do is we can enable vs
code integration so we have to do is we
have to set this property prettier DSL
integration so if we copy it I’m gonna
put it in here to our settings file
we’re gonna wrap it with quotes and
we’ll set it to true so now I’m gonna
restart es code so if I go back to index
es now if I save the file you’re gonna
see that it auto formats the source code
for us so this way we don’t necessarily
have to run es lint call and fix all the
time manually we can actually set it up
our
cells in the editor so every time you
make it change to a file every time you
save that change the code will be Auto
formatted using the ESL and RC
configuration that we have in the
project so now if we go back to their
terminal I’m going to do a git status
there’s quite a few files that we can
commit so let’s just add all of them so
do get add period to add everything
including package Alaka JSON file you
want to make sure to also commit that
one so let’s do a git commit and the
message will be add es lint and prettier so we can go ahead and push it to github
to the fun part so what I want to do for
this project is I want to create a small
react library and it’s going to be a
wrapper around CSS
spinners now if you do a quick search
for CSS spinners you’re gonna find out
that there’s actually quite a few on
them online but the website that I
decided to use is loading IO and this
one basically allows you to copy paste
the CSS code in order to create a custom
spinner so for example if I wanted to
make a circle spinner I could basically
pick the source code to copy it into a
CSS file and then copy the underlying
HTML markup as well so this is something
that can be easily encapsulated using
react components and this is exactly
we’re gonna be doing now if you don’t
already have an account on github make
sure that you create one and then once
you do we’re gonna create a new
repository so I’m going to call this one
react CSS spinners now we could call it
react spinners but if we actually go to
NPM repositories I’m going to do NPM
that I am slash react spinners you’re
gonna find out that this package already
exists and in fact it has quite a few
downloads but if we look for something
like react CSS spinners this one doesn’t
exist yet so this could be something
that we can actually use as the name for
our project so we’re gonna call it react
CSS spinners now for the description
we’re gonna say CSS only spinners for
react we are then going to also include
a readme in the repo and we’re going to
also add a license I’m gonna pick an MIT
license and let’s create a repo so now
as you can see this added the license
file and also the readme dot empty file
as well so what I’ll do next is I’ll
click on this clone or download button
and I’m going to copy the link so let’s
go back to our terminal I’ll go to my
directory in workspace called rel so
next up I’m gonna do a git clone of that
people so let’s go to react CSS spinners
as you can see we got the two files so
what I’m gonna do is I’m going to do NPM
in it
– why to initialize an NPM repo so let’s
open it in a vs code now if you look at
package.json you’re gonna find out that
some of the fields are already populated
so things like repository or bugs or
even the home page so that’s pretty good
I’m only going to update the license to
MIT
the author I’m gonna put myself Alex for
the keywords I’m gonna put react CSS
spinners like this so now we’re gonna go
back to the terminal I’m gonna – it gets
status so we can go ahead and add the
package.json file LTI commit initialize
NPM package so – a git push and this
should be reflected on github as well so
now if we go back to our presentation we
talked about several stages in our build
process so the first stage of course
would be the install stage and this one
we can actually skip it because it’s
gonna be done by the CI environment the
next stage will be the Olin stage and
this one we can actually focus on so the
first thing that I’m going to do is I’m
going to create a file which is called
editor config so if we go ahead and look
for editor config now this one can help
us define the coding style for editors
and ITES so what we can do is we can go
back to a project let’s go ahead and
create that file editor config I’m
actually going to go back in here let’s
actually copy some of the coding here so
we’re gonna set route to true at the top
of the file you know for every single
file in the project we’re gonna do is
we’re going to set the end of line into
line feed using the UNIX style syntax
we’re also going to insert the final new
line as well let’s put in that one we’re
also going to put a a character set to
utf-8 as well now besides that we can
also set the indentation and the size
for indentation as well so let’s go
ahead and put those two so we’re gonna
put in the two spaces for indentation
and finally I’m going to put trim
trailing whitespace set the true and
this one as the name suggests is going
to trim any white space between the
identifier z’ in the code now this will
only affect the editors but we also want
to set up some kind of a formal linting
tool now in the past you guys probably
seen me using something known as
standard at j/s so this is a coding
style which also has a CLI tool into
your code and also fix some of the
issues that the code might have so i’m
going to use the standard style but i’m
actually not going to use standard
directly what i’m going to use instead
is going to be es lint of
go ahead and look for es lint the setup
is fairly simple so all we have to do is
we basically need to install it as a dab
dependency so let’s do exactly that back
in the terminal let me clear it out so
I’m gonna do NPM install a dev
dependency of es lint and now in fact
before we do that lets do a quick get
status I’m gonna do an add command on
editor config so I’m gonna do a commit
and editor config file so now that we’ve
done that let’s do a git status again so
we have our package.json modified so the
es length was installed so now if we do
NP xes lint we’re gonna see a bunch of
options that we can specify so for one
thing we could scan all of the files in
a given directory so what we can do is
we can do make directory source so
instead of the source directory we’re
gonna touch a file source index touch
yes now back in a repo I’m going to also
add a git ignore file as well so let’s
to get ignore as you can see I already
get a message in my vs code so we have
to use we need to add node modules so
you get ignore so this way it’s gonna
ignore any files in that node modules
folder once that’s done we’re gonna go
to our index.js file so now as the demo
let’s do a simple console.log we’re
gonna screw up the styling so I’m gonna
put in some extra spaces let’s put in
the brackets and separate lines it’s –
hello plus my add some extra spaces
intentionally let’s also mix up the
quotes my friend something like that and
I’m gonna also put a semicolon at the
end so now before we can run insulin
we’re gonna have to go back to the
documentation so in order to set it up
we need to run es lint – – in it so
let’s do exactly that I’m gonna do an
PXE ass lint – – in it so now in this
case we can pick up a popular style like
I said I’m a big fan of standard so this
is the one I’m gonna be using in this
project so let’s pick up standard we’re
gonna pick up a JSON file format for our
config file now do we want to install
the dependencies yes please
so let’s confirm that all right so once
that’s done you’re gonna see that we get
an es lint RC JSON file and this one is
going to extend
for us so we don’t have to write any
configuration explicitly in fact this is
gonna use the recommended config for
standard GS now if we go back to the
terminal
I’m gonna try MPX ES leant on the source
directory so we’re gonna target e
index.js file so if I run that you’re
gonna see that we find six different
problems so you’re gonna see that we
have a mixed up indentation we are using
double quotes but we are expecting to
use single quotes with standard and we
also have an extra semicolon at the end
so now as the message suggests we can
actually fix some of those issues so if
I try to do es lint that’s 2 NP xes lint
on the source directory da GS file with
the – – fix option so that’s gonna try
to fix the file now if we do in the xes
lint again we don’t have any issues
anymore so now if we go back to the file
you’re gonna see that everything is more
or less consistent with the standard
style but it still looks pretty ugly
because the code is not formatted and
this is where prettier shines so winter
is only one tool that we want to enable
in order to actually format our code and
make it readable we need to use a
different tool which is known as a
formatter
so now for that we can use a tool known
as prettier so there’s actually a
package known as prettier es lint so now
to get started we can actually install
it as a dev dependencies so if I go back
to the terminal it’s doing p.m. install
– d prettier excellent and if you want
to use it as a CLI we also want to
install another dependency known as
prettier es Len CLI so let’s also
install that one as well as you can see
it’s a CLI for prettier es lint so to
use it we can call prettier es lint and
we can also pass the files that we want
to look at so now if I go back to the
terminal
we could try npx prettier es lint and
let’s also look for source we’re gonna
go into any nested directory we’re gonna
look for all JavaScript files and it’s
also recommended to put quotes around it
and just deal with some of the issues
that might come up eventually so let’s
try running it and we get the output
which is a beautifully formatted
console.log statement and on this one we
get to the standard output so to the
terminal but this doesn’t actually write
to the file in order to write to the
file we need to pass in a special right
option so if we look for it it has a
right option that we can pass and this
one will actually modify the file
itself so back in the terminal I’m gonna
do the same command with the – – right
and of course this will actually write
to the file and modify it as you can see
we get a console.log statement so now if
we go back to our package JSON I’m gonna
add if you script so in the script
section I’m going to add a script tool
into our code so I’m going to put es
Lent and instead of only doing it for
the source directory I’m gonna do it for
the root of the project so let’s do any
directory that contains any JavaScript
files and once again we’re gonna wrap it
with single quotes as well and for the
second command we’re gonna run es Lent
call unfix so this will do prettier – es
lint and this will apply the same regex
pattern but it’s also going to pass in
the right option to fix the code and
also write the changes to the files so
if I go back to index Jas let’s put in
some gibberish I’m gonna save the file
and now if i do npm run lint you’re
gonna see that it finds a bunch of
problems but if we do npm run lint call
and fix this will fix all of the issues
in the file and format it successfully
so now it might also be worthwhile to
apply the changes as we save the file so
for that we can actually create a
configuration for vs code so create a
dot vs code directory and we can create
a special settings dot JSON file and so
this is where we can put some of the
custom settings that we want to apply to
the files in the project so for example
we can pass an editor dot format on save
we’re gonna set it to true and all this
will format the files once we save them
and now the next one is actually for the
es lint plugin so the first thing you
would want to do is you want to make
sure that you already have es lint and
prettier installed so if you don’t make
sure to install them first so now if I
go back to the browser
we’re gonna go to prettiest line’ and a
one thing we can do is we can enable vs
code integration so we have to do is we
have to set this property prettier DSL
integration so if we copy it I’m gonna
put it in here to our settings file
we’re gonna wrap it with quotes and
we’ll set it to true so now I’m gonna
restart es code so if I go back to index
es now if I save the file you’re gonna
see that it auto formats the source code
for us so this way we don’t necessarily
have to run es lint call and fix all the
time manually we can actually set it up
our
cells in the editor so every time you
make it change to a file every time you
save that change the code will be Auto
formatted using the ESL and RC
configuration that we have in the
project so now if we go back to their
terminal I’m going to do a git status
there’s quite a few files that we can
commit so let’s just add all of them so
do get add period to add everything
including package Alaka JSON file you
want to make sure to also commit that
one so let’s do a git commit and the
message will be add es lint and prettier so we can go ahead and push it to github
Please follow and like us: