Modern Python Projects Transcripts
Chapter: Your code editor
Lecture: Quick overview of VS Code

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Before we start talking about how to use VSCode with Python specifically,
0:04 let's talk about how to use VSCode in general.
0:08 So, you can see on the left side we have the sidebar.
0:11 First icon is the file Explorer.
0:14 I have opened the Django project,
0:15 so, we have some files here. So, we can click a file to open it.
0:21 And for example, if you have a lot of files and you want to filter.
0:24 You can just start typing in the sidebar.
0:28 And that way you can filter which file or folder you want to select, under the
0:35 files. We have the outline tab, if you can see a list of all your
0:40 classes, function and variables in the currently open file.
0:45 So, all those elements with this yellow icon,
0:47 are classes, inside you would normally see functions,
0:51 but unfortunately, I open the file that doesn't have functions.
0:55 So, let's try a different one.
1:00 So here, let's open the outline.
1:05 And here you can see that we have some classes.
1:08 Then we have some functions. And finally, those are,
1:10 all variables. One nice thing that you can do.
1:13 If the outline is that you can select follow cursor by default.
1:16 It's disabled, but if you enable it and you move around the file,
1:21 you can see that the location in the outline is changing.
1:25 So if you move around the file,
1:26 you will see that the outline on the left side always follow your cursor.
1:30 Also, you can select how you want to sort all those elements, by default,
1:34 It's by category. So first you have classes,
1:36 then you have functions and then variables.
1:39 But also you can sort by position.
1:41 So it started from the top to the bottom or you can sort it by name.
1:47 I usually like to sort by position and under the outline we have the timeline.
1:52 So, this is a simple Git integration, that will show you all the changes related to
1:56 this file. So, you can see,
1:58 Three months ago, someone did this small change in this file and also one down
2:02 here. One year ago, there was a different change and so on and so
2:08 on. So, this is a good tool to see the latest changes to this current
2:12 file. Next in the sidebar,
2:13 we have the search, you can search for something,
2:16 and you will immediately see the results this called fuzzy searching.
2:20 But you can also press control + enter or on MAC command + enter and this
2:26 will open the search results in the new tab.
2:28 Here you can further narrow down your search,
2:36 but also you can select how many lines around the search results you want to see
2:41 by default, For each result,
2:45 you will see one line above and one line below.
2:47 But sometimes maybe you want to see a bit more context. So, we can change this
2:51 number. And then for each result,
2:53 you will see two lines before and two lines above.
2:56 Next. We have source control tab.
2:59 Right now we don't see anything.
3:01 But if we make a change to one of those files and we save it,
3:05 we can now see this change in the source control tab.
3:07 We can open this file, we can discard changes,
3:10 or we can make a commit from it.
3:12 Let's discard it. Next, we have a Debugger.
3:17 Right now, we don't have any configuration,
3:19 so let's skip it. But I will show you later how to use a 03:21.89 debugger. And finally we have the extension tab that we are already familiar with.
3:26 Right now, we see five icons here,
3:28 but actually more icons might be available when you enable more features.
3:32 For example, when you configure testing framework,
3:34 you will see an additional tab for tests.
3:37 When you install a Docker extension,
3:38 you will see an additional side menu for Docker, So that was the side panel.
3:43 But actually, we have yet another panel that we can trigger by running view.
3:49 Toggle panel. That's right, this one lets actually close those files.
3:54 So at the bottom of your code
3:55 editor, you will see some additional tabs.
3:58 First up, it's problems. If you have a linter enabled and there are some
4:02 problems with your code, you can see a list of those problems here.
4:06 Next we have output. This is where you can see output of various parts of
4:10 VSCode. You are probably not going to use it very often,
4:14 mostly for some debugging purposes. Speaking of the debugging,
4:21 we have the debug console. So, when you started debugging session,
4:25 you can go to this debug console and you can execute some statements here.
4:31 And finally we have the terminal tab,
4:33 which is basically your standard terminal.
4:37 It's nice to have it here,
4:38 because that way you don't have to switch between VSCode and terminal.
4:42 You have everything in one window,
4:44 so it's good to remember the shortcut to show and hide terminal.
4:48 Let's open some files and let's hide this thing.
4:54 Let's open this one. This one,
4:56 this one. If you have multiple files open,
4:59 sometimes you want to see, let's say two files side by side.
5:03 So you can easily do this by dragging your file around.
5:07 That way you can move this file to the right side and then you can move
5:11 this file to the bottom. You can also copy file to the side.
5:19 So here we have the same file in two places and actually,
5:23 if we modify it here, we can see the modification on the right side.
5:29 Another useful feature not limited to VSCode is the multi cursor.
5:33 So you can put your cursor in multiple places by pressing option or alt.
5:39 And that way you only need to type ones to put the same text in multiple
5:43 areas, manually putting this multiple courses in multiple places.
5:51 It's not very useful, but for example,
5:54 if you want to, let's say,
5:56 rename a variable; you can select all the currencies off this variable and simply rename
6:00 it, another cool feature related to files is when you want to create a new
6:07 file, but you also want to create folders on the way there.
6:11 So one way would be to click this add folder and then name this folder.
6:19 Then inside, you would have to click again add folder to and then you would
6:23 finally, add a file. A much better idea is to simply at forward slashes(/) in
6:30 the name of the file, and this will create folders for you.
6:38 You can see we have foldera folderb inside
6:41 we have our file, by the way,
6:44 when you have a folder that only contains another folder inside.
6:48 VSCode will use this one-line notation to indicate that.
6:52 So this basically means that inside the foldera,
6:55 we have only foldera and then inside folderb.
6:59 We have our my_new_file.py, last thing that I want to
7:04 talk about our keyboard shortcuts. There are few keyboard shortcuts that you will be using
7:08 very often, so it's good to remember them.
7:11 The most important one opens the command palette on Mac.
7:15 It's command shift P and in other operating systems,
7:18 I think it's control shift P from the command palette.
7:21 You can run basically any function in VSCode.
7:23 So instead of clicking things around,
7:25 it's much faster to open command palette and run commands from there.
7:28 For example, if you don't know what's the keyboard shortcut to start
7:31 debugging can open the common palette and type start debugging,
7:37 and there we have. Next,
7:38 we have go to file, which is command+P.
7:41 That way you can quickly open any file from the currently open folder or a project
7:45 And since this is a fuzzy search,
7:48 you don't even have to type the whole file name.
7:53 Next, we have go to symbol in file.
7:55 You can quickly jump to a Function, Variable, Class or even the module in the current
8:00 file. And if you want to group classes together and variables together,
8:06 you can add the colon (:) at the beginning, so you can see here,
8:09 we have one class, five methods and 13 variables in this file.
8:14 You can also quickly go to a line in the file,
8:17 and you can even combine go to file and go to specific line.
8:21 So, if we go to a file and then we specified the line number after the
8:26 colon, we will go to Line 15 of the clickjacking.py.
8:30 The two final useful keyboard shortcuts, that I want to show you.
8:33 It's go to definition and show all references.
8:37 So, when you have a function,
8:39 let's say this one, and you want to go to the place where it's defined
8:44 well here. It's kind of easy because it's the same file,
8:46 but normally it's gonna be in the different file,
8:50 right Click and select Go to definition or is the keyboard shortcut.
8:54 And when you have a function definition, and you want to find all the places where
8:57 it's being used, you can select go to references.
9:02 This will show a little pop up with all the references to this function.
9:07 Those are just the most popular keyboard shortcuts that you will be using.
9:11 But VSCode is full of keyboard shortcuts that you can use, so as you
9:16 go, you will probably learn more and more off them.
9:18 Basically, almost anything can be done with the keyboard shortcut.
9:23 That's a lot of keyboard shortcuts to remember.
9:25 So to make it easier, VSCode documentation contains a nice cheat.
9:29 sheet. With the list of most common shortcuts for each operating system,
9:34 you can find this list in the VSCode documentation.
9:37 But to make it easier, I'm also linking to those cheat sheets from the
9:41 modernpythonprojects.com website. So, if you want to see the cheat sheet for
9:45 Mac OS, just goto modernpythonprojects.com/vscode-mac
9:50 If you want to see the one for Linux,
9:53 replace Mac with Linux and for windows,
9:55 goto /vscode-windows.
9:58 And finally, if you're moving to VSCode from a different code editor,
10:02 it might be hard for you to get used to having different shortcuts.
10:06 So, to make it easier, there are some plugins that will actually change the
10:11 default VSCode shortcuts to use shortcuts from your previous code editor, so we can
10:17 go to the extensions marketplace and search for the name of your previous code editor.
10:26 For example, I moved to VSCode from sublime text.
10:29 So, the first plugin that I ever installed in VSCode was sublime.
10:33 Text keymap. Once you install it,
10:37 some of the default VSCode shortcuts will be replaced with the shortcuts from sublime
10:42 text, so it will make the transition to VSCode slightly easier.