Installing & Setting Up Visual Studio Code

Full Video Transcript

Hi, I'm Dan Rodney here for Noble Desktop, and I'm going to show you how to install and set up Visual Studio Code. I'll be showing you how to install it on a Mac, on Windows. I'll show you how to set preferences, install extensions, and define keyboard shortcuts.

Installing Visual Studio Code on Mac

Let's see how to install Visual Studio Code on a Mac. First we'll download the software. If the download does not automatically unzip, you'll want to unzip the file. Once unzipped, you'll have an application. Make sure you put it in the Applications folder. Do not launch it from where it is in the Downloads folder. Make sure you put it into Applications and launch it from the Applications folder. Dismiss the security warning once you've launched the app.

We can skip past this initial setup. Normally when working in VS Code, you'll open a folder rather than an individual file, so you can go over to the Explorer panel and open up a folder here. Let me demonstrate with a sample folder here. When I choose this, the very first time you open something in a location, you will get this security warning. Just go ahead and trust the authors, assuming that these are files that you're familiar with and that you have created. Once you dismiss that, you won't see it again for that location on your computer. Now I can open a file here in the Explorer panel, and we can see that it is installed and working.

Installing Visual Studio Code on Windows

Let's see how to install Visual Studio Code on Windows. First we'll download the software. Once the download has finished, run the installer. Accept the license agreement and click Next for a couple times. It's up to you whether you want to put an icon on your desktop or not, but I would recommend adding the "Open with Code" actions to the right-click menus. That will make it easier to access and launch Visual Studio Code later in certain situations.

Setting Preferences

There are a few preferences that I like to set, so let's take a look at those. By default, there's a little mini map over here which allows you to scroll through and kind of get a visual of your code at a high level, but it just ends up wasting space. So you can go into the View menu and choose Show Minimap to hide it.

Next up, we can set a preference that will prevent you from having to side scroll. This is called word wrap, so we can look in our settings and search for "wrap." It's off by default, so let's turn it on and see what this looks like. Here, if I resize my window, you'll be able to see that the lines wrap. You can see all of the lines, all the text. Now if I go back and turn it off, now you'll see that I have to side scroll, that the lines aren't fitting to my screen. So it's much better to have word wrap on so that you don't have to scroll side to side, and the lines will just reflow to fit your window.

Installing Extensions

Let me show you how to install an extension. Over on the left in the Extensions panel here, we can see a bunch of popular extensions, but we can also search for extensions in the marketplace. These are free extensions. As a web developer, I preview in a browser very frequently, so the Open in Browser extension is really useful. You want to make sure you get the top one, not the second one, and you want to install that.

Let me show you how this extension works. In an HTML file, I can right-click or on the Mac Control-click, and I get an "Open in Default Browser" feature. There's also a keyboard shortcut that you can use as well. Notice here that my default browser is Safari. I typically like to use Chrome's developer tools, so I like that to be my default browser for Visual Studio Code.

If it's not automatically going to there, we can go into our preferences for this extension and we can set our preferred default browser. If the extension settings don't load the first time, it just means that you need to restart Visual Studio Code, and the second time it should work. To set the preferences for the extension, we go into the Extensions panel, and you can either use the gear in that panel or over on the right-hand side you can also find the same extension settings. After relaunch, the settings should work, and here you can type in the name of your default browser that you prefer. Again, I prefer Chrome for its web developer tools. The first time I used it, it launched Safari, which was my default browser on my Mac, and now you can see it's using Chrome successfully as the default browser just for VS Code.

Defining Keyboard Shortcuts

Let's see how to define keyboard shortcuts in Visual Studio Code. At the bottom left, we can click on the gear and go into Keyboard Shortcuts. Here you can see the features that you can either add a keyboard shortcut to or change the existing keyboard shortcut.

In HTML, we often select something and need to wrap a tag around it, and there's a built-in feature in VS Code called Emmet. It has a feature to wrap with an abbreviation, but there's no keyboard shortcut for it, so let's assign one by searching for that feature. Once you find the feature, you double-click on it, and then you can press the keyboard shortcut that you want to use. I want to use Option+W on the Mac, or on Windows Alt+W, and then you hit Return.

Let me show you what this actually does. You can go to an HTML file and then select something, and you hit Option+W on the Mac or Alt+W on Windows. Type in the name of the HTML tag you want, hit Return, and it wraps the beginning and end tag around that.

Conclusion and Next Steps

I hope you found this introduction to VS Code helpful. If you're currently enrolled in one of our programs, we look forward to seeing you in class. If you're not, head over to nobledesktop.com and check out our certificate programs, which you can take live online or in person in New York City to learn anything from front-end web development to full stack to software engineering. Lots of different things you can learn at nobledesktop.com.