VS Code Can Do That?! VS Code Tips and Tricks

today we're gonna show you some really simple things and some more complex things which we think you're all gonna really appreciate using a vs code and by the end of this talk we're hoping you're all gonna say yeah vs code can do that yes one of the things I love about this slide is vs code we think of it as a text editor but you need to think of that spectrum as a slider you can actually take a slider and move it across that spectrum you could turn vs code to do as much of an IDE as you want it to be or just make it a simple text editor the choice is yours and the man the myth the legend one of his quotes that I love here from the original release of vs code it combines the simplicity of a code editor with what developers need to do their day-to-day jobs Erich gamma created this tool along with Chris Diaz and a bunch of other great people on the vs code team so we take these three pieces that they use to put it together manat Monaco or Monaco mano what did you call now Monaco deco Minako Monica Monaco alright the right way we take these three pieces that runs with electron which allows us to the desktop like experience inside of our tool other great products also use electron and then type scripts the type script server in this case helping us get all sorts of great coding features even when we're not using typescript and raising JavaScript so we take those pieces and we put those together and what we end up with is Visual Studio code Burke that's right so Roger Minako now powering Visual Studio code along with the other pieces you've seen here but the reason I told you that story about Eric and in back in 2012 is because eric is very famous for something else they didn't just hire a guy they hired a guy with some experience does anybody know what Eric was part of creating prior to Visual Studio code gang a4 but that's not what is looking for I do have a Google cluster for the right answer who said it I heard it somewhere in here say it loud Eclipse flips that's right so the same person who brought us Eclipse has now brought us Visual Studio code so the reason why they hired Eric is because he had the expertise and the knowledge to create developer tooling and now as Paul Harvey would say you know the rest of the story that's right so my name is Burke Holland this is real studio code can do that I'm also known as you might also know me as who never heard of him and you are and I'm John papa I'm just a guy who gets to stay next to him and we look alike so that's kind of good too right that's right you get two bald guys for the price of one second pictures are out there lucky you oh yeah next slide there's me that's or it's me either way and then there's internship yep there we go you got both of us everybody needs a doppelganger it works out great for meetings over skyping all right so let's move right into it by the way before we get started as Burke's cranking up here we have I think just a couple tips to show you like 90 so we're gonna try to get through all these in this time and I've got a bonus one at the end that I just learned about this morning really yes I'm scared or nothing like preparing a demo five minutes before you get on stage one of these buttons no don't press those there's a red but I'm gonna press the red button on the desk the first thing that I want to talk about with everybody is themes now you're aware that Visual Studio code can do themes I'm sure that everybody already knows that but I want to talk to you about a couple of different things that you can do with themes so the first thing is in our themes here you may know or you may not know that there are two kinds of themes that are light themes and there are dark themes I personally as you saw my my vyas code instance flash by in a second I use a light theme I like light colors I like a light theme I use the theme called hoplite now I've been told that using a light theme is not good for your eyes according to science but it is 2018 and I'm not allowed about to let science or facts stand in the way of my perfect editor setup john prefers a dark theme here and he's wrong and that's okay but he is using one called winter is coming which is a fantastic theme i'm gonna give you some others that are also very popular one is called the atom dark theme it's very popular and then there's one let's see if you have cobalt too you don't have cobalt installed there's one from a guy named Wes boss and it's called cobalt 2 and cobalt 2 is interesting because it is actually the best theme according into science for your eyeballs and so what it is is a dark blue back with bright yellow text and that is supposed to be easiest for you to look at did we fix my uh try it right here you got a hit what button do I hit I think the buttons are good you there's Cobalt ah there's cobalt ooh I'm gonna try real quick you're there and then you disappear then I'm gone alright I hope you enjoyed that all right so let's go to cobalt 2 okay thank you see our themes here so we install the theme here's cobalt 2 all right so he's got already got it loaded here and let's just take a look at some of the files that we've got inside of here let's go here Sean I can't navigate your code there we go so you can see that we have sort of a bright yellow text on a dark blue background let me do that for it okay go ahead good we good yeah he's gonna get on the cable for you okay perfect another thing that you will want to do for your BS code installation is you're you don't want to tweak these icons over here to the side so let's go ahead and collapse these here there we go so you can see we've got a bunch of different icons over here for our files and we zoom in on this you can see we got some some angular you do angular a little bit as anybody know that okay I think so but the the icon theme that most people use is quite popular it's called material icons and material icons is really really neat because there's a different icon for every file type so for instance if we added a file here so I'm just gonna add a file to this folder I'm sure you'll be fine with that John oh yeah no problem completely broke your demo so like a pug file and look what we get yeah everybody wants to write pug files now just so they can have a bunch of pug faces in there editor I like to add just some different file types just to see what the icon is like do you need docker no but I want to know what the file icon looks like so I'm going to use it now so material icons is another very very popular editor theme the other thing that I want to talk about when it comes to the appearance of your editor is something called font ligatures who in here by a show of hands has heard of font ligatures alright so a decent number of people a decent number of people have it if you have as totally fine font ligatures are fonts that take symbols that we use in programming because we use a lot of compounds bowls and it turns it into a single symbol so do you have fun ligatures installed on this machine I don't but you can turn it on yeah fairy code installed on this machine yes okay excellent so what we're gonna do first is you're gonna go and you're gonna go to download a file called fear of code now you won't remember this it's okay it's in the slides and fear of code is an open source font it's on github you're gonna download it it's a TrueType font file you're gonna double click it hope to god there's not a virus in there and that it's gonna be installed to your machine now once you have the file let's see have you added this here user settings already jungle okay so what we're gonna do is we're gonna come down here to the bottom and add in a couple settings here so let's do first let's do editor dot font family do that oh you already did that yep I didn't have to look at yourself yeah okay so and then we're gonna do editor dot ligatures where is it see when you can't find a setting you can come over here to the sign I just search for ligatures that's not a spell ligature right that's true font ligature is right here we can just say yes set it to true it automatically gets copied over I don't know if everybody saw that right there move this out of the way there we go true and then we'll save that and then once we save that our font ligatures aren't enabled now it doesn't look like anything here but when we go back to our setting so let's go back to this typescript file here and let's do something like we have a new function we'll just call this function bald looks good and then this and then we'll do a double arrow and when we do that double arrow you'll see that turns into an actual double arrow right and the same thing works for like if you have a double equals you get an actual double equals if you do a triple equals because in JavaScript we need three equal signs equals equals equals you get an actual triple equals so this is what the code team uses they use font ligatures and it just makes for a very very nice development experience inside of you do four equals you can't do four equals but then you actually get 40 below which is a little bit disappointing you can do an arrow like that that works right so you can just yeah now you want to use spot ligatures and see all the different things that you can use so those are font like a church the other thing that I want to show you in terms of appearance is in your user settings you can change the way that your cursor looks so let's go to cursors cursor there we go see it says editor cursor Styles blank so we can change this to something like phase there we go and then let's come over here John from your theme I can't see your cursor it's there but you can't see it look at that but that's not my theme dude that's cobol's let's move but winter is coming best theme in the world you got to download it there we good he's gonna try to fix yours okay cool so you can change the the cursor style you have there's a phase style there's a blink style there's an expand style so these are all the different things that you can do to tweak the appearance of your editor to make it your own with your themes with your font icons with your font ligature or excuse me icon spot ligatures and the cursor style yes alright so what are you doing Burke touches your machine you immediately undo everything he did sorry Burke that should be a command and get like it should just be out of the box should be some get integration via - Burt if only that existed so something I want to show you is if we go to code Visual Studio comm it's something not a lot of people know or maybe you know it but you haven't tried it yet is when you go to the code website one of the best-kept secrets is that you can download this with a stable Bill Reese improbable do here but there's also an insider's build how many people here use the insiders book and I see a show of hands that's a good amount but the rest of you haven't tried it yet I'm gonna tell you the reason I use insiders and I use it every single day and I've used it every day since it came out is because with insiders you're generally getting nightly builds they're very very stable for me I've had maybe two days in the last three years where it didn't work total and I flip back to the stable is that you can have stable insiders side-by-side but with the insiders you're getting almost daily updates of new features and some of the things we'll show you today we're actually only in the insiders which is pretty wicked cool including the bonus at the end so if you want the insiders you click the button you choose hey I want insiders comes over here and it takes really a long time to download like eight seconds and then it's on your machine and then you can just open it up and you can have insiders and regular so here I've got the insiders on my machine there but I can also open up code side by side and if you're into this you can have two different themes running in both of them so definitely something to check out so once you install code one of the things that a lot of people like to do is they like to be in some kind of a terminal and maybe in the terminal they'll go ahead and they want to be in a folder like I've got this folder called play and in there I've got a folder called node 101 and maybe I want to open up an instance of code well you can actually set it up so you can have a key command here that opens up code I've set up a bash command so I can open up code by typing C dot by default Visual Studio will a code will allow you to do this so if I hit C dot here up pops code insiders which is my default with that project right in the same machine this is super handy I use this all the time there's probably one tip you should take so far it's that one right there now I'm going to show you our favorite command and Burke if they don't remember anything today what do they have to remember command PP command shift P command shift P yes I'm doing command P P that's an actual thing we'll get to it in a second yes command PP is great to command shift P if you forget anything in vs code brings up the command palette and you can type things in there for example you can type in path so you can say shell command install code insiders in the command path that will allow you to type code - insiders in your terminal to open up code or in the stable version of code or Lyda type code in terminal and open up whatever folder you're in inside of Visual Studio code so I've already done that on my machine so that's where I am cool and that's super helpful because when people tell me they're like Burke just put it in your bash profile I'm like I don't know what that is but I can go to the command palette and just click a menu entry I'm like look I'm just like you I know all about the terminal are you just like me Burke well I'm not just like you so there's another cool feature that decided vs code that I want to show you all cuz sometimes new features come out and it's hard to keep up with things if you go to command palette again command shift P and I type in playground there is an interactive playground that you can bring up in the interactive playground allows you to learn some of the new features and not only read about them but see them in action and try them right here so I could go down to background and I can highlight using a multi cursor and I can type in Burke loves bacon like that and I can learn how to use features right inside of this playground right here in vs code if you haven't been through that interactive playground I highly encourage you to go through it every line in there you'll be surprised at how much you can master just from going through that interactive tutorial now before we get too much further and tips inside of us code I want to show you a couple things that you're gonna see quite a bit for example you've seen us already have things like these different windows up in our machines hey let me open a folder I'm going to type in my password it's 1 2 3 4 5 6 don't remember that please very it's so secure John I am very secure so here's a folder and let's say I'm inside my project and I've got this open over there and I've got this open over here it gets like a little crowded sometimes you're gonna see different things happen the thing on the left over here that's our sidebar this Explorer I can make a common go pretty quickly with the command key stroke and works gonna show you that in a moment this thing in the bottom that is our bottom part and in there we've got our terminal and our output and other things we can make that come and go we can also see we've got multiple files going on you can have multiple files and multiple panes for example let's say I had index on this side and package.json over here I can actually change the cursor by hitting command one or command two going back and forth between those two different files let's say I wanted to maximize looking at my package JSON I can drag it all the way over and I can maximize it now if I hit command 1 I want to see everything in the index file it automatically snaps over it shows maximized view of the other pane so I can make them do push-ups like this and they can fight each other and I can do command 3 and go to another file this project doesn't have a lot of files yep there we go but we can do it that way and as long as you drag one pane all the way to the side one split bar now as you go through them you'll see how they maximize as best they can how do you close a single file command W command W command W and my favorite command personally is command PP so whenever you want it to go back to the S file you do command PP so I'm inside of index J s now I had what filed before package.json what if I want to go back to man to the index J s my old command I at p1 speech Weiss let go and it goes back so anytime you have to go what do you do command P P alright so we showed you kind of all those do there another cool thing is and this is a feature and sublime that's had for a while and nvs codes got it as well have you ever just needed to write notes real quick like I say you know what don't forget to tell Burke to shave his head you know you've got something like that yes headers don't forget to tell Burke to shatters now I haven't saved this file how do I know that because it's got untitled one and there's this big circle up there which is a universal symbol for you didn't do what you're supposed to do so in that file I didn't do that well if I close vs code it's like uh-oh what happened did I lose that now if I open it back up let's see what happens I'll zoom in a little the file still there this is because there's a feature turn on a vs code called hot save so if I go down here there's a hot exit feature and I turned this on as Burke shows for foreign settings I can click on this I can say on exit or on Windows close you can see over on the right I've got mine set to on exit which allows me to save that file some people like this feature in vegan webstorm and in Visual Studio it's called mini-map there's a thing here called a editor mini-map but I've got mine turned on to true so if I open up a file like index J s and let's go to a mini-map right there we'll set it to true I come back over you can see over here on the right there's like a mini-map of that file lets you scroll through it I happen to like my screen real estate so I keep mine off you just change that inside of your editor and it just instantly disappears other stuff that you can do Burke already showed us how we can do font family so you can type in font family you can put them in here notice that my font family is right now for your code I happen to like operator mono all you have to do is put it in the right order and you can do it that way they'll change that sequence if you want to get kind of crazy you can pick one like architect's daughter and then your code oh it's not installed in this machine it's not installed it was a fall to the second one but your code will switch to whatever one is actually machine starting at the left moving over to the right got a long list of fonts there man I do I'd like to play with fonts I like the end console this one it sounds like the sad font doesn't it it's inconsolable that's a terrible joke yes welcome so the last thing I want to show you is a feature I like a lot of times I want to get things out of my way well there's a feature called Zen mode if you type in Zen inside the command palette and you go hit that everything else disappears but your code which is super cool you can still get to everything else so I can flip around my code and do what I need to do with command PP and get back there and what I want to get back out of it I just go back up the command palette which is command shift P and I can toggle the mode and get right back out nice so now the moment of truth is Burke's computer finally gonna work let's see it's just not meant to be I should have got a PC that's the problem all right then this will be interesting let's just keep right on going yeah I'm gonna just gonna mess your demos up from start to finish that's fantastic there just be a downhill slide all the way okay it yeah it let's see that's that's a good question I may have a Google cluster for you if that's correct let's try extend go back over again let's try to get go back over oh no nope here maybe here right there nope denied just not happening all right no problem so I'll tell you what let's just do this we'll continue over here on yeah I don't know that I have that connector type that okay all right they have a Mac and so you need a dongle to do anything at all I have it's not only we knew something about technology I know exactly are there any developers in the room is there a doctor in the house so let's do this let's come over to one of your projects here do me a favor John if you would pull up a one of your fabulous angular files that's got more than one or two functions in it so we can take a look at how we can use navigation to go through some more complex code files so one of the ones that you can use that's really really nice we talked about the command palette which is command shift P is you can use the command palette to navigate through your code and there's a couple different ways that you can do this so first you to do command shift P and that's gonna bring up the command palette and you'll see here that we have a relatively long file there's just a lot going on here and the longer your file gets the harder is to navigate through so what you can do is you new command shift P and then you can use the @ sign here excuse me the at that sorry that would be command P and then the @ sign and that's gonna just organize your code here into the different places like your methods and properties so you can just move between them now G Mouse through you can go to the different items in your code here if you use a colon here like this it will now organize your class's methods and properties and group them up here in the command palette so you can easily jump between them another thing that you can do is you can just use the colon and that actually allows you to jump directly to a line number and it tells you how many line numbers you have so you can go to so when you go to line 32 we just took 32 and boom we navigate automatically to line 32 so that's navigating from the command palette with the symbols if you forget what those are it's okay you can do command P and then you can just do a question mark and it will tell you here are all of the things you can do inside of this to navigate to your code and that's just right there another thing that you're going to want to do and John did this before but we should talk about this is if there's one another keyboard shortcut you remember besides command shift P it would be command B and all that does is toggle the side bar it's a very simple one but these are the fundamentals you're definitely going to want to know how to do that so that you can toggle the side bar in and out there let's do let's talk about this lower pane so John talked about the lower pane he showed you where it was on the bottom there this is something that you're going to use a lot because there's a lot of stuff in there the terminal is in there the debug console the output window is in there and there are a couple different ways that you can navigate in and out of this section one of them is you can just navigate directly to the terminal and to do that you use the control backtick which is that the little key above the the tab there I was like to say it's the key I didn't it was on my keyboard right you're like what is that I think it's called it Tildy so the control till the key and that will toggle you directly to the terminal now there's another way to get to this part of the editor that's a little bit more useful if you'll notice here if I come over to problems and I click on this of course there are no problems because it's your code and it's all I know you're just amazing too but that's how good you are if I control back tick out of this and I'm like oh I want to it took me to the terminal it's not exactly what I wanted so if you want to just toggle the bottom screen instead of moving to the terminal you can use command J and command J toggles the window down and then toggles it right back up again and it also remembers where you are so if you're on the problem screen if you do command J it brings it down command J brings it right back up and you're still on problems so it's a good one to know because you're going to be in that bottom section all the time another thing that we can do is we can hide different parts of the editor that we may not want to see so in this case and it looks like John you've already hidden your open editors here yes already got that so you'll notice that John if you use visual studio code before there's a setting or a panel that'll be up here at the top let's just go to user settings here and see if we can find the one and there's open editors I think is what it's called mm-hmm right yep open editors so he's got open headers visible he's got nine so let's go replace in settings and let's change this right here where is it at OMB command B let's see here there we go you got to remember how to collapse the sidebar here so open editors wouldn't put it at the bottom there where to go where to go too many settings too many settings alphabetical is that what it is see there it is thank you so much I have another Google cluster for whoever shouted that ounce so we can set this too if we set this to zero this will hide the open editors which is over here on the side now John's already done that so you don't see it but a lot of times if you use BS code before you know that it's up there and if you don't want to see that I personally don't use that open editor section a lot you can use this tweak inside of your settings file to go ahead and get rid of that so that you don't have to see that again this is all about just customizing vs codes looks exactly the way that you want it to look so that's open editors inside of es code another thing that you can do is you can hide recommended extensions so if we go over here to our extensions and John's already doing this is what John you've got your vs code setup configured on all correctly and all good I don't have any tips here so let's do recommended extensions I think it's cause it recommended yep recommended extensions you can also type pick ext at the end of it does a fuzzy search Oh does it oh okay recommended ext there we go we're where we are here editor you recommend recommends the recommended extensions ignore recommendations and then there's extensions show recommendations only on demand so if we click this and we set this to true or excuse me let's said it's a false and then save and what that should do is show our recommended extensions over here on the side and it's not popping up but usually you have a recommended extension setting right there on the left hand side and when you set that setting it no longer shows the recommended extensions panel and again that's just giving you more real estate on the left hand side so that you can successfully use your code editor the way that you would like to do it the last thing I want to show you here before I turn back over to John is something called code folding code folding is a very very helpful thing I use this a lot in HTML so you see these pluses and minuses over here on the side we can collapse these different sections like this in our code to give us more room so if you have a large chunk of markup like let's say you're using a bootstrap nav bar because it's scientifically true that you cannot build a web application without bootstrap so you're using bootstrap you want to collapse something like that yes it's perfect so you can collapse over here like this and then you get more more screen real estate you can also toggle this from the command palette and how do we open the command palette command shift P man shift P yes that's the one thing we should ask this every five minutes command shift P I'm gonna be checking it at the ER lines today going sir can I see your ID yes come chippie right exactly so you can toggle here if we toggle let's see here let's do folding and we can actually fold everything we can fold all and that will fold everything on the screen right so it'll fold all of it in all the different depths and you can also fold at specific depths you can see here it's folded all the way down you can fold it recursively so the code folding available through the command palette a very powerful way to collapse the code and have only what you need on the screen when you need it here's a bonus tip for code folding notice when Burke folded the code up here you know what's going on because you see the line numbers you can play tricks on your friends by turning off line numbers in vs code and then it looks like you just deleted all their HTML on them that'll make them really happy you can tell what we'd like to do around the office all right something else you can do inside of here imagine that you're looking at your code and you want to mess with your friends heads which you can tell we do quite a bit of there's a nice feature called line-height that i like to play with so if you go to line-height if you just click on the pencil on the left it's gonna show me right where it isn't the right so remember what Burke was looking for it over here he knows that when you click over here it goes right over to there I've got mine set to zero but what happens if I set this thing to one who says hey long files of a thousand lines of JavaScript so much code on the screen this way yeah come code with me everybody all right and how do you get out of there cuz like I can't see the setting I'm gonna teach you a button you've probably never heard of it's control-z thank God that worked all right so we're back in our editor something else and we mentioned this earlier that we both use quite a bit as the embedded terminal Berk opened it up with the control tick a lot of times I'll be using a terminal and we can zoom in over here ooh my settings are broken what did you do my settings sometimes your settings are fixed them I made them better I'm going to change you to a light theme and you'll be good to go awesome well thank me later so I can type things my terminal down below and I can see stuff over here I can also open up a second terminal in here part way I can do that is a the plus sign right there that says John open a terminal and then you can tells me the terminal cause you can see in the drop down list there's two zsh terminals that i've got going on so this one I could do something like go to CD inside my terminal I can flip back over here to the first one I can kill them both by throwing them in the trash can but what if I don't like to hit the buttons and I want to use the keystrokes inside of here with the control tick I can also hit command slash command slash gives me a second terminal on the right sometimes you're working with node and you're running a process on one side and then you need a second terminal so this way you can open two terminals if you want or if you're like Burke you could open up three or four or five or I don't know how many more terminals and eventually it does something like this which I don't know how you would ever possibly read all those terminals but they're there at this point and how do you get rid of all those that you can if you want to who doesn't want 42 terminals inside of es code come on I do wow how many did I actually create look at that alright so back in here what could I possibly do let's say that I wanted to run the matrix over here so I could run the matrix inside of the terminal what happens if let's say I've got some kind of a file open like this and now I can't really see what's going on in the file up there but let's say my terminal was small and I wanted to see more of what's in the terminal command shift P I can toggle maximized panel and it's going to give me a little more space now command shift P it remembers the last command I just hit enter and it goes back down so whenever you just need a little more space your terminal you can toggle maximized panel and then make it go back down so let's toggle it back up come back in here and I'm gonna open up a second terminal on the right and then over here I'm gonna use Burke's favorite thing cows a Berk and you can run two different things side by side inside your code hmm this is do it in Starbucks everybody I think you're super cool yes guys mr. robot anybody watch that show yeah it's a great show I'll they go out super depressing after season one and also it's Christian Slater's not real he's not real no a man he imagines him did I just spoiler alert oh so sorry I'll be live-streaming this just like to apologize to everyone on the Internet terrible this is my life everybody yes this is what you get when you get to work with me I I text you spoilers the middle the day so something else that you've really should learn about which I find really super helpful is sometimes you're like you know what I'm you stating a certain keystroke combination inside of code and it are inside of other tools and it just works for example let's say you're on Twitter or another page like this and you're like you know I just want to refresh my screen Hey look there's my buddy max and if I want to refresh inside the browser without touching the the mouse or the trackpad how do you do that f5 or command R so my case I hit command R Allah and it's refreshing Twitter hey there's Simona hi Simona you're also on the big screen and inside of es code remember we said that V s code is actually an electron app that's running basically web code inside of it so it's effectively like a browser so sometimes you're like you know what I changed some settings and things aren't really working right and I just instead of closing and reopening it what you can do is go to command shift P you can type in reload window and you can select it well I didn't like doing that cuz it's command shift P its type reload then hit enter I wanted to do is map it to my own keystroke of command R so I hit command R and it reloads vs code for me how did I do that though what I did is I went up to the key bindings keyboard and I go into let's go to the file and you're gonna see all the available key bindings are on the left and the ones that I have mapped for myself are on the right and I mapped command R to reload my window whenever the editor has focus and you can do all sorts of stuff like you can see here like killing all my terminal windows I've got that there you can switch all your code to uppercase with command shift u I do a zoom reset every in the browser Jever zooming in our browser like this or zoom out let's go see Simona's face really up close there you are Simona sorry so there's two motors face but in a browser you can hit command 0 right inside of es code doesn't work by default but you could come into here and zoom in and then it command 0 and I gotta get rid of your bug whatever you put in there but then it would set it back to 0 Burke we're up to tip 42 nice alright so we're gonna try one more time and I'm praying somebody send in the AV gods to rescue me please what's that it could be let's try that one switch back John here and let me just try to fix it again real quick let's see here let's go to settings see if we can change the resolution let's go to scale let's do 1600 by 900 nope that's not gonna do it 1280 by 720 400 by 600 alright alright alright it just wasn't meant to be alright so the next thing that I want to talk to you about is something called init who in this room has heard of image just by a show of hands okay a few people several people haven't as totally fine again we're all at different places learning how to do different things with our editors with our code so Emmet is a way for you to compose markup very quickly without having to use angle brackets so John if you could open me an HTML file or create me a new one that'd be great you want a new one a new one would be favorite here's a news file yeah let's start from scratch let's save this Burk as HTML Burke you're now an HTML file excellent alright so we have an HTML file here and normally the way we'd create markup is open angle bracket type div and that Visual Studio code is smart enough to know what we're it'll automatically close this div for us but there's a quicker way to do this what we can do is we can just type div and then hit tab and it will do the same thing another thing that we can do is we can you assign classes and ID's this way as well so if we had a div with an ID of main and a class of also main you can see here that we have a tooltip and we have an abbreviation and you can see that's what it's gonna do when we expand so I'll hit tab and we get that exact expansion now you can compose a lot of complex markup exactly this way so if we come over here and let's do something like this so let's do div dot navbar because again we've already discussed how you cannot build an app without bootstrap and then inside of that navbar we've got another div and it's got navbar items let's do like this and then maybe at the same level there's a ul and inside of that there's an Li and let's say there's three of them and let's go ahead and tab and then you can see that it expands all of that out with type of animate there and then you can tab through each one of these and enter in the things that you would like for your list items to have so that's one way to use Emmet now you can also use Emmet inside of files like typescript files view files and react files as well because react tests JSX angular has templates but you can also write it inside have the angular file and view files just end with view now and it doesn't work out of the box in those files but we can add in language mappings for those things to make sure that they work so we're back in user settings here and by the way when we do toggle into user settings that's command comma is how we do that and then we can come here and we can say again Emmitt dot include languages right here and then we can just start mapping so you can see right here it has markdown so we can map markdown to a type that vyas code knows about so it could be something like HTML and now Emmet will work inside of markdown files we can do the same thing like we wanted it to work in angular we come over here we'd say typescript because that's when angular files are and we can map that to an HTML file type just like this I'm sorry Oh x.x kilometers should be include languages right here thank you very much I do have a Google cluster for you as well include languages so that's the way that works and so you can add in JavaScript and for JavaScript react and for view files as well so that's how you make that work in the different files that you've got yep there we go let's pull that out so let's do this let's come back over here to my personally named HTML file and inside of this I want to show you some of the other things that Emmet can do so let's go to the Internet and let's get one of these well you can't copy a picture from Google can you do have any pictures in this current project here you have like a an assets folder with some images in it perhaps and by the way to find out if you got any pictures or images all you have to do is a command P and then type in jpg Oh nice line all your images alright as a picture of me very tiny and it's a tiny picture of you alright so we can see that this file here JP jpg is 32 by 32 I don't know if you can see this will zoom in so you see it's 32 by 32 now a lot of times we're recreating markup here so let's do Emmet you could do a whole page of market with image by just hitting exclamation mark tab and then you get a whole page of markup so inside of this let's say that we're creating an image tag here so let's do IMG tab and then here we would put our image source so we can put I think it was SRC what was it John dot slash SRC yeah where you where your image is at let's find out we'll go back there it's in source assets source assets so we should be able to just do SRC assets is that the right path do I have that right yeah I don't think that's right because visual studio code would pick that up looks like we're gonna have to go up to up right there app and then inside app assets right there so we're gonna have to go up a couple levels so let's just keep doing that until we find it here which is a really nice thing about vs code is that you can just go up and it shows you here's your folders so go up again here's our other folders so we should be able to come down and one more yep let's do dot dot slash and we go to assets and here's all of our images inside I think we said J P jpg there we go but what you're going to want to do with your image tags is you always want to add a width and a height to your image tag because if you don't when you go to render this in the browser it's gonna render it's it's not going to reserve the space on the page for it and one of the things that's always a pain for me is that I don't know how big my images are so then I have to go find out and then manually put them in and so I tend to just not do it so one of the things that Emmett will do for you is automatically update the size of your image in your markup so for instance all we have to do is come here at the end of the tag command shift P correct only one person command shift P and then I will do update image size like this on Emmet hit enter and boom you can see right there wid thirty-two height 32 it automatically brings it in now this is a really really cool tip because this doesn't just work inside of your project with local small pictures of John's head this also works with images that are out on the internet so if you're referencing a file via a URL this will work there as well another place that it will work is inside of CSS so if you're setting a background image and you have a local file or a remote file you can specify that and it will automatically update your image size so there's no more excuse to have image tags without an image size and emmitt can do that for you another thing that Emmett can do is it could just straight up do math so if we had let's do let's say we had 1000 times 2.3 for time divided by 10 we can highlight this right here and just say Emmett math you just type math evaluate expression and boom it evaluates the expression for you so you don't if if you're if you're using a calculator along with Visual Studio code you really don't need to do that you can do all of this right inside of the editor and a lot of this most of this is powered by image you're not gonna remember all of the image shortcuts and abbreviations that's okay there is a cheat sheet for Emmett that you can go out on the internet just google it and what I would do is just print it out and then just start using it as best you can and then you'll begin to learn the shortcuts as you go along and you'll be a much more productive developer yes cool get undo all changes I didn't know I had a tiny picture of me there that's like really weird Mike why is that there it's like the favicon aresome no probably yes that's what I need is your picture on all my brothers that I was at an event recently and it was a Viking so my little tiny figures or if you know word Bella's you get a nice little picture award bell in there all right so what comes up next organizing in ports one of the things I like to do inside my code is I like to have this is a hero's application and you listen to a pattern matching here looking for files I know I have a file that's the types of good file and it begins with the word hero and I know it's like got lists in it somewhere so I could type in hero list like this and notice it's doing a pattern match even though the dash wasn't in there let's say you don't know how to spell hero you just say it's her list you can find it here I do this a lot I can say I know there's an HTML file called hero list somewhere I can go find that pretty easily too so it's a very very quick way to find your files command P patch partial file matching and I can go check out a file now when I scroll back out of here and let's go find a file that's got more stuff in it I think this one has a couple imports at the top let's say that in your file you've got a lot of spaces going on you've got multiple lines somebody got to your code and this is probably really upsetting Burk I know he's got like a big problem with spacing so tabs or spaces that's Thank You Vera single tabs I'm so proud of everybody here I heard someone to say stabs single quotes or double quotes single single quotes yes wow we're all on the same page I like it so let's say you've got your code in here and you're looking at it if you press save watches can happen my code dupe puts it up there there's a feature called organized imports it does not make that noise that was me I don't want to use it then yes exactly if you type in Oregon it will find different features over here on the side it's not fighting over there let's go find them why is it not finding them do to do to do well there's a feature in their gold organized imports so we can go in there and set that feature on it will automatically get reader whitespace it will format it using whatever formatting code settings you have in your project which we'll look at next and it will alphabetize the imports inside your code you can also turn that off if you want to this is a feature that I believe Brian Clark is this in the stable yet yes it just hits table recently correct organized imports if you're wondering I'm asking Brian Clark up here does a monthly release on a vs code which is one of our tips that we do yeah you should check that out it's only two minutes long so in two minutes you can get all of the newest features of the BS code and BS code ships a lot of new features every month so by the time you watch this two month from now you know half the features that are new you won't know about so you definitely want to check out those videos so that you can stay up to date on that so Google Brian Clark and v/s code and you will find those one of the things I like to use is prettier so who has fights at their office a lot on oh you know I don't like what you form out of the code I like 80 character whist I like 120 I like commas I like semicolons I like Burke I like John I mean that happens it drops a lot if you don't want to fight about this stuff use a formatting tool like prettier prettier is a tool that's very well used on the web and it allows you to set up your own formatting structure so there's a file that you can create called a prettier RC file in your project I don't have one because I use the defaults but there's an extension you can download so if you go prettier over here and I'll make this a little wider you can see the code formatter here it's only got two million downloads so a few of you obviously need to go grab it too when you installs your machine it'll use a bunch of settings you can use a prettier RC file which is just JSON where you can change it from max character with max line was from 80 to 120 to 150 whatever makes you happy spacing around brackets and things it's really really nice it you check that into your source control and then you have no more fights on your team about who's gonna format what anymore right but you can still fight about jason vs. jason Jason or JSON Jason it's Jason who said JSON the a is implied you can't make it you can't make up pronunciations I just did we're have a debate about all of this stuff later on at the channel 9 stage this afternoon where we're gonna talk about all of these different very important developer problems that have to be solved right now yes like how you all mispronounced Jason just like that that would be a nice thing to see everybody do the other thing that I want to show everybody here is we are also doing format code so how do you format your code if you do format like this you have options for formatting on paste formatting unsaved you've also got a formatting timeout that you can wait for it I like to have a format code setting in my project but if you forget these things command shift P you type in format document and you can see the keystroke to go do that and that will format your country your document based upon your prettier settings or any other settings you have inside of your project now Burke there's one bonus that we should mention here notice that every time that I type some code in here there is no little circle in the upper tab didn't I mention earlier that there's a little circle there and anytime you change your file you haven't saved it have you ever written code and then run it and you're looking at it you're like why isn't this taking effect because you didn't save the file and usually takes you a couple minutes to realize that there's a nice setting that you can set in the menu file autosave and I like to check that on why because I do a lot of demos and a lot of coding and I don't want to have to command ass all day long so with autosave it'll automatically save my code on a delay what kind of delay does it have well if you type in autosave you'll see down here oops there's an autosave by default it's off you can turn that on so if I click on this you'll see where mine set over here mine's after a delay what is my delay it is 1,000 years those are milliseconds so after 1000 milliseconds it's automatically gonna save my code and I love to do this especially in JavaScript a node so it saves my files my tests will rerun or my angular review project will automatically rebuild and just launch inside the browser back to you Burke nice all right the other thing I want to talk about in vs code is intellisense now I'm sure most people are aware that vs code has intellisense obviou telethons has been around for a while I did hear somewhere that sublime text was the first one I thought was Visual Studio but first one to do and tell us since I may be wrong but one of the places that you may not know that vs code can do intellisense is in Jason Jason files it works in Jason files it also works in JSON files so let's go over to do our user settings so we've been in this file a lot today and that we've got tons of user settings you picked up one thing it's that you're gonna you're gonna tweak user settings a lot so let's come down and when we're looking for another setting we can hit the quotes like this and then all of our settings appear over here to the side so vs code knows about what all the settings are and then it also knows what all of the options are on this side and this is powered by the intellisense envious code now this may not be much of a surprise to you but this also works in places that you wouldn't normally expect and in ways that you might not normally expect so let's do this let's take this out go ahead and save that mess your project up royally and then let's look for a package.json I'm sure you've got one of those all right we got our package Jason open you got it quite a few things in here John one of the things though that you probably don't know about vs code is that intellisense works inside of package JSON files so yes it works for stuff up here like this where you have your name and your license and the scripts and the repo so you just quotes and it'll tell you what all those things are you're not gonna fill them out anyway so that's fine so let's just go ahead and take this off I like it when you initialize a new NPM project and it's like author repo description and then you just go through all of it and then it says tests and it's like none because I don't need any tests in my project so just none why does it ask you about tests what are tests yeah exactly tests are for demos not for real life all right so let's go down under dependencies here and one of the things I want to show you is under dependencies we've got all of our NPM packages now you don't normally hand edit your package JSON file normally you npm install you pull in a package but if you had to for some reason I find myself every now and again needing to hand edit this file you can come down here and if you press ctrl spacebar it will go out to NPM and it will look at all the different package packages that are available so obviously we're gonna want to use CoffeeScript because it's 2011 and so we're gonna want CoffeeScript but what version of CoffeeScript do we need well we don't know at this point you'd have to open a browser go out to NPM check what the current version is you don't know you all you need a squiggly do I need that carrot what the heck did those things even mean nobody knows but you can let vs code handle this for you by coming in here to the quotes and hitting ctrl spacebar and it will automatically go out to NPM and detect the latest version of the package this is a really really powerful tool because it allows you to keep context and stay where you are inside of your editor without having to bounce around to check different things and again you can summon intellisense at any time with ctrl spacebar so this works right inside of jason files this is NPM intellisense while we're talking about NPM I also want to talk about something from Erich gamma we've mentioned him a couple of times he wrote a package called NPM so you can install an extension called the NPM extension from a gamma and that does a lot of different things like it adds a bunch of options menu options to your editor so you can if you type in NPM you can see that I've now got run install dependencies and then it also has all of my NPM scripts right here within the command palette so I can run a build I can run tests I can just do run start so you can control all of your NPM actions directly from here the other thing that it will do is that it's very very smart about knowing which packages you have and are using in your project and if you have a discrepancy in your package JSON file I see you've upgraded to angular 6 I have how did that go well wonderful all right so I'm just gonna go ahead and completely break this so let's just say he's on version 5.2 dot 0 I'll just go ahead and save this okay I don't need to demo angular yeah it's fine nobody's gonna look at that and then you can see here that it's telling us that we have an invalid package installed here so this is the NPM module that's telling us you're referencing a version that you don't have so that it can it can smartly look through your folder look through the dependencies that you have and then visually tell you if you have any problems how many times have you opened a project and then tried to run it and gone it doesn't work and they're like oh I didn't do an NPM install this package will or extension will help you by showing you visually what's going on there so if I opened up this file and I had like a hundred green squiggly lines in there that'd be a great indication if I need to run NPM install exactly and then the other thing that this package will do is I think we already went over allowing two launcher commands one of the things that I wanted to show you that's sort of an NPM hack not really to do with Visual Studio code but Elijah manor showed me this and it changed my life because it's the simplest thing in the world so I'm gonna go to a terminal session remember we can do control backtick there to open that up so if we wanted to do I tell you what let's do I'm gonna go up a directory let's do a new directory oh I'm gonna get directory now it's weird so let's do directory Berk and then we'll move into Berk and let's say we want to initialize a new project in here so we would do NPM and NIT and then it's gonna start asking us a ton of questions and normally we just do this right here right we're like whoever captures all those questions and I'm done all right I do this almost every single day so let's do this remove that file what we can do instead is we can just say NPM an it - why enter and boom it just answers all of them for you so everybody thank Elisha Manor for that tip that's directly from him that will save you a ton of time so that's intellisense inside of package.json files that is the NPM module and that is an extra special bonus tip just for creating your package JSON files Thank You Elijah I don't know what you changed again let's go to undo that that's gonna be a habit today there we go by the way I got a little green underline there right it's saying hey angular Commons extraneous it's not like an opinion that it has about it definitely got an opinion it's like today I don't like you so one thing you can do in here man remember you can reload the window so I can hit command or reload it and let's hopefully make sure the squigglies go away sometimes that kind of thing happens seems okay right now so Burke just created a file right inside was it Burke yes all right so let's go oops that's not where I wanted to be down here let's go back and let's go inside of Burke that's really scary so I'm looking inside your head yes I'm scared there's not much there it's like the lego movie yes and then we're looking we see a package.json but maybe I want it to load that in this project remember ice I could type in code I have a shortcut for C because I'm really efficient it's 25% of the time to type it so I type in C and I could do C dot that would open up a new instance of code because this is just a terminal what if I want to stay in this instance I can do - R it means I really want to stay here so I can type that and it's going to go open that folder in this instance of V s code right here so you're not opening a second instance so there's flags on this it'll allow you to launch the same thing and if you look through here I only have one instance of V s code running and you can see hey there's some own again hi Simona up and on my machine so now I want to get back into there I can go back into my terminal and we're gonna go back out we're gonna go into my git folder and then I can also do I forgot what was called lose Vikings yeah that was Vikings is that I could do C - r go back in its gonna reload and one other thing to show with NPM which I find a wicked cool is a relatively new feature notice there's this thing called NPM scripts you gotta say it like that this is going to show you all the scripts that are inside your package JSON and then you could run these things like hey tests I bet you they don't work but I could right-click it and I could choose run and it's gonna go ahead open up the terminal it's gonna run my tests I'm pretty sure they're all gonna fail because I have not changed them for angular 6 yet but it's gonna run over there but that's kind of nice because alternatively what would we do we'd open up the terminal run NPM test do it ourselves or and I'll kill this one here boom boom or we could go up to NPM run script and we could choose test right from the menu so there's multiple ways to solve the same problem it really depends on how you like to roll if you like the keyboard track keyboard you can use the commands you can use the terminal or you can use the trackpad and right click over here inside of your NPM scripts yes you can see how we're just sort of move the slider this whole session we just moving it from text editor and we're moving closer and closer and closer to IDE so as we move closer to IDE I want to talk about some features that you're gonna find more inside of an IDE because that's the direction that we're headed here one of the things that I always loved about visual studio I was a.net developer for a short time and I was a terrible one and you're all lucky that I don't do that anymore but one of the things that I really liked about Visual Studio was that the database tooling was right inside of the IDE you didn't really need to go to the management studio it was just there so if you wanted to run a query if you wanted to create a table if you wanted to test all of that was there and that's really the defining feature of an integrated development environment is that all of the development things that you need are integrated in and so one of the things that you can use inside of Visual Studio code is something called the cosmos DB extension now the cosmos DB extension connects to Azure cosmos DB was a lot about that in the keynote it's a fantastic database but one of the little-known things about Azure cosmos DB or the extension rather is that it will connect to any DB instance that you have so in this case John's got one running his localhost here you can see that but this will connect to any any installation running available on the DB slash slash colon slash slash protocol and there's no security so you can hit any database in the entire world that's right look at you you have the key thing keys of the kingdom kidding and then you can see your collections inside of that so if we click on this we can see the different documents if I was to right-click on this and say open collection we can see all of the data over here on the other side now that's really nice it allows us to move through our data but remember we talked about having an integrated development environment where you can do things like test queries so a lot of times when we're developing is the database we need a tool that allows to go in and write and test our queries we can do that inside of Visual Studio code so command shift P opens the command palette and we're just gonna look for a scrapbook so I'm going to do new scrapbook here and you can see over here on the side that it says that we're connected right here to this instance so at this point we're just using straight MongoDB and we can come over here on the side and I hit DB like this and a dot and I get intellisense built into Visual Studio that tells me what my collections are so we'll do the hero's collection here and then I'll hit a dot again and it tells me here are all the commands that you can run against this collection all with inside of Visual Studio code so I can do find like this and then if I want to execute this I got a couple different options I can do command shift P and just say execute command execute MongoDB command like this and there we go or you close that let's not do that let's close this we can do command shift and then double quotes and that will do the exact same thing so you can test out all of the different commands that you have all of your different queries without having to install a DB admin tool all from with inside Visual Studio code and if you're using cosmos TV you get a whole host of other stuff as well things like access to the key value store and the graph API and things like that there was a session Matt Hernandez did a session covering that in more detail so if you missed that one I think you should be able to check out the recording on that we have links to those other sessions correct at the end of the slides yes very cool show that one yeah we want to do that when you have a JavaScript file we can look out here no but you can make one all right sounds good actually you know what let's do you got dia of functions installed I want to talk about that one to you as our edger functions this is another really cool one again we're talking about making visual studio code in IDE so the azure functions extension is an extension for visual studio code that allows you to very very easily work with Azure functions create them run them test them debug them and even deploy them so in this case if we wanted to create a new add your functions project I can click on this folder here and it's gonna ask us where so we'll just do a new folder here and I'm gonna I'm just gonna sorry John I'm completely ruining your I'm just gonna watch so I know today we'll clean it it's functions demo we'll select that and then we're gonna select a JavaScript function type here because we've already talked about what a terrible c-sharp developer I am you do not want me writing that so we'll click that and it's going to go ahead and it's to create a new project for us inside of that folder here and then what we can do is we can come and create a new function a new Azure function inside of that folder and those are functions could be blob triggers or cue triggers or timer triggers HTTP triggers are probably the ones that we use most often as web developers was because we're familiar with how to do that so let's see did let's see if we can open it here let's do you open see if we can find our was what was called Vikings and I think I put it inside of a folder called functions demo yeah there we are so let's open that we won't save any of that there we go so now our functions project is open here and if we wanted to create a new function just come down to our what do they call these things it's called Christmas the name of these little sections here explorers done this I always call them the wrong thing I'm like this pane all this blade no that's not right explorers click the little lightning bolt and we'll say that we want to use the current folder that we're in and then wants to know well what sort of a trigger do you want let's say we want to do an HTTP trigger like this and we'll just call it hello build like this will do anonymous because who needs security and then we've got a function here and we can go ahead and run this by coming to the debug hitting the play button and this will go ahead and fire up our function locally and then we can just click let's go back to our terminal you'll see the URL here and we can just hit it like this and boom you're already writing as your functions that's all you have to do to create an azure function that's all you have to know and then when you're ready to actually publish your add your function let's disconnect this you can just come over here to your section and as your functions down here and you can just hit this button right here and you can deploy directly from visual studio code and you can also create your functions project directly from visual studio code so this is a really really powerful way to work with the different features in Azure there's also extensions for app service there's extensions for Azure storage Explorer or as your storage there's extensions for functions we talked about that we talked about cosmos dB am I missing in daugher which occur there's a doctor extension as well yes I'll be doing a session later this afternoon showing a lot of these different Azure based and node based extensions building a node app I think around 1:15 okay we have I think just two or three more things you needed to show you one I want to show the bonus ones make sure we get time yeah see this one here so this literally is hot off the presses let's see if this works I created a new project Burke doesn't even know what I'm gonna do what's he gonna do out there oh my god it's so amazing so I've got this fascinating project called node 101 it's a really really big project it's got a single file and it's a node server that's it so inside of this file I could run this right I could go down here and I could type in node server j/s and that's nothing with my prompt my file it's called a node and XJS it's listening on port 3000 I can come up to here I can type in localhost 3000 zoom in and you can see yeah you look it's not really on Azure yet but you get the idea so we've got our node server here that we can run but what if we want to debug it locally well Burke how do we debug locally by creating a launch configuration the launch config so I can hit this debug thingy over here which is a bug with a slash through it and I can just do run right doo-doo-doo-doo-doo-doo doo-doo-doo-doo-doo and it's thinking there we go there we go hey it's like connection has been refused so I can debug my stuff through here by launching up my index file in this case it's running start to bug why is it having a problem hmm it's looking for start to bug so I go into my project notice I want to start with NPM start so I can run this by running NPM start but the secret feature I want to show is there's a new thing that vs code is now in preview and I believe the blog post is coming out today or tomorrow Chris on this yes chris is the guy who owns this whole thing so anything that failed today is his fault everything's Bert right my reason why my laptop wouldn't show up on the screen that's Chris yes yes because vs code can't do that yet for some reason so inside of here there's a new feature where you can actually deploy your app to Azure and then debug it from vs code think about that for a second you can write your code here deploy at the azure and then debug it right from vs code so I had something open up here I think I called it node build node 101 as your website's let's zoom in because that's way too small this is a live site you can all hit it it's an amazing website that I wrote up on Azure and if I wanted to debug this what I could do is I have to set an NPM script and I'm calling it start a debug it's just a convention we're using right now you can eat whatever you want I've then told a sure that this is what its gonna run so it knows to run that and I'm not just running node index I'm running it with the inspection flag so it knows it's gonna use the debugger and there's a special environment variable here that we're gonna set this is all gonna explain a blog post it's going to be coming out soon and how this works and the app services team too so when I set all this then what I can do is come back to my project and you notice I have some options here I could deploy to a web app I've done that you just saw it actually running well now over in the azure pane i've got the app service extension i could open up john papa hey we opened berkeley for and inside of here you can see I've got build node 101 if I right-click on that there's a new feature down here called start remote debugging who wants to try it Chris it's gonna work right he says I hope so this is literally just happened and look at that we've got a debugger and we hit a breakpoint whoa but wait there's more so we're inside of here and notice we're stopped here but I'm trying to inspect Reds and stuff and I want to break inside of this it broke inside of an asynchronous callback that's really cool so normally when you want to break inside one of these callbacks you've got to change your code but curly braces there and then go back and put the breakpoint I've done that what would have then happened then is I'd have to save my code and redeploy at the azure and then retry it and I don't really want to do that so we can right-click inside of our code and then we can choose this option down here addict breakpoint I've already selected that and that's why it's changing it there so now I can see the messages hello from Azure I can come over here to my code I could change get rid of some of these guys I could come down to my code and I could look through and I could change the request I could let it run through and if I want to I can change the message and we could change what happens up top that's pretty cool and it's guaranteed to work Chris Diaz said so you just saw it not something I think I would do for a production code but if I wanted to bug something live on Azure super easy cuz hey every time you run code locally it always works on another machine right yeah so Brooke we have one last tip what you got we talked about this thing called a multi cursor have you ever had a project let me go back to my Vikings you ever had a project where you wanted to grab something out of someone's package JSON and you want to just grab just what those packages were like maybe I want to grab just the angular stuff here and I want to go install those so what I could do is I could grab all these files here I'm gonna open a new file with command n just an empty file I'm gonna paste what I really want to do is end up with something that looks like NPM install and then all those packages so I'm gonna do now is I'm gonna go through and I'm gonna highlight whatever I see is common throughout them all maybe they're not all starting with angular in this case they are but I'm going to grab the quote comma colon space quote now I'm gonna hit command D and you'll notice the cursor is moving down the line finding every match that I've got I can then delete those I'm holding command shift right arrow go to the end of the line deleting those command left deleting the comma at the beginning now I'm gonna go to command right to go to the end I'm then going to put a space in there I can go back I can now go to the end of line front and now I can go and head and space them all out go to the end I can type in - save now you can send that command to your friends you can run it at a terminal copy and paste it and do it this is super powerful it's called a multi cursor it allows you to edit multiple lines of code all at the same time it's one of my favorite features that was in sublime and I wouldn't use the ESCO til it was there and these guys put it in and it's pretty awesome alright let's flip back to slides those red lights blinking my anxiety levels going through the roof all right at a time where do they go to find all these tips we've got so first of all the slides are gonna be available all of the tips that we gave you are gonna be an image and gif format in the slide so you don't have to remember any of this stuff just know that you can do it go back and research in your own time here are all of the different resources that we've got for you in terms of us code the angular essentials package from John the extensions marketplace node extensions everybody took their pictures they're grainy pictures all right there's a lot of Visual Studio code at build so if you're interested in more here's some of the other sessions that we've still got that you can go to I'd recommend checking those out there's gonna be a lot of Visual Studio code for the next couple of days we'd like to thank you for joining us this morning you had allotted a lot of choices [Applause]

Channel: Coding Tech

Views: 239,057

Keywords: vs code, visual studio code, software development, code creation, microsoft

Id: x5GzCohd4eo

Length: 71min 18sec (4278 seconds)

Published: Thu Jun 07 2018