Bytesized - Bytesized #008 — VSCode

Setups

My Visual Studio Code Setup

Ali Spittel's collection of her favorite VSCode extensions and themes.

The Ultimate VSCode Setup for Front End/JS/React

Elad Ossadon covers the extensions you need to have to work as a front-end developer in VSCode.

My VS Code Setup

Caleb Porzio's favorite extensions, settings, and special "zen" mode for minimalist developers.

How to set up VSCode to improve your productivity

A collection of useful extensions, with a focus on text editing improvements and reducing repetitive motions and actions with templating extensions.

Quickstart Videos

5 Ways to Customize VS Code

James Quick covers custom themes, fonts, extensions, settings, and keyboard shortcuts in his popular VSCode intro.

VS Code Top-Ten Pro Tips

The uber-popular Fireship YouTube channel takes a look at ten tips for increasing your VSCode productivity and happiness.

Using VSCode with the VIM Extension

Richard Bagshaw covers a great way to use VSCode: Vim keyboard bindings. He walks through how to install a Vim extension, set up your key bindings, and best practices for making the switch to Vim shortcuts in your day-to-day work.

Visual Studio Code Markdown Preview

If you work in GitHub, read Reddit, or write code-adjacent prose in anyway, you probably have some familiarity with Markdown. This video covers the basics of some great Markdown tooling for VSCode, showing how you can lint, spell-check, build templates, and preview your Markdown content directly in VSCode.

Courses

Vim for VSCode

Joe Previte's excellent $10 course has 100+ exercises for learning how to use Vim inside of VSCode.

VSCode Power User

Ahmad Awais's comprehensive (5 hours!) course on getting up and running with VSCode, including specific sections on web development, working with Git and GitHub, Markdown, and Ahmad's favorite extensions. This course is on sale pretty frequently, so keep an eye out 👀

Make VS Code Awesome

Caleb Porzio's course on VSCode isn't focused on exploring every single feature of the editor; instead, it's about zooming in on the important things for developers: extensions, keyboard-based navigation, and a particular focus on building a better development experience for PHP developers.

Digging Deeper

Language Server Extension Guide

VSCode is open-source, but it's also changing the way that other text editors think and work with the underlying code they show to users. The VSCode Language Server is a spec that has allowed developers to build support for languages into VSCode with first-party support, and it's even been the inspiration for new features in older editors like Vim and Emacs. Check out more about how it works!

VSCode Architecture And Overview

Want to know how VSCode works under the hood? C#Corner's overview of the architecture of VSCode covers all the pieces of the open-source codebase and how they fit together. As you might expect, VSCode wouldn't be possible without a ton of incredible underlying open-source tooling: this article teaches you what those things are.

How to Configure VS Code Like a Pro

There's a lot of underlying primitives in VSCode that aren't as well-known, but provide great support for working in a codebase for an extended period of time. Stefan Metodiev's guide to setting up VSCode workspaces, tasks, and snippets is a great way to build a more IDE-like experience for your projects inside of VSCode.