1 00:00:00,700 --> 00:00:01,300 Welcome back. 2 00:00:01,990 --> 00:00:09,580 I wanted to show you quickly another option you have for an editor, and I mean, there are a ton of 3 00:00:09,580 --> 00:00:13,510 options for you to choose from of where you want to write your code. 4 00:00:14,050 --> 00:00:20,560 And I prefer sublime text, but I want to show you visual studio code as well, because between sublime 5 00:00:20,560 --> 00:00:28,810 text and visual studio code, these two are probably the most used most popular code editors for Web 6 00:00:28,810 --> 00:00:29,390 developers. 7 00:00:30,160 --> 00:00:36,100 Now, the way you get Visual Studio Code is, well, you go to their website and just download whichever 8 00:00:36,400 --> 00:00:37,810 operating system you're on. 9 00:00:38,020 --> 00:00:41,260 My case, it's a Mac, so I'll just download that. 10 00:00:42,720 --> 00:00:46,620 And once it's downloaded, I can just unzip it, open it up. 11 00:00:47,740 --> 00:00:50,350 From here, we can just open visual studio code. 12 00:00:51,370 --> 00:00:52,880 And there we have it, nice and easy. 13 00:00:53,710 --> 00:01:00,160 Now, the reason a lot of people like Visual Studio Code is that it's free, unlike sublime text that 14 00:01:00,280 --> 00:01:03,370 allows you to, well, still use it for free. 15 00:01:03,370 --> 00:01:08,380 But every once in a while you get an annoying pop up to purchase the full subscription. 16 00:01:09,560 --> 00:01:16,640 Visual Studio Code actually has really, really nice plug ins and tools to make developing better. 17 00:01:17,150 --> 00:01:21,690 Personally, I like sublime text just because it is nice and simple and clean. 18 00:01:22,640 --> 00:01:26,630 I find Visual Studio Code can get noisy, although you can change things around. 19 00:01:26,990 --> 00:01:29,900 But let me show you how I would set up Visual Studio Code. 20 00:01:30,830 --> 00:01:31,340 First. 21 00:01:32,550 --> 00:01:36,570 Well, we can just create a new file and let's create a new JavaScript file. 22 00:01:37,780 --> 00:01:40,840 If I save this, save it to desktop and we'll call the script. 23 00:01:40,960 --> 00:01:41,360 James. 24 00:01:43,580 --> 00:01:49,970 One of the really neat things about Vrsaljko and let's make this a little bit bigger, if I create an 25 00:01:49,970 --> 00:01:52,310 object here, let's say. 26 00:01:54,330 --> 00:01:55,080 Object. 27 00:01:56,940 --> 00:01:59,970 And this will have a name of. 28 00:02:00,890 --> 00:02:01,490 Sally. 29 00:02:03,070 --> 00:02:05,140 If I go object, Dot. 30 00:02:07,060 --> 00:02:08,020 That's not what I wanted. 31 00:02:08,139 --> 00:02:09,460 Object dot. 32 00:02:10,970 --> 00:02:15,810 You see that I get a lot of suggestions from Vrsaljko. 33 00:02:15,860 --> 00:02:19,010 I didn't have to install any plug ins, nothing at all. 34 00:02:19,010 --> 00:02:24,650 But it detects what this object has as a prop. and it auto completes for us. 35 00:02:25,460 --> 00:02:31,370 And underneath the hood, it's using something called Intellisense, and they give you a ton of suggestions 36 00:02:31,370 --> 00:02:32,000 when you're typing. 37 00:02:32,000 --> 00:02:38,510 As you can see here, for example, if I type in the window object, I see all the methods and properties 38 00:02:38,510 --> 00:02:41,510 that I can access, which is really, really nice. 39 00:02:41,510 --> 00:02:42,710 And people really like this. 40 00:02:44,070 --> 00:02:50,370 And if I make any mistakes in my code, you see that I get that underlined in red saying, hey, there's 41 00:02:50,370 --> 00:02:51,110 something wrong here. 42 00:02:51,630 --> 00:02:55,290 So that's really, really nice and has a few more options. 43 00:02:55,290 --> 00:02:58,220 It has a debug feature that is really nice. 44 00:02:58,230 --> 00:03:01,140 It also integrates with GitHub and source control. 45 00:03:02,150 --> 00:03:07,160 My favorite feature is we can actually open up the terminal in here. 46 00:03:08,030 --> 00:03:12,820 You see that I have my terminal right in my code editor, which is really, really nice. 47 00:03:12,830 --> 00:03:19,100 You don't have to switch between the screens like I do when I use sublime text and ITR, although I 48 00:03:19,100 --> 00:03:20,060 actually like that. 49 00:03:20,120 --> 00:03:23,000 Some people prefer having everything and just one go. 50 00:03:24,040 --> 00:03:28,330 Now, if I was using voice code, there's two plug ins that I really recommend. 51 00:03:29,350 --> 00:03:37,420 And if I go to follow over here or let's go to code preferences and then do extensions, there's a ton 52 00:03:37,420 --> 00:03:39,490 of extension here, just like sublime text. 53 00:03:39,700 --> 00:03:45,190 And one of my favorites that I like using with the code is Quokka. 54 00:03:46,180 --> 00:03:47,780 And I'll show you what it does in a second. 55 00:03:47,860 --> 00:03:53,440 I'm going to install this and I've actually already installed it, so I don't have to click anything 56 00:03:53,440 --> 00:03:53,740 here. 57 00:03:53,740 --> 00:03:57,190 In your case, you might have to click install it, will install it for you. 58 00:03:58,010 --> 00:04:01,510 And once it's installed, I can do something fun. 59 00:04:01,690 --> 00:04:10,450 I can do command shift P or if you're using windows might be control shift B, and it's going to display 60 00:04:10,450 --> 00:04:14,500 the editor's command palette, which again works the same and sublime text. 61 00:04:14,830 --> 00:04:16,360 And if I type in Quokka here. 62 00:04:17,660 --> 00:04:23,480 You see the list of commands that I can use and most like in your case, you want to start a new JavaScript 63 00:04:23,480 --> 00:04:23,780 file. 64 00:04:24,170 --> 00:04:26,840 So if I do this, check out what happens now. 65 00:04:27,770 --> 00:04:30,080 If I create an object, let's say. 66 00:04:31,520 --> 00:04:32,180 Object. 67 00:04:34,270 --> 00:04:40,870 And I start typing, let's say name, you see that it's actually evaluating the script and giving me 68 00:04:40,870 --> 00:04:42,400 any air, so name is not defined. 69 00:04:42,400 --> 00:04:44,230 If I do, name is. 70 00:04:46,220 --> 00:04:46,850 Sally. 71 00:04:47,950 --> 00:04:49,270 All right, everything is good. 72 00:04:50,080 --> 00:04:58,060 And if I start typing things like Sally Dot, hi, I'll say Sally is not defined and it actually evaluates 73 00:04:58,300 --> 00:05:00,370 while we're writing, which is really, really neat. 74 00:05:00,610 --> 00:05:06,790 And I can just have Quokka evaluate what I'm currently writing and look at that. 75 00:05:06,820 --> 00:05:10,990 I see that object has named Sally very, very cool. 76 00:05:11,710 --> 00:05:15,330 So that's a really, really fun plug in another one that I really like. 77 00:05:15,340 --> 00:05:16,810 And now we don't need to save that. 78 00:05:17,050 --> 00:05:18,730 Another one that I really like. 79 00:05:19,240 --> 00:05:25,300 And probably the only other one that I would add is the indent to cater. 80 00:05:29,210 --> 00:05:36,320 And again, I have that already installed, the nice things with the dead dictator is, if you notice 81 00:05:36,320 --> 00:05:38,480 here, I have these lines. 82 00:05:38,780 --> 00:05:39,740 Let's have another. 83 00:05:42,340 --> 00:05:48,350 Object within an object, you see that these lines are being highlighted here, showing me where I am 84 00:05:48,350 --> 00:05:51,010 in the code block, which I find very useful. 85 00:05:52,120 --> 00:05:57,930 And then finally, just like with sublime text, you can change the theme that you have. 86 00:05:58,510 --> 00:06:07,000 So if you go to theme, for example, you have a few default ones and a few others that you can just 87 00:06:07,000 --> 00:06:07,570 install. 88 00:06:08,530 --> 00:06:10,720 So I actually installed Owl. 89 00:06:12,140 --> 00:06:13,670 Which is one of my favorites. 90 00:06:14,400 --> 00:06:18,450 I can see that you can download different themes and customize it to your liking. 91 00:06:19,220 --> 00:06:20,630 That's enough about Vrsaljko. 92 00:06:20,690 --> 00:06:22,960 Everybody has their own favorite code editor. 93 00:06:23,510 --> 00:06:26,470 There's no right one for Web development. 94 00:06:26,480 --> 00:06:33,230 You just pick the tool that you find yourself liking the most and you find you work the best with some 95 00:06:33,230 --> 00:06:35,180 people, like a lot of plugins. 96 00:06:35,180 --> 00:06:38,240 Some people like the simplicity of sublime text. 97 00:06:38,780 --> 00:06:39,860 It's all up to you. 98 00:06:39,860 --> 00:06:44,780 Just customize it however you want, because at the end of the day, it doesn't matter what code it 99 00:06:44,780 --> 00:06:45,890 ed you use. 100 00:06:46,800 --> 00:06:54,270 But if I had to recommend two definitely sublime text or the escott I'll see in the next one, bye bye.