Install Visual Studio Code (VSC)

Andrew Mead
A free video tutorial from Andrew Mead
A Full-stack Developer & Teacher
4.7 instructor rating • 4 courses • 330,159 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. It 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 atom. This was a text editor released by get hub. 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 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 had 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 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 access 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 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 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. Well I don't like the 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 s six. We'll talk more about exactly what yes 6 is later. For now the plug in we're looking for is called Babel S6. Slash Yes. 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 and 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 Qiam at 3. Do you want to enable. Sure. Let's go ahead and do just that. All right so we had visual studio code all set up. We 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 where 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.