1
00:00:00,060 --> 00:00:06,540
This lesson's going to provide a quick overview of visual studio code, so this is the suggested editor

2
00:00:06,540 --> 00:00:07,590
to write code.

3
00:00:07,830 --> 00:00:15,640
It's an open source editor, it's free and it runs across Mark Windows and Linux machines.

4
00:00:15,960 --> 00:00:24,480
So, first off, go over to the website code, dot visual studio dot com and go to the main page where

5
00:00:24,480 --> 00:00:25,890
you have a download option.

6
00:00:26,190 --> 00:00:30,850
You can select the download option that's going to suit your system.

7
00:00:31,140 --> 00:00:38,100
So right now I am on a Mac, so I would be downloading the stable Mac version and doing the install

8
00:00:38,100 --> 00:00:39,150
on my computer.

9
00:00:39,510 --> 00:00:46,890
So run through the install of the application and they do have really good documentation on their website.

10
00:00:47,280 --> 00:00:49,860
So let's go ahead and open the download file.

11
00:00:50,100 --> 00:00:56,310
Now you should see a welcome screen whenever you first start up the application and the font is going

12
00:00:56,310 --> 00:00:57,270
to be rather small.

13
00:00:57,270 --> 00:00:59,940
So I'm actually going to increase the font size.

14
00:01:00,150 --> 00:01:00,930
So I'm on a mark.

15
00:01:00,930 --> 00:01:04,500
I'm using just command plus and that's going to increase the size of the font.

16
00:01:04,800 --> 00:01:07,950
So you don't necessarily need to increase it on your system.

17
00:01:08,130 --> 00:01:12,210
I'm doing it because I'm recording the video, so it's a lot easier to read.

18
00:01:12,510 --> 00:01:15,390
So this welcome screen, you can uncheck it.

19
00:01:15,900 --> 00:01:21,630
Otherwise it will always show up whenever you open the application and you can also trigger the welcome

20
00:01:21,630 --> 00:01:22,110
screen.

21
00:01:22,290 --> 00:01:26,850
So if you do happen to close it and you want to go back to that welcome screen, you can go under the

22
00:01:26,850 --> 00:01:28,770
top tabs under help.

23
00:01:28,770 --> 00:01:29,430
Welcome.

24
00:01:29,580 --> 00:01:31,680
And that's going to pop that screen back up.

25
00:01:31,950 --> 00:01:35,250
So they do have some basic starting commands.

26
00:01:35,250 --> 00:01:38,730
Here's where you can start by creating a new file.

27
00:01:39,090 --> 00:01:47,010
You can open a file or you can run a command in the command palette and view all of the commands that

28
00:01:47,010 --> 00:01:49,030
are available within the Visual Studio code.

29
00:01:49,380 --> 00:01:51,660
There's also recent content.

30
00:01:51,900 --> 00:01:56,160
So once you've been working on some content, you're going to see it listed within the reasons.

31
00:01:56,760 --> 00:02:01,730
There's also release notes and how to get started with Visual Studio Code.

32
00:02:02,250 --> 00:02:06,930
So what this will do is this is going to give you some basics to get started.

33
00:02:07,170 --> 00:02:10,790
So let's go through those where you can select the theme that you want to use.

34
00:02:11,310 --> 00:02:12,600
There's three default themes.

35
00:02:12,630 --> 00:02:14,310
There's the light, there's the dark.

36
00:02:14,490 --> 00:02:15,840
There's the high contrast.

37
00:02:15,990 --> 00:02:21,000
And there's an option to load even more themes so you can select Seemore themes.

38
00:02:21,330 --> 00:02:27,020
And this gives you the full listing of all the themes that are currently installed on the systems.

39
00:02:27,040 --> 00:02:28,280
You might have more.

40
00:02:28,290 --> 00:02:30,270
It depends on what the default is.

41
00:02:30,510 --> 00:02:33,360
You can also install additional color themes.

42
00:02:33,780 --> 00:02:39,810
So selecting the install additional color themes will give you a full listing on the left hand side

43
00:02:39,990 --> 00:02:42,870
of all of the different themes that are available in the marketplace.

44
00:02:43,260 --> 00:02:46,380
So let's say you do want to install one of these themes.

45
00:02:46,380 --> 00:02:50,040
You like it, you want to do the install, are going to do the one candy dark.

46
00:02:50,220 --> 00:02:51,900
Just do a quick install of it.

47
00:02:51,990 --> 00:02:57,030
It does have some information, but how many downloads, how many leaks, how many stars it's received.

48
00:02:57,600 --> 00:03:04,380
So go ahead and click the install and that will install that particular theme so you can set the theme

49
00:03:04,380 --> 00:03:05,490
color as well.

50
00:03:05,790 --> 00:03:08,640
You can disable you could uninstall it at any time.

51
00:03:08,880 --> 00:03:15,050
If you want to minimize the themes window, you can always go that way and minimize the themes window.

52
00:03:15,390 --> 00:03:17,010
So now it's changed the theme.

53
00:03:17,010 --> 00:03:19,380
You can always go and open up the.

54
00:03:21,890 --> 00:03:28,430
Options once again, so for the command palette that's under review command palette, there's also a

55
00:03:28,430 --> 00:03:35,000
shortcut for that, and that's one of the best ways to access the visual studio options.

56
00:03:35,390 --> 00:03:42,710
And what you can do with Visual Studio fairly quickly shortcut for the markers, command shift peak

57
00:03:43,130 --> 00:03:46,370
and for a Windows machine, it's shift control.

58
00:03:47,120 --> 00:03:49,190
So that's going to open up the command palette.

59
00:03:49,430 --> 00:03:53,780
And this is the command palette where we've got all of the commands that are available.

60
00:03:54,200 --> 00:04:00,060
So what you can do is you can select by theme so you can generate that.

61
00:04:00,230 --> 00:04:02,600
You can generate color theme from current settings.

62
00:04:02,900 --> 00:04:04,780
You can select a color theme.

63
00:04:05,090 --> 00:04:10,910
So going back to the select color theme, this will once again give you the option to switch back to

64
00:04:10,910 --> 00:04:13,010
the other themes that were available.

65
00:04:13,310 --> 00:04:18,830
And again, if you want to load more themes, you once again have an option to load even more themes.

66
00:04:18,830 --> 00:04:21,050
So I'm going to go back to that high contrast.

67
00:04:21,470 --> 00:04:26,690
And whenever you're done with one of the themes or the extensions or one of the windows, there's the

68
00:04:26,690 --> 00:04:29,700
tabs at the top that you can use to close them down.

69
00:04:30,170 --> 00:04:37,070
So the next option that we want it to look at is when we go here, we can select the different languages.

70
00:04:37,490 --> 00:04:43,340
And this is one of the most important parts, because this allows you to write the code smarter, allows

71
00:04:43,340 --> 00:04:52,340
you to visual studio to understand the syntax and helps do the code completion debugging so you can

72
00:04:52,340 --> 00:04:54,670
select the various language extensions.

73
00:04:54,860 --> 00:04:58,340
So these are some of the common language extensions that you might want to use.

74
00:04:58,580 --> 00:05:04,130
If you select browse the language extensions, it'll give you all of the different language extensions.

75
00:05:04,340 --> 00:05:09,710
So depending on what programming language is that you're using, you can install the various extensions.

76
00:05:09,920 --> 00:05:16,040
And this is going to look very similar to how you did the install for the color theme that you've got

77
00:05:16,040 --> 00:05:22,040
the windows that are popping up that are showing you information about the add on that you're adding

78
00:05:22,040 --> 00:05:24,770
on some brief on how to use it.

79
00:05:25,040 --> 00:05:28,790
And also you have an option to uninstall it if you want as well.

80
00:05:29,270 --> 00:05:33,710
So closing that and now going back to the shortcuts.

81
00:05:34,070 --> 00:05:35,540
So shortcuts as well.

82
00:05:35,540 --> 00:05:38,690
If you're coding, it does save you some time.

83
00:05:38,870 --> 00:05:44,120
So if you get familiar with the shortcuts of your editor or if you do have an editor that you are familiar

84
00:05:44,120 --> 00:05:48,860
with, it's shortcuts and you want to use the same shortcuts within Visual Studio Code, you're able

85
00:05:48,860 --> 00:05:49,850
to do that as well.

86
00:05:50,120 --> 00:05:55,960
So you can open that up again within the command palettes and it's got all of the shortcuts.

87
00:05:56,270 --> 00:06:01,900
So one of the ones we just saw is we can open up the command palette with a shortcut.

88
00:06:02,240 --> 00:06:08,240
There's also if you want to get the keyboard shortcuts reference, that's all available there, too.

89
00:06:08,450 --> 00:06:15,260
So you click it, it'll bring you to the Web page, which will give you the option to download the PDF

90
00:06:15,470 --> 00:06:19,640
with all of the shortcut cuts that are available for your system.

91
00:06:19,640 --> 00:06:25,990
So detected that I'm on a Mac and it brought me into the shortcut list for this computer.

92
00:06:26,600 --> 00:06:29,990
We can open up our code and we can see the code.

93
00:06:30,140 --> 00:06:37,520
So this is an option that we can use when we're exploring so we can start and check out a project getting

94
00:06:37,520 --> 00:06:38,020
started.

95
00:06:38,030 --> 00:06:40,640
You can also walk through this, click these links.

96
00:06:40,640 --> 00:06:43,010
You can go to the command post as well.

97
00:06:43,790 --> 00:06:47,440
And this gives you more information about what's available.

98
00:06:47,720 --> 00:06:53,360
One of the nice other features that is available within the Visual Studio Code is the built in terminal.

99
00:06:53,600 --> 00:07:00,200
So this is a convenient way to run and get special access so you can show the terminal pallet, which

100
00:07:00,200 --> 00:07:01,730
is the terminal down here below.

101
00:07:02,030 --> 00:07:06,230
You also have an option in the top menu to create a new terminal.

102
00:07:06,230 --> 00:07:11,420
You can split a terminal and there's some configuration and ability to run some tasks.

103
00:07:11,780 --> 00:07:17,530
So what this will do is this will open up the terminal to wherever your folders are.

104
00:07:17,540 --> 00:07:22,160
So by default right now, it's just going to open up to the root of my system because I don't have any

105
00:07:22,160 --> 00:07:24,230
folders set up or I don't have any files set up.

106
00:07:24,560 --> 00:07:30,490
But if we do have files that we open up the terminal, then that's going to open up within that directory.

107
00:07:30,800 --> 00:07:32,120
So let's go back.

108
00:07:32,120 --> 00:07:33,400
We can close the terminal.

109
00:07:33,950 --> 00:07:36,310
So there's you can minimize the terminal as well.

110
00:07:36,320 --> 00:07:37,580
You can create a new terminal.

111
00:07:37,820 --> 00:07:46,040
You can set the different names, icons and colors for the terminal so that if you want to be able to

112
00:07:46,040 --> 00:07:51,350
distinguish particular terminal and one from the other, you're able to do that.

113
00:07:51,530 --> 00:07:55,300
There's also debug console and output and a problems area.

114
00:07:55,610 --> 00:08:00,440
So if there's any problems within the source code, it'll be outlined here.

115
00:08:01,220 --> 00:08:08,000
So one of the other really nice things about the Visual Studio code is there is a lot of different extensions

116
00:08:08,210 --> 00:08:09,610
that you can make use of.

117
00:08:09,890 --> 00:08:15,290
So in order to select the extensions, you can go from the getting started, the browse, the recommended

118
00:08:15,290 --> 00:08:15,940
extensions.

119
00:08:16,190 --> 00:08:21,140
So this gives you some default extensions and in order to install them, you just simply click.

120
00:08:21,350 --> 00:08:29,030
Install button, there's also s lente, so these are very useful application and extensions that you

121
00:08:29,030 --> 00:08:36,920
can use within your coding for even more so once you've gone through and you've set up your visual studio

122
00:08:36,920 --> 00:08:37,400
code.

123
00:08:39,050 --> 00:08:42,560
So what you can do now is you can start creating some files.

124
00:08:42,740 --> 00:08:47,690
There's also some more options with them to get started so you can tweak your different settings.

125
00:08:47,810 --> 00:08:53,600
And this is all available within the settings window where you can set your autosave, you can set the

126
00:08:53,600 --> 00:08:59,600
font size in a number of other visual settings that you can use in order to really customize the way

127
00:08:59,600 --> 00:09:02,570
that your editor is behaving.

128
00:09:02,780 --> 00:09:04,430
So let's close there, get started.

129
00:09:04,430 --> 00:09:07,160
And what we'll do is we're going to create a brand new file.

130
00:09:07,790 --> 00:09:13,490
There's a number of different ways to create a file you can select and you can just do the shortcut

131
00:09:13,490 --> 00:09:20,030
keys or you can go over to the top menu bar, select under file and you've got an option for a new file.

132
00:09:20,280 --> 00:09:25,730
You also have several other options where you can open up a new window, you can open an existing file,

133
00:09:25,910 --> 00:09:27,620
you could open existing workspace.

134
00:09:27,800 --> 00:09:29,450
You can see your recent files.

135
00:09:29,660 --> 00:09:35,570
You can add to the current workspace folders, adding this existing folder where you can serve as a

136
00:09:35,570 --> 00:09:36,200
workspace.

137
00:09:36,440 --> 00:09:43,190
So you can also use workspaces in order to separate out the different files and the different projects

138
00:09:43,190 --> 00:09:49,340
that you're working on in order to create separation so that once you have all of the content contained

139
00:09:49,340 --> 00:09:52,550
within the single workspace, it's a lot easier to manage.

140
00:09:52,760 --> 00:09:54,860
So you've also got the typical save options.

141
00:09:54,860 --> 00:09:57,500
You've got the autosave that you can turn on and off here.

142
00:09:57,650 --> 00:10:00,710
You can revert, you can close the editor and close the windows.

143
00:10:00,760 --> 00:10:02,930
What I'm going to do is I'm going to create a brand new file.

144
00:10:03,200 --> 00:10:06,020
So what gets created is just a blank file.

145
00:10:06,530 --> 00:10:08,450
So there's no extension on this.

146
00:10:08,460 --> 00:10:09,530
There's no language.

147
00:10:09,770 --> 00:10:15,380
The language down at the bottom, in the bar at the bottom is just going to see that it's plain text.

148
00:10:15,560 --> 00:10:19,310
So it's not detecting that this is any particular type of file.

149
00:10:19,320 --> 00:10:22,070
So we're going to create a simple HTML file.

150
00:10:22,460 --> 00:10:29,420
And so we have an option to type in code and notice that it's not opening, it's not doing an auto,

151
00:10:29,420 --> 00:10:33,110
it's not making any suggestion for any of the syntax.

152
00:10:33,650 --> 00:10:40,670
And you will see once you actually see it as a file type, then it will pick up the different coding

153
00:10:40,670 --> 00:10:44,120
that and it also help you with the code staling.

154
00:10:44,120 --> 00:10:46,490
So you're going to see the different colors of that staling.

155
00:10:46,790 --> 00:10:51,920
So one of the best things to do is before you even start working on a file is to save it to the file

156
00:10:51,920 --> 00:10:53,390
extension that you want to be using.

157
00:10:53,630 --> 00:11:00,230
You can use the keyboard shortcuts or you can go up to file and do the save us and save the file.

158
00:11:00,530 --> 00:11:04,630
So I've got a folder called Khoder and this is where I'm going to create the file.

159
00:11:04,910 --> 00:11:11,570
So just creating that index, each HTML file and once it detects that this is an HTML file, it'll give

160
00:11:11,570 --> 00:11:15,440
me the path to where the file is located.

161
00:11:15,590 --> 00:11:20,350
Also tell me the different file type and also down here below we're going to see the file type.

162
00:11:20,720 --> 00:11:24,640
So what's happening now is that we've got the adjuster now.

163
00:11:25,070 --> 00:11:31,550
So when I start typing some of the code and it's got auto closing of the brackets and you can customize

164
00:11:31,550 --> 00:11:39,290
all of this within the settings, it's also got the full tree where we've got the DOM tree of the HTML,

165
00:11:39,440 --> 00:11:40,820
the head and the title.

166
00:11:41,000 --> 00:11:43,430
So what is nested within each other?

167
00:11:43,940 --> 00:11:47,300
So what is what are the children that are nested within the parents?

168
00:11:47,480 --> 00:11:51,350
And it's got the whole tree structure in the whole hierarchy being presented there.

169
00:11:51,890 --> 00:11:57,070
And now that it did detect that it's an HTML file, it's making a little bit easier to run.

170
00:11:57,320 --> 00:12:02,780
So there are some really good extensions that we can make use of and we can also customize the windows.

171
00:12:02,780 --> 00:12:06,500
So there's a minified screen of the text here.

172
00:12:07,160 --> 00:12:08,960
There's the breadcrumbs up here.

173
00:12:09,200 --> 00:12:13,700
There's a few bars at the left and at the bottom.

174
00:12:14,060 --> 00:12:15,680
So you can customize this.

175
00:12:15,680 --> 00:12:21,230
If you go to view, you can get rid of the mini map, which is the first one that we showed you in the

176
00:12:21,230 --> 00:12:22,400
top right hand corner.

177
00:12:22,760 --> 00:12:25,040
You can also get rid of the breadcrumbs.

178
00:12:25,340 --> 00:12:27,530
So it's that breadcrumb of hierarchy's.

179
00:12:28,310 --> 00:12:33,230
And also when you're in the TEMEL the hierarchy for that, there's also under appearance.

180
00:12:33,500 --> 00:12:40,400
You can show the sidebar, which is the sidebar where we were just selecting the extensions and also

181
00:12:40,430 --> 00:12:41,090
the themes.

182
00:12:41,600 --> 00:12:42,860
Again, under appearance.

183
00:12:43,100 --> 00:12:44,720
You can hide that sidebar.

184
00:12:45,350 --> 00:12:51,200
You can show the status bar and the status bar is the one that was right there at the bottom.

185
00:12:51,650 --> 00:12:53,810
And you can hide that status bar.

186
00:12:54,350 --> 00:12:56,420
So I'm going to go ahead and keep the status bar.

187
00:12:56,540 --> 00:13:02,330
And depending on how much space you need for your screen, you can also hide the activity bar.

188
00:13:02,630 --> 00:13:05,120
So let's go ahead and create one more file.

189
00:13:05,480 --> 00:13:06,860
So save this file.

190
00:13:07,280 --> 00:13:10,040
And I just did the shortcut to create a brand new file.

191
00:13:10,250 --> 00:13:16,250
I'm going to save this file as test G.S. and within test G.S..

192
00:13:16,520 --> 00:13:17,270
Well, output.

193
00:13:17,270 --> 00:13:18,170
Hello world.

194
00:13:18,590 --> 00:13:20,780
Now, I already do have node installed.

195
00:13:20,880 --> 00:13:27,120
On my system, so this is just to demonstrate how to use the terminal within Visual Studio Code so you

196
00:13:27,120 --> 00:13:32,710
can go up to the terminal option and select new terminal that's going to open up the terminal window.

197
00:13:32,970 --> 00:13:37,560
So let's go back under review and I'm going to add the breadcrumbs back in.

198
00:13:37,830 --> 00:13:40,560
So this is going to be the folder that we're sitting in.

199
00:13:41,040 --> 00:13:43,230
So let's navigate into the folder.

200
00:13:43,950 --> 00:13:47,760
So the typing in Khoder itself out, I can see the two files that I have.

201
00:13:47,770 --> 00:13:49,970
So I have tested and indexed each HTML.

202
00:13:50,260 --> 00:13:55,830
So I do have node installed in in order to run a JavaScript file, I can type in node within the terminal

203
00:13:55,830 --> 00:13:59,520
and thus can execute the code that's available within the constraints file and that's directly with

204
00:13:59,760 --> 00:14:00,260
the editor.

205
00:14:00,630 --> 00:14:01,630
So I didn't have to leave.

206
00:14:01,710 --> 00:14:05,460
So those that I didn't have to leave to another application as a terminal is really conveniently here

207
00:14:05,490 --> 00:14:06,360
directly with an editor.

208
00:14:06,570 --> 00:14:07,970
There's also the output area.

209
00:14:07,980 --> 00:14:11,390
There's the debug, which helps you debug some of the application processes.

210
00:14:11,670 --> 00:14:13,680
There's also problems such as detecting any problems with the code.

211
00:14:13,770 --> 00:14:17,640
It'll let you know if we do have some issues with the code, it'll right away it'll tell me within test

212
00:14:17,840 --> 00:14:22,800
just terminated string literal something that I didn't end the string, so detected the problem right

213
00:14:22,800 --> 00:14:23,010
away.

214
00:14:23,340 --> 00:14:25,760
And we can see that you can also do it for the debugging.

215
00:14:26,250 --> 00:14:30,750
So let's say we had several different worlds that were running, that were opening it to the console

216
00:14:31,650 --> 00:14:33,430
and you can set these points.

217
00:14:34,080 --> 00:14:36,740
So these are the red dots here to the left of the code segment.

218
00:14:36,990 --> 00:14:41,230
So let's go back to the terminal and I'll just clear that and we'll run the node test.

219
00:14:42,090 --> 00:14:45,020
So it runs through all of the different syntax there.

220
00:14:45,360 --> 00:14:50,190
If we go through the console and if go to the type of menu where we go, run, start debugging.

221
00:14:50,370 --> 00:14:53,430
So selecting the environment, I'm going to use no gas to do the debugging.

222
00:14:54,000 --> 00:14:58,230
So we see that it stops at the first breakpoint and it gives us information about the application.

223
00:14:58,470 --> 00:15:02,100
So the variables that are being used with an application, the file path to the applications of the

224
00:15:02,100 --> 00:15:02,460
directory.

225
00:15:02,550 --> 00:15:05,940
So it's got all of the node content that's being put within the debug console.

226
00:15:06,120 --> 00:15:08,130
We've got we've got the first line of code.

227
00:15:08,250 --> 00:15:09,470
I paused on the breakpoint.

228
00:15:09,480 --> 00:15:14,550
So where the stock is currently at so we can continue to the next breakpoint and then continue again

229
00:15:14,550 --> 00:15:15,410
to the last point.

230
00:15:15,570 --> 00:15:16,890
And we also have an option to run into.

231
00:15:16,890 --> 00:15:18,510
But we can do the JavaScript terminal.

232
00:15:18,510 --> 00:15:19,050
We can debug that.

233
00:15:19,050 --> 00:15:19,260
You are.

234
00:15:19,800 --> 00:15:21,290
So we've got all the different points that are set.

235
00:15:21,460 --> 00:15:24,230
Those are some of the debugging that you can do within the Visual Studio code.

236
00:15:24,540 --> 00:15:29,280
Let's also go back to index and in order to run the index file so you can simply drag and drop it within

237
00:15:29,280 --> 00:15:29,750
the browser.

238
00:15:29,790 --> 00:15:32,550
So that will open up the file to whatever that file location is.

239
00:15:32,700 --> 00:15:35,910
You also have an option to install extensions such as a live server.

240
00:15:35,940 --> 00:15:40,320
So that will give you the ability to run this file within localhost and that local machine that gets

241
00:15:40,320 --> 00:15:42,690
set up directly from the Visual Studio code from the Web editor.

242
00:15:42,720 --> 00:15:43,200
So let's go ahead.

243
00:15:43,230 --> 00:15:47,640
We're going to add an extension so under a code in the type menu and then two preferences and then extensions,

244
00:15:47,640 --> 00:15:49,810
or you could use a shortcut to open up the extensions window.

245
00:15:49,980 --> 00:15:51,340
We've got a number of different extensions here.

246
00:15:51,360 --> 00:15:53,400
So right now, it's just searching for the recommended ones.

247
00:15:53,790 --> 00:15:58,620
The one that we are going to be looking for is called Live Server, and this gives you the option to

248
00:15:58,620 --> 00:16:00,720
install a server so already have it installed.

249
00:16:00,720 --> 00:16:07,200
So I'm going to uninstall it and reload the application, go back to life server and then just do an

250
00:16:07,200 --> 00:16:08,540
install of the server.

251
00:16:08,880 --> 00:16:14,220
So now that my server is set up and it's running and there's some more information about different extensions

252
00:16:14,400 --> 00:16:17,510
that are available within the window, and once you're done with the window, you can always close it

253
00:16:17,520 --> 00:16:18,660
out and still have the terminal open.

254
00:16:19,140 --> 00:16:23,910
Let's go out and we're going to close the server so now we can run the live server.

255
00:16:23,910 --> 00:16:28,130
So let's minimize the sidebar and we can run the server.

256
00:16:28,140 --> 00:16:33,060
So we need to have each HTML file and we actually need to have a folder so we can run the server off

257
00:16:33,060 --> 00:16:33,860
of the folder.

258
00:16:34,080 --> 00:16:39,360
So if we do click the quarter, that's the folder that we want as the root of our live server.

259
00:16:39,660 --> 00:16:45,300
And what you need to do is actually you need to open up the folder in order to run it within, get the

260
00:16:45,540 --> 00:16:50,490
server option for all of the files are contained within there or you can add it into a workspace.

261
00:16:50,730 --> 00:16:57,660
So under file you can select to open and open the folder or open the workspace.

262
00:16:57,990 --> 00:17:02,850
So right now what I'll do is I'll open up the folder, go into the folder on my system, just clicking

263
00:17:02,850 --> 00:17:03,270
open.

264
00:17:03,540 --> 00:17:04,680
So that's going to open it up.

265
00:17:04,890 --> 00:17:09,210
It's going to give us this option that we trust the authors of this file.

266
00:17:09,210 --> 00:17:14,250
And I'm just going to say, yes, that we do trust you see that two files that we're working on.

267
00:17:14,250 --> 00:17:16,970
So the index and the JavaScript file.

268
00:17:17,340 --> 00:17:23,340
So they're both there on the left hand side within the file listing and now within index.

269
00:17:23,520 --> 00:17:29,040
Whenever we go to index, whenever we're starting out with the folder explorer, now we've got the option

270
00:17:29,040 --> 00:17:34,140
to go live here at the bottom right hand side within the bar so we can click that.

271
00:17:34,320 --> 00:17:39,510
And that will open up the file within the local machine, within the local machine.

272
00:17:39,750 --> 00:17:42,570
So you do have an option to configure this within the server.

273
00:17:42,570 --> 00:17:44,460
Add on, you can close it.

274
00:17:44,460 --> 00:17:52,200
You can not show the message also anywhere on the HTML file because now it's attached to the folder

275
00:17:52,230 --> 00:17:55,080
so it knows what the root folder is for the server.

276
00:17:55,290 --> 00:17:58,590
You can right click on a Windows machine.

277
00:17:58,590 --> 00:18:00,630
I'm just going to close this window, this message.

278
00:18:00,900 --> 00:18:06,060
Or you could do a control click on a Mac and you've got another option there to open the server and

279
00:18:06,060 --> 00:18:08,640
you can stop the life server as well.

280
00:18:08,850 --> 00:18:13,170
So that gives you those options in order to have the life server up and running.

281
00:18:13,170 --> 00:18:19,740
And this is a great way to edit your files and your applications and if you ever do, close your live.

282
00:18:19,810 --> 00:18:28,030
Server, browser window, you can simply go to the localhost and using the port with the colon between

283
00:18:28,030 --> 00:18:34,230
them, so localhost with the port five thousand five hundred, or you can use the one two seven zero

284
00:18:34,720 --> 00:18:36,160
zero dot one.

285
00:18:36,160 --> 00:18:41,650
And it's going to refer you to the same location, which is going to be where the server is running

286
00:18:41,860 --> 00:18:43,400
the files from that folder.

287
00:18:43,750 --> 00:18:49,240
And so this is a great way to develop because now whenever you make any changes within each HTML file,

288
00:18:49,420 --> 00:18:53,590
it's automatically going to get shown within the display area of the browser.

289
00:18:53,860 --> 00:18:58,460
So that's whenever you've got the file open and you update the content within the editor.

290
00:18:58,660 --> 00:19:03,070
And right now I just have a split screen where I've got the editor on the left hand side, the browser

291
00:19:03,070 --> 00:19:04,830
Minified on the right hand side.

292
00:19:05,170 --> 00:19:09,850
So there's a lot of features and we've just really just touched the surface of all of the features that

293
00:19:09,850 --> 00:19:12,530
are available within Visual Studio Code.

294
00:19:12,850 --> 00:19:14,280
So now it's up to you.

295
00:19:14,290 --> 00:19:17,230
You can go over to the website if you want to know more.

296
00:19:17,380 --> 00:19:19,540
There is a whole bunch of documentation.

297
00:19:19,720 --> 00:19:20,790
There's the getting started.

298
00:19:20,800 --> 00:19:26,650
There's a set of videos, settings, user information, user guide setting up for the different languages

299
00:19:26,650 --> 00:19:28,600
and lots of rich documentation.

300
00:19:28,630 --> 00:19:32,620
There's also a lot of so there's a well supported application.