Install Visual Studio Code (VSC)

In this video, you're going to install Visual Studio code on your machine. Visual Studio Code is a text editor. It's not like the text editor on your machine. You might use to jot down a few notes. This is one specifically designed for programming languages, so it's going to make it really easy to actually write JavaScript code. This is where we're going to write all the code we write throughout the course. We can learn a bit more about this one Visual Studio code by going to code dot Visual studio.com. Aside from being my favorite text editor, Visual Studio code is free open source and it runs everywhere. So regardless of what operating system you're using for this course, you are going to be able to install VSC and configure it exactly as I have my local copy set up for this course. I've actually completely uninstalled all of my plugins, themes and settings. I deleted Visual Studio code completely and we're going to go through the process of setting things up from scratch. We'll start off just by using the default features. VSC comes with JavaScript support and as we move through the course we'll add on and customize Visual Studio code, creating a better development environment. So if you don't have a text editor you already use or you haven't used VSC before, I'd recommend giving it a try throughout this course as you'll get the added benefit of being able to set up your local development environment exactly as I have my local development environment set up. If you don't want to use VSC, there are other options out there. In the past I used Atom, this was a text editor released by GitHub. You can also use Sublime text, which was a very popular choice in the past. And lastly, there are more complex editors like Webstorm. Webstorm isn't free, but it does come with a heck of a lot of features. It's more of an IDE than a text editor, but for this course we don't need a lot of those features. I prefer Visual Studio code, so let's go ahead and actually kick things off by downloading the build. We're going to run through the process of just installing it real quick. Once we're done, we're going to crack it open and make sure it was actually installed successfully. This is where we're going to write all of the code throughout the course. So I'm going to be keeping this program open from basically right now until the final video. Let's go ahead and crack that one open. And the process is going to be a little different for each operating system. I'm going to assume that you are used to installing things, so hopefully you can get through that process without too much trouble. Up here I have my downloads window. I was just given the application to drag to my applications directory on a mac. I'm going to do just that and then all we're going to do is crack it open and make sure it actually works. I'll go into applications down to Visual Studio code. I'm going to open that one up and the first time you open it, you might need to accept some permissions or change some stuff. Mac typically does require some sort of confirmation, like this window right here. And once we click open in that window, we should actually get brought into the program right here. What are we seeing? We're seeing the welcome screen for Visual Studio Code. This welcome screen is just trying to guide you through some ways to get started or ways you can customize the program. And we are going to do a little customization right now. What we're going to do is install a couple of plugins that are going to make life a whole lot easier. The first thing we can do is just uncheck this box. We don't need to see this welcome screen every single time we open it up over here, this little package icon, this is where we can install new plugins. All of these plugins are going to customize the behavior of VSC in some way. The first one we're going to grab is called Sublime Text Keymap. This plugin is going to switch the keyboard shortcuts for Visual Studio code from their defaults to the defaults popularized by sublime text. While I don't like the sublime text editor, I do think they really nailed it with the keyboard shortcuts. This is a super popular plugin. We got about half a million downloads, so we're going to go ahead and click install to install this one. Now in order to actually have this plugin take effect, we have to reload things, but we're going to install one more plugin before we do that. This course is going to be using modern JavaScript from the beginning and in order to support some of those features, there's just one plugin we have to install to find this. We're going to search for ES6. We'll talk more about exactly what ES6 is later. For now, the plugin we're looking for is called Babel. ES6 Slash is seven and these are just version numbers, so we're supporting more recent versions of the syntax. This is going to make sure that as we use those new modern features, we're actually able to have a text editor that supports them. Now we can just click install for this one as well, and those are the only two we're going to be using for the moment. For now, we can go ahead and click reload. This is going to completely reload Visual Studio code, making sure those plugins are actually used and now it's time to go ahead and move on up above new features are available for sublime text. Keymap three. Do you want to enable? Sure. Let's go ahead and do just that. All right. So we have Visual Studio code all set up. We can go ahead and close down that welcome screen. At this point, it's asking us to open up a new folder for our project. We will do that just a bit later in this section. What we're going to do in the next video is install a program that's actually going to allow us to run JavaScript. We have a place to write JavaScript now. We need a place to run it. Let's go ahead and jump right into that.