Visual Studio Code

Course Agenda

Visual Studio Code

Check out a free preview of the full Visual Studio Code course

The "Course Agenda" Lesson is part of the full, Visual Studio Code course featured in this preview video. Here's what you'd learn in this lesson:

Mike reviews the course agenda, which covers Documents, Emmet, Refactoring, Type-Checking, and Debugging.


Transcript from the "Course Agenda" Lesson

>> Mike North: They way this course is going to flow, we're first going to deal with becoming expert users of Visual Studio Code. And then we're gonna get into how we can fine tune it. Customize the way it operates. One of the things that is a little challenging, whenever I'm learning about a new editor like this, is all of the key bindings and all of little tips and tricks.

I'm going to try to sprinkle those on this course like seasoning, right? So we'll learn those as we go add a new one or two with every exercise that we tackle, so that I'm not just dumping a big list of key strokes on you like at ones, which is always difficult.

The first one I'm gonna show you here, this is cmd + D. And I told you you can bring your key bindings with you. So I'm showing you these sublime oriented key binding. You can find this one. It's gonna be add next occurrence under the selection menu. So, if you've got a different key map installed, let me change my resolution here just to make it bigger.

>> Mike North: Cuz the menus are a little harder to see.
>> Mike North: I'm just gonna go down to 720, that should be better.
>> Mike North: So if we say Selection, Add Next Occurrence. So I've got cmd+D there. What this one does.
>> Mike North: Let me go to the README we've been looking at here.

So, if I select, put my cursor inside a inside a word and I hit cmd+D,it will select the whole word. And if I keep hitting cmd+D over and over again, it'll actually select the next occurrence. And you will notice we have multiple occurences here. So I can like add new characters along the way.

This is one that I recommend you, like focus on and try to love. Try to incorporate into development, because it lets you let's see if I can, if it's case insensitive. It is case insensitive. So, if you're trying to like rename a variable or something. This is one way to do it.

We'll look at better ways for that specific case. But if you can now, maybe you're dealing with like an open and close tag of a particular type of dom element or a particular React component, like this is an easy way to go about this.
>> Mike North: So we will learn those as we go, so that hopefully they sink in a little bit better rather than one consolidated dom.

We'll be working with both JavaScript and TypeScript today, you do not need to know TypeScript. We will talk about types, and like what is going on in terms of how TypeScript understands types. But this is not a requirement. It's not required that you know this. If you can work with JavaScript, you should be fine here.

>> Mike North: So with that, let's jump into using Visual Studio code. You can actually click on these links.
>> Mike North: And I'm gonna just click up here which is, Open Preview to the Side. And we're on our next document.
>> Mike North: So, this is the general outline of all of the topics were gonna hit.

We'll first talk about building great documents. Mark down and otherwise. We'll then dive into something called Emmet which is, I've been using Emmet for about a decade. And it's one of these things that if you spend just a little bit of time learning it, even if you only ever get into it at a simple level, it can really speed up your workflow.

It can make mundane things easy and fast. And it is like really impressive to be able to move so quickly to generate HTML with Emmet. So we'll dive into what exactly that is and how to use it. We'll look at some simple and then increasingly complex refactoring cases.

We will talk about Type-Checking, and how we can check our JavaScript, and add type information without making the full transition to using TypeScript. We'll just stick with regular JavaScript and see how much Typescript can do for us, without us actually adopting the language. And then finally, we will deal with all of the great debugging functionality inside VS code.

I think with the exception of the documents, because I don't need us to write a document as an exercise here. These four are each gonna have about like a 20 minute intro, and then exercise, we're gonna do it together.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now