- 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