Explore and navigate code: Go to Definition

- [Instructor] When reading or writing code, you may encounter unfamiliar functions or classes or objects. For example, I'm looking at this Tour.js file and on line six at the end, I see, new TourGuide. and I'm not sure what TourGuide refers to. Being able to explore the code definition for TourGuide or look at the code itself is invaluable and Visual Studio Code offers numerous ways to do just that. In this tip, we're looking at a feature called Go to Definition. To see this, I would right click on the item I'm interested in, and then choose Go to Definition. This menu is available for all code editors. I'm using it in JavaScript, but you can use the same feature for TypeScript and C Sharp, and many other languages. The other thing I'd like to point out is the keystroke that's associated with this. I'm on a PC and the keystroke is F12. If you're on a different operating system, it could be different and you might also have different key shortcuts configured for your copy of Visual Studio, so it may not be F12 on your computer. So, let's go to the definition and see what we get. In Visual Studio Code it opened a second tab with this TourGuide.js file, and I can now read information about this function is a constructor function. I can read more about it. (keyboard clicking) Now, let's say I want to go back and look at the code I was just looking at in Tour.js. Obviously, I can click on the tab and go back to it, but let me show you another tip. There are some keystrokes for navigating. On Windows I can hold down the Alt key and tap the left arrow to go backwards or the right arrow to go forwards. If you're on another operating system, these are the keystrokes that are associated with that. For the next demo, let's go look at this file, UseMathCode. So, I'm calling some functions. There's an absolute function and a min and a max function and a cube function. These functions are ones that I wrote. They're in this library, Learn-it-MathLib. You can see I'm importing them here on line one. So, using the Go to Definition will work exactly the same as the previous example. If I right click here and choose Go to Definition, it's going to open up the file and take me to that function. But let me point out a couple of other things that are interesting. If I go to definition here on the from Learn-it-MathLib, it'll take me to the file, itself, the first line in the file. And this also works with code that we didn't write. For example, Math.random, this random function is not a function that I wrote, but I can still right click on it and choose Go to Definition. Now, what you see here will vary depending on which programming language you're working in. In my example, I am in JavaScript. You see that up here it's showing this path to this file, lib.es5.d.ts. This is a file that was installed when I installed Visual Studio Code. You can see it here. It's this Microsoft Visual Studio Code, resources, so on. The point is, even though I didn't write the code, if your language supports it and there's a definition file somewhere available, Visual Studio Code can open it and show you the contents. We just looked at Go to Definition. There's other items in this context menu. The other ones I'll look at in this course, are Go to References and Peek.