Visual Studio Code
Table of Contents
Visual Studio Code
IntroductionMike North introduces his Visual Studio Code (VS Code) course. VS Code is a source code editor developed by Microsoft for Windows, Linux, and macOS.
Developer FocusWhile 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 RunningWhile 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 AgendaMike reviews the course agenda, which covers Documents, Emmet, Refactoring, Type-Checking, and Debugging.
Setting UpAfter reviewing the course's example project that will be used throughout the course, Mike walks through the steps to set up the project.
MarkdownMike shows how to create documents with Markdown, a lightweight markup language with plain text formatting syntax.
Emmet & HTMLMike 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 & CSSAfter demonstrating Emmet abbreviation syntax for coding CSS rules, Mike reviews tips for productive use with Emmet.
Challenge 1: Rapid ExpansionIn this challenge, students use Emmet autocompletions to build the appropriate HTML structure.
Challenge 1: Solution, Part 1Mike walks through the solution to Challenge 1.
Challenge 1: Solution, Part 2While wrapping up the solution to Challenge 8, Mike shows how to use source control within VS Code.
Code Navigation & Refactoring
Go ToAfter 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.
SelectionMike 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 ManipulationAfter 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 EditingMike shows peek features such as Find All References, which displays an inline editor that allows for navigating between different references and making quick edits.
RenamingMike introduces renaming code from simple Find/Replace to refactoring code with Rename in All Files.
Challenge 2: RefactoringIn this challenge, students refactor code through two exercises.
Challenge 2: SolutionMike walks through the solution to Challenge 2.
Benefits of TypesMike reviews the benefits of using types as part of development workflow. Mike takes questions from students.
Categories of Type SystemsAfter discussing the difference between nominal and structural type systems, Mike states that VS Code uses structural type system.
Type Checking in VS CodeMike demonstrates how to activate in VS Code.
Annotating TypesAfter showing how to add types with comments, Mikes takes questions from students.
FunctionsMike illustrates how to define the types of expected arguments. Arrow functions can also be used to define argument types
GenericsMike 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 TypesMike shows how to define custom named types using the @typedef tag
Challenge 3: Data Layer TypesIn this challenge, students update the TypeScript compiler configurations, add type annotations, and troubleshoot errors.
Challenge 3: SolutionMike walks through the solution to Challenge 3.
Debugging NodeAfter 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 EditorsMike reviews the evolution of debugging in code editors.
Debugging Node with VS CodeMike illustrates how to debug node applications within VS Code by troubleshooting the course demo application.
Challenge 4: Multi-Process DebuggingIn this challenge, students find and fix multiple issues with the course project through debugging tools.
Challenge 4: SolutionMike walks through the solution to Challenge 4.
Benefits of CustomizationAfter detailing the benefits of customizing a code editor, Mike reviews the areas within VS code that can be modified.
VS Code ThemesAfter 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 FontsAfter examining typefaces enhanced specifically for coding, Mike shows how to set up the fonts to customize the display in VS Code.
Key BindingsIn 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 SnippetsMike introduces code snippets, which are templates for entering repeating code patterns.
Challenge 5: VS Code Tune-UpIn this challenge, students demonstrate that they can customize the VS Code editor.
Challenge 5: SolutionMike walks through the solution to Challenge 5.
Introducing Custom VS Code TasksMike 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 ProblemsIn this challenge, students create a custom task to run TSLint and capture output.
Challenge 6: SolutionMike walks through the solution to Challenge 6.
Launch SettingsGoing further into launch configurations, Mike reviews additional features that can be set when VS Code starts.
Challenge & Solution 7: Analyze & MonitorAfter stating the challenge that students should build two launch configurations, Mike walks through the solution to Challenge 7.