Excellent is a tool for validating javascript code that you write in your code.
Let's discuss what yes one is how it works and then set up inside of our code editor.
First though let's do a quick demo just so we can figure out what your Slint really is and what is doing
it doing for us.
Now I want to convince you that this is an interesting tool that you should want to set up.
So I've got some just arbitrary file here.
You know just a single function.
I declare the function and then I execute the function.
So right now everything looks good.
I don't appear to have any syntax errors.
So OK this looks pretty good.
I'm going to introduce an error now inside my code.
Just a very subtle error.
You'll notice that I am declaring a function called average and then I invoke it down here.
So the subtle error and introduce is going to remain this thing too capitally average and the instant
I do I get a whole bunch of red popping up inside my code editor and if I hover over this error right
here I know the text is kind of small but I'll read it for you says average is defined but never used.
And then down here average is not defined and so both these error messages are very helpful for helping
me just kind of figure out how I just made a big type but within my code I declared average with a capital
J.
But then when I tried to use it I've got lowercase say so.
This function is in theory not defined.
So this is the purpose of excellent.
It runs inside my code editor and it detects or recognizes whenever I make either a syntax error or
an error like you know basically reference a variable that does not exist.
So I can fix this error up by going back to lurking.
Say And we're back to normal of course.
Yes lint does not only do.
Trying to figure out if you're referencing a variable it doesn't exist.
It will also pick up on say you know a dangling operator like so.
So I've got a dangling divisions division sign here and we get a nice error message that says it looks
like something right here went a little bit wrong and we can you know reasonably easy figure out that.
OK we probably made a mistake here.
I also want to divide it by two or let's say I misspelled return.
All right fantastic doing the same thing as well just letting me know that I made a very subtle mistake
that I should fix before I move on with my application.
OK so that's what Yeslam does.
I hope that I've kind of given you an idea that yes this is something that's useful something you might
want to use and set up inside your application.
I used to look down on us a little bit.
You know I always thought personally like well if I'm a real engineer I would be able to pick up type
was like this before I try to run in the browser and that's not a very realistic attitude.
You know and at the end of the day everybody makes mistakes some number of the time and the sooner you
find and fix those mistakes it just means you're all the more productive.
So personally I think that there's a lot of benefit to using yes lint and not a tremendous amount of
downside.
Let's change gears now and talk a little bit more about how.
Yes lint works in how to set it up.
So this is the one downside to Eastlink.
I'll tell you that right now the one downside.
Figuring out how the thing works and how to set it up is a little bit of a nightmare.
And well that's kind of evidenced by this really scary looking diagram that I've got on the screen now.
So we're going talk about exactly how Yeslam works at least on the kind of set up side of things.
Do take note I'm going to frame this discussion for using Eastlink with our outer code editor so I use
outta.
You might use sublime or vs code or web storm or Vim whatever it might be the set for all those different
headers is very similar.
Just some very slight differences so again Les is no kind of frame the discussion in that regard with
Yeslam.
There's two phases of setup.
There is Ed. specific setup which is kind of above this long line right here.
And then there is project specific setup as well.
Use So we're going to jump around on this diagram a little bit.
We're going to start off first so to get out of Ed. up top and then we're gonna work our way down to
the bottom here at this big box with all these rules things in here.
So when we install Adam as our code editor Adam has a fantastic ecosystem of different packages that
we can download and install inside of Adam to enhance the behavior of the editor.
One such plugin that we can install is called simply Linter.
That's all it's called.
Not excellent.
It's just Linter Linter is some underlying functionality inside of our code editor inside of atom in
particular that allows us to plug in.
And that's kind of what I'm trying to symbolize here by this.
Yes lint going into this you know white box right here.
We can plug in different lynchers.
So E.S. lint is not the only limiting system out there.
There are tons of other programming languages and many other languages have litters of their own.
So for our we get we get this very generic very multi use case Linter plug in there just has some idea
of how to show airs to the user on the screen and that's all it really does.
So we have our Linter plug in on top of that we will install.
Yes.
Yes Lynn is the actual plug in is the actual module that parses our javascript code and applies some
rules to it and tries to validate Hey did they you know make a mistake in here did something go wrong.
If so I need to peruse some type of error message and show it to the user.
So that's the purpose of excellent.
It parses our javascript code and then its sources or creates the error messages to show to the user.
So both the winter that we install and excellent are what I kind of refer to as ed. specific settings.
You install them once like forever and you're done and you just install Linter once you install Yes
once you're done that's it.
On the flip side are project specific settings.
So moving from project to project.
You know maybe you've got a project at work and then you've also got a project at home like a side project
and your work project might be very legacy like S-5 code but then the project you're working out at
home might be cutting edge.
Yes six Yes seven lots of really fancy syntax.
So to accommodate for these different projects that you might have you can wire up what is what I can
refer to and say this is an official terminology it's wired for Two-Eyes project specific configuration
so we can configure Yes lint in the rules that it uses to validate our javascript code on a per project
basis.
To set up E.S. slant on a very specific project we will add in some amount of configuration for just
a specific project and we'll talk about exactly what form that takes.
We set this up inside of our code editor.
The purpose of this config file is a file that we create is to tell each slant that we want to use some
number of rules to validate our Javascript.
So at the end of the day when yes lint runs Yes lint by default by itself.
If you just install and run it it does absolutely nothing.
There is no builtin validation inside of us yes.
You have to specify some number of rules that you want to use to say to your Slint Hey when you're parsing
everything and you're figuring out if you know anything is going wrong please reference these rules.
I want to make sure that the developer is following all these different rules.
So if I flip back to Adam really quick and let's say I remove a semi colon right your on line to I get
an error message and the error message I know it's very small on the video but you can see here very
small says semi right here.
So if I click on semi it'll pop up in my browser and will take me to the rule called semi semi is all
about making sure that you use semi colons within your code.
So here is a good example right here.
Hey please make sure that you use semi-colons and you can read all the documentation and hear all about
it.
So for any projects that we might be working on with excellent.
We will need to specify some number of rules.
Now of course as a kind of an line developer you don't have to specify all these rules one by one.
There are a ton of preset configurations out there online that you can just download and install.
They will kind of bundled together a reasonable rule set of different validation rules and you can just
immediately start working without having to worry about you know adding in 30 rules before you start
actually writing any code.
So for the config side of things usually you will pull in some already pre bundled set of rules to validate
your javascript code so that is how.
Yes Slint works or at least the again the set up side works inside.
In a nutshell let's continue.
In another video and talk about how we set up Eastland with a number of different code editors