Blog

We write about Ember.js, Ruby on Rails as well as Elixir and Phoenix.

Front End Development

VS Code

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.

1
Module 1 Duration: 285 minutes

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
Using It Duration: 15 minutes
9:00
Welcome and Setup

We’ll get set up and ensure everyone has the required software installed.

Using It Duration: 20 minutes
9:15
Editing Files

We’ll go through the basics of the editor including using & managing editor panes, working with Git, and using the embedded terminal.

Using It Duration: 20 minutes
9:35
Launch Configurations

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.

Using It Duration: 15 minutes
9:55
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.

Using It Duration: 20 minutes
10:10
Debugging JavaScript in Browsers

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.

Using It Duration: 20 minutes
10:30
EXERCISE: Setting up for debugging

Create new launch configurations for these two “debug” modes.

Using It Duration: 10 minutes
10:50
Break

Coffee Break

Using It Duration: 30 minutes
11:00
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.

Using It Duration: 30 minutes
11:30
Debugging JavaScript in Node.js

We can also attach directly to the JavaScript runtime in Node.js. We’ll create a launch configuration together to start the server-side portion of our app in debugging mode.

Using It Duration: 15 minutes
12:00
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.

Using It Duration: 30 minutes
12:15
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.

Using It Duration: 60 minutes
12:45
Lunch

Break for Lunch

2
Module 2 Duration: 120 minutes

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
Customizing It Duration: 60 minutes
13:45
Recommended Extensions for Front End Development

We’ll look at a few extensions that are “must haves” for front end developers who work with TypeScript, JavaScript, CSS and HTML regularly.

Customizing It Duration: 15 minutes
14:45
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 It Duration: 20 minutes
15:00
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!

Customizing It Duration: 25 minutes
15:20
EXERCISE: Customizing the look and feel of our editor

Alter your settings to customize various aspects of the editor’s appearance and functionality.

3
Module 3 Duration: 105 minutes

3 — Extending It

Now that we know how to use and customize Visual Studio Code, we’ll learn to write our own extensions

Agenda
Extending It Duration: 30 minutes
15:45
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.

Extending It Duration: 30 minutes
16:15
EXERCISE: Write a code-snippet extension

Build your own code snippet extension.

Extending It Duration: 30 minutes
16:45
EXERCISE: Write a theme

Build your own editor theme.

Extending It Duration: 15 minutes
17:15
Wrap up and Recap

We’ll recap everything we’ve covered today, and highlight some resources for further research and learning.

Do you Have a Project in Mind?