VS Code 101: Setup a beautiful code editor | Kalob Taulien | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

VS Code 101: Setup a beautiful code editor

teacher avatar Kalob Taulien, Web Development Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (37m)
    • 1. Welcome to VS Code 101: A beautiful code editor

      1:48
    • 2. How to install a new theme

      2:12
    • 3. How to add theme icons

      2:00
    • 4. Popular extensions to use

      8:02
    • 5. How I personally use VS Code

      2:10
    • 6. Moving around VS Code

      3:09
    • 7. Shortcuts and hotkeys

      6:04
    • 8. How to manage your files while coding

      2:58
    • 9. Different "views" in VS Code

      1:31
    • 10. Local and global searching

      2:30
    • 11. Typing in two places at once

      2:01
    • 12. Your project

      2:08
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

472

Students

3

Projects

About This Class

Welcome to VS Code 101: A beautiful code editor. 

700b2df2.png

Code editors, also known as "text editors", are special programs programmers and web developers use to write code. It's special because it doesn't add any extra data under the hood. Ever notice how an empty .docx file is 1mb even though there's no data in it? Code editors prevent that from happening. 

In this mini class I'm going to show you exactly how I use VS Code.

I made this course because my most popular question is: What theme are you using? And what extensions do you use? 

To get the most out of this course you should already be coding and have written at least a few lines of code. 

I'll show you how I use VS Code, popular tools and features, and how to customize your VS Code program. You'll even learn shortcuts and hotkeys to be a more efficient programmer. 

This course is suitable for Windows, MacOS and Linux.

At the end of the course is a project where you will customize your VS Code and change your own VS Code. Have some fun with it and make it the way you want! 

Meet Your Teacher

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Teacher

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome to VS Code 101: A beautiful code editor: Welcome to VS Code 101. We are going to be setting up VS code so that it looks a lot like mine, and it looks a little bit better than what the default VS code looks like. We're going to go over things like your explore, your extensions, how to find files, shortcuts in here, how to select code in multiple spots and edit it in three places at once. We're going to talk about different shortcuts. How you can speed up your time, how you can search through files, how you can search through your entire project. Four, for example, the word client, and it shows up here, here, here and here. And it looks through all of your different files, not just one file at a time and a bunch of different efficiency shortcuts that I use up to including but not limited to, your terminal, changing your file types, different extensions using your Explorer, globalized searching, and much, much more. And at the end of this course, what you're going to do is set up your VS Code to look a lot like mine. And that is going to be your final project. Hi, I'm Caleb Italian and I've been teaching people how to code is since about 2012. I've used all sorts of different editors, including sublime VS Code, Notepad Plus, Plus nano vim. Those are command line editors and so on and so on. I really like VS Code. And in all of my courses you see me use VS code these days. And I'm gonna show you exactly how I get it, setup, which extensions I use, and the shortcuts that I tend to use. So whether you're using Windows, Mac, or Linux, this course is going to be for you if you want to use VS code now you don't have to use VS code. You can use any other text editor, but I like using VS Code. And in all of my courses you're going to be seeing the US VS Code. Thanks for tuning in and I'll see you inside. 2. How to install a new theme: Welcome to a beautiful VS code set up. And so this is what I use in pretty much all of my courses and I have had thousands of people now ask me, Caleb, what theme do you use a plugin to use? And I figured I would just make a course about it because I have a lot of people asking this question and it takes a lot of time to answer that question over and over and over again every single day. So first things first, let's go ahead and open up VS Code. If you don't have VS code, make sure you download it and then open up VS Code. And so I just open up VSCO and there's nothing in here right now. And so what I wanna do is go to View and then extensions. So I'm on a Mac. This might look slightly different for you if you're on Windows, but it's going to look very, very similar regardless. And so these are all of my extensions that I have in here and I'll go through a few of them. But first of all, your VS code probably doesn't look like mine. Mine has this nice bluish theme to it. So what you want to do to make yours look like mine is in your Extensions, type in material theme. And go here. And you can see that I have material theme installed. And so you're going to want to install this. It might ask you to restart VS Code. If it does, that's okay. Just restart VS Code. Come back to this page and then you can go to set color theme and you can click setColor theme here. And you can scroll through these and you can see the different color themes that it gives you. And so some of these are kind of ugly, in my opinion, or way too bright, that's just way too bright for my eyes. For example. I don't really like this one. Maybe you do. And if you do, that's okay. It doesn't have to VSCO doesn't have to look exactly like mine, but mine is set up to use Material. Theme, ocean high-contrast. So not this normal one here, but the high contrast one. So you can see some of the darks are a little bit darker. So once you go ahead and get that set up in the next lesson I'm going to show you is how I can get this little flame. Actually that doesn't really show up on the first line, but this little flame, every time I type it gets a little flame above. I'm gonna show you exactly how I enable that. 3. How to add theme icons: All right, in the last video there I said I was gonna show you how I set up this little flame thing. Some people like it, some people don't. If you don't like it, you can just skip it. But actually what I'm gonna do is I'm going to hijack is less than n. I'm going to talk about my icons. And so I have a nice little icon set here. And if I just open up a new project, let's open up this project called watcher. And what I have here is on the left. And if I make that just a touch bigger here so we can see it. Due to, due to do Python extension was updated. Cool, cool, cool, cool. So I have these nice little icons on the left here. And if I've got a JS file shows a nice JS file and I have got an HTML file shows nice HTML file icon. It shows all sorts of things in here. And so the way I do that is in my extensions, I can go to MIT material theme icons. And so if you just install Material Theme icons, set file icon theme, this should just work right out of the box for it. You know, if this doesn't, you might just need to scroll down here and look at some of the installation Getting Started. What are we looking at here? Do we have anything useful? Yep, activate your theme. And then you can type icon theme. So if I hit Command Shift P or if you're on Windows control shift P or Linux control shift P. And then I just type in Icon Theme. I can choose File Icon Theme. And you can choose which one you want in here. And it will eventually change. If maybe if I do this, this is going to change. Yeah, this changes. And for me. And so what I like to do is I just like my standard material theme, icons, ocean, and that just comes with this theme. I just like that. So if you don't have the icons, you might wanna get some icons. Icons look nice. 4. Popular extensions to use: All right. Let's talk about extensions. And I have a lot of extensions installed. Actually, I went through my list of extensions and I uninstalled a bunch of them because I just wasn't using them anymore. And so let's go ahead and make this a little bit bigger so we can see this nice little icon here. Let's get rid of that dot. And so first of all, I use encode spell checker. This is really helpful if you're just trying to write comments in your code. And you don't wanna make typos, especially if you have a modern workflow at your company or the future company that you're going to work at. Someone's going to review your code and say actually you have a typo here and it's just a pain them. But to do so, code spell checker helps me make sure that's basically I don't have typos. Now it's not perfect, but it works pretty well. Code Python, I sort, this is for sorting automatically my import. So if I go over to watch and scroll up to the top, this could automatically import are not import, but I sort all of these by default and I don't have to worry about writing these in order. It just does it for me. Community material theme yet we already went over that or did we maybe we didn't. Okay. So I don't think we did. So let's maybe talk about that real quick. Material theme. Where are you material theme? I don't use the latest version because I don't like the latest version. I like an older version, just gives me nicer colors, I think so instead of using pink, it uses yellow. I just like the yellow just because it's a little more in my face. You may need to if you want to revert to an older version, use community material theme. I use this thing called Django templating. So whenever you are working on it, a dot HTML file, you can automatically change that dot HTML file to a Django HTML file. And it just gives you nice syntax highlighting. Dot n v is for environment variables just gives you syntax highlighting for environment variables. Editor config is really nice. So if you have a new project and you just clone it from GitHub for instance, you might have a dot Editor config file. And so if it says your JavaScript files should have four spaces instead of two spaces, it will basically read that rule and it will honor it for you. So every time you hit tab is going to make two spaces, are four spaces or whatever is set up in that editor config. And so you don't have to worry about writing different codes from different people or having different indenting or spacing. If you write Python, it just automatically works. I use grammar Lee, the unofficial extension just to help me with some of my spelling again, just because tens of thousands of words a day, probably when you start doing a lot of coding. And you just want to make sure that you're writing things that don't have typos that seem somewhat intelligent. Just because at the end of the day you might have a little bit of brain fatigue and Graham really can help you with that Jupiter notebook. I actually don't use this, but I do believe it comes with the Python package these days for VS Code. And so if you wanted to run jupyter inside of VS code, you absolutely could do that. I don't do that. I use Jupiter outside of VS code just because I like the full experience. But you absolutely can do that. And if you're brand new to Jupiter, I would recommend using it. Inside of VS code, it's really, really nice. Markdown preview. This just allows me to write markdown to like if I'm working on a git repository and I'm writing a readme dot AMD file. And I want to see if I've made any mistakes or want to see if it looks half decent, then I could just simply preview my markdown and all the instructions are in here as well to see how to really make this work for you. Where are you here? To ten to the o, it's the very first one. I skip right past it, command K And then V, or control k And then V. And it opens a preview to the side, which is really nice and it scrolls as you scroll down your source code as well. Material thing, we talked about that one, material at the microns, we talked about that one, power mode. This one is really nice. I really, really like this. I know some people absolutely disliked this one. So I'm going to do here is just close a bunch of these. And I'm gonna show you a power mode is. So if I open up this file here called watcher, and I just do a little bit of typing. You can see that little flame above my letters and you can make that difference. E doesn't have to be a flame Sometimes, I believe we still have an explosion setting in here. You can go through the settings and make it like an explosion jag or something like that. That's a lot of fun to. You can make it really big, you can make it really small, high, personally, like it just because it, it tells me where I'm typing, where am I? And it just gives me my eyes a little something extra to get into to look for it. It's also good, I think for a lot of my students who are like, oh, well, I see this whole page of text here. Where exactly is Caleb typing? And so I can just do this and it's another thing for my students to take a look at as well. So I really, really like power mode. But I know about 1% of the people who watch my courses absolutely dislike it. They think it's too distracting. But that's only 1%. And power mode, I think, is a lot of fun. I use prettier code formatter. Occasionally. I tend to use this on the command line a little bit more than I use in VS code. But you can use a prettier code formatting extension as well. And I use the Python extension quite heavily because I'm a Python developer. And so you're going to want to get this and yes, it is from Microsoft. If you think Microsoft is a junk company, well, they actually make some pretty good things these days. If you were a big fan of Microsoft, then you're going to love this. But Microsoft makes VS Code and it made the Python extension and it is really, really good. And you can see it's got over 30 million downloads. Rst preview is a lot like the markdown preview. It just helps me with RST files to do tree is really nice. So if I open up watchers dot py and I type something like number sign to-do, do a thing. It just highlights it for me. So it's easier to see. So if someone else writes a to-do in their code and I am looking at their code, I can easily see what that would do is supposed to be, and it just sticks out a little bit more. So it tells me what is possibly missing. Vagrant file support. This is just so that dot vaguer and files are vagrant or dot-dot-dot vagrant file. But vagrant files, file type will have some sort of syntax highlighting. I actually don't really use this anymore. So what I'm gonna do is just uninstall that one. I don't need that anymore. And Jan ny arrow, this is a tricky one. I have no idea how to spell it out, but this is pretty good. Now this comes right from Sublime. And Scott bark been a person that I actually know I used to work with. He ported this over from Sublime over to VS Code. And basically what it does is it allows you to take little shortcuts. So, you know, when you have a new file here, and let's just change this over to a dot HTML file. I can type HTML. Colon five, hit tab and it does a bunch of stuff in here. If I change this over to a Django template, I can type block, hit tab and it automatically creates the templating stuff for me. So that's really, really nice. Actually don't overly use this too much. I use it for some of the shortcuts like like block or some of the template tags. But it's really, really powerful and there's lot of different things you can do in here. So those are all of the extensions that I tend to use on a daily basis. Sometimes I'll install the Docker extension, sometimes I'll just remove it because I haven't used it in awhile. Extensions come and go. But these are the primary ones that I tend to use pretty much on a daily basis. 5. How I personally use VS Code: Okay, let's take a quick little walk through and see how we can utilize VS Code. Now I actually don't use VS Code to its maximum capacity. There's a lot of things that VS code can do, and I just simply don't need it, so I don't do a lot of things, but I'm gonna show you exactly how I use VS code. So first of all, you can go to View and go to your explorer. And if you don't have something like this, what you can do is you can go to file open and you can open an entire folder. So instead of just selecting a file, what you can do is you can select nothing and just say open that entire folder. And that will open this explore on the left for you. And what this does is it allows you to see what files are on the left inside of that folder. Up here, you can create a new file if you wanted to. You can create a new folder if you want to or, or what I usually do is I right-click and I go to New File. And then I can type like folder name, folder name slash, and that'll automatically create a folder for me, new file, 2.txt. And this creates folder name with a new file called TXT in there. You can delete. So you can just right-click and delete, or you can just select a file. So let's select new file and hit command delete or control delete if you're on Windows, I believe. And it will delete it for you as well. And if I ever wanted to rename a file, but I could do is just click on one of these files. And instead of being focused over here, I'm focused on the left. And I can simply hit Enter and rename this file. Rename this file, hit enter again, and it's renamed. And that just allows me to not have to use my mouse as much. You can refresh your Explorer. I've honestly never needed to do this, not once. And if you have folders open, you can collapse them. So let's go ahead and create a new folder with a file called test.txt. See that it's open here. On the left. If you end up working on a larger project, you might have like 405060 folders and they might end up being open if you want to close all of them, I just click that automatically collapses all of them for me. Let's go ahead and delete that. In the next lesson, let's take a look at some of the file shortcuts that I like to use a lot. 6. Moving around VS Code: Okay, so I have some code here, and this is just some open-source code that I wrote over Christmas of 2020, just to make sure that a website is up and running 24-7 and it checks every website once a minute. So I have a Python file here and you can see my nice little icon there from my material theme icons extension. If you ever wanted to, you could go down to the bottom, the bottom right. And you can change the spacing to use either spaces or tabs depends on your python project. But most, most Python projects use for spaces. And whenever you hit tab, it just automatically creates those pore spaces for you. So if I go down here, there's nothing there. If I hit Tab 1234 and it creates for spaces for me at a time. You can change the file by clicking this python down here or whatever extension it says. If you're using an HTML file, it's gonna say HTML, or you can change whatever you want it to be in here. So instead of Python, if I said, oh, this actually isn't Python, this is actually Java. It'll change some of the syntax for me. And this is really cool to actually don't write Java. So it says you want to install the recommend extension for Java. I don't, so I'm just going to ignore that and I'm gonna put this back to Python. And that just gives me nice syntax highlighting based on the language or scripting, scripting language that I'm writing like HTML, CSS, JavaScript, Python, Django, cetera. Now me personally, I don't use my terminal inside of VS code too often, although you definitely can. So if you go to view, then you can go down to terminal. You have access to your command line right here. So I can do ls dash LA, or if you're in Windows, I believe it's just DIR. So ls dash LA shows me all of my files and all the good stuff in there. You can have multiple terminals in here as well. If you wanted to, you can split your terminal, you can add a terminal, you can delete a terminal. This is basically the same as opening up command or terminal on your computer command if you're on Windows terminal, if you are on a Mac, or bash, if you're on Linux, I forgot about Linux. Yeah, if you're on Linux, might be bash. You can make it full screen if you wanted to. Who's still your file showing on the left? And you can close it down if you like. So I don't tend to use that too often, but I do tend to use that when I'm recording videos just so that I can hit, for example, control tilde. That's the number beside the one sign, this little guy right there, that weird icon or a character. I'll record a lot of videos with the terminal right inside of VS code. So I don't have to flip between too many, too many programs. But occasionally, I just I don't want to, and I want to actually flip between the programs because I like using a rod terminal outside of VS Code and it just gives me a little bit more control. And so I can customize that as well. But for you if you just want it all in one view, what you can do is you can just go to View terminal and you can have your command line available to you while you're writing your code. In the next video, I'm gonna show you some of the shortcuts that I use. 7. Shortcuts and hotkeys: Okay, so what I'm editing a file, you'll notice in a lot of my videos, I actually don't use my mouse all that much. And the nice thing about that is I can just keep my hands on my keyboard and I don't have to move around. So first things first is I use my arrow keys a lot. Up and down, left and right. When I'm on a new line on a Mac, at least I hit command and I can go left or right and just brings me to either end of that line. That just allows me to find, not fine, but to place my cursor somewhere closer to where I want it to be. So if I wanted to change this r over here instead of pressing and holding my arrow and then selecting it, what I could do is I can go over here and then I can hit option left, left, left. And this moves word by word. And that's just a lot quicker than having to do this, just waiting for it to go from the left. Or if I'm already on the far right, pressing and holding it just left, left, left shift, left or Shift writes to select a character or a series of characters, and then you can delete it if you wanted to. Now there's a lot of indenting in Python and HTML, and JavaScript, and PHP in CSS and pretty much every programming language and scripting language out there. And so sometimes you want to be able to indent and out dens pretty quickly. So what I like to do here is on my Mac, I hit command and then one of the symbols. So either that one or that one to one of these two. So command left bracket out dense. Command, right bracket in dense. And you can just keep doing this over and over and over again. And essentially this just lets you select a bunch of text and out dent or indent all of it all at once. So what I did here was I went to this line, went to the p, hit shift down, down, down, hit command out bracket, command in bracket, command, o bracket, command in bracket. Now friend windows, obviously you don't have a command key. It is likely to be control or alt for you. I actually can't remember off the top of my head. I haven't been on a Windows machine in a little bit, but it's going to be controlled bracket or alt bracket. Now another thing I like to do a lot is when I'm working with multiple pieces of code that are very, very, very similar. And I want to copy and paste a bunch of things. What you can do is you can select all of this. And you can do Control C or Command C and then just copies it. And then you can do control V or Command V as inviolate. And that paste the whole thing over and over and over again. But sometimes you want to paste a whole line and I actually don't paste, copy and paste individual things like this too often I tend to copy and paste and entire line. So what I do is I don't select anything on here, and I just hit Control C or Command C. And that secretly behind the scenes copies the whole line. And then it hit Command V or control V as inviolate. And you can just hit paste over and over and over again. And it will select all of that spacing plus the new line for you. So what I can do is I can go up here out dent incidentally, and I just hit Delete there. Another thing I'd like to do is when I'm on a line, if I want to delete the whole line, just because my fingers tend to shift towards the left side of my keyboard a little bit more. I will hit Command or Control X to delete an entire line. So let's say I wanted to delete line 27 here. I can just hit Control X. I don't have any character selected. If you, if you have a character selected and you delete it, it's just going to cut that text out. So let's Control Z or Command Z to undo and Control or Command X. And don't have anything highlighted here, which is Control or Command X on this entire line. And it cuts that entire line. And then I can paste it over and over and over again. One more thing I really like to do is, you know, if I'm on a line, if I'm in the middle of a line and I want to delete it. I'll just hit command or control accident. Delete the whole line for me. Occasionally I don't want to do that. Occasionally I want to shift alt and then select multiple words. And then I can just hit delete and delete all of it all at once. And the nice thing about that is you're just hitting Shift Alt, left, left, left, and that deletes or selects all of it. And then you can just delete it. Instead of doing delete, delete, delete, delete, delete, delete, delete, delete, delete, delete. It's just less keystrokes that way. Last but not least, I briefly went over this control Z or Command Z or Z, going to be your best friend. And this simply undoes something. So if I went in here and I accidentally somehow deleted this and I don't remember what was in their file.js. I don't know what's going on there. I can always just hit Command Z to undo my latest work and you can keep doing that over and over and over again. So it's gonna keep hitting Command Z. And you can see all the things that I've been doing in this video already. Last but not least, sometimes I like to go into split screen mode. So I click this little, this Split Editor. And this allows me to, well, if I open up another file here, if I open up n, For example, I can close that down and I can have my python file on the left, and I can have my dot M file on the right. So if I'm reading through this code and I'm like the Twilio SID is the config. Twilio SID. What is that I can look at right over here, Twilio SID is AC and then a bunch of stars. And if you ever wanna close it, you can just close all the files inside of that split and it goes back to normal and you can split multiple times to if you want to. Just like this, that gets a little bit hard. I'd actually don't split more than once just because I like a lot of real estate. I don't like my, my editor looking too crowded, especially once you add a terminal to it, it starts to look like there's a lot in there. 8. How to manage your files while coding: Alright, let's take a look at dealing with some new files. So first of all, if you open up a file over here, there's a quicker way to close it. So ideally, I don't like using my mouse as much as a lot of people do just because using your mouse is, is slow. You have to, you have to put your hand on your most. You have to move it around and figure out where it is. Then you have to lake actually place it in here and believe it or not, after eight hours of coding all day, that can take a lot of brain energy out of you. Or what you can do is instead of closing it by clicking that X on your command or on your keyboard, you can hit Command W or you can go up to File, Close editor, close window. What I want to do is just close this particular file. So I hit Command W, It might be control and W for you if you're on Windows, I just hit Command W, closes that file for me. You can open that file again, and I can close it with Command W. Now if I want to look for a file, I can hit Command P or control P. And I can just type in a file name and this just lets me look for things. So I could type a and let's say I wanted to look for all my Python files. I could type in dot p y, and it does a search through all of my files from my Python files, and I can simply hit enter and it opens that file. So now I don't have to look through here because this takes a lot of time. I've, I've seen new developers spend hours out of their day just looking through files in here, especially on bigger projects. And they're like, okay, what's not in this folder? Whereas watcher to phi dot py, is it in another folder? No, it's not in there. Where is it? There's an easier way to do it. You can do a global file search with Control or Command P, and you just type in your file name or a partial part of your filename. So I could type watch, and it finds watcher dot pi for me. And that's going to free up a lot of your time. When we're creating new files. We can also go file new. And that's fine. But that's sort of the slow way of doing it. And again, that's using our mouse, but I like to do is if you go to file, you can see file, new file. It's just Control or Command N. I hope it's control on Windows again, it's been a little while since I've been on Windows. But Control N is going to create a new file over and over and over. And we can just delete these with Control or Command W. Now if I want to change this file without saving it, if let's say, let's say I've got some HTML in here. This is an H1. If you don't know what that is, that's okay. This is just HTML and it's all gray and we don't want it to be all grey. Let's say we want some syntax highlighting, which is going to basically select this and this and make the inside look like something different. We can save this as a dot HTML. So File Save or command S or Control S. And that's going to save this. Let us save this file. Or you can go down here, plain text, and you can select your file. Again, you can do this with a shortcut or you can just go straight down to the bottom right. It's not too often you're actually going to need to do that with your mouse. Go down to the bottom right because VS code is smart enough to detect what kind of file you want. As soon as you save this as a dot HTML file, it will automatically set this as dot HTML. 9. Different "views" in VS Code: Okay, let's talk about views. So if we go up here, we can go to view and we can see all sorts of different things in here. Now, I honestly don't use too much of this. I really just use Explorer search and extensions for the most part. So this is my little sidebar here. And I can get rid of this. Just snap it closed. And I can go to File and say explorer, and that opens that up. There are shortcuts for this as well. So if you want to open up your explorer for me, it's command shift E and that just opens it. So if I close this again, put my mouse right in the middle so you know, I'm not doing anything. Command Shift E, it just opens it for me. There's also extensions which we talked about at the very beginning of this list, VS Code module or course or a tutorial. And there is terminal. Now there's a bunch of other things in here and you can change your appearance, your editor layout. Oh, one thing I like to do with my appearance is I like to show my Sidebar and my status bar, but I don't really like to show my activity bar or my panel. So if you just want to see what this looks like, it's just your panel down there and that's where you can see like your terminal and things like that. I don't like too many things open. I like to be able to focus on the code. So if this ever gets closed and you're like, well, I don't know where that went. You can always just go to View extensions or Explorer search. We'll talk about search in the next video. I just tend to open up explorer because that's where most of my files are and that's what I want to be seeing as I wanted to see my files on my left. 10. Local and global searching: Alright, so let's close this file and let's talk about search. So if we go to View Search or Command Shift F, This is going to let me search for something in here. And I can search through all of my files or an individual file. So let's go back to our explorer here. And what I can do is if I open up, watch your dot py and click inside of here, I can hit Command F. And this is just going to do a regular search for the word client. And it shows me, it shows up three times your 123. But if I hit Command Shift after Control Shift F, or just go in here and go to search. You can search for content inside of your file. So if I type in client, it's gonna show me all these different things near the phi do. Let's just say a. It shows up with all sorts of things in here. And then I can use files to exclude or files to include the files to include. If I wanted to include dot py files, I could do star dot py and files to exclude if I wanted to include all Python files except my water dot pi, I get simply say ignore watcher dot py and it shows up, nothing shows up with nothing. It also supports read x, which I tend to not use too often, just because you don't really need it. So if I'm looking for all instances of the word print, I can see that print shows up in my project through all files twice. Watching and content. That's where it is. Watching and content. If I want to see everywhere that I'm using the word config, I can just type config, and I only have one file in here that's using the word config, but it shows up five times 12345. And that is a really good way to look through all of your files for particular text. So this way you're not going through every file. Command F looking for a word, looking for a word, looking for a word. And so make sure you utilize the search functionality as best as you possibly can. It's gonna save you a lot of time. So remember when you're searching in a file, you just command or control F. And that'll search in the top right over here. If you're looking through all of your files, it's command shift after Control Shift F. And you can look through all of your files for a particular words. Let's say hash shows up with hash in here at all the different instances of where you can see the word hash. 11. Typing in two places at once: Okay. So I get this question a lot. Almost as almost as often as he killed with femur using. And that question is, how do I type in multiple places at the same time? And so there's two things I want to cover in this video is, first of all, I can click lake at the very end of this line and then hit Control and click. Or if you're on Windows, it's probably alt click or control-click. I'm on Mac, so it's command click. And I think I might have said control at the beginning, I meant to say command on Mac, it's command on Windows is probably control or alt. And so I just click in all these different spots. And I can type something here. And it works the exact same way as your regular cursor. So I can select all of these all at once, and I can delete all of them all at once. So that's all there is to, that takes little bit of practice to get really good at it. I had to know that you are writing the same thing in two different spots. But that is a really good way of speeding up your time when you're coding. Another thing people ask is, how do I select basically the next occurrence? And so if I type the word config and let's say I had a typo in here. So let's just select all of these and I just command clicked on those. And if I type in is equal to, note that's not what I wanna do. Undo. And if so, let's say I had a typo in there and I wanted to change all of these. I can select that first one and you can see these other ones are selected. I can go to Selection. Add next occurrence, which for me is Command D. And that just as that next occurrence, I can do it again, adds that next occurrence. So I don't have to double-click on this command or control or alt, double-click on that same thing, double-click on that. What it can do is just double-click this one. And if I know the next one is the one I want Command D or Control D or L D, depending on your settings. And then I do Command D again and select all of them. And what I can do is just delete that and type config in all three spots at the same time. 12. Your project: Okay. So we went over a lot. Feel free to steal pretty much anything that I'm using. Everything I'm using is completely free. I'm not using any fancy fonts or anything like that. I just happened to find a nice theme that I really liked that apparently a lot of other people like. So what I would like you to do for your project is to set up your VS Code to look like mine. And I want you to show me which extensions you have installed. So if I make this bigger, we can see these little icons pop up. So you should be using a different theme, not the default one from VS Code, but a different theme. I'm using material theme, you can use any other theme that you like. Hey, if you want to completely copy me, That's totally ALK. And then I just want you to take a screenshot of your VS code being open. It doesn't have to have any code open. Let's not say that. It doesn't have to have any code open. And just show me what kind of extensions you happen there. I would highly recommend that you get to at least the Python extension. If you want some fun. The power mode extension, the material theme extension and the material theme icons, extension. And what else to get started? Maybe the community material theme if you want to use that one as well. And that's about it. That's all you really need at the very beginning. Or maybe to do tree. This is a fun one. I like that one a lot. So go ahead and install a new theme and the extensions that you want, and then take a screenshot of your VS Code and share it with the class down below. And I wanted to see what you have set up and how you are using VS Code. And it can be completely different. You could be using different extensions. You could be using a different theme, or it could be the exact same. You can just literally copy everything I have. That is okay too. But make sure you take a screenshot of your VS code with your extensions open. Take a screenshot of the whole thing and share it with the class down below. Thanks for watching this. I have been Caleb tallying your instructor. You're going to see a lot of different content from me. And this is the exact setup that I use.