Visual Studio Code
4 hours, 59 minutes
Become a Master
This course and others like it are available as part of our Frontend Masters video subscription.
Watch Free Preview
Join Frontend Masters
Published: December 21, 2017
Table of Contents
Visual Studio Code
00:00:00 - 00:02:31
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
00:02:32 - 00:08:16
00:08:17 - 00:13:29
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.
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.
00:17:23 - 00:22:09
Mike reviews the course agenda, which covers Documents, Emmet, Refactoring, Type-Checking, and Debugging.
00:22:10 - 00:33:00
After reviewing the course's example project that will be used throughout the course, Mike walks through the steps to set up the project.
00:33:01 - 00:46:21
Mike shows how to create documents with Markdown, a lightweight markup language with plain text formatting syntax.
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.
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.
01:04:28 - 01:09:07
Challenge 1: Rapid Expansion
In this challenge, students use Emmet autocompletions to build the appropriate HTML structure.
01:09:08 - 01:16:02
Challenge 1: Solution, Part 1
Mike walks through the solution to Challenge 1.
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
01:23:19 - 01:32:36
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.
01:32:37 - 01:36:55
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.
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.
01:40:46 - 01:48:23
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.
01:48:24 - 01:54:40
Mike introduces renaming code from simple Find/Replace to refactoring code with Rename in All Files.
01:54:41 - 01:57:27
Challenge 2: Refactoring
In this challenge, students refactor code through two exercises.
01:57:28 - 02:04:30
Challenge 2: Solution
Mike walks through the solution to Challenge 2.
02:04:31 - 02:12:23
Introducing Type Checking
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.
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.
02:24:44 - 02:26:50
Type Checking in VS Code
Mike demonstrates how to activate in VS Code.
02:26:51 - 02:37:33
After showing how to add types with comments, Mikes takes questions from students.
02:37:34 - 02:41:20
Mike illustrates how to define the types of expected arguments. Arrow functions can also be used to define argument types
02:41:21 - 02:46:23
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
02:46:24 - 02:48:07
Mike shows how to define custom named types using the @typedef tag
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.
02:52:58 - 03:12:11
Challenge 3: Solution
Mike walks through the solution to Challenge 3.
03:12:12 - 03:20:15
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.
03:20:16 - 03:28:30
Debugging Node with Editors
Mike reviews the evolution of debugging in code editors.
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.
03:40:39 - 03:43:10
Debugging Chrome with VS Code
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.
03:46:44 - 03:53:31
Challenge 4: Solution
Mike walks through the solution to Challenge 4.
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.
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.
04:01:42 - 04:06:01
After examining typefaces enhanced specifically for coding, Mike shows how to set up the fonts to customize the display in VS Code.
04:06:02 - 04:08:14
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
04:08:15 - 04:10:46
Mike introduces code snippets, which are templates for entering repeating code patterns.
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.
04:12:18 - 04:18:18
Challenge 5: Solution
Mike walks through the solution to Challenge 5.
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.
04:28:25 - 04:29:43
Challenge 6: TSLint Problems
In this challenge, students create a custom task to run TSLint and capture output.
04:29:44 - 04:38:02
Challenge 6: Solution
Mike walks through the solution to Challenge 6.
04:38:03 - 04:45:30
Going further into launch configurations, Mike reviews additional features that can be set when VS Code starts.
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
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
04:59:26 - 04:59:57
Mike wraps up the VS Code course.