Burke Holland
Microsoft
Course Description
Dive into VS Code and explore some of the neat tricks and powerful extensions that you can use to improve your speed and productivity while learning to work smarter, not harder. Examine the editor from top to bottom, covering editor fundamentals, tips, and tricks, as well as how to turn VS Code into a full-fledged integrated development environment to do things like refactor and debug code, work with databases, and work with git …all within the editor!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: October 2, 2019
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
Introduction
Section Duration: 14 minutes
Burke Holland gives a set of instructions to install the tools needed for the course, and gives an overview of the course.
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
Section Duration: 26 minutes
Burke debates light versus dark themes, and shows some of the more popular themes developers use. Aesthetic value is compared to readability value.
Burke recommends a series of custom fonts, and enables FiraCode, a font with font ligatures.
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.
Burke tweaks default settings in VS Code, including turning off the minimap, moving the sidebar panel to the right, and hiding activity bar items.
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
Section Duration: 29 minutes
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.
Burke demonstrates how Prettier works with VS Code, and how to configure Prettier so that it can automatically format code.
Burke outlines package.json and Version Lens. Version Lens informs the developer about the latest version of an install.
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
Section Duration: 32 minutes
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.
Burke explains when to use multiple cursors and then explains how to use regular expressions to be more efficient and find code easily.
Burke goes over shortcuts that allow the user to navigate through VS Code and look for elements or documents.
Burke explores other ways to rename elements using the rename refactor, and also explores how to extract a method and duplicate it using shortcuts.
Burke shows how TypeScript can be used to debug JavaScript code.
Debugging
Section Duration: 44 minutes
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.
Burke discusses how to launch and configure the debugger, and how to attach the debugger to the terminal in VS Code.
Burke demonstrates how to add environment variables to launch configurations using an .env file.
Burke shows how to work with both VS Code and the Chrome Inspect DevTool to debug code.
Burke shows how to use simultaneously debug configs with the same app running on both the React and Express servers.
Burke demonstrates that nodemon can be used to update debugging breakpoints without having to stop and relaunch the server.
Docker
Section Duration: 17 minutes
Burke gives a brief explanation of Docker, and explains how to containerize an app using VS Code.
Burke goes through how to deploy a container using Registry on VS Code.
Burke shows how to use Docker Compose Up to add a new container and link it to another one.
Burke gives an introduction to docker-compose.debug.yml, and how the file is used to debug Docker containers.
Remote Development
Section Duration: 17 minutes
Burke first demonstrates how to remote access a server using a SSH connection via VS Code.
Burke demonstrates how to access Docker remote containers using VS Code. When a container is first built, the process can take some time.
Burke debugs remote containers in VS Code, and demonstrates how extensions can be added to a remote container.
Working with Data
Section Duration: 12 minutes
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.
Burke demonstrates how to create, connect and update a MongoDB database using VS Code.
Burke explains how to create a SQLite database, how to run a query, and how to update the database using the VS Code editor.
Burke shows how to connect to a MySQL database located in a docker container using VS Code.
Git
Section Duration: 21 minutes
Burke describes how to use git via VS Code. Cloning, pushing, syncing, and commenting are discussed.
Burke explains how to create a new branch, merge, and use pull requests using VS Code and GitHub.
Burke describes what the GitLens extension is, and describes the ways in which GitLens can supercharge GitHub functionalities when coupled with VS Code.
The last items Burke goes over are the sync settings, and how to change them.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops