Table of Contents
Visual Studio Code
Introduction
Mike North introduces his Visual Studio Code (VS Code) course. VS Code is a source code editor developed by Microsoft for Windows, Linux, and macOS.Editor Features
After reviewing the trends of text editors for JavaScript, Mike discusses benefits features found in IDE in VS Code.Developer Focus
While showing how VS Code is built on web technology for web developers, Mike discusses how teams from VS Code, Edge, Visual Studio, and TypeScript are collaborating closely.Up and Running
While not requiring extensive tweaking or configuring, Mike reviews that VS Code quickly allows developers to get up and running on various projects: TypeScript, NET, C#, and more. Mike takes a question from a student about getting set up.Course Agenda
Mike reviews the course agenda, which covers Documents, Emmet, Refactoring, Type-Checking, and Debugging.Setting Up
After reviewing the course's example project that will be used throughout the course, Mike walks through the steps to set up the project.
Documents
Markdown
Mike shows how to create documents with Markdown, a lightweight markup language with plain text formatting syntax.Emmet & HTML
Mike introduces Emmet, a text editor plugin for an abbreviation syntax that generates snippet auto-completions optimizing workflows for HTML, CSS, and JSX. Mike reviews Emmet's HTML abbreviations syntax.Emmet & CSS
After demonstrating Emmet abbreviation syntax for coding CSS rules, Mike reviews tips for productive use with Emmet.Challenge 1: Rapid Expansion
In this challenge, students use Emmet autocompletions to build the appropriate HTML structure.Challenge 1: Solution, Part 1
Mike walks through the solution to Challenge 1.Challenge 1: Solution, Part 2
While wrapping up the solution to Challenge 8, Mike shows how to use source control within VS Code.
Code Navigation & Refactoring
Go To
After showing how to do a quick file navigation with the Go To, Mike explains how to perform code searches for type definitions, symbols, and line navigation.Selection
Mike demonstrates the use advanced code selection features such as being able to select the next occurrence or all occurrences of the current selection. Mike takes questions from students.Multi-Cursor & Line Manipulation
After reviewing multi-cursor selection techniques including box select to add or edit the same code in multiple places, Mike demonstrates how to move individual lines of code up and down into the desired position.Peek Editing
Mike shows peek features such as Find All References, which displays an inline editor that allows for navigating between different references and making quick edits.Renaming
Mike introduces renaming code from simple Find/Replace to refactoring code with Rename in All Files.Challenge 2: Refactoring
In this challenge, students refactor code through two exercises.Challenge 2: Solution
Mike walks through the solution to Challenge 2.
Type Checking
Introducing Type Checking
Mike introduces TypeScript's advanced type checking and error reporting functionality in regular JavaScript files.Benefits of Types
Mike reviews the benefits of using types as part of development workflow. Mike takes questions from students.Categories of Type Systems
After discussing the difference between nominal and structural type systems, Mike states that VS Code uses structural type system.Type Checking in VS Code
Mike demonstrates how to activate in VS Code.Annotating Types
After showing how to add types with comments, Mikes takes questions from students.Functions
Mike illustrates how to define the types of expected arguments. Arrow functions can also be used to define argument typesGenerics
Mike reviews how to incorporate type checking for generics. For example, promises that wrap other values, which have their own types, are defined using this concept of genericsCustom Types
Mike shows how to define custom named types using the @typedef tagChallenge 3: Data Layer Types
In this challenge, students update the TypeScript compiler configurations, add type annotations, and troubleshoot errors.Challenge 3: Solution
Mike walks through the solution to Challenge 3.
Debugging
Debugging Node
After showing the less than desirable default debugging experience in node, Mike shows Chrome's Node.js debugging feature that is activated when running node application with the --inspect flag.Debugging Node with Editors
Mike reviews the evolution of debugging in code editors.Debugging Node with VS Code
Mike illustrates how to debug node applications within VS Code by troubleshooting the course demo application.Debugging Chrome with VS Code
Continuing to showcase how to debug, Mike demonstrates how to debug with multiple JavaScript runtimes with VS Code.Challenge 4: Multi-Process Debugging
In this challenge, students find and fix multiple issues with the course project through debugging tools.Challenge 4: Solution
Mike walks through the solution to Challenge 4.
Workspace Customization
Benefits of Customization
After detailing the benefits of customizing a code editor, Mike reviews the areas within VS code that can be modified.VS Code Themes
After demonstrating how to change the color theme of the VS Code editor and icons of the File Explorer, Mike shows how to customize colors in settings.Custom Fonts
After examining typefaces enhanced specifically for coding, Mike shows how to set up the fonts to customize the display in VS Code.Key Bindings
In addition to the default keyboard shortcuts provided in VS Code, Mike demonstrates how custom key bindings can be added through extension files, called keymaps, that mirror other popular editors can be installed. For advanced customizations, key bindings can be made through the VS Code's keybindings.json file.Code Snippets
Mike introduces code snippets, which are templates for entering repeating code patterns.Challenge 5: VS Code Tune-Up
In this challenge, students demonstrate that they can customize the VS Code editor.Challenge 5: Solution
Mike walks through the solution to Challenge 5.
Tasks
Introducing Custom VS Code Tasks
Mike introduces tools for automating tasks, "task runners," that can be run within VS Code. While VS Code auto-detects tasks for Gulp, Grunt, Jake and npm, Mike shows how VS Code can support custom tasks or scripts.Challenge 6: TSLint Problems
In this challenge, students create a custom task to run TSLint and capture output.Challenge 6: Solution
Mike walks through the solution to Challenge 6.
Launch Configuration
Launch Settings
Going further into launch configurations, Mike reviews additional features that can be set when VS Code starts.Challenge & Solution 7: Analyze & Monitor
After stating the challenge that students should build two launch configurations, Mike walks through the solution to Challenge 7.