IDE Set-up (VS Code) | GitHub Roadmap

📝

After you set up your GitHub profile, you also need to have a place to talk with GitHub, view your folders and files, and edit code. We will be using Visual Studio Code (VS Code), a free, open-source, lightweight code editor developed by Microsoft. It's one of the most popular IDEs in the world!

📥 A. Installation

1

Download VS Code

Go to the Visual Studio Code Download Page.

2

Install

Download and run the installer for your OS (Windows, macOS, or Linux).

✅

Keep the defaults! During installation, the default settings are already configured for most users. Simply click through the installer accepting the default options unless you have specific preferences.

🧭 B. Orientation & Navigation

Activity Bar (Far Left)

The narrow strip with icons for Explorer (files), Search, Source Control (Git), and Extensions. This is your main navigation hub.

Command Palette

The most powerful tool in VS Code!

Shortcut: Ctrl + Shift + P (Windows) or Cmd + Shift + P (Mac)

Usage: Type commands here to do almost anything.

Terminal

Toggle the built-in command line with Ctrl + ~ (tilde). This is where you can run Git commands directly!

⌨️

Pro Tip: The Command Palette is your best friend! If you ever forget how to do something, just open it and start typing what you want to do.

🧩 C. [Optional] Exploration: Essential Extensions

Click the Extensions icon (looks like 4 squares) in the Activity Bar and install:

1

Live Server

by Ritwick Dey

Launches a local development server to view webpages. Perfect for testing HTML/CSS projects instantly!

2

Prettier

by Prettier

Automatically formats code. Makes your code look clean and consistent with just one save!

🤖 D. [Optional] Exploration: AI-Assistance & Prompting

Setting up GitHub Copilot (free version) - Recommended

1

Install

In the VS Code Extensions tab, search for and install GitHub Copilot.

2

Authenticate

A popup will appear asking you to sign in to GitHub. Click Allow and sign in with your account.

3

Verify

Look for the small Copilot icon (a little alien/pilot face) in the bottom-right corner of the window. If it spins or has a line through it, click it to check your status.

4

Usage

Start typing code, and ghost text will appear. Press Tab to accept suggestions. You can also ask Copilot what you want to make, and it will write code for you!

Docs: GitHub Copilot in VS Code Overview

5

Want more from Copilot?

As a student, you can get free access to Copilot Pro via GitHub Education. See how to apply.

Other AI Coding Tools

Claude Code

You can install extensions like "Claude Dev" to use Anthropic's Claude models directly in your editor.

Claude Code in VS Code Docs

Gemini Code Assist

Google's AI assistant plugin for VS Code.

Gemini Code Assist Docs

AI Prompting Best-Practices

When asking AI to generate code, specificity is key. Use the R.T.R.O. framework:

R - Role

Who is the AI? (e.g., "Expert React Developer", "Data Science Tutor")

T - Task

What exactly do you want it to do? (e.g., "Write a function", "Debug this error")

R - Requirements (Context)

What constraints exist? (e.g., "Use Python 3.9", "No external libraries", "Explain it simply")

O - Output

How should the answer look? (e.g., "Code block only", "Step-by-step list")

💡

Example Prompt:

"Act as a Front-End Engineering Instructor (Role). Write a CSS rule to center a div horizontally and vertically (Task). You must use Flexbox and ensure it works on mobile screens (Requirements). Provide the code snippet followed by a one-sentence explanation (Output)."

🎨 E. [Optional] Exploration: Themes & Icons

1

Browse Themes

Download themes and icon packs of choice from the extension marketplace.

2

Open Command Palette

Ctrl/Cmd + Shift + P

3

Change Color Theme

Type "Preferences: Color Theme" and press Enter.

4

Preview & Select

Use arrow keys to preview and select a color scheme.

5

Change File Icons

Do the same for "Preferences: File Icon Theme"

🌟

Popular Themes: One Dark Pro, Dracula, GitHub Theme, Tokyo Night, Catppuccin