Mastery for VS Code

Interface

Here we'll familiarize ourselves with the interface: the primary sidebar, the secondary sidebar, the bottom panel, and the editor. We'll explore all the nooks and crannies of the interface and I'll show you some useful layouts for different screen sizes.

Themes

I'll show you how to install and use different themes, and a few handy places to find great ones.

Shortcuts

I'll show you how to quickly access the list of all the shortcuts within VS Code itself, extensions that change shortcuts to ones from an editor you might be coming from, how to create your own, and some useful tips.

Creating files, folders, workspaces, and windows

We'll go over how to create files and folders, explore the concept of a workspace and see how to open multiple instances of VS Code. Workspaces are especially confusing for most developers working with VS Code and I'll explain them clearly and provide some advice on how (or not) to use them.

Settings

In this section, we'll talk about how to access settings in both UI and JSON format, we'll explore different levels of settings and how and when they apply. This will avoid tons of confusion and help you figure out why sometimes settings don't apply.

Configuration files

In this section, we'll talk about all the configuration files VS Code automatically recognizes. We'll talk about which configuration files go where, what they do, and when and how you should configure them.

Code Editing

We'll go over the whole code editing experience: language modes, IntelliSense, side-by-side editing, search and replace, shortcuts, snippets, folding and unfolding code, multiple cursors, and much more.

Debugging

In this section, we'll explore the debugging features in VS Code. We'll see how to step in to and out of functions, step over statements, and explore the available debugging features VS Code has to offer.

Source Control

We'll go over all the native capability VS Code has to handle source code with Git and GitHub specifically.

Extensions

We'll go over extension packs, extension categories, and how to find and install the best extensions available on the market.

Native support for languages

We'll go over the native support VS Code has for HTML, CSS, JavaScript, and TypeScript. VS Code brings a comprehensive and built-in feature set for web development. In this section we'll explore those features and the ones that are missing, so we can improve them in a later section.

Windows Subsystem for Linux

In this section, I'll teach you how to install and configure WSL and how to connect VS Code to your WSL instance, so you can run Linux within Windows without having to install and run a slow virtual machine.

Theming

When you're choosing a theme, you're really choosing a syntax highlighting scheme. In this section, we'll explore the research on syntax highlighting criteria for stellar syntax highlighting and the best themes for VS Code.

Typography

We spend well over 10 times more reading than writing code. Typography is a fundamental, albeit ignored, part of our development experience. We'll take a look at what makes typography great for coding and the best fonts available.

Icons

Well-designed icons improve readability and performance, and decrease cognitive load. We'll go over the best sets of icons available for both the explorer view and VS code itself.

Removing redundant UI elements

In this section, we'll go over redundant interface elements and remove them to use VS Code's space more efficiently.

File Editor

In this section, we'll improve some aspects of the file editor UI: visual feedback on auto-save, improvements to the minimap and breadcrumbs, and a few others.

Terminal

In this section, we'll explore the differences between a console, a terminal, and a shell, and we'll make it look great and consistent with our overall theme, display key information, increase how much we can see into the past, and implement powerful autocompletion, for both internal and external terminals.

Debugging

In this section, we'll improve the debugging UI interface with a few quick but important improvements.

Source Control

In this section, we'll improve the source control UI and get a beautiful graph showing the repo's branches and commits for efficient navigation.

Shortcuts

In this section, we'll go over the default shortcuts and implement a few quick but important shortcuts VS Code is missing.

Autocompletions

Autocompletion can be great or greatly annoying if incorrectly configured. We'll go over some annoyances that make autocompletion take more keystrokes to use, why that happens, and how to fix autocompletion for a delightfully efficient experience.

Snippets

In this section, we'll go over how to find out which snippets VS Code provides for your specific language mode and modern versions to replace VS Code's outdated snippets.

Auto-save

We'll automate file-saving, but do it in a way that gives you feedback while avoiding a few common annoyances with auto-save.

Format on save

In this section, I'll give you a clear picture of how auto-formatting works, which languages VS Code can format out of the box, common pitfalls people get into when using Prettier, and how to solve them.

Insert final new line

We'll go over why inserting a final new line is a good practice and how to have VS Code do that for you automatically.

Tabs and spaces

VS Code's default behavior to handle tabs and spaces can be a source of frustration. In this section, we'll go over what VS Code's doing behind the scenes and have it format your code just the way you want it to.

Code actions on save

VS Code can run a few code actions on save. Some of them are useful and some of them can actually break your code. In this section, we'll discuss which actions you should be using and which you should not.

Tracking invisible characters

Invisible Unicode characters can be used to create backdoors in your software. In this section, we'll configure VS Code to render all invisible characters clearly.

Previewing images

Especially when we're working with product icons, it's useful to see them directly in code instead of searching for them in the Explorer View and see if we're importing/using the right image. We'll configure VS Code to render the images you're importing in-line without getting in the way.

Spell checking

Here, we'll configure VS Code to automatically spell-check both your code and your writting.

Settings Sync

We'll start by making sure all changes you'll be making from now on are saved to the cloud. We'll also learn how to share those settings across multiple machines, how to restore them if you lose them, and how to safely share them with colleagues without breaking their own configurations.

Single Folders vs Workspaces

In this section, we'll discuss the considerations to be made when deciding between workspaces and single folders, and some tips on how best to use them.

Distinguish between windows

If you're working with a large number of repos simultaneously, it's useful to easily distinguish them visually. In this section, I'll show you some ways in which you can consistently colorize different repo windows.

Code navigation

In this section, we'll explore different ways to navigate your code, some quick tips for efficient code navigation, and use cases for side-by-side editing.

Vim

Vim is a powerful code navigation and editing tool, but it does have a bit of a learning curve which would be covered in its own course. In this section, we'll take a look at how to install Vim in VS Code, and a quick look at some main Vim features.

VS Code's built-in browser

In this section, we'll explore VS Code's built-in browser, its features, shortcomings, and how to access DevTools right from within VS Code itself.

Debugging

In this section, we'll explore how VS Code talks to debuggers, the difference between a debugging extension and the debugger itself, what to do when a debugging session doesn't work, debugging configurations, automating useful tasks like code compilation before debugging, how to skip over code you don't care about, and a few other tips and tricks to make your debugging sessions efficient and to the point.

Git filters and hooks

Always seeing your code in the same format improves your performance as a developer. One of the most common sources of frustration and fruitless discussions is which formatter to use for your team's repo. In this section, we'll go over Git filters and hooks, and implement automation to make sure you're always seeing the code formatted to your liking, while also committing your changes in the correct format required by the repo.

Shortcuts

In this section, we'll expand VS Code's functionality so that you can use the usual shortcuts you're used to from GitHub to write your MD files.

Formatting

In this section, we'll automate formatting for MD files.

Best practices

In this section, we'll go over the best practices for writing Markdown, and how to create a useful and efficient README file.

Interactions

In this section, we'll fix quite a few shortcomings VS Code has regarding HTML, CSS, and JavaScript.

Feedback

We'll implement structural linting, and best practices hinting to make sure you're writing high-quality HTML.

Best Practices

In this section, I'll show you how to quickly serve HTML files with the click of a button, as opposed to using an npm package.

Interactions

In this section, we'll fix a few shortcomings VS Code has regarding IntelliSense in CSS.

Automation

Here we'll cover a few issues regarding the usual way of formatting CSS and a better alternative.

Feedback

In this section, we'll implement linting and add useful feedback directly into the source code to ensure you understand what's happening with CSS stacking contexts, z-index, and a few other commonly confusing aspects of CSS.

Interactions

We'll remove some useless keywords from autocompletion and implement modern JavaScript snippets.

Automation

We'll go over a few automations that will make working with JavaScript a breeze.

Feedback

In this section, we'll implement linting.

Best Practices

In this section, we'll implement project-level IntelliSense with jsconfig.json config file, its effect on VS Code and the options within. We'll also go over a few of the best practices when working with JavaScript projects.

Best Practices

In this section, we'll implement project-level IntelliSense with tsconfig.json, which is pretty much the same as the jsconfig.json, but has some TypeScript specific options.

Automation

In this section, we'll automate formating, imports, tag pairs, and a few other things to make writing JSX a breeze.

Browser and DevTools

We'll learn to use VS Code's built-in browser and DevTools and take a look at the best extensions and packages for developing with immediate feedback.

API Testing

We'll fully integrate API Testing workflows into VS Code so you're able to do the exact same thing without leaving the editor, replacing external tools like Postman.

SQL DB Management

We'll take a look at an SQL DB management extension that allows you to integrate DB workflows right into VS Code, avoiding external tooling.

Reading PDFs

We'll take a look at a simple extension that allows you to read PDFs right from within VS Code.

Team Communication

In this section, we'll take a look at how to effectively communicate with your team right from within VS Code.

Deprecated or unrecommended extensions

I'll show you a list of extensions you shouldn't be using and better alternatives.

Fix performance issues

In this section, we'll go over how to diagnose and fix performance issues with VS Code.

Common problems

I'll show you a list of common problems and how to fix them.