Visual Studio Code

Visual Studio Code is a fast and lightweight cross-platform code editor for writing modern web and cloud applications. This course shows you how to debug, refactor, peek and find references, get intellisense and autocomplete, use the multi-cursor, run task automation using Gulp or Grunt, and work in a variety of languages and platforms like node.js, ASP.Net, JavaScript, and TypeScript.
Course info
Rating
(470)
Level
Beginner
Updated
Aug 28, 2015
Duration
4h 11m
Table of contents
Course Introduction
Get up and Running with VS Code
Getting Ready for Node or ASP.NET 5
Refactoring
Themes, Preferences, and Keyboard Shortcuts
Language Features
Version Control and Git
Debugging
Integrating Code with External Tools via Tasks
Description
Course info
Rating
(470)
Level
Beginner
Updated
Aug 28, 2015
Duration
4h 11m
Description

Visual Studio Code is a fast and lightweight cross-platform code editor for writing modern web and cloud applications. This course shows you how to debug, refactor, peek and find references, get intellisense and autocomplete, use the multi-cursor, run task automation using Gulp or Grunt, and work in a variety of languages and platforms like node.js, ASP.Net, Javascript, and TypeScript. You'll be a faster and more efficient Web developer!

About the author
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Play by Play: Extending the Browser
Beginner
38m
30 Apr 2018
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

Course Introduction
If you're anything like me, you probably do a lot of development with a lot of different languages and platforms and different operating systems even these days. And development has changed, that's the bottom line. Whether you're working on a Mac or Windows or Linux, sometimes all three, or maybe you're working with Node and Angular and Gulp and TypeScript or maybe it's Ruby or maybe your things Python or working with Doccer. How about ASP. NET or C#? When you have to work with so many different tools and platforms like I do, you really want to make sure you have a good solid editor. And that's where Visual Studio code steps in. Hi I'm John Papa with Pluralsight, welcome to Visual Studio Code. When you're working for cross platform with so many different technologies, it's really important to find something that's both fast and powerful that works cross platform. Visual Studio Code does this. And in this course I'll show you how you can use Visual Studio Code for everything from web development and debugging and creating tasks and running them. To just editing markdown documents in multiple different languages.

Get up and Running with VS Code
Visual Studio Code is a smart lightweight and fast cross platform coding editor. Now it's time for us to get started with code and install it. Then we'll set it up and we'll get comfortable with the layout and the tools in code. The first step, of course, is to go and download Visual Studio Code. And we'll do that from code. visualstudio. com. And here you'll see a button right at the top of the screen, just like this. Now remember you can download this for OS X or Windows or for Linux, so make sure you pick the right download for your OS. So let's flip over to Chrome

Themes, Preferences, and Keyboard Shortcuts
One of the great things about editors is they really allow you to customize how you're using them. And Visual Studio Code lets you do this with themes and preferences and keyboard short cuts. This module will take a look at three of these and see I can customize them to suit you. We'll start things off by taking a look at the themes that you get out-of-the-box. There's a light theme and then there's a dark theme. One there's also a high contrast theme when you're working with Windows. One of the most commonly voted up user voice items or Visual Studio Code I the ability to create custom themes. The product team left a comment saying that that's something we're looking seriously into and should be coming in the very near future. And that's good news. So let's take a look at how you can use these and the rest of the features to customize your Visual Studio Code experience.

Language Features
There is some pretty awesome language features in Visual Studio Code. Of course your mileage may vary based upon which language is important to you. So in this module we'll take a look at the kinds of language features that you have. And at the time of this course, there's basically three categories, what I call the basics up top, where you get the syntax coloring and bracket matching and stuff that you kind of just come to expect from any kind of editor for the basic languages. If it's got these, at least it recognizes what these languages are, right? So some examples of those in code are going to be like Ruby or Visual Basic or C++. Now there's a second level, which I kind of call, you know, you adding some intelligent help. For these we get things like CSS and HTMLs and JavaScript, specifically like ES5 and JSON files Less or Sass. In addition, just recognizing that the language exists and that you get some basic coloring and matching, you also get Intellisense or Linting or Outlining or some other features as well. You also get some basic navigation. Finally we kind of get the richest experience, which right now is C# and TypeScript. So what makes this rickets, because these guys happen to be able to take advantage of their compilers, like the TypeScript compiler or Roslyn for C#. So it can find all the references and do refactoring and basically jump through hoops for us. Now over time you're going to see more and more languages appear in the basics level and then kind of some of them will migrate up to the second and third levels as well. So let's take a look at a few of these from each category, so you can see what they have to offer.

Version Control and Git
Using source control is an integral part of any development experience. So Visual Studio code has some integration with git and version control. This module will take a look at what it offers for us. Out-of-the-box code integrates with git, that means you can use any git provider that you want. Of course you have to install git first and you can do that right here from this download if you haven't done so already. And once you do you can connect to any local repo or a remote repo, such as one on GitHub. Do you have to use git commands right out of code? Of course not. You can use another tool like source tree or smart git or you can just revert back to the command line too. The commands inside of Visual Studio code are just a convenience. Some of the most popular remote online providers, that you can use the git, are things like GitHub or Visual Studio Online or Bitbucket. But remember you can use any git provider you like. But to get things started let's take a tour of all of codes git features. Most of these can be found inside the git viewlet, but there's others as well, like in the status bar. We've also go gutter indicators for files. They'll tell us things like hey have you got lines added or changed or removed? And if you'd like to see what's happening behind the scenes, you can actually take a look at the git output too. And of course any git tool wouldn't be complete without being able to show you what's changed and also what those diffs are. So let's step right in.

Debugging
I love writing code, but sometimes I need to debug my code to make sure it's doing what I think it's doing. And one of the most powerful features in Visual Studio code is its debugger. So this module let's take a look at several ways that you can debug your code. Now you might have a simple node server to crank up, or maybe you just want to debug typescript that's been compiled to JavaScript and you have source maps. Or maybe it's just minified JavaScript. There's a lot of things that we can do baked out-of-the-box with Visual Studio code. And at this time, node server debugging is available, ASP. NET server debugging's also on its way. And you can debug this on all the platforms as well, OS X, Linux, or Windows. We'll go through how you can set up launch configurations basically just a JSON file that sets up how you want to debug and how you want it to behave. And of course we'll walk through the debugging experience, all the different keystrokes that you have the different things that we can do. And the code inspections that we can go through and attaching to processes, maybe you've already got a process running, and you just want to attach the debugger to it. And of course no debugging experience in the web would be complete without handling source maps. So we'll take a look at how we can do that too. So straighten up, get ready, and let's dive into some debugging.

Integrating Code with External Tools via Tasks
Having a build processor automating different kinds of tasks like transpiling code from Less to CSS or typescript over to JavaScript. It's just kind of par for the course for working in the web world. So it can be helpful when Visual Studio code can integrate with these task runners in a lose way that you can pick which one you want to use. In this module we'll take a look at how you can integrate with task runners from Visual Studio code. So in this module we'll take a look at how vs code can leverage some of those task runners and the different tools. Because you might not have a task runner like gulp, but you might just want to make sure you can transpile your ES6 code using babel. We can do that. So we'll demonstrate how to do this by connecting to different tasks with the task JSON file. We'll take a look at task JSON and show how you can configure it to transpile with babel or typescript too. And sometimes we might want to pick up any problems that these things detect, like js int and any issues it has. And we can add those right to the warnings list right inside of ES code, that's using something called problem matchers. Vs code can detect certain kinds of task runners, like gulp, grunt, and jake, so if you have one of those files in your project, it'll automatically pick up those tasks by default and that's pretty cool. It makes it easy to run them right from the command pallet. So we've got a lot to cover, let's dig in and show how you can use the tasks.