Table of Contents
Introduction
Introduction
Burke Holland gives a set of instructions to install the tools needed for the course, and gives an overview of the course.Editor Tour & Basic Key Commands
Burke tours the editor panels, status bar, and explorer, and gives an overview of the basic keyboard commands necessary to move around the editor.
Customizing the Editor
Popular Themes & Icon Themes
Burke debates light versus dark themes, and shows some of the more popular themes developers use. Aesthetic value is compared to readability value.Font & Font Ligatures
Burke recommends a series of custom fonts, and enables FiraCode, a font with font ligatures.Settings JSON
Burke demonstrates that under the VS Code settings is a JSON object. The JSON object can be modified by the user to further personalize the editor.Tweaking Default Settings
Burke tweaks default settings in VS Code, including turning off the minimap, moving the sidebar panel to the right, and hiding activity bar items.Course Extensions Overview
Burke gives an overview of Peacock, an extension that allows the user to color code multiple VS code windows, and Bracket Pair Colorizer.
Productivity Tricks
Emmet for HTML & CSS
Burke demonstrates coding with Emmet a built-in snippet library for writing HTML and CSS quickly, installing Prettier, discusses using balance inward and balance backward, and talks more about mapping keyboard shortcuts.Prettier in JavaScript
Burke demonstrates how Prettier works with VS Code, and how to configure Prettier so that it can automatically format code.npm Explorer & Version Lense
Burke outlines package.json and Version Lens. Version Lens informs the developer about the latest version of an install.Framework Snippets
Burke describes how to use a VS Code install for framework snippets. It allows the developer to have code snippets from frameworks such as Angular, Vue and React.
Navigation & Refactoring
Moving Code & Code Folding
Burke goes over shortcuts to duplicate, delete, and move code and demonstrates how to fold code while explaining why it can be useful. Visual code recognizes code structures and folds code at the proper level. Regions and folding are also discussed.Regex Find & Multiple Cursors
Burke explains when to use multiple cursors and then explains how to use regular expressions to be more efficient and find code easily.Navigating VS Code, Refactoring & More Shortcuts
Burke goes over shortcuts that allow the user to navigate through VS Code and look for elements or documents.Rename Refactor & Extract Method
Burke explores other ways to rename elements using the rename refactor, and also explores how to extract a method and duplicate it using shortcuts.Debugging with Type Checking
Burke shows how TypeScript can be used to debug JavaScript code.
Debugging
Breakpoints & Logpoints
Burke goes over how to add breakpoints and log points to debug code, and explains that misusing log points will lead to an error message from the terminal stating. Evaluating expressions and hitcounts is also discussed.Debugging with TypeScript
Burke discusses how to launch and configure the debugger, and how to attach the debugger to the terminal in VS Code.Environment Variables
Burke demonstrates how to add environment variables to launch configurations using an .env file.Debugging with VS Code & Chrome
Burke shows how to work with both VS Code and the Chrome Inspect DevTool to debug code.Full Stack Compound Configs
Burke shows how to use simultaneously debug configs with the same app running on both the React and Express servers.nodemon
Burke demonstrates that nodemon can be used to update debugging breakpoints without having to stop and relaunch the server.
Docker
Dockerizing an Application
Burke gives a brief explanation of Docker, and explains how to containerize an app using VS Code.Deploying to a Container Registry
Burke goes through how to deploy a container using Registry on VS Code.Docker Compose Up
Burke shows how to use Docker Compose Up to add a new container and link it to another one.Debugging Containers
Burke gives an introduction to docker-compose.debug.yml, and how the file is used to debug Docker containers.
Remote Development
Developing through SSH
Burke first demonstrates how to remote access a server using a SSH connection via VS Code.Developing Remote Containers
Burke demonstrates how to access Docker remote containers using VS Code. When a container is first built, the process can take some time.Debugging Apps in Remote Containers
Burke debugs remote containers in VS Code, and demonstrates how extensions can be added to a remote container.
Working with Data
Setting Up Working with Data
Burke shows that although databases have been historically developed outside of editors, VS Code has interesting features that allow developers to work on their database using their editor.Working with MongoDB
Burke demonstrates how to create, connect and update a MongoDB database using VS Code.Working with SQLite
Burke explains how to create a SQLite database, how to run a query, and how to update the database using the VS Code editor.Working with MySQL
Burke shows how to connect to a MySQL database located in a docker container using VS Code.
Git
Git & Source Control
Burke describes how to use git via VS Code. Cloning, pushing, syncing, and commenting are discussed.Reviewing & Merging Pull Requests
Burke explains how to create a new branch, merge, and use pull requests using VS Code and GitHub.GitLens
Burke describes what the GitLens extension is, and describes the ways in which GitLens can supercharge GitHub functionalities when coupled with VS Code.Settings Sync
The last items Burke goes over are the sync settings, and how to change them.