VS Code Top-Ten Pro Tips

[Music] in just three years Visual Studio code has gone from being non-existent to the single most popular code editor among all developers according to the Stack Overflow 2018 survey I personally like it because it's minimal yet super powerful and free and open source in this episode I'll show you exactly what I mean by taking you through my top 10 pro tips or using the BS code effectively if you're new here hit subscribe and you'll find a full write-up on angular firebase comm the first thing you should know is how to get around the file system quickly you can open up vs code by running code from the command line with the directory that you want to open it the quickest way to move around is to memorize a few hotkeys or key bindings if you hit ctrl K it'll bring up a full list of key bindings that you can search through and customize as needed but the single most important one is ctrl P which brings up the command palette we'll be using the command palette a lot in this video so don't forget this one to navigate between files you can simply start typing the file name and it will automatically search through your tree to find the corresponding file that's way quicker than trying to navigate through a directory tree by clicking but sometimes you might want to bookmark specific lines of code and navigate to them later for that I recommend using a bookmark plugin which will allow us to highlight a block of code set a bookmark number for it and then easily navigate to it later on using that command palette and BS code as you probably noticed I'm here in an angular project so I'm going to install some snippets to generate a lot of the boilerplate code for me and angular we have two really good snippet libraries one from Mike Moreland and one from John Papa and you can use them both together when you install snippets they're automatically added to the vs code intellisense so say I need to code up something really tedious like an NG switch statement I can simply start typing the prefix in the snippet library and it will automatically generate this code for me there's even snippets available for libraries like angular material ng XS and many others number E is vs codes integrated command line terminal you can pull it up by simply dragging from the bottom of the screen or you can use the control back tick key binding you can also pull up the command palette with control P and open it there what's really cool is that vs code will automatically recognize scripts that you have set up in your prod in JavaScript you probably have something set up with NPM or maybe with grunt or gulp you can simply type in NPM and it will show all of your scripts right there automatically so you can run them without ever having to type anything with that we can segue into the next major feature which is intellisense intellisense is just a fancy word for code auto-completion and if you use a language that strong typed like typescript you'll get incredible developer tooling and BS code you'll see this automatically as you're coding but you can pull it up manually with control space as well code completion is pretty self-explanatory but there's some pretty cool things you can do with it let's say we're going into a large typescript file for the first time and we want to see all the methods and classes that are defined in this file we can go into the command palette type in the @ symbol and that will give us all the interfaces methods and properties defined in this file in a strong type language another thing you might want to do is pick the type definitions for a given interface it can be really disrupted to have multiple files open at once looking for different type definitions but you can simply click on an interface and say peak definition and we'll find that in your project even if it's buried in your node modules and show you the properties on that interface on the flip side of this you might be looking at an interface and want to know how many references you have to it in a project if you right click and go to find references it will show you exactly which files are referencing this interface in your project but let's say I'm working with an interface and I decide I don't like the name of it I can highlight it then right click and say rename symbol or just hit f2 and give it a new name that not only updates the current file but also every other file in the project with that reference and that's a lot safer than using just a regular Find and Replace because it's looking at the actual code reference and not the text itself yet another good reason to strong type your code now while we're on the topic of types I want to show you this really cool extension called paste JSON as code almost all apps make calls to api's that return JSON but you might not have an easy way to actually strong type this response in your project I'm in the Twitter API right now and I'm just going to copy and paste this example response in JSON format I'll go ahead and paste the JSON into a tweet JSON file and then create a new file called tweet TS then I can open up the command palette and just enter that paste is JSON command and we'll set the top-level interface name as tweet and then magically we get this whole set of interfaces that model this API response so that means you can get incredible developer tooling for any API that you work with whether it has types or not okay I think I've heard just about enough of types let's just chill out for a second hit ctrl K Z to go into Zen mode this will give us a viewport with all of the distractions removed if you don't care what your docker container is doing or what the git status is you can just go into Zen mode and focus on writing code while we're at it let's install the Spotify extension for vs code and throw on some carbon-based life forms and just chill out but unfortunately we relax a little too hard and now our application is broken let's go into the debugger panel and see how that might be able to help us out you get to the debugger by clicking on the bug icon and I have a simple node script setup here node works out of the box but you can also install extensions to support different runtimes in the script I have two separate functions that are each updating a global variable and we'll just run these one after the other I can set up breakpoints in my code by simply adding a red dot in between the line numbers this will stop the execution of the script once it hits this breakpoint and then you can inspect the local state and the call stack and things like that all I have to do is click the play button and it will automatically attach the debugger to this process you can see here it shows all of the local variables as well as all of our global variables and node you can also go down to the debugger console and start executing commands within the context of the script and we'll have access to its current state so if we want to inspect the name of a variable we just type it down here in the command line and it will print that out in the console debugging node is great but generally my front-end apps are a lot more complex than my back-end apps I'd like to debug my angular applications in the context of the Chrome browser after installing the Chrome extension we can go back to the debugger and click the play button but this time use Chrome then we can set up a launch configuration for this specific app which in angular's case it'll be served on localhost 4200 then we can go into one of our component files and set up some breakpoints where we want to have the debugger run in the browser I'll set up one break point before the components actually initialized and then another one that we'll run on a button click then you can see if we click play it will launch Chrome and have our debugger running here which we can control from vs code when we click play again it will define the title and we can actually highlight over properties in the code and it will tell us the state of the data managing state in a web application is one of the biggest challenges and this debugger can really help you do that more effectively another huge way that vs code helps you out is with your git version control dealing with git in a large project gets pretty hard to do from the command line you might have already noticed that vs code automatically highlights all of your files untracked or new files or green modified files are yellow and files with Wynton errors are red if we want to commit some changes we can just go into the git tab at our commit message and we're done we don't have to do any get add or get flag message from the command line but what if we actually didn't mean to commit that code well we can come up here to the options menu and just roll back that commit and you can run pretty much every other git command from this menu as well if we want to revert some changes on a specific file we can simply do that by clicking this revert button and that will discard all of the changes that we made or if we just want to commit a couple files individually we can click the plus button and that will only stage those files for your next commit so that's super powerful on its own but I want to know about the git status pretty much everywhere in my code I want to know who changed what and when it was chained because I'm working with a team of junior developers and they keep screwing things up we can install get lens from the extensions page and if we go back to the git tab you'll see that we have an additional panel here with all of that get one's data it makes it a lot easier to traverse the git tree and also deal with things like stashes and tags and also your remote repositories but it doesn't just stop at the gate panel it actually annotates all of your code with information about git if we go into a file and just hover over a piece of code it will tell us exactly who wrote that code when they wrote it and it's commit ID this brings us to vs code live share which is a brand new feature in the editor it allows you to connect your github or Azure account to vs code and then collaborate with multiple team members on a single document in real it's kind of like the Google Docs of writing code I've been able to use this with some angular firebase pro members to collaborate on issues and it's been super useful you can install the extension and you'll need to connect a github account or a Microsoft account after that it's just a matter of clicking share and vs code will return a link that you can pass along to other team members I probably could have covered about 90 other topics in this video but I'm gonna go ahead and wrap things up there if it helped you please like and subscribe and if you're serious about building apps consider becoming a pro member at angular firebase com we can write code together using vs code live share and work on strategies to get your app built and shipped as soon as possible thanks for watching and I'll talk to you soon [Music]

Channel: Fireship

Views: 1,646,345

Rating: 4.9394569 out of 5

Keywords: angular, webdev, app development, typescript, javascript, lesson, tutorial, nodejs, vsc, vscode, vs code, vscode tutorial, vs code lesson, visual studio, visual studio code, vscode overview, top ten, ide, text editor, code editor, gitlens, productivity

Id: u21W_tfPVrY

Length: 9min 36sec (576 seconds)

Published: Thu Jun 07 2018

Reddit Comments

[u/PaddiM8]

I can't figure out why I recognise it so much. Any ideas?