Getting Started with Visual Studio Code (VS Code)

Visual Studio Code (VS Code) is one of the most popular code editors for developers — whether you’re building web apps, writing Python scripts, or working with TypeScript. It’s lightweight, fast, and packed with features that make coding easier and more enjoyable.

This guide will help you install VS Code, explore common features, and learn how to customize it for your workflow.

---

💻 Step 1: Install Visual Studio Code

🪟 Windows

1. Visit https://code.visualstudio.com
2. Download the Windows installer
3. Run it and check the boxes to:
   • Add “Open with Code” to the right-click menu
   • Add VS Code to your PATH (so you can open folders with code .)

🍎 macOS

1. Download the macOS version from code.visualstudio.com
2. Drag Visual Studio Code.app to your Applications folder
3. Launch it and allow any permissions requested.

🐧 Linux

You can install VS Code via your package manager, for example:

sudo snap install code --classic

or

sudo apt install code

---

🧭 Step 2: Accessing the Menu in Visual Studio Code

Depending on your operating system or how your VS Code window is configured, the menu bar might be visible, hidden, or compact. Here are a few easy ways to access it:

🪟 On Windows or Linux

• If you see the full menu bar (with File, Edit, Selection, View, Go, Run, Terminal and Help), you can use these options directly.

• If only some menu items are shown, click on the three dots (⋯) on the right side of the menu bar to reveal the rest.

• If it’s hidden completely, click the three horizontal lines (☰) in the top-left corner — this opens the same menu options.

• You can also press Alt on your keyboard to temporarily select the menu bar.
• To Toggle Menu Bar Visibility:
  1. Press Ctrl + Shift + P
  2. Type Toggle Menu Bar Visibility
  3. Press Enter

🍎 On macOS

• The menu bar is always visible at the top of your screen (above the VS Code window).
• Use Code → Preferences to open settings or extensions.

---

💡 Tip: If you ever lose access to menus or buttons, you can always open the Command Palette (Ctrl + Shift + P or Cmd + Shift + P on Mac) — it lets you run any VS Code command by typing its name.

---

📂 Step 3: Open a Folder or Project

Once VS Code is installed, open your project folder by:

• Selecting File → Open Folder

• Or, go to the project folder and run this command from the terminal: code .

This tells VS Code where your files are and enables features like search, debugging, and version control.

---

🧩 Step 4: Explore the Interface

Here’s what you’ll see when you open VS Code:

• Explorer (📁) – Shows your project files and folders

• Search (🔍) – Lets you search text across files

• Source Control (🔀) – Integrates with Git for version control

• Run and Debug (🐞) – Helps you debug your programs

• Extensions (🧱) – Add tools and features for different languages

Try hovering over icons or using Ctrl + B to toggle the sidebar visibility.

---

💬 Step 6: Using and Switching Terminals

VS Code includes a built-in terminal so you can run commands without leaving your editor.
This is great for running scripts, compiling code, or using tools like Git or npm.

🧭 Opening the Terminal

You can open the terminal in several ways:

• Press Ctrl + ~ (tilde key)
• Or, from the menu, go to Terminal → New Terminal

This opens the terminal panel at the bottom of your VS Code window.

---

⚙️ Changing the Terminal Type

By default, VS Code uses your system’s default shell (for example, PowerShell on Windows or Bash on Linux/Mac).
You can easily switch to another terminal type if you prefer a different environment.

To change the terminal:

1. Click the dropdown arrow (˅) next to the terminal tab

2. Choose one of the available options, such as:
   • Command Prompt (cmd.exe) – Standard Windows shell
   • PowerShell – Default on Windows
   • Git Bash – If you have Git installed
   • Ubuntu (WSL) – For Linux commands on Windows
   • Bash / Zsh – Common on Linux and macOS

---

🧩 Setting a Default Terminal

To make one terminal your default every time you open VS Code:

1. Open the Command Palette (Ctrl + Shift + P)
2. Type and select Terminal: Select Default Profile
3. Choose your preferred shell (for example, Ubuntu (WSL) or PowerShell)

Next time you open a terminal, VS Code will automatically use your selected shell.

---

💡 Tip:
If you’re on Windows and you’ve installed WSL (Windows Subsystem for Linux), selecting Ubuntu (WSL) gives you a full Linux terminal right inside VS Code — perfect for testing commands in a real Linux environment.

---

📝 Step 5: Choosing the Right Language Mode and Runtime

Every file you open in VS Code has two key parts that control how your code behaves and runs:

1. Language Mode – tells VS Code what kind of code you’re writing (e.g., JavaScript, Python, HTML, etc.).
2. Runtime or Interpreter – defines how and where your code actually runs (e.g., Node.js, Python, or a specific virtual environment).

---

🧭 Checking or Changing the Language Mode

Look at the bottom-right corner of VS Code — you’ll see the current language mode, such as TypeScript, Python, or Plain Text.

We can click on it. A dropdown will appear with a list of supported languages — choose the one that matches your file type, or select Auto Detect.

💡 Tip:
Language Mode affects syntax highlighting, IntelliSense, linting, and formatting, but it doesn’t actually run your code.

---

⚙️ Selecting a Runtime or Interpreter (Example: Python)

For languages like Python, you’ll also need to select a runtime (called an interpreter) to tell VS Code which environment to use when running your code.

To select or change it:

1. Open the Command Palette (Ctrl + Shift + P)
2. Type “Select Interpreter” (or “Python: Select Interpreter” if using Python)
3. Choose your environment, such as:
   • A virtual environment inside your project
   • A global Python installation
   • A Conda environment
   • A WSL environment (for Ubuntu/Linux on Windows)

Other languages work similarly:

• Node.js / TypeScript → uses the Node runtime automatically.
• Java → needs the JDK configured.
• .NET (C#) → requires the .NET SDK.

---

🧩 Why It Matters

• Language Mode = how VS Code understands and displays your code
• Runtime / Interpreter = how your code is executed

💡 Example:
You can edit a .py file in Python mode, but without selecting a Python interpreter, VS Code won’t know how to run it.

---

⚙️ Step 6: Install Useful Extensions

VS Code supports thousands of extensions.
Here are some of the most popular ones for all developers:

Extension	Purpose
Prettier	Formats your code automatically
ESLint	Lints your code to catch errors early
GitLens	Enhances Git integration
Path Intellisense	Helps with file path auto-completion
Code Spell Checker	Detects typos in comments and strings
Live Server	Launches a live preview for web projects

You can install extensions from the Extensions sidebar or the command palette (Ctrl + Shift + P) → Extensions: Install Extensions.

---

🧠 Step 7: Learn Common Features (Optional)

🔍 Search

Use Ctrl + F to search within a file or Ctrl + Shift + F to search across the whole project.

🪄 Auto-completion

VS Code provides intelligent suggestions as you type, powered by IntelliSense.

🧱 Terminal

You can open an integrated terminal using Ctrl + ~, allowing you to run commands without leaving VS Code.

🐞 Debugging

Set breakpoints by clicking beside line numbers and run your app in debug mode using Run → Start Debugging (F5).

🧹 Formatting

Use Shift + Alt + F to format your code automatically.
You can also set "editor.formatOnSave": true in settings.

---

🧰 Step 8: Customize Settings (Optional)

You can customize VS Code easily:

• Open Settings with Ctrl + ,
• Search for preferences like theme, font size, or auto-save
• To edit settings manually, open settings.json via Ctrl + Shift + P → Preferences: Open Settings (JSON)

Example:

{
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "workbench.colorTheme": "Default Dark Modern"
}

---

🌈 Step 9: Try Themes and Icons (Optional)

Make your editor look and feel the way you want:

• Ctrl + K, Ctrl + T → Change color theme
• Install icon packs like Material Icon Theme for colorful file icons.

---

🎯 In Summary

You’ve now:

• Installed VS Code
• Explored its interface
• Installed extensions
• Customized your environment

Whether you’re coding in TypeScript, Python, Java, or HTML, VS Code adapts to your language with extensions and intelligent tooling.