1
00:00:01,020 --> 00:00:05,750
Excellent is a tool for validating javascript code that you write in your code.

2
00:00:06,180 --> 00:00:12,020
Let's discuss what yes one is how it works and then set up inside of our code editor.

3
00:00:12,030 --> 00:00:16,510
First though let's do a quick demo just so we can figure out what your Slint really is and what is doing

4
00:00:16,510 --> 00:00:17,770
it doing for us.

5
00:00:17,810 --> 00:00:22,290
Now I want to convince you that this is an interesting tool that you should want to set up.

6
00:00:22,320 --> 00:00:24,620
So I've got some just arbitrary file here.

7
00:00:24,630 --> 00:00:26,550
You know just a single function.

8
00:00:26,550 --> 00:00:29,040
I declare the function and then I execute the function.

9
00:00:29,040 --> 00:00:30,710
So right now everything looks good.

10
00:00:30,720 --> 00:00:33,620
I don't appear to have any syntax errors.

11
00:00:33,850 --> 00:00:35,700
So OK this looks pretty good.

12
00:00:36,060 --> 00:00:38,690
I'm going to introduce an error now inside my code.

13
00:00:38,690 --> 00:00:40,300
Just a very subtle error.

14
00:00:40,380 --> 00:00:45,430
You'll notice that I am declaring a function called average and then I invoke it down here.

15
00:00:45,600 --> 00:00:52,470
So the subtle error and introduce is going to remain this thing too capitally average and the instant

16
00:00:52,470 --> 00:00:58,260
I do I get a whole bunch of red popping up inside my code editor and if I hover over this error right

17
00:00:58,260 --> 00:01:04,420
here I know the text is kind of small but I'll read it for you says average is defined but never used.

18
00:01:04,560 --> 00:01:09,990
And then down here average is not defined and so both these error messages are very helpful for helping

19
00:01:09,990 --> 00:01:16,230
me just kind of figure out how I just made a big type but within my code I declared average with a capital

20
00:01:16,230 --> 00:01:16,660
J.

21
00:01:16,830 --> 00:01:19,760
But then when I tried to use it I've got lowercase say so.

22
00:01:19,770 --> 00:01:23,140
This function is in theory not defined.

23
00:01:23,520 --> 00:01:25,670
So this is the purpose of excellent.

24
00:01:25,680 --> 00:01:32,220
It runs inside my code editor and it detects or recognizes whenever I make either a syntax error or

25
00:01:32,250 --> 00:01:36,640
an error like you know basically reference a variable that does not exist.

26
00:01:36,810 --> 00:01:39,580
So I can fix this error up by going back to lurking.

27
00:01:39,570 --> 00:01:42,180
Say And we're back to normal of course.

28
00:01:42,210 --> 00:01:44,430
Yes lint does not only do.

29
00:01:44,730 --> 00:01:47,730
Trying to figure out if you're referencing a variable it doesn't exist.

30
00:01:47,730 --> 00:01:51,770
It will also pick up on say you know a dangling operator like so.

31
00:01:51,840 --> 00:01:58,050
So I've got a dangling divisions division sign here and we get a nice error message that says it looks

32
00:01:58,050 --> 00:02:03,720
like something right here went a little bit wrong and we can you know reasonably easy figure out that.

33
00:02:03,810 --> 00:02:05,740
OK we probably made a mistake here.

34
00:02:06,000 --> 00:02:11,750
I also want to divide it by two or let's say I misspelled return.

35
00:02:11,820 --> 00:02:16,050
All right fantastic doing the same thing as well just letting me know that I made a very subtle mistake

36
00:02:16,380 --> 00:02:19,150
that I should fix before I move on with my application.

37
00:02:19,490 --> 00:02:21,150
OK so that's what Yeslam does.

38
00:02:21,150 --> 00:02:26,160
I hope that I've kind of given you an idea that yes this is something that's useful something you might

39
00:02:26,160 --> 00:02:28,890
want to use and set up inside your application.

40
00:02:28,890 --> 00:02:31,200
I used to look down on us a little bit.

41
00:02:31,220 --> 00:02:36,300
You know I always thought personally like well if I'm a real engineer I would be able to pick up type

42
00:02:36,300 --> 00:02:41,730
was like this before I try to run in the browser and that's not a very realistic attitude.

43
00:02:41,730 --> 00:02:47,670
You know and at the end of the day everybody makes mistakes some number of the time and the sooner you

44
00:02:47,940 --> 00:02:51,880
find and fix those mistakes it just means you're all the more productive.

45
00:02:51,900 --> 00:02:57,180
So personally I think that there's a lot of benefit to using yes lint and not a tremendous amount of

46
00:02:57,180 --> 00:02:58,550
downside.

47
00:02:59,220 --> 00:03:02,660
Let's change gears now and talk a little bit more about how.

48
00:03:02,670 --> 00:03:04,990
Yes lint works in how to set it up.

49
00:03:05,100 --> 00:03:07,340
So this is the one downside to Eastlink.

50
00:03:07,350 --> 00:03:09,460
I'll tell you that right now the one downside.

51
00:03:09,600 --> 00:03:13,870
Figuring out how the thing works and how to set it up is a little bit of a nightmare.

52
00:03:14,090 --> 00:03:19,300
And well that's kind of evidenced by this really scary looking diagram that I've got on the screen now.

53
00:03:19,650 --> 00:03:24,860
So we're going talk about exactly how Yeslam works at least on the kind of set up side of things.

54
00:03:24,930 --> 00:03:30,630
Do take note I'm going to frame this discussion for using Eastlink with our outer code editor so I use

55
00:03:30,630 --> 00:03:31,220
outta.

56
00:03:31,380 --> 00:03:39,390
You might use sublime or vs code or web storm or Vim whatever it might be the set for all those different

57
00:03:39,390 --> 00:03:40,980
headers is very similar.

58
00:03:40,980 --> 00:03:48,070
Just some very slight differences so again Les is no kind of frame the discussion in that regard with

59
00:03:48,070 --> 00:03:48,570
Yeslam.

60
00:03:48,580 --> 00:03:50,770
There's two phases of setup.

61
00:03:50,770 --> 00:03:55,360
There is Ed. specific setup which is kind of above this long line right here.

62
00:03:55,510 --> 00:03:59,060
And then there is project specific setup as well.

63
00:03:59,290 --> 00:04:03,800
Use So we're going to jump around on this diagram a little bit.

64
00:04:03,820 --> 00:04:08,590
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

65
00:04:08,590 --> 00:04:12,190
the bottom here at this big box with all these rules things in here.

66
00:04:12,190 --> 00:04:19,300
So when we install Adam as our code editor Adam has a fantastic ecosystem of different packages that

67
00:04:19,300 --> 00:04:24,250
we can download and install inside of Adam to enhance the behavior of the editor.

68
00:04:24,250 --> 00:04:28,620
One such plugin that we can install is called simply Linter.

69
00:04:28,660 --> 00:04:29,360
That's all it's called.

70
00:04:29,360 --> 00:04:30,230
Not excellent.

71
00:04:30,250 --> 00:04:36,700
It's just Linter Linter is some underlying functionality inside of our code editor inside of atom in

72
00:04:36,700 --> 00:04:39,780
particular that allows us to plug in.

73
00:04:39,790 --> 00:04:42,100
And that's kind of what I'm trying to symbolize here by this.

74
00:04:42,130 --> 00:04:45,140
Yes lint going into this you know white box right here.

75
00:04:45,310 --> 00:04:47,770
We can plug in different lynchers.

76
00:04:47,950 --> 00:04:51,250
So E.S. lint is not the only limiting system out there.

77
00:04:51,260 --> 00:04:56,700
There are tons of other programming languages and many other languages have litters of their own.

78
00:04:56,950 --> 00:05:04,630
So for our we get we get this very generic very multi use case Linter plug in there just has some idea

79
00:05:04,630 --> 00:05:09,300
of how to show airs to the user on the screen and that's all it really does.

80
00:05:10,690 --> 00:05:14,340
So we have our Linter plug in on top of that we will install.

81
00:05:14,380 --> 00:05:15,390
Yes.

82
00:05:15,790 --> 00:05:21,550
Yes Lynn is the actual plug in is the actual module that parses our javascript code and applies some

83
00:05:21,550 --> 00:05:26,510
rules to it and tries to validate Hey did they you know make a mistake in here did something go wrong.

84
00:05:26,620 --> 00:05:30,250
If so I need to peruse some type of error message and show it to the user.

85
00:05:30,430 --> 00:05:32,010
So that's the purpose of excellent.

86
00:05:32,020 --> 00:05:39,090
It parses our javascript code and then its sources or creates the error messages to show to the user.

87
00:05:39,160 --> 00:05:45,690
So both the winter that we install and excellent are what I kind of refer to as ed. specific settings.

88
00:05:45,880 --> 00:05:51,160
You install them once like forever and you're done and you just install Linter once you install Yes

89
00:05:51,370 --> 00:05:54,320
once you're done that's it.

90
00:05:54,340 --> 00:05:57,430
On the flip side are project specific settings.

91
00:05:57,580 --> 00:05:59,960
So moving from project to project.

92
00:06:00,010 --> 00:06:06,250
You know maybe you've got a project at work and then you've also got a project at home like a side project

93
00:06:06,640 --> 00:06:13,600
and your work project might be very legacy like S-5 code but then the project you're working out at

94
00:06:13,600 --> 00:06:15,390
home might be cutting edge.

95
00:06:15,550 --> 00:06:19,190
Yes six Yes seven lots of really fancy syntax.

96
00:06:19,600 --> 00:06:25,120
So to accommodate for these different projects that you might have you can wire up what is what I can

97
00:06:25,150 --> 00:06:30,550
refer to and say this is an official terminology it's wired for Two-Eyes project specific configuration

98
00:06:30,850 --> 00:06:38,410
so we can configure Yes lint in the rules that it uses to validate our javascript code on a per project

99
00:06:38,410 --> 00:06:39,340
basis.

100
00:06:41,480 --> 00:06:47,930
To set up E.S. slant on a very specific project we will add in some amount of configuration for just

101
00:06:47,930 --> 00:06:51,950
a specific project and we'll talk about exactly what form that takes.

102
00:06:51,960 --> 00:06:54,480
We set this up inside of our code editor.

103
00:06:54,500 --> 00:07:01,160
The purpose of this config file is a file that we create is to tell each slant that we want to use some

104
00:07:01,160 --> 00:07:03,790
number of rules to validate our Javascript.

105
00:07:04,010 --> 00:07:08,690
So at the end of the day when yes lint runs Yes lint by default by itself.

106
00:07:08,690 --> 00:07:12,500
If you just install and run it it does absolutely nothing.

107
00:07:12,500 --> 00:07:16,120
There is no builtin validation inside of us yes.

108
00:07:16,250 --> 00:07:21,680
You have to specify some number of rules that you want to use to say to your Slint Hey when you're parsing

109
00:07:21,680 --> 00:07:26,590
everything and you're figuring out if you know anything is going wrong please reference these rules.

110
00:07:26,590 --> 00:07:30,450
I want to make sure that the developer is following all these different rules.

111
00:07:30,740 --> 00:07:37,160
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

112
00:07:37,220 --> 00:07:43,220
an error message and the error message I know it's very small on the video but you can see here very

113
00:07:43,220 --> 00:07:45,230
small says semi right here.

114
00:07:45,230 --> 00:07:53,210
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

115
00:07:53,210 --> 00:07:57,170
about making sure that you use semi colons within your code.

116
00:07:57,170 --> 00:07:58,490
So here is a good example right here.

117
00:07:58,490 --> 00:08:03,740
Hey please make sure that you use semi-colons and you can read all the documentation and hear all about

118
00:08:03,740 --> 00:08:04,330
it.

119
00:08:04,730 --> 00:08:08,170
So for any projects that we might be working on with excellent.

120
00:08:08,210 --> 00:08:11,100
We will need to specify some number of rules.

121
00:08:11,150 --> 00:08:17,320
Now of course as a kind of an line developer you don't have to specify all these rules one by one.

122
00:08:17,330 --> 00:08:22,690
There are a ton of preset configurations out there online that you can just download and install.

123
00:08:22,730 --> 00:08:27,830
They will kind of bundled together a reasonable rule set of different validation rules and you can just

124
00:08:27,920 --> 00:08:33,440
immediately start working without having to worry about you know adding in 30 rules before you start

125
00:08:33,440 --> 00:08:34,680
actually writing any code.

126
00:08:34,790 --> 00:08:40,760
So for the config side of things usually you will pull in some already pre bundled set of rules to validate

127
00:08:40,760 --> 00:08:44,150
your javascript code so that is how.

128
00:08:44,170 --> 00:08:47,910
Yes Slint works or at least the again the set up side works inside.

129
00:08:47,920 --> 00:08:50,170
In a nutshell let's continue.

130
00:08:50,200 --> 00:08:55,930
In another video and talk about how we set up Eastland with a number of different code editors