VS Code for Absolute Beginners

Key Takeaways

Hey folks, in this video I'm going to show you how to get up and running with VS Code. This is a beginnerfriendly step-by-step guide that'll take you from installation and setup to working with files, folders, themes, and extensions. And I'll show you a few more advanced features that'll really help speed up your workflow. You can follow along from start to finish, or you can use the timestamps if you're looking for a specific feature. All right, let's get into it. To get started with VS Code, go to code.visisualstudio.com/d download, which I also have linked below. And you'll be prompted to download the version that matches your operating system, Windows, Linux, or Mac, and then install it on your computer. And make sure that you're getting Visual Studio Code, not Visual Studio, which is a completely different IDE program for net and C++. And you can tell the difference because Visual Studio is branded with a purple logo and VS Code is branded in blue. So, make sure you get the blue one. And again, I have the download link below. Now, once you have VS Code installed and opened, the first thing that you'll see is this welcome screen. Here you have commonly used actions like creating a new file, opening a file or folder, cloning a Git repository, or working with workspaces. You can also go back and open recent folders that you've worked with in the past. And if you don't want to show this welcome screen every time you open VS Code, if you go down to the bottom, they have a check box, show welcome page at startup, and you can uncheck it. Next, let's take a look at the different parts of the VS Code user interface. Now, up at the top, we have a top menu bar with different menu options. Then, on the left here, we have the activity bar, which contains the major tools that you'll be using within VS Code. Then, at the very bottom of the screen, we have a status bar, and it displays relevant info about the current project and file that you have open. We also have sidebars which we can toggle up in the top right of the menu bar. We can toggle the primary sidebar which shows you views of a tool that you have selected in the activity bar. Then we have a secondary sidebar on the right which I don't really use but it contains the AI chat functionality. And then we have a bottom panel which will show you errors, tool output and has the integrated terminal. You can also customize your layout with this button here. And you can toggle the visibility of any of these elements. You can also choose the side that you want your primary sidebar to be displayed on, either left or right. Now, in the activity bar, we can access some common tools that we'll need when using VS Code. First up is the explorer, which you can use to navigate and create files and folders. First, I'm going to click open folder. When working in a project, you almost always will want to open a folder, not just individual files, so that you can see all the files in your folder all at once here. So, I'm going to click open folder, and I'm going to select this VS Code demo folder. And if this is the first time that you've opened a folder, you're going to get a security popup like this to make sure that you trust the folder and its files. I did create this folder myself, so I'm going to say yes, I trust the authors. Now, in the primary sidebar, it's going to display the folder name up at the top and any files that are in the folder. And since we're starting with an empty folder, there's nothing here yet. So, let's create some files. Now, when you hover over the sidebar, some icons are going to pop up next to the folder name. These let you create a new file, create a new folder, refresh the explorer view of the contents of this folder, and collapse the folders that are showing in the explorer. And this can come in really handy if you have a lot of subfolders. I'm going to click create new file, and a text box will pop up where we can write our file name. I'm going to type in index.html and press enter. And now we've created a new file. The file is automatically opened in the main editor panel on the right with a tab. And the file is also now listed in our primary sidebar. Also, when we're in the file, you might notice that the bottom status bar is going to tell you what file type it is. In our case, it has an HTML file. Now, let's create a couple more files. Now, I could click that create new file icon again, or you can also rightclick anywhere in the sidebar and select new file, which will do the same thing. Now, I'm going to call this one style.css. And then, let's create one more file and call it script.js. So, now we have the three files displayed in the sidebar. And you might notice that they each have a different icon depending on the file type, HTML, JavaScript, and CSS. And I'm going to close the JS and CSS files. So, we just have the HTML file left open. Now, in the sidebar, if I singleclick on the CSS file, it's not going to fully open the file, but it's just going to preview it showing the file name in the tab in italics. This means that if I singleclick on another file, the script.js file, now it's previewing that file instead of the CSS file. And preview mode can be helpful if you just want to quickly look at a file. And if I start typing in this file, then you might notice that it is now going to be fully opened and the file name in the tab is no longer in italics. And if you want to fully open a file from your sidebar, you can doubleclick it and it'll open and the file name in the tab is going to be not in italics. Now, another thing you can do with the tabs is you can click and drag them to put them in any order that you want. You can also split the editor panel into multiple panels so that you can look at multiple files at the same time. So, if I rightclick the CSS tab, I can select split right to duplicate it in the right half and then have the HTML file showing in the left half. And if you don't want to have a duplicated tab, another thing you can do is rightclick and go to the split and move menu, which gives you a lot more options. And you can move right instead of split right to just move the tab over to the other side. You can also click and drag the tabs if you have multiple panels open. And we can drag the CSS file back to the left side. All right, let's start writing some code. In the HTML file, we can use a built-in tool that VS Code has called EMTT to generate some boilerplate HTML for us. We can do this by typing exclamation point. And you can see that it says emit abbreviation, meaning that EMTT is going to generate some code if we press tab or enter. So now we have some boilerplate HTML. And you might notice that when we start making changes to a file in the tab, a white dot appears instead of the close X symbol indicating that there are unsaved changes. Then when I hit save, the dot is going to disappear. And we can also use emit to type out HTML tags without needing to type in the angle brackets. For example, in the body, if I want to add an H1 tag, I can type H1 and a pop-up menu appears showing that this is an emit shortcut. And then we can press enter or tab to generate the tag and then type the H1 text in it. And there's a lot more that you can do with EMTT to save time when you're writing your code. I actually have a video on the EMTT shortcuts that I use the most, which I'll link down below. VS Code also comes with some helpful tools to help you navigate within your files. Now, above where the code starts, and below the tabs, there's a line of breadcrumbs. These breadcrumbs tell you where you are in the hierarchy of the current file. So, if I click inside the H1 tag, the breadcrumbs are going to start with the file index.html, HTML and then it's going to go to the HTML tag which contains everything else in the HTML file like the body tag and then the body tag contains the H1 tag. You can also click on different parts of the breadcrumbs to automatically navigate to them. Now the elements in the file are called symbols and the symbols are going to differ depending on what type the file is. For HTML files, the symbols are going to be the different HTML elements in the markup. For CSS, they would be the different selectors that you're using in your styles. And in JavaScript, symbols are classes, variables, and functions. Another helpful feature when writing code is the integration with MDN or Mozilla Developer Network, which is basically the official documentation for HTML, CSS, and JavaScript. So, in my HTML, if I hover over a tag, you're going to see a pop-up window describing what the tag is along with a link where you can read more on the MDN website. If we go to the JavaScript file, I can hover over the log and it's going to tell us about the console log method and also link to MDN. And there's another helpful tool that we can use in our CSS styles. So, I'm going to write a quick body tag selector and write a style rule setting margin to zero. And I can hover over margin and again it's going to give us a popup with a link to MDN. And if I hover over the body tag selector itself, it's going to tell us the selector specificity. This one has a specificity of 001 because there's zero ids, zero classes, and one tag in this selector. Now, let me show you a couple more ways that we can navigate through your files. So, in our HTML file, just for illustration purposes, I'm going to generate a bunch of paragraph tags using emit by typing P for paragraph. Creating content inside the tag with right angle bracket. And I'm going to add Lauram ipsom placeholder text by typing Lauram. And let's add 100 words. And I want to create 10 of these paragraphs. So, I will surround it in parenthesis. and then multiply by 10. So now when I hit enter, we've created 10 paragraphs of Lauram ipsom text. I'm also going to wrap the lines with the shortcut alt z. So now we can see everything on screen. You can see that the file is now a lot longer. Now if we want to navigate through this file, we can of course scroll down if we want to. However, if you have a really long file, you can also take advantage of the mini map, which they have here on the right side. And you can click anywhere on the mini map to jump right there. You can also click and drag to basically scroll a lot faster than just with your scroll wheel. You can also use code folding to help show or hide parts of your code. So, if I put the cursor to the left of the body tag, you can see this down arrow appears here. If I click it, it's going to fold up the body tag and hide all of its contents. And we can click again to expand it. So, this can come in really handy when you have a ton of code and you don't want everything expanded all at the same time. Next, let's take a look at the search functionality. We have two modes of search. We can search in the immediate open file or we can also search within the entire project. And let's start with the immediate file. If I have an open file and I press a shortcut control F or command F on Mac, the search tool is going to pop up. So in our text box, let's do a search for Lauram. And it tells us that we have 13 search results. We can navigate between each one with the enter key. You can also go backwards with shift enter or you can use these up down arrows that are in the search menu. You can also filter your search to match the case of your search terms. And you can also match whole words only. And you can also do search and replace. So if I click the chevron arrow here on the left side, we can toggle the visibility of the replace menu. And let's say I want to replace the word Lauram with the word unicorn. And here I have the option of preserving the case, meaning that like in the first match, Lauram is capitalized. So if I select this option, the word unicorn is also going to be capitalized when I replace it. And we can replace the first match by pressing enter or click this replace icon here. And you can see that the case was indeed preserved from the original Lauram word. And if I click replace again, it's going to replace the next match and so on. And if you're feeling really confident, you can click the replace all matches to replace all of them simultaneously. All right, let's close the replace menu for now. And let's run a search again for the word unicorn. So now we have 13 matches. Now if I only want to search inside the first paragraph, we can do that. So I can select just the first paragraph in the editor. And then on the search menu, I can click the find in selection. So now when I do that, we now only have two search matches instead of 13 like before. So that's searching in the individual open file. If we want to run a search in the entire project, we can go to the activity bar on the left and we want to go to the search icon. So, let's search for the word margin. And it looks like we have one result in the style.css file. It also shows you a snippet of the line that the match is in. And we can replace right here. So, in the replace text box, I'm going to replace margin with padding. And in the style.css file match, what we can do is replace on the individual line, we can also replace all matches in the file. So let's click that replace button. And now let's go to our style.css file. And we can see that the margin zero has now turned into padding zero. Now a lot of times you are probably going to want to actually open the file that the search result is in. So let's do another search in the project for the word unicorn. We'll get all the results of the word unicorn which are in the index.html file. And you can doubleclick on one of the lines to open the file and go to that search match. Another way that you can search is to search in a specific folder in your project if you don't want to search through your entire project every single time. So, in the explorer, let's create some subfolders. So, I'm going to create a new folder here. I'm going to call it styles. And then I'm going to select the CSS file, click and drag it into our styles folder. And I do want to move it. So, now the style.css file is inside the styles folder. So now I can rightclick this folder and go to find in folder. And now let's search for padding. And we do have our result here. And let's try searching for unicorn because we know that's in the index.html file. And there's no results found because we're searching only in the styles folder. All right, I've shown you how to work with files and write code in VS Code. Now, let's get to the good stuff, which is customizing VS Code so that it looks exactly the way you want it to. [snorts] Now, VS Code allows you to use extensions, which are plugins that can customize and add different functionalities to the program. One of the most popular types of extensions are themes. Now, to browse and install themes on VS Code, you want to go to the activity bar and go down here to the bottom and click the extensions icon. This is going to open up the VS code marketplace where you can install themes and other extensions. So to search for themes, you can type in theme here in the search bar. You can also filter here. Go to category and select themes. And there's going to be two types of themes. One is the overall UI theme of the application. And then you have icon themes for the different file type icons. So you can browse through here. And let's click on a theme here. One dark pro. And if you want to install it, you can just click this install button here. And VS Code is going to install and also automatically load the theme. And this theme comes with different sub themes. So you can select whichever one you want to use. Now let's search for an icon theme, too. I'm going to type in icon. And I usually use the material icon theme here. So I'm going to click to install it. There we go. And if you clear your search by clicking this button here, you should be able to see all of your installed extensions. And if you open one of them, you can click the set color theme button if you haven't set it already, or set file icon theme to load the theme. Now, once you have installed a bunch of different themes, you can switch between the themes by clicking this gear icon here at the bottom of the activity bar. Then go to themes and let's try color themes. And this pop-up menu appears up on the top and you can click to select one of them. But one thing I like to do is use the arrow keys to navigate between the themes so you can quickly see which one you like. And one handy thing that you can do is with the file explorer, if you want to check out your different file icon themes and compare them, again, click the gear icon, go to themes, and let's select file icon theme. And now if we use the arrow keys, you can see how the icons change depending on which icon theme is being used. So again, I'm using the material icon theme. All right. So aside from themes, other extensions that you can use are plugins that can make writing code easier and more efficient. And I'm going to show you the two extensions that I like and use the most. The first one is called Prettier. So if we search in the marketplace for prettier, we can find it here. Prettier code formatter. So prettier is a super useful extension because it's going to make your code look more pretty by enforcing a consistent style. So for example, it can properly indent your code as well as add semicolons to the end of lines that need them. And you can customize its setting to your own preferences. So let's install Prettier and let me show you what it can do. So when you're writing code, you can manually run prettier in order to pritify your code, but I personally like configuring VS Code to automatically run prettier anytime you save a file. So to do this, let's go to our settings. So in the activity bar, we can click the gear icon at the bottom and go to settings. You can also use the shortcut control, or command comma on Macs. And the setting that we're looking for is called the default formatter setting. So you might notice that we have some commonly used settings and you can find default formatter here. You can also use a search bar. Let's search for format and we can find default formatter here as well. So on the default formatter we want to make this prettier. So in the dropown we want to select prettier code formatter as our default formatter. And we also need to find the um format on save settings. So here up at the top, format on save. Just want to make sure that you check this box to run prettier anytime you save a file. All right. So let's test this out. So, in our HTML file, what I'm going to do is select all the code, and I'm going to remove all the indentation by hitting shift tab until everything is not indented anymore. So, now when I save, this should run prettier. And now we can see that it added all the indentation that we needed back into our code. And it can also catch syntax errors in your code. So let's try I'm going to delete the closing body tag. And I'm going to save. And now you might notice in the bottom right hand corner here we have the prettier label and that is in red. This means that prettier has found an error. So if I click the label it's going to open the bottom terminal and it's going to show us some information about the error. So if we look here, we can try to find the error here. And it says unexpected closing tag HTML. So this is basically telling us that it was expecting to find a closing body tag, but instead it found a closing HTML tag after the opening body tag. So, if I go back and I read the closing body tag and save, then we can see that the prettier is no longer red. Okay, so that's prettier. Let's also go back into the extensions marketplace and we want to look for another extension called live server. So this live server extension runs a local server and also opens the website in your browser. So the one that I use is this one by Ritwick day. It is kind of old in that it hasn't been updated in a long time, but it still works fine. So I still like using it. So I'm going to click to install and let's go back into our files. So in our editor now in the bottom status bar we have a go live button. [clears throat] So if we click this it's going to start a local server and it's automatically going to open a browser window for our local website. Now by default it is going to run on port 5500. So the URL here is 127001 col 5500 which is the port. And the really nice part of live server is that the local website is automatically going to update when we save our code changes. So in our code in the H1 tag, I'm just going to add a bunch of exclamation marks. And when I save, you can see that the website has automatically added it without me having to do anything. And this is really handy so that you don't have to keep manually refreshing your website anytime you make a code change. Now, if you want to stop your local server from running, what you can do is go down to the status bar down here and click the close server port 5500, and it's going to close the server. Next, let me show you a few ways that we can adjust the settings in VS Code to start customizing its appearance. One thing that we can change is the font family that we're using in the editor. So let's go to our settings and under the commonly used section if we scroll down we should be able to see the font family. So by default it is using consolus but you can add any font family that you have installed on your computer. I'm going to add Cascadia code. And you might notice that the font family did change. might not be super obvious but you can change them here. Another thing you can do is to change the font size of the code in the editor panel itself. And by default it is at font size 14. We can change it to anything we want. Let's try making it a little bigger and change it to 16. And now the text in our editor is a little bigger and it's not affected the text in the sidebar or in the tabs. Another thing that we can do is we can control the zoom of the font size in the editor using our mouse wheel. So we do need to enable that setting. Can keep scrolling down until we find editor mouse wheel zoom. So if you check this box then you can zoom the font of the editor by holding down control or command on Mac and using our mouse wheel. So I'm holding down control cuz I'm on Windows. If I scroll up, it's going to increase the font size zoom. If I scroll down, it'll decrease the font size zoom. However, if you want to reset this zoom if you've changed it, there's no easy way to do it. But it is possible through the command pallet, which is another very powerful CSS feature. So, the command pallet lets you access features and commands in VS Code by searching for them. To open the command pallet, use the shortcut control shiftp or commandshiftp on Macs. And then you can type in the command that you're looking for. So what I want to do right now is reset the font size in the editor. So I'll type in reset font. And we have the option reset editor font size. So I'll press enter. And now the font size zoom in the editor has gone back to the default. And the command pallet is very handy because you can often access commands a lot more quickly through the command pallet and just typing in then rather than going through the menus and trying to find the menu command that you're looking for. Now let's say you want to zoom in on the entire application, not just the text that's in the editor panel. You can do this with the shortcut control or command on Mac and the plus sign. So I'm pressing control plus and it's zooming in everything. And you can zoom out with control or command minus. And let's say you've zoomed in your UI and you want to go back to the default zoom. You can go down to the bottom status bar and you might see a magnifying glass. Right now it's telling us that we are on zoom level three. So we can click the reset button to reset it. We can also use these plus or minus buttons to increase or decrease the zoom. And if we want to reset it, we'll hit reset and it goes back to the original zoom. I am going to zoom in a little bit so you can see everything more clearly in the video. Now, there is a shortcut for this. It is control or command on Mac and then zero. But it has to be zero on the numpad and it doesn't work with the zero in the number row above the letters on your keyboard. And that can be a little bit annoying. But the good thing is that another feature of VS Code is that you can modify and set keyboard shortcuts for basically any command. So what I want to do is I want to map the control and then the zero in the number row to reset the zoom. So to get to the keyboard shortcuts, we can go down to the bottom of the activity bar, click the gear icon, and go to keyboard shortcuts. And speaking of keyboard shortcuts, we can toggle the visibility of the sidebar using the shortcut controlB or commandB on Macs to toggle the visibility. I'm going to hide it so we have a little more space on the screen. So now we're here in the keyboard shortcuts and we have a whole bunch of different shortcuts here. Fortunately, we also have the text box that we can type in our search. I want to do the reset zoom. So I'm going to type in reset zoom. You can see here we have the view reset zoom. And currently it is bound to the control and then numpad zero. So I want to change this key binding. So if you hover over one of the shortcuts, you'll be able to see this edit pencil icon on the left. If I click on it, you'll get a pop-up window to input the key combination that I want to map to the shortcut. So I'm going to press control0. And it tells us that this combination is already being used. And we can click to see where it's being used, which is focus into primary sidebar. So if you press control0 on the number row, it's going to open and or focus a sidebar. I don't really need to use that very much, I think. So let's go back to reset zoom. And then I'm going to click to edit control0. And we already know the existing um key binding exists. So I'm just going to press enter and it's going to override that key binding for the focus on sidebar. So now we can see reset zoom has a key binding of controll0. So let's test this out. I'm going to zoom in on the UI and now let's try to reset the zoom with control0. And it works. And I do also have a whole video on VS Code shortcuts that I use the most. So, if you'd like to learn more about shortcuts and which ones are the most useful in my opinion, I do have that video linked down below. Now, the command pallet has a couple more functions that can help you navigate opened files more quickly. So, if I press control shiftp, the menu opens, which we used previously. And you might have noticed that there is a right angle bracket in the text box here. And this looks kind of similar to the angle bracket that you might see in the command line. And it signifies that we can run commands here. But we can also do other things in the command pallet as well. If I just press control P or command P on Mac without that shift, then the command pallet opens, but there's no angle bracket. And it tells us to append a colon to go to a line or an at symbol to go to a symbol. So if I press colon now I can type in a line number let's say 100 and it's going to jump to line 100 in the current opened file which it has done here. Then if I type p and let's type in the at symbol it's going to display all the items or symbols in this file again depending on what type of file it is. For HTML elements, it's going to show us the different HTML elements or tags in the file. And for CSS files, you can navigate through a lot of selectors. I'm demonstrating this with a different CSS file just because it has a lot of styles already. So, we're going to open the command pallet, control P, and type in at. And now we can see all the different selectors that exist in this file. So, you can browse through the selectors and choose one you want. You can also type in the selector if you already know what you're looking for. So I'm going to look for a class of blog and I want to go to let's say blog title. So I'll press enter and we've jumped immediately to the blog title selector in our CSS file. Another way that you can browse symbols is by opening the sidebar and down here going to the outline and expanding that. And let's drag this up. And this is another representation of all the different symbols in our file. And we can scroll down to look for the one that we want and click to go to that selector. And you can also click the collapse all if you want to simplify and only show the top level symbols in the file. Next, let's take a look at VS Code's integrated git tool. We can get to it by going in the activity bar and clicking the source control icon. and we don't currently have a repository. So let's click the initialize repository button. So now we've created a repo. And in this changes panel here, it's telling us that we have three files with changes and they all have a U next to them, meaning the files are unttracked and they do not yet exist in the repository. So we want to stage these files to get ready to commit them. So, if I hover over the changes, I can select stage all changes. And now we've staged all of our changes. And we can now make a commit. So, I'm going to add a commit message. I'll just type initial commit. And then we can press the commit button. By default, it's going to be on the main branch. And then we can publish our branch. since this repo is not up on GitHub yet. So, we click to publish branch. Um, if you haven't connected your GitHub account to VS Code yet, at this point you may get a prompt to sign in with your GitHub account and authorize VS Code. Once you've done all that and connected your accounts, when you click publish branch, you'll have the option to publish to a private or a public repository. I'll just do private for now. And now we can see that it is publishing our repository to our GitHub account. And you can find more git commands if you go in the changes panel and click the three dots menu here. And pretty much anything that you normally do in git, you can do here in this integrated tool. And you can see your repository information and branch information. If in the source control three dots menu, you check the repositories box. You can also see info down in the bottom status bar. We can see that we are on the main branch and if we hover over it, it tells us the repository that we are working in. VS Code also comes with an integrated terminal so that you can run command line commands directly in VS Code. The terminal lives in the bottom panel and you can open that by going up to the top menu, clicking the toggle panel button to open it. You can also just open the terminal directly with a shortcut control backtick or command backtick on Macs. And if you don't know the backtick key that is under the tilda symbol, which is the squiggly line. So controlbacktick will open a new terminal window. Now when you open a terminal window, it's automatically going to open with your default shell program. I'm using PowerShell as my default. And you can create multiple terminal windows um in VS Code as well. So if you click the plus icon, it's going to make a new terminal window. So now you can see on the right sidebar, we have our terminals listed. We currently have two PowerShell windows. And you can create a terminal using a different tool if you want by clicking that down arrow next to the plus symbol. And then you can select a different program. Let's open one with Git Bash. So now we have git bash next to it. And you can delete or kill any of your terminals by clicking that trash can icon. And you can have these multiple windows in a split view kind of like we did with the editor. So you can click and drag to whatever part of the terminal you want it to show. So now I have PowerShell in the left side and we have bash on the right side. And if you kill all of your terminals, the bottom panel will automatically close. Next, let's take a look at how you can debug in VS Code. I'm just going to use a basic example here with vanilla JavaScript. So, in our script.js file, I've added some code. Here we have two constants. We have array items, which is an empty array. Then, we have new item, which is a string coder coder. Then below that, we have an add item function that adds the new item into the array and then it returns the array and then we are executing that function. So, I'm going to add some break points in our code here. We can do that by hovering to the left of the lines. So, let's add one here, here, and here at the end. And let's also make sure that we are loading our script.js file in our index.html file. So, in our head tag, um, let's also just for the heck of it load our styles. So, link CSS and we're loading our style.css file. I like adding a forward slash just to make sure we go to the root every time we have a file path. Let's also load our JavaScript file with a script tag. I'll select the script source. And we're going to load script js. And actually, I think my path for the CSS file is incorrect because we added that new subfolder. There we go. And then I'm also going to add a defer attribute so that it'll run our script after the DOM loads. I don't know if that makes a huge difference in our example here. So now we can get our debugger started. So the first thing we want to do is make sure that we are running our local server. So down in the status bar, I'm going to click the go live button and we're running our local website now. And we do need to keep in mind that we are running our local website at port 5500. Now let's run our debugger. So in the activity bar, we want to go down to the run and debug tool and then we want to click run and debug. And here it's going to prompt you to select a debugger. I'm going to select web app chrome because we are using a website. I do usually use Firefox as my browser but the integrated debugger works with Chrome. So now we have loaded our debugger and it's also created a launch.json file where we can configure the debugger. And if we go to our explorer, I just want to show you really quick that the launch JSON file is in this new folder. VS Code that we've created. So all the configuration that we are going to modify is going to be just for this current project folder. So let's go back to our debugger. Now in the launch JSON file, it's going to launch the debugger by default in port 8080. This is different from our current local server 5500. So I'm going to change this port in the launch JSON file to match to be 5500. So now we can launch our debugger by clicking this green play button. All right. So now what's happened is that Chrome has opened a new window and it's loading our local website localhost 5500. And in VS Code, we can tell that we are now in debugging mode because the bottom status bar has changed color. And we also have this floating toolbar with different options for debugging. You can pause or continue. You can step over, step into, step out, restart, and then stop or disconnect. And currently we are paused on the first breakpoint that we added, which is down here. And it is highlighted in yellow. And the breakpoint is has that sort of yellow arrow symbol as well. And we can see that in the sidebar we have the values of our variables. So we have array items which is currently empty. And we have the new item variable with the value coder coder. And let's try continuing to the next break point with the continue button. So next we can see that the item is coder coder and if we press continue again then the array has been updated to have the coder coder item added to the array and if we keep going then we've now gone to all the break points so the debugging has stopped and if you want to restart debugging we can press the restart button which will start the whole process over again. And also, you might notice that in Chrome, the window is currently sort of stuck in the reloading. And if I open up the dev tools in Chrome, if I dock to the bottom, we can see that the we have an overlay over the website and it says paused in debugger. And again, that's because we have the debugger running here. So we can just keep continuing and then once we finish debugging it stops debugging VS Code and the website finishes loading in Chrome and it doesn't have that overlay and message anymore. All right, so that's it for debugging and I did want to mention a couple of other settings that you might like to use. Now we have this mini map here and I know that some people really don't like it. So you can hide it by going to the command palette with control shiftp or commandshiftp on Macs and search for mini map and we can toggle the mini map and hide it if you don't want it. And [snorts] another one that you might not want to see is the AI integrations in VS Code. For example, at the bottom status bar, we have this finish setup here um for Copilot. And then there's some other things that um is kind of automatically kind of tied in. So if you want to hide that, let's go to the settings using control comma or command comma on Mac. If you search for AI, you can look at the different AI settings. So one thing you might want to do is uncheck the show AI search toggle. And they also have a chat disable AI features. So you check this to disable it. So that will hide that message in the bottom status bar and also is going to hide the AI that was in the right sidebar. So if I uncheck it, it'll show um different AI agent options. So if you want to hide that, it'll disable it and then hide it from the right sidebar. Now, one other feature that I wanted to show you which is really useful is the ability to have multiple profiles in VS Code. Now, each profile is a collection of its own settings, extensions, and UI layouts, and you can create and switch between them. And this can come in really handy if you want to have different configurations for, you know, if you're programming in different languages. So, let's say we want to make a new profile to program in Python. So, we can create a new profile by going in the activity bar to the bottom gear icon. Then we want to go to profile and in the profile menu you can select from existing profile. So I have default and then I actually did make a new profile called demo just for the purposes of this video. And if you go to profiles this will open the profile menu. So in the left sidebar we have the current profiles listed. You can see that we currently have the demo profile active. And then the right panel here is going to tell you the source for the settings that it's using as well as snippets and extensions for that profile. So if we expand extensions, these are the extensions and themes that we installed earlier in the video. So this is handy because if you want to create a new profile, you can use existing profiles settings um so that you don't have to do everything from scratch if you don't want to. In addition, you can assign different profiles to specific folders and workspaces so that anytime you open those folders, VS Code is going to automatically load that profile for that folder. All right. So, let's create a new profile. So, we want to go to the sidebar and we want to click the new profile button. And this arrow on the right lets you create new profile based on a template that they have already. So they actually have a Python template as well as Dock Rider, data science, etc. I'm just going to create one from scratch so you can see how that looks. So I'm going to click the new profile button. And let's give this a name. I'm going to say Python. And we can also customize the icon, meaning that this bottom gear icon can be basically whatever we want. So, since it's Python, let's search for snake and select the snake profile icon for our Python profile. Then, if we scroll down a little bit more, you can, you know, select a different profile if you want to base this current profile off of something else. So, I'm just going to start from scratch. So, I'm going to select none and, you know, have none selected for all of our different contents. And then click the create button. All right. So now we have our new Python profile created. All right. So now in the sidebar we have our new Python profile and we can switch to it by clicking this check mark icon. So now we are active in our Python profile and we can see that if we go to for example the extensions marketplace we have zero installed extensions. So let's say we want to install Python related extensions. So I'm going to install this Python extension. So it's installing multiple Python extensions al together. So now if I clear our search now we can see our installed extensions. We have all these different Python ones. So let's say we want to switch to a different profile. So in the activity bar, I'm going to go down to our profile icon, which is now the Python one. And let's say we want to switch back to default. So now you can see the theme changed because for this default profile, I have a different theme installed, which is coder coder dark, which is my own theme that I made. And you can see that the extensions also are a different set of extensions for this default profile. So that's profiles. I found it, you know, pretty helpful when I want to have different collections of settings and extensions. All right, so that's how to get up and running with VS Code. I hope that you like this video. Let me know down in the comments if you did like it or if there's anything that you think that I missed. And as always, thanks for watching and we'll see you in the next one.