André
Casal

Mastery for VS Code

After taking this course, you'll have a consistently excellent developer experience. A good user experience is one in which you accomplish your goals efficiently, effortlessly, and even with some delight. A good developer experience is the same but with a technical product, like an API, a library, or a code editor.

VS Code is the most used IDE for good reason: it's simple, interconnected, and performant. However, a few things make the experience with VS Code less than excellent: it doesn't know which languages, libraries, frameworks, and tools you're going to be working with so it doesn't come pre-configured (much less optimized) for those, you might not know the best practices to solve a given problem and you might not know how to do it with VS Code specifically, and it doesn't come pre-configured with otherwise external workflow integrations.

This is the aim of this course: I go above and beyond to teach you all you need to know about VS Code, even if you're just starting out, provide you with UI improvements, automation, and feedback on your code for a consistently excellent developer experience, teach you all the best practices for all your development needs (project setup, debugging, source control, integrations and more), and teach you how to integrate into VS Code workflows that are otherwise external, making your experience one of delightful efficiency.

Who is this course for?

This course is not for absolute beginners to programming, for it is not a course on learning how to code. But given you have at least some basic experience with coding, you can be an absolute beginner with VS Code.

What tech does it support?

VS Code doesn't come optimized for any particular tech stack. Here's the tech the course supports at the moment:

Languages

  • Markdown
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • C/C++

Libraries, frameworks, and runtimes

  • React and JSX
  • MDX
  • Styled Components
  • Node
  • Express
  • Next
  • Gatsby
  • Remix

Course Content

Part one - Getting to know VS Code

Part one is all about VS Code's native capabilities and how to use it without any configurations or extensions. The point of this part is to get you up to speed with everything VS Code can do out of the box and is ideal for absolute beginners or as a refresher if you've been using VS Code for a while already.

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.

Part two - Excellent Developer Experience

Part two is all about general improvements, i.e. improvements that apply to any language or framework, providing you with a consistently excellent developer experience. Everything falls into four main pillars: improving the UI, improving interactions, implementing automation, and giving you feedback on the quality (and quantity) of your code. Everything's done towards efficiency, effortlessness, and delight.

UI

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.

Interactions

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.

Automation

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.

Feedback

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.

Part three - Best Practices

The third part is about teaching you all the best practices for all your development needs with VS Code: how to set up projects, how to do efficient debugging, Git and GitHub, integrations, and a lot more.

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.

Part four - Languages, libraries, frameworks, and tools

The fourth part is all about applying the last two sections - improving your developer experience and teaching you best practices - to your particular tech stack, and in this section, you get to pick and choose the tech you're using.

Markdown

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.

HTML

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.

CSS

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.

JavaScript

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.

TypeScript

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.

React and JSX

Automation

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

Part five - Integrating Workflows

The fifth section is all about integrating otherwise external workflows into VS Code. Learn to do common workflows like launching a browser or a server, API testing, DB management, and team communication within VS Code. It's more efficient and you won't need to install yet another app.

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.

Part six - Common Pitfalls

In this section, we'll go over some common pitfalls people fall into when using 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.

About the course teacher, André Casal

André has been working as a software engineer, for more than 15 years, with companies like Calouste Gulbenkian Foundation, American TV network NBC, and energy drink Monster Energy. He has provided technical direction to countless startups and managed teams of over 20 people. Currently, he helps other software engineers improve their work output capacity and quality through online courses, which have been featured by Microsoft. Teaching has always been one of his passions and that is why throughout his career he consulted, mentored, and tutored with remarkable reviews.

A note on excellency

Have you ever spent a ton of time trying to do something simple with VS Code? Maybe you're missing something. Maybe there's a bug in one of your tools. Maybe there's a bug in VS Code. Do you remember how frustrating it was to spend all that time just to end up quitting, or realize it's a bug in one of your tools or VS Code itself, or you just had to do something differently?

I remember once I needed to debug GCC-compiled threads. I spent several days until I realized I just had to change a little word in my launch.json configuration from "-gdb-set follow-fork-mode parent" to "-gdb-set follow-fork-mode child". Argh, it's so frustrating spending all that time for such little gains.

For those of us who want to achieve excellence, this pain is worth it, because we know it compounds: I'll never again forget that command (or how to get it) if I ever need to debug GCC-compiled threads. But wouldn't it be great if you didn't have to go through that process, waste all that time, and just get the answer you're looking for immediately?

That's where this course comes in. I'll show you everything you need to know about VS Code, the good and the bad - I know, I've recorded a video for every single one of its 600+ settings. After taking this course, you'll feel like you master VS Code. Besides having it configured like an efficient professional, you'll know exactly what VS Code can do, what it can't, and how to work around it.

To your success! 🥂

How much time would you take to learn this on your own?

I know VS Code inside out. I've recorded a video for every one of its 700+ settings. I've collaborated with feature implementations, bug fixes, and improving VS Code's documentation. I actively explore its extensions and continuously find out the best ones in functionality and performance. Learning all this about VS Code took me about 6 months of intense full-time work.

For the average developer earning 120000€/year, 6 months of full-time work puts this course's value at 60000€.

How much does it cost?

This course will greatly help you become a top-level software engineer and I wanted to value it accordingly. But I also wanted to make it affordable, so I took the opportunity cost of 60000€ and took 1% of that. That means this course's value is 100x what you pay for it: 600€.

Mastery for VS Code

600€

What you'll get:

  • Learn *all* about VS Code
  • Make VS Code look awesome
  • Get improved shortcuts and snippets
  • Improve your code editing UX
  • Automate formatting and linting
  • Automate best practice hints
  • Upgrade your terminal
  • Learn to debug like a pro
  • Improve Git/GitHub workflow
  • Integrate important workflows
  • And much more...
Master VS Code

100% Satisfaction Guarantee

100% satisfaction guaranteed, I offer you a half-year refund policy. If you've implemented everything I teach you and you're not getting the results I promised within half a year, I'll give you your money back. No questions asked.