1 — Using It
We’ll begin by getting hands-on experience with using the editor by itself, and exploring some of the core capabilities it offers.Agenda
Welcome and Setup
We’ll get set up and ensure everyone has the required software installed.
We’ll go through the basics of the editor including using & managing editor panes, working with Git, and using the embedded terminal.
Launch configurations allow us to start our project, or run other shell commands without leaving our editor. When configured properly, they can be a useful ally in the effort to automate complex operations.
EXERCISE: Creating your own Launch Configuration
We’ll build our own launch configurations to start our app in “run” mode, and open a browser for the root application URL. Make sure you use appropriate placeholder values, so that your code will work for all developers who may check out the project.
We’ll look at the official extensions for connecting to Chrome and Mobile Safari’s debugging protocols, so we can tap directly into the execution environments for desktop and mobile web.
EXERCISE: Setting up for debugging
Create new launch configurations for these two “debug” modes.
EXERCISE: Finding and fixing a few bugs
We’ll get hands-on practice with VS Code’s debugging tools to fix a few failing tests.
Sending HTTP requests
We’ll look at a plugin that turns some easy markup into HTTP requests, which we can use to test our API.
EXERCISE: Fixing bugs in node
We’ll use our new knowledge of debugging Node.js code and sending HTTP requests to troubleshoot a few problems with the server-side portion of our app.
Break for Lunch
2 — Customizing It
Now that we know how to use the core features of VS code, we’ll learn to adjust and tune it to meet our specific preferences and needs.Agenda
Recommended Extensions for Front End Development
Installing a Custom Font
Having a custome font can make a big difference when your job involves looking at code for hours a day. We’ll look at a few popular fonts that are specifically built for programmers, and set them up in VS Code.
Customizing Editor Settings & Styles
Settings can be configured on a global, per-user, or per-workspace basis. We’ll look at some of the available customizations, so that we can make our editor just the way we like it!
EXERCISE: Customizing the look and feel of our editor
Alter your settings to customize various aspects of the editor’s appearance and functionality.
3 — Extending It
Now that we know how to use and customize Visual Studio Code, we’ll learn to write our own extensionsAgenda
Anatomy of a VS Code Extension
It’s easy to create a starter project for several types of extensions: code snippets, themes, and language support. We’ll look at the automatically-generated code for each of these, and set our sights on writing our own extension.
EXERCISE: Write a code-snippet extension
Build your own code snippet extension.
EXERCISE: Write a theme
Build your own editor theme.
Wrap up and Recap
We’ll recap everything we’ve covered today, and highlight some resources for further research and learning.