Mike North
Stripe
Course Description
Visual Studio Code is a modern, lightweight and full-featured code editor, built from the ground up to suit the needs of web developers - JavaScript developers in particular. In this course, we'll dive deep into using, customizing and extending it.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: December 21, 2017
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Visual Studio Code
Section Duration: 32 minutes
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.
After reviewing the trends of text editors for JavaScript, Mike discusses benefits features found in IDE in VS Code.
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.
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.
Mike reviews the course agenda, which covers Documents, Emmet, Refactoring, Type-Checking, and Debugging.
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
Section Duration: 50 minutes
Mike shows how to create documents with Markdown, a lightweight markup language with plain text formatting syntax.
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.
After demonstrating Emmet abbreviation syntax for coding CSS rules, Mike reviews tips for productive use with Emmet.
In this challenge, students use Emmet autocompletions to build the appropriate HTML structure.
Mike walks through the solution to Challenge 1.
While wrapping up the solution to Challenge 8, Mike shows how to use source control within VS Code.
Code Navigation & Refactoring
Section Duration: 41 minutes
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.
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.
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.
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.
Mike introduces renaming code from simple Find/Replace to refactoring code with Rename in All Files.
In this challenge, students refactor code through two exercises.
Mike walks through the solution to Challenge 2.
Type Checking
Section Duration: 1 hour, 7 minutes
Mike introduces TypeScript's advanced type checking and error reporting functionality in regular JavaScript files.
Mike reviews the benefits of using types as part of development workflow. Mike takes questions from students.
After discussing the difference between nominal and structural type systems, Mike states that VS Code uses structural type system.
Mike demonstrates how to activate in VS Code.
After showing how to add types with comments, Mikes takes questions from students.
Mike illustrates how to define the types of expected arguments. Arrow functions can also be used to define argument types
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
Mike shows how to define custom named types using the @typedef tag
In this challenge, students update the TypeScript compiler configurations, add type annotations, and troubleshoot errors.
Mike walks through the solution to Challenge 3.
Debugging
Section Duration: 41 minutes
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.
Mike reviews the evolution of debugging in code editors.
Mike illustrates how to debug node applications within VS Code by troubleshooting the course demo application.
Continuing to showcase how to debug, Mike demonstrates how to debug with multiple JavaScript runtimes with VS Code.
In this challenge, students find and fix multiple issues with the course project through debugging tools.
Mike walks through the solution to Challenge 4.
Workspace Customization
Section Duration: 24 minutes
After detailing the benefits of customizing a code editor, Mike reviews the areas within VS code that can be modified.
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.
After examining typefaces enhanced specifically for coding, Mike shows how to set up the fonts to customize the display in VS Code.
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.
Mike introduces code snippets, which are templates for entering repeating code patterns.
In this challenge, students demonstrate that they can customize the VS Code editor.
Mike walks through the solution to Challenge 5.
Tasks
Section Duration: 19 minutes
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.
In this challenge, students create a custom task to run TSLint and capture output.
Mike walks through the solution to Challenge 6.
Launch Configuration
Section Duration: 13 minutes
Going further into launch configurations, Mike reviews additional features that can be set when VS Code starts.
After stating the challenge that students should build two launch configurations, Mike walks through the solution to Challenge 7.
Wrapping Up VS Code
Section Duration: 8 minutes
Mike reviews a few of his favorite VS Code extensions.
Mike wraps up the VS Code course.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops