1 00:00:00,800 --> 00:00:05,870 In this section we're going to go through the installation of yes land on Sublime Text 3. 2 00:00:05,930 --> 00:00:10,510 So specifically Sublime Text three Sublime Text two as far as I know is not supported. 3 00:00:10,530 --> 00:00:11,230 Excellent. 4 00:00:11,240 --> 00:00:14,330 So this is all going to be set up with Yeslam 3. 5 00:00:14,960 --> 00:00:20,180 So unfortunately yes Ursuline has a little bit of a hefty amount of setup here. 6 00:00:20,180 --> 00:00:22,660 So these are all the stuff we have to go through. 7 00:00:22,940 --> 00:00:28,570 And yes it is slightly painful to be honest with you this is a third time record of this section. 8 00:00:28,570 --> 00:00:34,760 So the last two times I made a tiny mistake hopefully no repeats this time no repeats are going to get 9 00:00:34,760 --> 00:00:35,720 through this in one go. 10 00:00:35,720 --> 00:00:36,830 All right. 11 00:00:37,640 --> 00:00:38,330 So first. 12 00:00:38,360 --> 00:00:39,510 Well you know what. 13 00:00:39,520 --> 00:00:44,480 I don't know how much sense there is to talk about all this installation here basically getting set 14 00:00:44,480 --> 00:00:47,300 up with subline just involves installing a bunch of junk. 15 00:00:47,480 --> 00:00:50,760 Let's just get started on it and go through the process. 16 00:00:50,810 --> 00:00:54,930 So first we are going to install Yeslam globally with NPM. 17 00:00:55,190 --> 00:01:01,520 So at my terminal I'm inside my project directory and I'm going to install the yes limt command line 18 00:01:01,520 --> 00:01:02,160 tool. 19 00:01:02,220 --> 00:01:06,790 OK so the command line tool is what actually parses and validates our code. 20 00:01:07,100 --> 00:01:10,710 We will execute NPM install DSG. 21 00:01:10,820 --> 00:01:19,220 Yes Lance is going to install the Yeslam package globally as indicated by the dash G right here. 22 00:01:19,220 --> 00:01:20,600 This is going to take a little bit to run. 23 00:01:20,600 --> 00:01:24,050 So let's continue with the rest of the installation while that goes. 24 00:01:24,050 --> 00:01:30,010 The next thing we're going to do is install package control package control as a package manager for 25 00:01:30,020 --> 00:01:31,240 Sublime Text 3. 26 00:01:31,250 --> 00:01:37,550 So it's just something that's going to allow us to easily install other packages to install package 27 00:01:37,550 --> 00:01:49,130 control 3 I to open up my browser and I'm going to navigate to package control dot IO slash installation 28 00:01:51,860 --> 00:01:57,710 then once here on the left side we're going to go through the simple installation process which really 29 00:01:57,710 --> 00:01:59,670 is pretty straightforward. 30 00:02:00,620 --> 00:02:03,820 I'm going to copy this big block of text right here. 31 00:02:03,830 --> 00:02:07,990 Everything from the import statement to the right by at the bottom. 32 00:02:08,480 --> 00:02:10,910 So I hit command C to copy it. 33 00:02:10,910 --> 00:02:16,710 Now we'll go back over to Sublime Text and I need to paste this into some blinds console. 34 00:02:16,910 --> 00:02:24,300 So I go up to the View tab at the top click Show console and then I will paste it all in here. 35 00:02:24,350 --> 00:02:25,610 Everything that we just copied. 36 00:02:25,610 --> 00:02:32,630 So the very last token in here will be right by when I enter and this will install package control for 37 00:02:32,630 --> 00:02:33,260 us. 38 00:02:33,360 --> 00:02:38,720 And I've already got package control installed so I am not really doing any additional insulation here. 39 00:02:38,780 --> 00:02:41,290 You'll want to make sure that it just completes installing. 40 00:02:41,300 --> 00:02:43,510 You only take a second or two. 41 00:02:44,390 --> 00:02:48,670 So next we've got our package control installed. 42 00:02:48,740 --> 00:02:55,250 We are going to install a configuration for yes lint within PM So this config part that we're about 43 00:02:55,250 --> 00:03:03,450 to do right here is all about this last half loops the last half on our diagram. 44 00:03:03,450 --> 00:03:06,620 Remember we have some per project set up that we have to do. 45 00:03:06,620 --> 00:03:11,000 So what we're about to do is the per project set up it's going to move the actual configuration that 46 00:03:11,000 --> 00:03:16,220 tells us and hey when you parse the code and make sure it's valid please use this set of rules to figure 47 00:03:16,220 --> 00:03:17,700 out what is going on. 48 00:03:18,200 --> 00:03:25,450 So back at my terminal all take note looks like gasoline is all done installing. 49 00:03:25,670 --> 00:03:33,460 We're going to install some configuration for it yes lint it run and install dash dash save dash dev. 50 00:03:33,980 --> 00:03:39,750 Yes Lintz Klein fig Rallye coding like so. 51 00:03:39,980 --> 00:03:47,930 So yes Slint dash config dash Rallye coding so we'll hit enter and let this thing do its little installation 52 00:03:48,020 --> 00:03:54,750 and it will keep working while that goes just installing that configuration inside of our project to 53 00:03:54,770 --> 00:03:56,380 that set of rules isn't enough. 54 00:03:56,380 --> 00:04:01,590 We have to actually tell ESPN to make use of that said approve of or that list of rules. 55 00:04:01,630 --> 00:04:06,730 So to tell excellent to use that set of rules we're going to create a new configuration file inside 56 00:04:06,730 --> 00:04:08,620 of our root project directory. 57 00:04:08,980 --> 00:04:15,710 So inside of my root project directory I'm going to make a new file called Daut. 58 00:04:15,910 --> 00:04:17,120 Yes lint. 59 00:04:17,280 --> 00:04:19,240 RC And I'll save it. 60 00:04:21,490 --> 00:04:27,280 So now I've got a new file inside my root project directory called Daut. 61 00:04:27,300 --> 00:04:33,630 Yes Lynn RC and it's completely empty inside if you're going to put just a little bit of configuration. 62 00:04:33,630 --> 00:04:42,900 I'm going to place a set of curly braces and then inside the curly braces all add in extends colon Raley 63 00:04:42,900 --> 00:04:44,030 coding. 64 00:04:44,670 --> 00:04:45,610 So again this tells. 65 00:04:45,630 --> 00:04:46,430 Excellent. 66 00:04:46,560 --> 00:04:49,670 Hey we just installed a set of configuration for you. 67 00:04:49,740 --> 00:04:53,060 Please use the configuration called Rallye coding. 68 00:04:53,190 --> 00:05:00,810 Do take note that you must use double quotes around each word here so double quotes around extends and 69 00:05:00,810 --> 00:05:04,260 double quotes around Raley coding as well. 70 00:05:05,210 --> 00:05:05,570 All right. 71 00:05:05,580 --> 00:05:06,780 So just two more steps. 72 00:05:06,780 --> 00:05:09,770 We're almost there almost there. 73 00:05:10,020 --> 00:05:15,550 We have now added in our config with NPM we have actually skipped to the bottom. 74 00:05:15,570 --> 00:05:17,840 We add in the config file to our project. 75 00:05:17,970 --> 00:05:19,760 So the last two things are to do. 76 00:05:19,810 --> 00:05:25,770 Are we going to use the package control module that we just installed to install Linter and excellent 77 00:05:25,780 --> 00:05:28,580 to sublime Tex. 78 00:05:28,870 --> 00:05:36,270 So back in sight of our project I'm going to install or use package control to install those two modules. 79 00:05:36,270 --> 00:05:43,550 First I'll open up the command palette by pressing command shift key and this opens up the command palette 80 00:05:43,590 --> 00:05:52,330 as a list of all things I can do with sublime text I'm going to search for install and then click on 81 00:05:52,330 --> 00:05:55,990 the install package section. 82 00:05:56,270 --> 00:06:00,050 This will do a little bit of loading and then show me a list of all the different packages that I can 83 00:06:00,050 --> 00:06:01,070 install. 84 00:06:01,370 --> 00:06:08,720 First we're going to look for sublime limiter and I'll find the first result right here is just sublime 85 00:06:08,720 --> 00:06:09,240 Linter. 86 00:06:09,260 --> 00:06:13,960 I will click it to install it and there we go nice and installed. 87 00:06:14,510 --> 00:06:21,020 And next I'll open up the command palette again with command shift P I will click on install package 88 00:06:21,020 --> 00:06:31,950 again and then this time around we are going to look for sublime Linter Dasch contrib dash Yes lint 89 00:06:32,570 --> 00:06:37,030 so subline Linter Dasch contrib dash Yes lint. 90 00:06:37,040 --> 00:06:38,540 So here's the result right here. 91 00:06:38,570 --> 00:06:42,820 And I'll click it to install it and I'll click out that message right there. 92 00:06:43,160 --> 00:06:47,740 OK so last step I'm going to close out sublime text entirely. 93 00:06:49,060 --> 00:06:57,730 So I just quit entirely from it and I started back up and I got my project folder still open right here. 94 00:06:57,780 --> 00:07:01,180 So last thing I have to do is just test this out make sure it works. 95 00:07:01,230 --> 00:07:08,820 I'm going to open up this index file and I'm going to delete a semi colon here at the end and I'm going 96 00:07:08,820 --> 00:07:10,730 to save the file. 97 00:07:10,830 --> 00:07:11,810 And you'll notice. 98 00:07:11,860 --> 00:07:15,950 Yup sure enough I get this error message popping up says here. 99 00:07:15,950 --> 00:07:17,360 Missing semi colon. 100 00:07:17,400 --> 00:07:18,600 The rule is semi-new. 101 00:07:18,750 --> 00:07:24,300 If you don't see the this little red dot over here and you know the Red Square pop up do you make sure 102 00:07:24,300 --> 00:07:30,740 that you save the file and also try changing the line that your cursor is on inside of Sublime Text 103 00:07:30,770 --> 00:07:35,850 the Linter is a little bit laggy and so sometimes it takes a second for it to realize oh hey you just 104 00:07:35,850 --> 00:07:41,160 fix the error so you'll notice that when I delete the semi-colon you know we're waiting we're waiting. 105 00:07:41,180 --> 00:07:42,850 Oh there's an error here. 106 00:07:43,030 --> 00:07:45,390 You know when I fix it we're waiting. 107 00:07:45,420 --> 00:07:45,750 OK. 108 00:07:45,750 --> 00:07:46,960 There it goes. 109 00:07:47,520 --> 00:07:47,840 OK. 110 00:07:47,880 --> 00:07:50,970 So here is yes let's set up a Sublime Text. 111 00:07:50,970 --> 00:07:54,720 I know not the easiest thing in the world to do in the future. 112 00:07:54,720 --> 00:08:00,700 Now whenever you want to use E.S. lint with Sublime Text You can create this dot. 113 00:08:00,730 --> 00:08:01,290 Yes. 114 00:08:01,340 --> 00:08:03,050 RC file right here. 115 00:08:03,050 --> 00:08:09,030 Paste in this rule and then make sure that you just run out the terminal that NPM installed. 116 00:08:09,120 --> 00:08:12,740 Dash dash save dev excellent config Raley coding. 117 00:08:12,810 --> 00:08:13,700 That's all you have to do. 118 00:08:13,710 --> 00:08:16,040 So in the future no more complicated set up. 119 00:08:16,080 --> 00:08:17,520 It's a one time thing. 120 00:08:17,940 --> 00:08:18,810 OK so we've got. 121 00:08:18,810 --> 00:08:20,500 Yes let's set up a sublime text. 122 00:08:20,550 --> 00:08:22,770 Let's continue in the next section.