Transcription
Hey folks, in this video I'm going to show you how to get up and running with VS Code. This is a beginner-friendly 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.visualstudio.com/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 checkbox, "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 right-click 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 single-click 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 single-click 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 double-click 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 right-click 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 right-click 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 Emmet to generate some boilerplate HTML for us. We can do this by typing an exclamation point. And you can see that it says "Emmet Abbreviation," meaning that Emmet 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 Emmet 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 Emmet 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 Emmet to save time when you're writing your code. I actually have a video on the Emmet 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 "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 are 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 Emmet by typing P for paragraph. Creating content inside the tag with a right angle bracket. And I'm going to add Lorem ipsum placeholder text by typing "lorem." And let's add 100 words. And I want to create 10 of these paragraphs. So, I will surround it in parentheses and then multiply by 10. So now when I hit Enter, we've created 10 paragraphs of Lorem ipsum 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 minimap, which they have here on the right side. And you can click anywhere on the minimap 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 Ctrl+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 "lorem." 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 "lorem" with the word "unicorn." And here I have the option of preserving the case, meaning that like in the first match, "Lorem" 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 clicking this replace icon here. And you can see that the case was indeed preserved from the original "Lorem" 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 "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 "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: 0;" has now turned into "padding: 0;".
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 double-click 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 right-click 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 are 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 settings 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 prettify 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 Ctrl+, or Command+, 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 the 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 dropdown, we want to select "Prettier - Code Formatter" as our default formatter. And we also need to find the "Format on Save" setting. 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 re-add 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 Dey. 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 127.0.0.1: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 "Consolas," 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. It 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 because 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 Palette, which is another very powerful VS Code feature.
So, the Command Palette lets you access features and commands in VS Code by searching for them. To open the Command Palette, use the shortcut Ctrl+Shift+P or Command+Shift+P 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 Palette is very handy because you can often access commands a lot more quickly through the Command Palette and just typing in them 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 Ctrl or Command on Mac and the plus sign. So, I'm pressing Ctrl++ and it's zooming in everything. And you can zoom out with Ctrl or Command and the minus sign. 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 Ctrl 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 Ctrl 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 Ctrl+B or Command+B 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 "View: Reset Zoom." And currently, it is bound to Ctrl and then Numpad 0. 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 Ctrl+0. 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 Ctrl+0 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 Ctrl+0. And we already know the existing 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 Ctrl+0. 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 Ctrl+0. 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 Palette has a couple more functions that can help you navigate opened files more quickly. So, if I press Ctrl+Shift+P, 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 Palette as well. If I just press Ctrl+P or Command+P on Mac without that Shift, then the Command Palette 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 files, 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 Palette, Ctrl+P, and type in "@". 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 "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 untracked 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 Ctrl+` or Command+` on Macs. And if you don't know the backtick key, that is under the tilde symbol, which is the squiggly line. So, Ctrl+` 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 on 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 `arrayItems`, which is an empty array. Then, we have `newItem`, which is a string "coder coder." Then, below that, we have an `addItem` function that adds the `newItem` into the array and then it returns the array, and then we are executing that function.
So, I'm going to add some breakpoints 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 rel="stylesheet" href="/styles.css">`. 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, `.vscode`, 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 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 `arrayItems` which is currently empty. And we have the `newItem` variable with the value "coder coder."
And let's try continuing to the next breakpoint 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 breakpoints, 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 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 minimap here, and I know that some people really don't like it. So, you can hide it by going to the Command Palette with Ctrl+Shift+P or Command+Shift+P on Macs and search for "minimap," and we can "Toggle Minimap" 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 Ctrl+, or Command+, 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 profiles. 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 a new profile based on a template that they have already. So, they actually have a Python template, as well as Docker, 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 checkmark 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 altogether. 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.