Install Visual Studio Code (VSC)

Andrew Mead
A free video tutorial from Andrew Mead
A Full-stack Developer & Teacher
4.6 instructor rating • 4 courses • 366,908 students

Lecture description

In this lecture, you’ll install Visual Studio Code. This is the text editor that we’ll be using throughout the course.

Learn more from the full course

The Modern JavaScript Bootcamp

Learn JavaScript by building real-world apps. Includes 3 real-world projects, 80 programming challenges, and ES6/ES7!

29:39:09 of on-demand video • Updated November 2020

  • Learn JavaScript by building three real-world web applications
  • Gain a deep understanding of how JavaScript works behind the scenes
  • Explore the latest cutting-edge features from ES6 and ES7
  • Test your skills and gain confidence by completing over 80 coding challenges
  • Learn how to deploy your application to the web so you can share them with everyone
  • Learn how to use Promises and Async/Await with asynchronous JavaScript
  • Get more done by learning how to debug and fix your code when things go wrong
  • Get access to a free 80 page PDF guide with lecture notes, code samples, and documentation links
English [Auto] 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 dot 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 plug ins, 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 Adam. 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 Web Storm. Web storm isn't free, but it does come with a heck of a lot of features. It's more of an idea than a text editor. But for this course, we don't need a lot of those features. I prefer a 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. Lets 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 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 and 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. Well, we're going to do is install a couple of plug ins 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 plug ins. All of these plug ins are going to customize the behavior of VSC in some way. The first one we're going to grab is called Sublime Text Key Map. This plug in 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 these sublime text editor, I do think they really nailed it with the keyboard shortcuts. This is a super popular plug in. 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 plug in take effect, we have to reload things, but we're going to install one more plug in 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 plug in we have to install to find this. We're going to search for S6 We'll talk more about exactly what S6 is later. For now, the plug in we're looking for is called Babul S6 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 GEMAP 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 the section. Well, 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.