14 Great VSCode Resources - Dev Setups, Quickstart Videos, Courses, and Deep Dives
Tags: vscode
Published: 2021-01-05 19:31:05

![GIF](https://cdn.sanity.io/images/82qqyrei/production/d0eab98cd583f0b0db13afd90288b53ad5e14e59-828x815.gif)

**VSCode is the [most popular](https://www.software.com/src/ranking-the-top-5-code-editors-2019) text editor in the world.**

That's a remarkable stat on its own, but even more so when you consider how new it is: the first release was in April 2015.

In this issue of **Bytesized** ([a free newsletter covering important ideas for developers](https://www.bytesized.xyz)), we'll take a look at VSCode from a productivity angle: there's a good chance that VSCode is part of your repertoire, so instead of teaching you what it is, we'll look at how you can get more productive with it.

_Bytesized covers important ideas for developers, sent to over 4,000 people every week. [Join here!](https://www.bytesized.xyz)_

## Setups

### [My Visual Studio Code Setup](https://welearncode.com/vscode-setup/)

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

### [The Ultimate VSCode Setup for Front End/JS/React](https://medium.com/productivity-freak/the-ultimate-vscode-setup-for-js-react-6a4f7bd51a2)

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

### [My VS Code Setup](https://calebporzio.com/my-vs-code-setup-2)

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

### [How to set up VSCode to improve your productivity](https://www.freecodecamp.org/news/how-to-set-up-vscode-to-improve-your-productivity-fb14c81d4991/)

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](https://www.youtube.com/watch?v=yvXHM2NByh4)

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

### [VS Code Top-Ten Pro Tips](https://www.youtube.com/watch?v=u21W_tfPVrY)

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](https://www.youtube.com/watch?v=44snngEzNMQ)

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](https://www.youtube.com/watch?v=d9_8e3LrrCI)

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](https://vimforvscode.com/)

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

### [VSCode Power User](https://vscode.pro/)

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](https://makevscodeawesome.com/)

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](https://code.visualstudio.com/api/language-extensions/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](https://www.c-sharpcorner.com/article/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](https://medium.com/better-programming/how-to-configure-vs-code-like-a-pro-782d2d718586)

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.

---

Bytesized is a free weekly newsletter covering important ideas for software developers. [Join 4,000+ devs who read our weekly newsletter to stay in-the-know on important trends in software development!](https://bytesized.xyz)