Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

VSCode can be used for almost any programming language or framework. That encompasses quite a few workflows. 

Through extensions and built-in features, you can customize VSCode to suit the workflow you need that will support your development.


Creating files and folders in VS Code get boring quickly when you are using the file or context menu. With the following steps, you can supercharge how you create folders and files:

1. [Install this extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.create-file-folder&WT.mc_id=egghead-screencast-chnwamba)

2. Hit CTRL + OPTION + N

3. Type the path of the file you want to create and hit ENTER

Recursively Create Folders and Files in VS Code

Whenever I need to make a change to a file that includes a part I don't grasp I try to gather as much informations as possible. One tool that turned out to be very helpful to build up context was seeing who wrote the code & when.

In this lesson I demonstrate you how this can easily be achieved using the VS Code GitLens extension and how to set it up in a way that it's not constantly bothering you.

Get Git Blame insights directly in VS Code using GitLens

In this lesson, we're going to use Visual Studio Code's Remote Development Extensions Pack to set up a remote development environment with a server. We'll cover how to connect, how to set up an SSH alias, and how to use forwarded ports to run local servers seamlessly.

Set Up Remote Development in Visual Studio Code

Some developers prefer to use git in a terminal, some prefer more GUI-based solutions.

VSCode has both terminal and a GUI which allows you to be able to stage, diff, commit (and many more) files to a git repository without having to leave your editor. In this lesson we're going to see how to stage/unstage changes, how to create a commit message, how to revert a commit and push it again.

Stage, diff and commit changes using Source Control tab in VSCode

The better-comments extension lets us specify different types of comments and color them accordingly. This lets you add semantic meaning to your comments, for example: you can mark some comments as TODO, and others as important, or as questions. You can also define your own custom types of comments.

Write Better Comments in VS Code

In this lesson, you'll learn how to set up a "live scratchpad" for JavaScript using an extension called [Quokka](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode). Similar to JS Bin, CodePen, or CodeSandbox, Quokka lets you run some JavaScript code right from VSCode without leaving your text editor.

This is a handy tool for debugging or isolating code when you want to quickly test something out.

To learn more about Quokka, check out their website at [quokkajs.com](https://quokkajs.com/).

Set Up a Live Scratchpad for JavaScript in VSCode using Quokka

This lesson shows you how to debug your Node.js applications using the VS Code debugger.

Using the VS Code debugger with Node

The Turbo Console Log extension lets us quickly add console.log statements with additional data, which makes debugging your code easier.

Make Console Logging in VS Code 10x Easier with Turbo Console Log

The VS Code debugger provide a rich debugging experience allowing you to step through your code line by line and view variable values. In this video you will learn how to enable source maps for TypeScript and use them with the VS Code debugger so you can write and debug code using the TypeScript source while Node executes the compiled output.

Development Workflows in VSCode

Ian Jones

Course Content