1 00:00:00,780 --> 00:00:05,980 In this section we're going to walk through the set up of each Slint inside of the atom code editor. 2 00:00:06,000 --> 00:00:10,950 So if you're not using atom you'll want to skip on to the next video that covers your very particular 3 00:00:10,950 --> 00:00:15,810 code editor is set up for Eastland is different for each editor and that's why we've got a series of 4 00:00:15,810 --> 00:00:20,720 different videos to explore how to set up yes linked with different editor. 5 00:00:20,790 --> 00:00:23,040 So with Adam let's get started. 6 00:00:23,190 --> 00:00:29,280 I've opened up my Adam editor inside of a project directory here and in our case it is our reac native 7 00:00:29,280 --> 00:00:29,900 project. 8 00:00:29,910 --> 00:00:36,180 But it doesn't matter what type of project reason Heslin for with it can be re-act native Riak J.S. 9 00:00:36,420 --> 00:00:40,380 Amber angular whatever it wants to be doesn't matter. 10 00:00:40,380 --> 00:00:44,880 So inside this project directory I'm going to open up a single file called index. 11 00:00:44,910 --> 00:00:45,650 I went on. 12 00:00:45,710 --> 00:00:46,440 Yes. 13 00:00:46,620 --> 00:00:51,410 Now the only reason I'm opening up this file is so we can test out our Linter and make sure it's working 14 00:00:51,420 --> 00:00:52,710 after we install it. 15 00:00:52,710 --> 00:00:56,780 So let's get started with the installation up at the very top left hand side. 16 00:00:56,790 --> 00:01:01,080 I'm going to click on out them and open up my editor preferences 17 00:01:03,950 --> 00:01:10,550 then on the left hand nav bar inside the preferences pane I would click on the install section and then 18 00:01:10,580 --> 00:01:16,330 inside of install we're going to search for a very particular package called Linter dash. 19 00:01:16,370 --> 00:01:17,180 Yes lint 20 00:01:21,040 --> 00:01:23,670 the first result that I see here is the Linter dash. 21 00:01:23,690 --> 00:01:26,980 Yes lint package and I will install it on the right hand side. 22 00:01:27,280 --> 00:01:30,070 And I'm also going to find the next package right beneath it. 23 00:01:30,070 --> 00:01:31,290 That's called Linter. 24 00:01:31,480 --> 00:01:33,900 If you don't see the next one on here is being winter. 25 00:01:33,910 --> 00:01:39,370 If it's anything else then you can just do another search for the or package itself and find it and 26 00:01:39,370 --> 00:01:39,980 install it. 27 00:01:40,030 --> 00:01:42,760 So we're also going to install Linter as well. 28 00:01:43,400 --> 00:01:43,770 OK. 29 00:01:43,780 --> 00:01:46,390 So installing these is going to take just a moment of time. 30 00:01:46,390 --> 00:01:51,860 So while that's occurring we're going to flip over to our terminal and do another little bit of setup 31 00:01:53,640 --> 00:01:56,750 we're also going to pull up our diagram on how yes lint works right here. 32 00:01:56,790 --> 00:02:03,330 So at this point in time we just started the installation of the Linter attached to Adam and Eve Slint 33 00:02:03,480 --> 00:02:06,750 the plug in that's going to run inside the atom editor as well. 34 00:02:06,780 --> 00:02:14,010 So now we need to install our configuration some pre-built set of rules for our Linter installation 35 00:02:14,010 --> 00:02:14,660 to run. 36 00:02:14,850 --> 00:02:17,060 So we're not going to write a rule set from scratch. 37 00:02:17,070 --> 00:02:20,650 We're just going to use one that has already been put together for us. 38 00:02:21,240 --> 00:02:29,730 So to install a Already pre-generated pre-built list of excellent rules in my project directory I will 39 00:02:29,730 --> 00:02:37,870 install NPM modules so will install with NPM install dash dash save dash dev. 40 00:02:38,010 --> 00:02:45,120 We're going to install this as a developer dependency and then we're going to install Yes Slint dash 41 00:02:45,240 --> 00:02:50,210 config dash Rallye coding like so. 42 00:02:50,420 --> 00:02:53,510 All right so let's install this and just let it do its thing. 43 00:02:55,640 --> 00:03:00,580 And while that's going I'll also check out my item preferences and just verify. 44 00:03:00,690 --> 00:03:01,110 OK. 45 00:03:01,140 --> 00:03:05,800 Both of them appear to have been installed successfully so I don't need any more settings any more. 46 00:03:05,800 --> 00:03:13,920 So close the settings pane at the top and I go back over to my terminal and just verify this installation 47 00:03:13,920 --> 00:03:15,610 is going to wrap up here in just a second. 48 00:03:22,170 --> 00:03:22,540 OK. 49 00:03:22,560 --> 00:03:24,090 Well that's just going to take forever. 50 00:03:24,090 --> 00:03:27,680 So that's going to last up for set up that we have to do. 51 00:03:27,840 --> 00:03:34,350 So we have to make sure that yes lint knows to use that rule set up or that rule bundle that we just 52 00:03:34,350 --> 00:03:39,960 install via NPM to tell us lint that we want to use that bundle of rules. 53 00:03:39,960 --> 00:03:43,460 We're going to add a configuration file to our project. 54 00:03:43,530 --> 00:03:49,420 So inside of my project directory I'm going to create a new file called Dot. 55 00:03:49,710 --> 00:03:50,680 Yes lint. 56 00:03:50,740 --> 00:03:54,890 RC So Dot make sure you add that dot on the front lint. 57 00:03:54,940 --> 00:04:03,790 RC So any setup that we want to do for E.S. lint for this particular project we add to this file right 58 00:04:03,790 --> 00:04:04,460 here. 59 00:04:04,470 --> 00:04:08,560 Remember this is going into the realm of project specific settings. 60 00:04:08,560 --> 00:04:14,710 So on every project that I start off where I want to use E.S. Lent I will need to add yes excellent 61 00:04:14,770 --> 00:04:16,130 RC file. 62 00:04:16,180 --> 00:04:19,080 Again this is project specific set up. 63 00:04:19,150 --> 00:04:26,170 So inside if you will do a little bit of project specific setup us I'll add on a set of curly braces 64 00:04:26,170 --> 00:04:32,590 to specify an object and then we're going to put in an inside of very specifically double quotes. 65 00:04:32,740 --> 00:04:40,450 The word extends with the key of Raley coding like so make sure that you've got double quotes on both 66 00:04:40,510 --> 00:04:43,360 extensions and Raley coding. 67 00:04:44,050 --> 00:04:50,320 So what this tells us Lin is to go and find a installed dependency inside the node modules directory 68 00:04:50,380 --> 00:04:54,160 which is what we just installed called Rallye coding. 69 00:04:54,190 --> 00:04:58,640 So we just installed and it looks like it just wrapped up successfully. 70 00:04:58,870 --> 00:05:03,890 We just installed an excellent config called specifically Rallye coding. 71 00:05:03,940 --> 00:05:04,890 So we're just telling. 72 00:05:04,930 --> 00:05:05,750 Yes Slint. 73 00:05:05,830 --> 00:05:07,550 Hey go use that configuration. 74 00:05:07,580 --> 00:05:09,790 We just downloaded. 75 00:05:09,790 --> 00:05:10,150 All right. 76 00:05:10,180 --> 00:05:16,810 Now the last step I'm going to close out the excellent file and to close out the index file and then 77 00:05:16,810 --> 00:05:19,360 reopen it and then once I reopen it. 78 00:05:19,360 --> 00:05:19,850 My. 79 00:05:19,870 --> 00:05:20,770 Yes. 80 00:05:21,140 --> 00:05:22,530 My Linter should be active. 81 00:05:22,540 --> 00:05:27,220 So if I start deleting some code you'll see that I start getting some error messages popping up on the 82 00:05:27,220 --> 00:05:28,980 screen specifically in this case. 83 00:05:28,990 --> 00:05:34,160 You know I just delete the semi-colon so it says a year Miss missing a semi-colon he can't do that. 84 00:05:34,390 --> 00:05:39,010 But then we can also start doing weird stuff like I don't know have a plus plus plus plus plus. 85 00:05:39,340 --> 00:05:44,990 And yup that looks good says Persinger unexpected token because we did a bunch of pluses and a sign 86 00:05:45,000 --> 00:05:49,070 in a row of your OK so that's it with yes Slint inside of them. 87 00:05:49,090 --> 00:05:50,650 That's all the set up we have to do. 88 00:05:50,770 --> 00:05:54,870 The one thing to keep in mind is that on any future project where you want to use. 89 00:05:54,880 --> 00:05:59,430 Yes lint you have to create the Slint RC file. 90 00:05:59,710 --> 00:06:06,800 Paste in this configuration and then you also need to install the yes Slint config Rallye coding package 91 00:06:06,800 --> 00:06:07,570 as well. 92 00:06:07,870 --> 00:06:12,790 Remember this package right here just contains a list of different rules to tell excellent how it should 93 00:06:12,790 --> 00:06:14,080 validate our code. 94 00:06:14,550 --> 00:06:16,200 OK so that's our setup. 95 00:06:16,210 --> 00:06:18,420 Let's get continued in the next section.