Table of Contents
Visual Studio Code
Introduction
00:00:00 - 00:02:31
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. -
https://github.com/mike-north/vscode-fundamentals
Editor Features
00:02:32 - 00:08:16
Editor Features
After reviewing the trends of text editors for JavaScript, Mike discusses benefits features found in IDE in VS Code.
Developer Focus
00:08:17 - 00:13:29
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
00:13:30 - 00:17:22
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
00:17:23 - 00:22:09
Course Agenda
Mike reviews the course agenda, which covers Documents, Emmet, Refactoring, Type-Checking, and Debugging.
Setting Up
00:22:10 - 00:33:00
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
00:33:01 - 00:46:21
Markdown
Mike shows how to create documents with Markdown, a lightweight markup language with plain text formatting syntax.
Emmet & HTML
00:46:22 - 00:59:36
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
00:59:37 - 01:04:27
Emmet & CSS
After demonstrating Emmet abbreviation syntax for coding CSS rules, Mike reviews tips for productive use with Emmet.
Challenge 1: Rapid Expansion
01:04:28 - 01:09:07
Challenge 1: Rapid Expansion
In this challenge, students use Emmet autocompletions to build the appropriate HTML structure.
Challenge 1: Solution, Part 1
01:09:08 - 01:16:02
Challenge 1: Solution, Part 1
Mike walks through the solution to Challenge 1.
Challenge 1: Solution, Part 2
01:16:03 - 01:23:18
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
01:23:19 - 01:32:36
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
01:32:37 - 01:36:55
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
01:36:56 - 01:40:45
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
01:40:46 - 01:48:23
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
01:48:24 - 01:54:40
Renaming
Mike introduces renaming code from simple Find/Replace to refactoring code with Rename in All Files.
Challenge 2: Refactoring
01:54:41 - 01:57:27
Challenge 2: Refactoring
In this challenge, students refactor code through two exercises.
Challenge 2: Solution
01:57:28 - 02:04:30
Challenge 2: Solution
Mike walks through the solution to Challenge 2.
Type Checking
Introducing Type Checking
02:04:31 - 02:12:23
Introducing Type Checking
Mike introduces TypeScript's advanced type checking and error reporting functionality in regular JavaScript files.
Benefits of Types
02:12:24 - 02:21:47
Benefits of Types
Mike reviews the benefits of using types as part of development workflow. Mike takes questions from students.
Categories of Type Systems
02:21:48 - 02:24:43
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
02:24:44 - 02:26:50
Type Checking in VS Code
Mike demonstrates how to activate in VS Code.
Annotating Types
02:26:51 - 02:37:33
Annotating Types
After showing how to add types with comments, Mikes takes questions from students.
Functions
02:37:34 - 02:41:20
Functions
Mike illustrates how to define the types of expected arguments. Arrow functions can also be used to define argument types
Generics
02:41:21 - 02:46:23
Generics
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 generics
Custom Types
02:46:24 - 02:48:07
Custom Types
Mike shows how to define custom named types using the @typedef tag
Challenge 3: Data Layer Types
02:48:08 - 02:52:57
Challenge 3: Data Layer Types
In this challenge, students update the TypeScript compiler configurations, add type annotations, and troubleshoot errors.
Challenge 3: Solution
02:52:58 - 03:12:11
Challenge 3: Solution
Mike walks through the solution to Challenge 3.
Debugging
Debugging Node
03:12:12 - 03:20:15
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
03:20:16 - 03:28:30
Debugging Node with Editors
Mike reviews the evolution of debugging in code editors.
Debugging Node with VS Code
03:28:31 - 03:40:38
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
03:40:39 - 03:43:10
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
03:43:11 - 03:46:43
Challenge 4: Multi-Process Debugging
In this challenge, students find and fix multiple issues with the course project through debugging tools.
Challenge 4: Solution
03:46:44 - 03:53:31
Challenge 4: Solution
Mike walks through the solution to Challenge 4.
Workspace Customization
Benefits of Customization
03:53:32 - 03:56:24
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
03:56:25 - 04:01:41
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
04:01:42 - 04:06:01
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
04:06:02 - 04:08:14
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. -
https://code.visualstudio.com/docs/getstarted/keybindings
Code Snippets
04:08:15 - 04:10:46
Code Snippets
Mike introduces code snippets, which are templates for entering repeating code patterns.
Challenge 5: VS Code Tune-Up
04:10:47 - 04:12:17
Challenge 5: VS Code Tune-Up
In this challenge, students demonstrate that they can customize the VS Code editor.
Challenge 5: Solution
04:12:18 - 04:18:18
Challenge 5: Solution
Mike walks through the solution to Challenge 5.
Tasks
Introducing Custom VS Code Tasks
04:18:19 - 04:28:24
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
04:28:25 - 04:29:43
Challenge 6: TSLint Problems
In this challenge, students create a custom task to run TSLint and capture output.
Challenge 6: Solution
04:29:44 - 04:38:02
Challenge 6: Solution
Mike walks through the solution to Challenge 6.
Launch Configuration
Launch Settings
04:38:03 - 04:45:30
Launch Settings
Going further into launch configurations, Mike reviews additional features that can be set when VS Code starts.
Challenge & Solution 7: Analyze & Monitor
04:45:31 - 04:51:54
Challenge & Solution 7: Analyze & Monitor
After stating the challenge that students should build two launch configurations, Mike walks through the solution to Challenge 7.
Wrapping Up VS Code
VS Code Extension Recommendations
04:51:55 - 04:59:25
VS Code Extension Recommendations
Mike reviews a few of his favorite VS Code extensions. - -
https://marketplace.visualstudio.com/items?itemName=humao.rest-client -
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.csstriggers -
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
Wrapping Up
04:59:26 - 04:59:57
Wrapping Up
Mike wraps up the VS Code course.
