Getting Started with GitHub Codespaces on VS Code

GitHub codespaces are one of the best development environments for developers. From a faster development environment to having access to a remote Linux environment, it's a workspace for all. 
In this tutorial, I will be teaching you one of the many ways to use GitHub codespaces. Let's get started.

What are GitHub codespaces?

Before we get started with the tutorial, let's get to know more about GitHub codespaces and their features.

GitHub codespaces are development environments hosted in the cloud. It allows users to configure these environments according to their needs. Some of the configuration options include setting up the bash terminal, runtimes for popular languages like Python, PHP, and Node, git for version control, yarn for package installation, e.t.c.

GitHub codespaces run on dedicated virtual machines ranging from 2 cores to up to 32 cores. Users can connect to their codespaces from the browser or locally using IDEs like VS Code and JetBrains. Users get up to 60 hours of free usage every month.

Setting up VS Code as the default editor for GitHub codespaces

By default, when creating a new codespace, it opens in the VSCode web client. To open codespaces in your locally installed VS Code, you need to install the GitHub Codespaces extension for Visual Studio Code.

You can install GitHub codespaces here by clicking the install button on the page. Note that you must have Visual Studio Code installed locally for the install button to redirect you to VS Code.

Once you've installed the extension, you can now follow the following steps to set VS Code as your default editor for GitHub codespaces:

• Visit GitHub and make sure you're signed in to your account.

• Click your profile photo in the upper-right corner of any page.

• Then click Settings from the drop-down menu.

• In the left sidebar, scroll down and find the "Code, planning, and automation" section. Then click Codespaces.

• Scroll down and find the "Editor preference" section. Then select Visual Studio Code.

GitHub codespaces will now open on the VS Code desktop application when you next create or open a codespace.

Configuring VS Code for GitHub Codespaces

Before we get started creating our own codespace in VS Code, you will need to sign into the GitHub codespace using your GitHub credentials:

• Open VS Code, and in the Activity Bar, click the "Remote Explorer" icon.

• At the top of the "Remote Explorer", you will see a dropdown menu. Select "GitHub Codespaces" from the dropdown.

• Click on the "Sign in to GitHub" button.

• You'll be prompted to sign in if you are not currently signed in to GitHub. Follow other instructions until you're back on the remote explorer again.

You're now signed in to GitHub codespaces.

Creating a GitHub Codespace in VS Code

Now that we've setup GitHub codespaces for VS Code, let's create a new codespace:

• Click the "Remote Explorer" icon

• Use your mouse to hover over the remote explorer panel. Then click the "+" icon.

• A text box and a list of your repositories will be displayed. Type and select the repo name you want to create the codespace for.

You will be prompted to select a branch and a machine type. Go ahead and select your preferred settings.

You can now start to develop in the codespace in VS Code

Opening a GitHub Codespace in VS Code

• Click the "Remote Explorer" icon.
• In the "GitHub Codespaces" panel, hover over the codespace and select the plug icon to connect to the codespace.

You can now enjoy developing in your codespace.