Visual Studio Code Tutorial for Beginners – Introduction

00:00:02 welcome to this video
00:00:03 where we will have a look at visual
00:00:05 studio code not
00:00:07 visual studio visual studio code is a
00:00:10 code editor and we use it for quite a
00:00:13 while now
00:00:14 and we like it actually so we thought
00:00:16 why don't we have a look at it
00:00:18 together now
00:00:22 now as i said visual studio code is a
00:00:26 code editor and it's positioned kind of
00:00:28 in between text editors like atom
00:00:31 and real ides like visual studio
00:00:34 this means it has all these text editor
00:00:37 functions that you would expect when
00:00:38 writing code
00:00:39 but it also comes with some selected ide
00:00:42 features
00:00:43 for debugging for example so it's kind
00:00:45 of a nice hybrid as i would say
00:00:47 the cool thing is that visual studio
00:00:49 code is for free and that it's available
00:00:51 for all platforms so windows
00:00:53 macos or linux you can download visual
00:00:56 studio code right here on
00:00:59 code.visualstudio.com and after you
00:01:01 downloaded and installed visual studio
00:01:03 code
00:01:04 you should see something like this right
00:01:07 here this welcome screen
00:01:09 now we will have a look at the interface
00:01:10 in a few seconds but let's first
00:01:12 open our first project in visual studio
00:01:15 code
00:01:16 and for that you can either select open
00:01:17 folder right here
00:01:19 in this start area or you simply go to
00:01:22 file
00:01:22 and right here open like that
00:01:26 if you do that you can navigate to a
00:01:27 folder of your choice so either an
00:01:29 existing project like this one in my
00:01:31 case
00:01:32 or we can simply create a new folder and
00:01:35 by that a new project in the end
00:01:36 by adding or by pressing new folder and
00:01:39 maybe name it
00:01:40 project 2 because we have really
00:01:42 creative naming conventions
00:01:44 like that so here now selected project 2
00:01:47 press
00:01:47 open and here it is here we have
00:01:50 our project opened in visual studio code
00:01:53 let's close this welcome screen now this
00:01:55 is something we can change in the
00:01:57 settings by the way we'll also have a
00:01:58 look at that throughout this video
00:02:00 and we can also right click right here
00:02:02 to hide the open editors
00:02:04 also something we can change in the
00:02:06 settings so as you can imagine already
00:02:08 visual studio code is quite customizable
00:02:11 apparently
00:02:12 right now i'm here in this sidebar and
00:02:15 if i click right here onto this symbol
00:02:17 i can create a new file and let's maybe
00:02:19 name it
00:02:20 index.html this might be a good starting
00:02:23 point
00:02:23 after pressing enter we can see that the
00:02:25 file was opened in that
00:02:27 tab right here and here i can now enter
00:02:29 something like html
00:02:31 and you can already see that visual
00:02:33 studio code
00:02:34 comes with integrated tools for auto
00:02:37 completion
00:02:38 and for making writing our code a bit
00:02:40 more convenient
00:02:41 now i won't dive into the technical
00:02:44 details behind these tools
00:02:45 the important thing is that we have
00:02:47 ammet integrated right here which helps
00:02:49 us to autocomplete
00:02:50 our code as we will see it right here in
00:02:52 a few seconds and we also have
00:02:54 intellisense not intelligence
00:02:56 intellisense which also helps us to
00:02:58 autocomplete our code especially for
00:03:00 javascript and typescript this is where
00:03:02 it comes
00:03:03 implemented already or built in already
00:03:05 when you download visual studio code
00:03:07 and this intellisense helps you to kind
00:03:09 of get suggestions
00:03:11 how your code could continue from a
00:03:12 logical perspective
00:03:14 also something we'll see throughout this
00:03:15 video but for the moment

00:03:17 let's simply select html5 right here and
00:03:20 press tab
00:03:21 and voila as you can see we immediately
00:03:24 created
00:03:24 our html skeleton right here whoops like
00:03:27 that
00:03:28 now right here we could for example add
00:03:30 a div like that and as you can see
00:03:32 you again get these abbreviations and if
00:03:36 we press
00:03:36 enter and enter age you can see you get
00:03:39 a lot
00:03:39 more suggestions right here and if i now
00:03:42 select the h1 tag
00:03:44 and write hello well then we created our
00:03:46 first html file
00:03:48 in a few seconds quite cool actually we
00:03:51 can also add another file of course if
00:03:53 we want to right here
00:03:54 maybe call it style.css something like
00:03:57 that
00:03:58 or we could also add a new folder by
00:04:00 clicking right here
00:04:01 and maybe call it well images as you
00:04:03 prefer
00:04:04 like this now an interesting thing if i
00:04:08 close both of these files now if i
00:04:11 select it like this with a single click
00:04:13 you can see the file opens and if i
00:04:15 click the other file the second file
00:04:16 opens
00:04:17 but if i double click onto the file like
00:04:19 this and like that
00:04:20 you can open both files simultaneously
00:04:24 also quite a nice feature which allows
00:04:26 us to navigate a bit quicker
00:04:28 through these files right here talking
00:04:30 about
00:04:31 opening the files simultaneously if you
00:04:34 go right here to this
00:04:35 view menu right there and now go down
00:04:38 right here
00:04:39 to split editor well if you click onto
00:04:42 that
00:04:43 then you can see that you can open two
00:04:46 editors at the same time
00:04:48 and we can for example select this one
00:04:50 and double click the style css file
00:04:53 and if we now close this file the
00:04:56 index.html file and the style css file
00:04:58 right here
00:04:59 you can see that we can work in both
00:05:01 files simultaneously again
00:05:02 by the way if you go to view right here
00:05:05 and
00:05:06 now go to toggle editor group layout
00:05:08 like that then you can see
00:05:10 that the two files are now displayed
00:05:12 below each other
00:05:13 not next to each other anymore you can
00:05:16 also add
00:05:16 more than two files right here this is
00:05:18 up to you in the end and if you don't
00:05:20 want to have this view
00:05:21 then you can simply click right here to
00:05:23 close the file and to have the single
00:05:25 file view
00:05:26 once again now talking about this view
00:05:29 menu right here we can see that we have
00:05:32 a lot of different commands i will not
00:05:34 dive into all of these
00:05:35 feel free to play around right there but
00:05:37 you can see that we have this explorer
00:05:39 search scm debug and extension menus
00:05:43 and some corresponding shortcuts now
00:05:45 this is actually our
00:05:47 activity bar the bar right here this one
00:05:50 at the moment we are in the explorer
00:05:52 this is our main
00:05:53 working folder where we have our files
00:05:55 our project and our code
00:05:57 below that we have a search option where
00:05:59 we can see hello is selected
00:06:01 automatically
00:06:01 so we can for example enter h1 and press
00:06:04 enter
00:06:05 and we can see that both the h1 opening
00:06:07 and closing tag
00:06:08 are highlighted right here so this is
00:06:10 the search option that we have
00:06:12 we also have a source control
00:06:15 implemented
00:06:16 into visual studio code this means we
00:06:18 can add git right here and
00:06:20 manage our project with git in virtual
00:06:22 studio code
00:06:23 we'll have a closer look at git in a
00:06:25 separate video on this channel
00:06:27 the next thing we have in our activity
00:06:29 bar is debugging

00:06:30 this simply comes with some well
00:06:33 debugging feature
00:06:34 as you would expected you can set break
00:06:36 points in your code to see
00:06:38 where certain issues might be coming
00:06:40 from we also use this debugging feature
00:06:42 in our courses by the way not all of
00:06:44 them but in a lot of courses
00:06:45 so in case you saw one of our courses
00:06:47 you might have seen this debugging
00:06:49 feature
00:06:50 the last option is a really important
00:06:52 one also and also an activity
00:06:54 we will have a look at in this video
00:06:56 this is the extensions activity
00:06:58 visual studio code comes with a lot of
00:07:01 integrated
00:07:02 built-in functions i talked about amit
00:07:04 and this intellisense in the beginning
00:07:07 but the main support the main default
00:07:09 support is for html
00:07:11 css javascript and typescript
00:07:14 but you can of course also work with
00:07:16 frameworks like angular or react
00:07:18 or with languages like python in visual
00:07:21 studio code and for that
00:07:22 you can install different extensions and
00:07:25 with that
00:07:26 also get all these convenience features
00:07:28 like auto completion and a lot more
00:07:30 just by installing these extensions
00:07:33 something we'll have a look at
00:07:34 in a few minutes also so we can go back
00:07:37 to our explorer menu actually
00:07:39 and now have a look at what else we can
00:07:41 see on our screen
00:07:43 and this is actually just this statue
00:07:46 spa down here
00:07:47 this is not too spectacular as i think
00:07:49 the
00:07:50 nice feature we have right here is if we
00:07:52 click into this left part
00:07:53 is that we can open this panel right
00:07:56 there which comes with
00:07:57 four different ribbons problems output
00:08:01 the debug console and more interestingly
00:08:04 the terminal
00:08:05 visual studio code comes with an
00:08:07 integrated terminal
00:08:09 this means if you open the terminal
00:08:10 right here inside the code editor
00:08:13 it already automatically navigated into
00:08:15 your project folder which is quite cool
00:08:17 and quite convenient additionally if you
00:08:20 want to run a development server for
00:08:22 example
00:08:22 and need more than one terminal
00:08:24 therefore you can
00:08:26 also add additional terminals by
00:08:28 clicking right here
00:08:29 and then you can switch between the
00:08:30 terminals right here in this menu
00:08:33 so also something that is quite nice
00:08:35 actually and that comes with visual
00:08:37 studio code by default
00:08:39 let's close that though and let's go
00:08:42 back to this view
00:08:44 menu right here once again because as
00:08:46 you can see down here
00:08:47 you can also customize the way the
00:08:49 interface is displayed right here
00:08:51 in visual studio code you can for
00:08:53 example hide this status bar down here
00:08:56 and as you can see this bar at the
00:08:57 bottom of the page now disappeared
00:08:59 you can bring it back immediately of
00:09:01 course by clicking right
00:09:02 there feel free to play around right
00:09:05 here to customize your visual studio
00:09:07 code
00:09:07 experience in the end now as we talk
00:09:09 about customization
00:09:11 we can of course also change the look of
00:09:13 visual studio code
00:09:15 in general for that we can simply go
00:09:18 up here into this upper bar once again
00:09:20 and now go to code
00:09:22 preferences and color theme and now you
00:09:26 see that we again
00:09:27 moved up here open the menu selected
00:09:29 something
00:09:30 and that's not really a convenient
00:09:32 approach as i would say
00:09:34 and the good thing is that in visual
00:09:36 studio code we have a better way
00:09:38 to navigate in visual studio code and
00:09:41 also to execute different commands
00:09:43 we have the so-called command palette
00:09:46 now we can open this command palette
00:09:48 either by going up right here

00:09:50 to view once again and clicking onto
00:09:52 command palette
00:09:53 or right here you can already see the
00:09:56 shortcut right here
00:09:57 on the mac it's shift command and p and
00:10:00 if i press that
00:10:01 right now like this then you can see
00:10:04 that this well command palette opens and
00:10:07 if you now think back about this
00:10:09 color theme that we saw in the menu we
00:10:11 can simply enter that right here
00:10:14 and here it is we can now we'll of
00:10:16 course navigate right here
00:10:17 but we can select the preferences color
00:10:19 theme press
00:10:20 enter and now simply switch between
00:10:23 different
00:10:24 default color themes visual studio code
00:10:26 ships with
00:10:28 well it's up on you to decide which one
00:10:30 you like there are some
00:10:31 which are beautiful some which are
00:10:33 probably less beautiful like maybe this
00:10:35 one
00:10:36 but we always use this dark plus
00:10:39 theme right here as a default so let's
00:10:41 press enter and as you can see
00:10:43 this is still the theme we used so far
00:10:45 we are not limited to the
00:10:46 theme in general though we can also
00:10:48 customize our icons for example so these
00:10:51 icons right here
00:10:52 next to our files let's again open the
00:10:55 command palette by pressing shift
00:10:57 command p and now enter simply icon
00:11:01 and we can see right here preferences
00:11:03 file icon theme
00:11:04 this seems to be interesting and here we
00:11:06 have four
00:11:07 different options we have none and as
00:11:10 you can see to the left
00:11:11 then we have no file icons that was
00:11:13 quite expected
00:11:14 then we have minimal which is this look
00:11:16 right here or we have
00:11:18 seti ct seti i think this is the
00:11:21 default one that we have in visual
00:11:22 studio code but we have a more
00:11:25 interesting option down here
00:11:27 install additional file icon themes
00:11:30 now if we press that so enter
00:11:33 then you can see that we are back again
00:11:35 in our extensions activity right here
00:11:38 and that the tag icon theme was added
00:11:40 right here
00:11:41 now if we delete that and add material
00:11:44 icon like that then you can select
00:11:48 this theme right there so if you now
00:11:50 press install right here
00:11:52 wait a few seconds and then important
00:11:54 press reload to really
00:11:55 kind of activate this theme right here
00:12:00 then we can see that the icon theme was
00:12:02 installed which was also quite expected
00:12:04 but if we now go back to our explorer
00:12:07 and now again
00:12:08 enter our command palette go to file
00:12:11 icon theme
00:12:12 and now up here select the material icon
00:12:14 theme
00:12:15 then you can see that the icons changed
00:12:17 already so let's press enter
00:12:19 and as you can see now our editor
00:12:22 looks a bit more fancy as i would say so
00:12:24 with that
00:12:25 we also customized visual studio code a
00:12:27 bit
00:12:28 let's now have a look at the actual
00:12:30 workflow once again
00:12:32 because you already saw that right here
00:12:34 we have this integrated
00:12:36 emit tool which allows us to create the
00:12:38 elements right here in html
00:12:40 quite conveniently i could also add an
00:12:42 h2 element
00:12:43 anything like that this works quite nice
00:12:46 the same thing is true for css so if i
00:12:49 for example
00:12:50 add an h1 selector right here so you can
00:12:52 see like this and then for example add
00:12:54 display right here you can see i get a
00:12:57 lot of different things that i can add
00:12:58 right here for example we could create
00:13:00 flexbox right here so this is all really
00:13:02 convenient
00:13:04 but the cool thing is that if we now go
00:13:06 to javascript for example
00:13:07 we can see a lot more of these
00:13:09 convenience features before we do that
00:13:11 though

00:13:11 let's make sure to save our changes
00:13:13 because this little bullets right here
00:13:15 so this one and that one indicate that
00:13:17 we didn't save our project so we can
00:13:19 press save right here
00:13:20 and right there also something we can do
00:13:23 in a more convenient way when we talk
00:13:24 about the settings
00:13:25 so with that we save that and now i want
00:13:28 to open a new project where we have some
00:13:30 javascript code in it
00:13:32 for that we can simply go right here to
00:13:34 file
00:13:35 and now press new window if we click on
00:13:38 to that
00:13:39 well as expected a new window is opening
00:13:41 and now we can press
00:13:42 open folder once again and now select
00:13:45 project 1
00:13:46 in my case this could be any project you
00:13:48 have the important thing is that you
00:13:50 have some javascript code in it
00:13:52 if you want to follow along right here
00:13:54 now let's open this project
00:13:56 like this and as you can see this is
00:13:58 again an index.html file
00:14:00 css file and a javascript file right
00:14:02 here
00:14:03 and if we now have a look at the
00:14:05 javascript code
00:14:07 we can also see the workflow in virtual
00:14:10 studio code a bit better
00:14:11 because let's say we want to declare
00:14:13 another variable so let's head over
00:14:16 let's say just test thing equals
00:14:20 now i add document you can see i can
00:14:22 select it right here
00:14:23 press tab and now i enter the dot and
00:14:26 now you can see that the
00:14:27 code editor shows me a lot of different
00:14:29 properties or methods
00:14:31 that might be reasonable to add right
00:14:33 here
00:14:34 in my case i would like to add a query
00:14:36 selector so i press q
00:14:38 and as you can see we have different
00:14:40 options right here well different
00:14:41 methods
00:14:42 starting with queue in my case i will
00:14:44 use the query selector
00:14:45 and then i could select anything that i
00:14:47 would like to have right here
00:14:49 so this is one thing where this
00:14:51 intellisense
00:14:53 feature or tool that we have right here
00:14:55 can be helpful especially for javascript
00:14:57 and typescript in that case
00:14:58 so let's maybe delete that because i
00:15:00 don't think we need it but we also have
00:15:02 more convenience features implemented
00:15:05 for example
00:15:05 if we hover to our event listener right
00:15:08 here
00:15:09 as you can see if you do that you get a
00:15:11 lot of information
00:15:12 about this event listener and even
00:15:15 better if we maybe
00:15:18 just add a bit of space right here you
00:15:20 will see in a few seconds why i'm doing
00:15:21 this
00:15:22 and now right click on to open mobile
00:15:26 important open mobile is the function we
00:15:29 defined right here so if i right click
00:15:32 on to open mobile
00:15:33 i have a lot of interesting features let
00:15:35 me show you just two of these now
00:15:37 and this is go to definition and peak
00:15:40 definition
00:15:41 go to definition simply lets us jump to
00:15:44 the
00:15:45 well location in our code where this
00:15:48 function was created where this function
00:15:49 was defined
00:15:51 but this might not be the most
00:15:52 convenient solution if you're in line
00:15:54 200 and then you jump back up again
00:15:56 probably not what you want if you just
00:15:58 want to change the function name for
00:16:00 example
00:16:00 so if we go back right here right click
00:16:02 once again
00:16:04 and now select peak definition
00:16:07 then we can see that we have this
00:16:09 integrated window right here
00:16:11 which shows us that we are in the main
00:16:13 js file
00:16:14 and in line four and right here we have
00:16:17 our function definition
00:16:19 so if i now add an s for example right
00:16:21 here as you can see i can really

00:16:23 change the function name and also add
00:16:25 this s right there
00:16:27 so let's select that and if we now close
00:16:29 that window
00:16:30 we can see that we have open mobiles
00:16:32 right here
00:16:33 and open mobiles up there don't forget
00:16:36 to save the progress by the way
00:16:38 so this is just a little bit of a
00:16:40 preview how this
00:16:41 integrated code completion but also
00:16:44 intelligent
00:16:44 intellisense actually features help you
00:16:47 to write the code
00:16:48 in a more convenient way in visual
00:16:50 studio code
00:16:51 the problem is that these features are
00:16:53 by default
00:16:54 only implemented for html partially css
00:16:58 javascript and typescript but you might
00:17:00 want to use visual studio code with
00:17:02 other frameworks and
00:17:03 languages but the extensions we had a
00:17:06 look at already help you there
00:17:08 if you go to the extensions down here
00:17:10 then you can either
00:17:12 click right there and show the most
00:17:14 popular extensions for example this one
00:17:16 for python
00:17:17 by the way also an extension that we are
00:17:19 using for python
00:17:20 or again you can search right here so
00:17:22 you can for example
00:17:24 type angular essentials also an
00:17:26 extension we are using
00:17:28 this one right here and then if you hit
00:17:30 install
00:17:31 right there you could install this
00:17:34 extension
00:17:35 important if you scroll down right here
00:17:37 you can see that the angular essentials
00:17:39 extension
00:17:40 comes with other extensions which are
00:17:42 part of this pack so you get a list of
00:17:44 these right here
00:17:46 and for example down there you have this
00:17:47 prettier extension
00:17:49 and angular in line and well as you see
00:17:51 a lot of other extensions
00:17:53 that are integrated by default so make
00:17:55 sure to read for these details
00:17:57 in case you want to know which
00:17:58 extensions are coming with
00:18:00 this package now if you want to know
00:18:02 which extensions we are using
00:18:03 generally in our videos this slide right
00:18:07 here
00:18:07 shows you all the extensions and also
00:18:09 the themes we talked about
00:18:10 and as you can see we don't use a lot of
00:18:13 extensions
00:18:14 actually just because it makes it more
00:18:16 difficult for us
00:18:17 to show you what we do in the videos
00:18:19 because then you might not be able to
00:18:21 follow along because you don't have a
00:18:22 certain extension installed
00:18:24 so we keep it to a minimum normally but
00:18:26 this is actually everything you need
00:18:28 to follow along our academic videos and
00:18:30 with these extensions you're actually
00:18:32 prepared
00:18:32 to work in angular view react and python
00:18:36 and of course javascript and typescript
00:18:38 of course you can also uninstall
00:18:40 extensions if you don't need them
00:18:41 anymore so if you
00:18:42 go right here to your installed
00:18:44 extensions for example
00:18:46 go to the material icon theme you can
00:18:48 simply press uninstall
00:18:49 and the extension is gone so everything
00:18:51 quite easy and quite fast
00:18:53 that's the cool thing about visual
00:18:54 studio code now let's go back to
00:18:57 our explorer right here and talk about
00:19:00 another
00:19:01 important feature shortcuts because
00:19:04 we already used the shift command and p
00:19:06 shortcut to open our command
00:19:09 pad right here now if you go right here
00:19:12 to shortcut right there you can open the
00:19:16 preferences right here to open the
00:19:18 keyboard shortcuts because
00:19:20 well as you can imagine visual studio
00:19:22 code comes with a lot of shortcuts right
00:19:24 here
00:19:25 and now we could talk about a lot of
00:19:27 different shortcuts and which one you
00:19:29 should use or you could use

00:19:31 and so on the problem is i think this is
00:19:35 boring and not really helpful therefore
00:19:37 i prepared an article
00:19:39 link can be found below the video where
00:19:41 you can find an overview
00:19:43 of all the shortcuts we are using and
00:19:45 that might also be helpful for you
00:19:47 nevertheless i would like to quickly
00:19:49 show you how you can work with these key
00:19:51 bindings right here because
00:19:52 it's really helpful to be honest for
00:19:55 example we used
00:19:56 the shift command
00:20:00 and p shortcut and as you can see this
00:20:03 can be simply entered right here and
00:20:04 then you have to show
00:20:06 all commands key binding right there
00:20:07 displayed and if you click onto this
00:20:09 pencil you could change the key
00:20:11 combination
00:20:12 or you can also double click right here
00:20:13 which would do the same thing
00:20:15 another nice shortcut is if you enter
00:20:18 integrated right here oops integrated
00:20:21 then you can toggle the integrated
00:20:23 terminal with this key binding
00:20:24 so basically like this and the terminal
00:20:27 would appear and disappear
00:20:29 so a lot of different shortcuts in there
00:20:30 but as i said make sure to have a look
00:20:32 at this article in case
00:20:34 you want to find out more about these or
00:20:35 on the other hand just play around right
00:20:37 here by looking for specific keyboards
00:20:39 and i'm sure you will find a shortcut
00:20:41 that will be helpful for you
00:20:43 however let's go back to our code
00:20:46 quickly right here
00:20:47 and let me show you some quick things
00:20:49 that might also be helpful
00:20:51 when you work with text for example
00:20:53 let's say you want to change the
00:20:55 class name right here of our span then
00:20:58 you can click right here let's say you
00:21:00 want to
00:21:00 add something at the beginning of this
00:21:02 class name and then you can simply press
00:21:04 and hold alt
00:21:05 and with that you select all these
00:21:09 different well positions in your code
00:21:12 file
00:21:12 at the same time and you can now simply
00:21:14 add awesome
00:21:15 button whatever you prefer like this
00:21:19 so that's a nice convenience feature
00:21:21 another nice convenience feature is if
00:21:22 you
00:21:23 select the span right here you can see
00:21:25 that visual studio code automatically
00:21:27 selects all the spans it identifies
00:21:29 on this page of the code if you now
00:21:32 press command
00:21:33 and d then you can simply select the
00:21:36 second
00:21:37 the third the fourth the fifth and the
00:21:39 sixth span
00:21:40 that you have right here on this page
00:21:42 and as you can imagine
00:21:43 if you not type div for example or a
00:21:46 span
00:21:46 it will be changed simultaneously once
00:21:49 again for all these tags
00:21:51 that you selected also something really
00:21:53 nice and in case you're not sure
00:21:55 what this feature is called you can
00:21:56 simply go to the keyboard shortcuts
00:21:58 enter command d and voila here it is
00:22:01 it's add selection to next
00:22:03 find match so this is how you can easily
00:22:05 get
00:22:06 more convenient or comfortable with all
00:22:08 the shortcuts that you have right here
00:22:10 in visual studio code this is also true
00:22:13 for code formatting
00:22:14 by the way i told you i won't dive into
00:22:16 shortcuts too much i just want to show
00:22:17 you some of these
00:22:19 because if you say that the span is kind
00:22:22 of not indented correctly
00:22:24 you can simply search for format like
00:22:27 that
00:22:28 and you see format document is shift alt
00:22:31 and
00:22:31 f so if we go back and simply press
00:22:34 shift
00:22:34 alt and f like this voila the entire
00:22:38 html document
00:22:39 is formatted this does not work for css
00:22:42 by the way
00:22:43 so make sure to see if it works for the

00:22:45 programming language you're using
00:22:47 in case it doesn't have a look for
00:22:49 extensions for this language
00:22:51 with that it should be fine in the end
00:22:54 now we're almost done with the shortcuts
00:22:55 which i actually didn't want to have a
00:22:57 look at
00:22:58 but there are two more things that i
00:22:59 would like to show you because i think
00:23:01 these are really important
00:23:02 and make your lives a lot easier the
00:23:04 first shortcut is
00:23:06 switching between the different files we
00:23:07 have right here of course we can do it
00:23:09 like this and like that
00:23:10 that's one way but another really
00:23:12 convenient way
00:23:13 is to simply press command p like that
00:23:17 if you keep the command key pressed and
00:23:19 press p to
00:23:20 navigate through different files you
00:23:21 want to select and then release the
00:23:23 command key
00:23:24 you are in another file and as you can
00:23:26 see this allows you to navigate
00:23:28 quickly through the files of your
00:23:29 project
00:23:31 now in case you want to switch to a
00:23:33 project or recent project you created
00:23:35 you can simply press control not command
00:23:38 control
00:23:38 r and as you can see you can switch
00:23:41 between
00:23:42 these two projects now in my case so
00:23:44 let's go to project two
00:23:45 whoops like that and here we are and we
00:23:48 can switch back to project one
00:23:50 also easily like that now you can find
00:23:54 all of these
00:23:55 shortcuts and how they work in the
00:23:57 article i mentioned
00:23:58 with that let me only add one important
00:24:00 thing regarding the shortcuts
00:24:02 if you go to help you can find the
00:24:04 keyboard shortcuts reference
00:24:06 which also gives you a nice overview of
00:24:09 all the shortcuts available
00:24:10 back to the editor though because we are
00:24:13 almost done with our quick
00:24:14 introduction to visual studio code there
00:24:16 is only one last thing
00:24:18 that i would like to have a look at and
00:24:20 these are the settings
00:24:21 in visual studio code to open the
00:24:24 settings you can well
00:24:25 again use the command palette and
00:24:28 enter settings right here and if we go
00:24:31 down
00:24:32 we can open the settings now
00:24:35 we can quickly hide the sidebar
00:24:38 by clicking right here and now we see
00:24:41 something really
00:24:42 interesting the first thing is we can
00:24:44 search
00:24:45 in the settings as i said in the
00:24:47 beginning we have this welcome screen
00:24:49 you remember
00:24:50 this one right here so if we enter
00:24:52 welcome right there
00:24:54 we can define what page should be
00:24:57 displayed when we start
00:24:58 visual studio code or a new project in
00:25:01 visual studio code
00:25:02 if you click onto this pencil then you
00:25:04 can say that you don't want to display
00:25:06 anything so basically an empty project
00:25:09 as we head it
00:25:10 you want to have this welcome page or
00:25:11 you want to have a new untitled file
00:25:14 now i prefer to display nothing right
00:25:15 here so let's press none
00:25:18 and as you can see up here we now have
00:25:20 added non
00:25:21 automatically i hope you saw it like
00:25:23 this we now added
00:25:24 this command right here automatically to
00:25:27 our user settings i'll come back to that
00:25:29 in a few seconds if i would change it
00:25:32 now right here to welcome page
00:25:34 it would switch to welcome page and so
00:25:35 on so that's how you can easily change
00:25:38 your settings right here
00:25:39 i also mentioned these open editors this
00:25:42 thing right here
00:25:43 this is also something we can change
00:25:45 right here in our settings
00:25:46 let's simply enter explorer dot
00:25:49 open dot edit i think this was right
00:25:52 here here it is
00:25:53 so this command right here explorer open

00:25:55 editors visible
00:25:57 nine if we now simply press right here
00:26:00 copy it to the settings
00:26:01 and then enter nine to zero like that
00:26:04 the open editors won't be displayed
00:26:06 anymore
00:26:07 so also something which allows us to
00:26:09 customize our user experience right here
00:26:11 the last option i would like to show you
00:26:14 is this one right here
00:26:15 files dot auto save down there
00:26:19 this one so files auto save and also
00:26:22 files auto save delay these are options
00:26:25 that allow you to customize the
00:26:27 saving behavior of visual studio code i
00:26:29 will keep it the way it is at the moment
00:26:31 because that's how we normally work
00:26:33 but here also free to play around and
00:26:35 find the right settings for you
00:26:37 so that's it about these settings in
00:26:39 general but
00:26:41 there is the but we have this user
00:26:44 settings
00:26:45 and these workspace settings and as you
00:26:47 can see
00:26:48 the workspace settings are empty in my
00:26:51 case user settings have
00:26:52 some of the options integrated
00:26:56 this is an important core concept of
00:26:58 visual studio code now
00:26:59 the user settings apply to each virtual
00:27:03 studio code instance
00:27:04 on your machine so if you open videos to
00:27:06 the code these settings will be applied
00:27:09 but there is one exception this
00:27:12 exception
00:27:13 are the workspace settings if you define
00:27:16 workspace settings these settings will
00:27:19 overwrite your
00:27:20 user settings in my case right here only
00:27:23 for this
00:27:24 specific project so right here i'm in
00:27:27 this project one
00:27:28 let's try this out maybe because if i
00:27:32 say i want to change the window zoom
00:27:33 level at the moment we have a level of
00:27:35 six
00:27:35 so let's go right here let's enter
00:27:38 window
00:27:39 zoom like that let's click right here
00:27:42 copy to settings
00:27:43 and let's maybe and whoops now we see
00:27:45 it's at zero so let's maybe
00:27:47 say it should be at four something like
00:27:49 that let's save this
00:27:51 now you can see the zoom level is
00:27:52 different and now
00:27:54 for this specific file so only for this
00:27:57 project
00:27:58 i added this workspace setting the zoom
00:28:00 level is set to four but if i now switch
00:28:02 back
00:28:03 to the other project we have with ctrl r
00:28:05 right here we learned that so let's
00:28:07 switch back to
00:28:08 project two right here then you can see
00:28:11 that the zoom level
00:28:13 is still at level six i can prove this
00:28:16 to you
00:28:16 if i open these settings also right here
00:28:20 open the settings and hide the site
00:28:23 navigation bar
00:28:24 you can see that the workspace settings
00:28:26 right here are empty
00:28:27 because we didn't add any workspace
00:28:29 settings for this specific project
00:28:31 but for the user settings we still have
00:28:32 the zoom level of 6.
00:28:34 so that's the first thing to keep in
00:28:36 mind regarding the user settings
00:28:38 and the workspace settings but there is
00:28:40 another
00:28:41 really cool feature about these
00:28:43 workspace settings
00:28:44 because if we go back to our project
00:28:46 right here this one where we edit this
00:28:48 workspace setting and maybe close the
00:28:49 setting now
00:28:51 and show this once again and now go
00:28:54 to file up here and now say
00:28:58 that we want to save the workspace so
00:29:01 this workspace right here
00:29:02 as then if we click onto that
00:29:06 we can enter a name for this i'll just
00:29:09 call it
00:29:10 whatever our project something like that
00:29:14 and now save this file right here
00:29:17 then nothing changed right well let's
00:29:20 see
00:29:21 let's now first save maybe this file

00:29:23 right here and let's now close
00:29:25 all our instances of visual studio code
00:29:27 like that
00:29:29 and now let's navigate to the folder
00:29:31 where we just saved
00:29:32 our workspace to so in my case this was
00:29:35 this projects folder
00:29:37 and as you can see both project 1 and
00:29:40 project 2
00:29:41 are on the same level as this workspace
00:29:44 file right here
00:29:45 now if i click onto this file you can
00:29:48 see
00:29:48 that i'm back in my project not really
00:29:51 spectacular
00:29:52 but if i now go to file once again
00:29:55 and now go to add folder to workspace
00:29:57 you remember
00:29:58 this was this option right here in the
00:30:00 beginning on the welcome screen
00:30:01 like that and now select project two
00:30:05 and press add well then you can see the
00:30:08 following
00:30:09 we now have both projects right here in
00:30:12 our editor
00:30:14 in our workspace but these projects are
00:30:17 not connected
00:30:18 these are still separate projects but we
00:30:21 can access
00:30:22 both in one visual studio code instance
00:30:25 and the cool thing is that if i now go
00:30:27 to project 2 right here
00:30:29 you can see that the zoom level doesn't
00:30:31 change because right now
00:30:33 we created a workspace setting and the
00:30:36 workspace
00:30:36 is no longer a single file as it was in
00:30:39 the beginning
00:30:40 but now the workspace contains these two
00:30:42 or even more projects
00:30:44 and all these workspace settings apply
00:30:47 to these projects
00:30:48 so if we open the settings once again
00:30:52 right here we can see that the user
00:30:55 settings are still with a zoom level of
00:30:57 six
00:30:57 so this should be zoomed in a bit more
00:30:59 actually but as we have the workspace
00:31:01 settings
00:31:02 set to a level of four the zoom is a bit
00:31:05 decreased right here
00:31:06 so this is pretty cool actually because
00:31:09 this allows us now
00:31:10 to simply manage our different projects
00:31:13 with specific settings that we want to
00:31:16 have
00:31:16 and by the way if when i open
00:31:20 a new visual studio code project so with
00:31:22 new window
00:31:24 you can immediately see what's happening
00:31:26 right here we now have an
00:31:28 empty project because that's what we
00:31:30 defined in the settings
00:31:32 and if i now click right here onto file
00:31:35 open and if i now maybe create a project
00:31:38 right here on this top level let's say
00:31:40 right here and let's say this is my
00:31:42 private projects whatever folder like
00:31:45 that so as you can see
00:31:47 this file for our workspace is inside
00:31:50 the projects folder and i created this
00:31:52 folder right here and i open this one
00:31:56 then i have this folder it's an empty
00:31:58 folder but as you can see
00:32:00 if i add a file quickly index html you
00:32:02 can see the zoom level is
00:32:04 still at this level six but if i now
00:32:07 switch back to
00:32:08 the other project so this workspace
00:32:12 right here
00:32:13 and now again go to add folder to
00:32:16 workspace
00:32:18 now select the private projects folder
00:32:20 like that
00:32:21 you can see that the private projects
00:32:23 folder is now also part
00:32:25 of this workspace with all these
00:32:27 settings but
00:32:28 that's important not connected to all
00:32:31 the other projects
00:32:32 so that's a feature you can use for
00:32:34 different projects you can use this for
00:32:36 the front end and the back end code
00:32:38 of your project that might be in
00:32:39 different locations on your
00:32:42 drive anything like that but i think
00:32:44 it's a really cool feature
00:32:46 so make sure to dive deeper into that
00:32:48 because i think
00:32:49 it can make your life a lot easier in

00:32:52 visual studio code
00:32:53 so with that we finished this
00:32:55 introduction
00:32:56 of course visual studio code offers a
00:32:59 lot more a lot of cool features
00:33:01 a lot of things to learn and explore
00:33:03 depending on your project needs
00:33:04 so make sure to have a look at the
00:33:06 official docs right here
00:33:09 where well you are guided through the
00:33:11 entire
00:33:12 process behind visual studio code how
00:33:14 you can set it up you can see the top
00:33:16 extensions get some first steps
00:33:18 you can even dive deeper in this user
00:33:20 guide area learn more about debugging
00:33:22 which we didn't have a look at so far
00:33:24 so all these cool features and as you
00:33:26 hopefully see
00:33:27 max and myself we really like widows to
00:33:30 the code a lot in the meanwhile
00:33:31 so in case you're looking for a new code
00:33:33 editor
00:33:34 have a look if it fits your needs and
00:33:37 with that
00:33:38 as always the only thing i can say is
00:33:41 thanks a lot for watching
00:33:42 hope to see you in the next videos and
00:33:47 bye

You may also like