Temporal
Become a VS Code Power User
5 hours, 13 minutes
CC
Course Description
Use VS Code like a pro and build apps faster! Search, navigate, and refactor code quickly with the command pallet, custom keybindings, and multi-cursor techniques. Debug your apps without leaving the editor and automate complex or repetitive routines with custom tasks. Create dev containers for tighter Docker integration and explore building extensions to maximize your productivity.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn 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: 6 minutes
Steve introduces the course by discussing the importance of becoming comfortable with the tools used in software engineering. Throughout the course, Steve aims to cover various aspects of VS Code, provide tips and tricks, and encourage students to customize their experience based on their specific needs and preferences.
VS Code Basics
Section Duration: 1 hour, 49 minutes
Steve demonstrates different ways to open a folder and provides a brief overview of the different sections in the interface, such as the file explorer, activity bar, and status bar. He also provides an example using the command palette to sort lines of code.
Steve discusses the different features and panels including the ability to open multiple files, navigate between tabs, and split the editor into two panes.
Steve walks through some common keyboard shortcuts including Command-P, Command-Shift-P, and Control-G. Steve also introduces the "go to bracket" feature, the terminal shortcut (Control+`), and how to switch between editors and the terminal.
Steve demonstrates how to set custom key bindings and where they are stored in VS Code. He explains how to use the "when" property to specify when a key binding should work, such as in a specific file type or editor context. He also mentions the possibility of creating multi-stroke key bindings using the "multi-command" extension.
Steve discusses various features and functionalities of the terminal in VS Code. He mentions that you can have multiple terminals and even split them if needed. He also briefly mentions the ability to use different shells and profiles.
Steve discusses how to navigate code, such as using right-click options to go to the definition or references of a function, using command-click to jump to different files or types, and using F2 to rename functions or variables throughout the codebase.
Steve discusses the source control tab in VS Code, which provides a graphical user interface for managing Git. He explains how you can use this tab to stage and commit changes, view and compare different commits, discard changes, and perform other Git operations.
Steve discusses the find and replace functionality in text editors. He explains that you can use Command-F or Control-F to find and replace within a specific file, and Command-Shift-F or Control-Shift-F to find and replace across the entire project. He demonstrates various options such as matching case, whole word, and using regular expressions. Steve also mentions the ability to search in specific file types or directories, and the option to save and reuse code searches.
Steve demonstrates different ways to use multiple cursors, such as holding down the option or alt key and clicking to create multiple cursors, using command/ctrl + D to select the next occurrence, and using regex with option/alt + enter to create multiple cursors on matching patterns.
Steve demonstrates how to move a function to a new file, which automatically updates the import statements in other files. He also mentions that the IDE can suggest refactors, such as converting a CommonJS module to an ES module or converting JavaScript with JSDoc to TypeScript.
Steve explains that Emmet abbreviations are a convenient way to write HTML and JSX code quickly. He demonstrates various examples, such as creating divs with nested elements, adding classes and IDs, and even generating a basic HTML file structure.
Steve introduces a series of exercises for practicing Emmet and encourages students to try out different techniques and get a feel for the simpler use cases. He then demonstrates some possible solutions for the exercises, including using curly braces for inner text, generating lists with the "times" command, adding attributes, creating nested structures, and using lorem ipsum for placeholder content.
Exploring VS Code Extensions
Section Duration: 34 minutes
Steve discusses the use of extensions in VS Code and recommends some of his favorites, such as "Toggle Quotes" for easily switching between different types of quotes, "Peacock" for assigning colors to different project windows, "Indent Rainbow" for color-coding indents, and "EditorConfig" for respecting project-specific settings.
Steve introduces the AI Toolkit from Microsoft, which allows developers to access and compare different AI models hosted by various providers. The toolkit provides features such as fine-tuning models, comparing model outputs, working with JSON schemas, generating prompts from CSV data, and benchmarking models.
Steve discusses some community favorite VS Code extensions, including Angular Files, Material Icon Theme, and Night Owl. Steve addresses concerns about extension bloating and performance issues, emphasizing the need to be mindful of the impact of installing too many extensions. He also mentions helpful extensions like Path IntelliSense, Quokka, Auto Docstring, and Live Server.
Editor Settings & Snippets
Section Duration: 56 minutes
Steve explains how to access and modify settings in Visual Studio Code. He discusses the different types of settings, including global, user, and workspace-specific settings. He mentions that extensions also have their own settings, which can be customized.
Steve explains various settings and customization options in VS Code. He mentions that you can have custom settings for different file types and languages, and even set the default language for new files. He also discusses the ability to copy and share specific settings, as well as the option to sync settings across different devices.
Steve discusses the advantages of using snippets, which are shortcuts that allow you to quickly insert repetitive code or patterns. He demonstrates how to configure snippets in VS Code, including defining prefixes, placeholders, and variables. Steve also mentions the power of regular expressions and nested snippets for more advanced usage.
Steve explains that snippets can be used for common patterns in design systems and provides an example of creating a snippet for a button component. He also demonstrates how snippets can be used for selected text, such as automatically wrapping a fetch statement in a try-catch block.
Steve provides students with some exercises to try out different code snippets. He then demonstrates two snippets that he personally finds useful: one for importing dependencies and another for creating a try-catch block with additional functionality.
Running Tasks & Debugging Projects
Section Duration: 43 minutes
Steve explains that tasks are a way to run repeated commands or tasks from within VS Code. He explains the anatomy of a task, including the label, command, problem matcher, and additional metadata. He also mentions that tasks can be customized and saved in the tasks.json file, which can be checked into version control.
Steve demonstrates how to set up and run tasks in Visual Studio Code using the command palette. He also explains that tasks can be chained together and run concurrently or in a specific order.
Steve explains that writing a problem matcher can be complex and recommends using pre-built ones instead. He also discusses the benefits of using dedicated terminals for tasks and the ability to jump to specific code locations from the problems tab or terminal.
Steve explains that different debuggers can be used depending on the type of debugging required, such as Node, Chrome, or Edge. He demonstrates how to create a launch.json file for a Node project and shows how to set breakpoints, step through code, and inspect variables during debugging. He also mentions the option to set conditional breakpoints and break on caught or uncaught exceptions.
Steve discusses the concept of multi-root workspaces in VS Code, where you can treat multiple projects in different folders as one cohesive workspace. He also shares his opinion on micro front ends and multiple repositories, stating that he believes it is often a bad idea and that a mono repo is preferable for managing code and dependencies.
Dev Containers in VS Code
Section Duration: 22 minutes
Steve explains that dev containers can be used in various ways, such as connecting to Docker containers or remote environments like GitHub code spaces. While dev containers add complexity, they are not necessary for front-end code but can be beneficial for backend development, particularly when dealing with software updates.
Steve demonstrates how to set up a development container by creating a devcontainer.json file using the command palette and configuring the container image, software dependencies, and extensions. He also mentions that dev containers provide a consistent development environment for teams and simplify the process of switching between projects.
Creating VS Code Extension
Section Duration: 35 minutes
Steve discusses building extensions in VS Code, highlighting that extensions can range from simple themes to full-fledged embedded app experiences. He demonstrates how to generate a basic theme extension and explores the generated files, such as the package.json and theme.json.
Steve walks through how to create a comment highlighter extension using JavaScript. He explains the key components of the extension, such as the package.json file, activation events, and the VS Code API. He also demonstrates how to create a text editor decoration type and use regular expressions to find and decorate specific words in the active text editor.
Steve demonstrates how to create a UI in VS Code using HTML, CSS, and JavaScript. He also discusses the use of CSS variables that are populated based on the VS Code theme. Steve also shows how to send messages between the main process and the DOM using the `postMessage` method.
Wrapping Up
Section Duration: 3 minutes
Steve wraps up the course by highlighting how VS Code and its extensions boost productivity. He also stresses the value of keyboard shortcuts, consistent workflows, and tools like snippets to save time on repetitive tasks.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops