Complete VS Code Installation and Setup Guide for Beginners

Visual Studio Code (VS Code) is a free, lightweight but powerful code editor created by Microsoft. It’s like a smart notepad for writing code, with helpful features like:

• Color-coding for different programming languages
• Auto-completion suggestions while you type
• Built-in terminal for running commands
• Extensions to add more features

Think of it as a Swiss Army knife for coding—it works with almost any programming language!

---

2. Installation Guides

Windows Installation

Step 1: Download VS Code

1. Open your web browser (Chrome, Edge, Firefox)
2. Go to: https://code.visualstudio.com/
3. Click the large blue “Download for Windows” button
4. Wait for the download to complete (file name: VSCodeSetup.exe)

Step 2: Run the Installer

1. Find the downloaded file (usually in your “Downloads” folder)
2. Double-click VSCodeSetup.exe
3. If Windows asks “Do you want to allow this app to make changes?”, click “Yes”

Step 3: License Agreement

1. Read the license agreement
2. Select “I accept the agreement”
3. Click “Next”

Step 4: Choose Install Location

1. Keep the default location (recommended)
2. Click “Next”

Step 5: Start Menu Folder

1. Keep the default folder name “Visual Studio Code”
2. Click “Next”

Step 6: Select Additional Tasks Check these boxes (VERY IMPORTANT):

• ✅ “Add ‘Open with Code’ action to Windows Explorer file context menu”
• ✅ “Add ‘Open with Code’ action to Windows Explorer directory context menu”
• ✅ “Register Code as an editor for supported file types”
• ✅ “Add to PATH” (this is crucial!)
• Click “Next”

Step 7: Install

1. Click “Install”
2. Wait for installation to complete (1-2 minutes)
3. Uncheck “Launch Visual Studio Code” for now
4. Click “Finish”

---

macOS Installation

Step 1: Download VS Code

1. Open Safari or Chrome
2. Go to: https://code.visualstudio.com/
3. Click “Download for Mac”
4. Wait for the .zip file to download

Step 2: Extract the File

1. Find VSCode-darwin.zip in your Downloads folder
2. Double-click it to extract (if it doesn’t auto-extract)
3. You’ll see “Visual Studio Code.app”

Step 3: Move to Applications

1. Open Finder
2. Go to Downloads folder
3. Drag “Visual Studio Code.app” to your “Applications” folder
4. Wait for the copy to finish

Step 4: First Launch

1. Go to Applications folder
2. Double-click “Visual Studio Code”
3. If you see a warning: “Visual Studio Code can’t be opened because Apple cannot check it for malicious software”:
   • Click “OK”
   • Go to System Preferences → Security & Privacy
   • Click “Open Anyway” next to VS Code
4. VS Code will open

Step 5: Add to Dock (Optional)

1. Right-click the VS Code icon in your Dock
2. Select Options → “Keep in Dock”

---

Linux Installation

Ubuntu/Debian Method (Recommended for beginners):

Step 1: Download

1. Open Firefox or Chrome
2. Go to: https://code.visualstudio.com/
3. Click “Download for Linux”
4. Choose “.deb” option (for Ubuntu, Debian)
5. Save the file

Step 2: Install the .deb Package

1. Open your Downloads folder
2. Right-click the downloaded .deb file
3. Select “Open With Software Install”
4. Click “Install”
5. Enter your password when prompted
6. Wait for installation to complete

Alternative Method (Terminal):

1. Press Ctrl + Alt + T to open Terminal
2. Navigate to Downloads: cd ~/Downloads
3. Install the package: sudo dpkg -i code_*.deb
4. If errors appear: sudo apt-get install -f
5. Enter your password when prompted

Other Linux Distributions:

Fedora/RHEL:

1. Download the .rpm file
2. Open Terminal
3. Run: sudo rpm -i code-*.rpm

Snap Method (Universal Linux):

1. Open Terminal
2. Run: sudo snap install code --classic

---

3. Interface Overview

When you first open VS Code, you’ll see several important areas. Here’s a visual guide:

Key Interface Components Explained:

1. Activity Bar (Leftmost narrow bar): Switch between different views:

   • 📁 Explorer: Browse your files and folders
   • 🔍 Search: Find text across all your files
   • 🔄 Source Control: Git integration
   • 🐛 Run and Debug: Test and fix your code
   • ▯ Extensions: Install plugins

2. Sidebar: Shows contents based on what you select in the Activity Bar

3. Editor Area: Where you write and edit your code

4. Status Bar (Bottom blue bar): Shows:

   • Current Git branch
   • Errors and warnings count
   • Line and column number
   • Language mode
   • Encoding

5. Panel (Bottom section): Contains Terminal, Output, Debug Console

---

4. Installing Your First Plugin (Prettier - Code Formatter)

A code formatter automatically makes your code look neat and organized.

Step 1: Open Extensions View

1. Click the square icon (▯) in the Activity Bar on the left side
   • Or press Ctrl + Shift + X (Windows/Linux)
   • Or press Cmd + Shift + X (Mac)

Step 2: Search for Prettier

1. In the search box at the top, type: Prettier
2. Look for “Prettier - Code formatter” by Prettier
3. It should have a checkmark ✅ and many downloads

Step 3: Install

1. Click the green “Install” button
2. Wait a few seconds for installation
3. The button will change to “Uninstall” when done

Step 4: Set as Default Formatter

1. Press Ctrl + , (Windows/Linux) or Cmd + , (Mac) to open Settings
2. In the search bar, type: default formatter
3. From the dropdown, select “Prettier - Code formatter”

Step 5: Enable Format on Save

1. In Settings, search for: format on save
2. Check the box for “Editor: Format On Save”

Now every time you save a file, Prettier will automatically format your code!

---

5. Setting Up Multiple Java Versions

This guide helps you switch between different Java versions (like Java 8, 11, 17, 21) in VS Code.

Prerequisites:

• Have multiple Java versions installed on your computer
• Note where each version is installed

Method 1: Using Settings (Easiest for Beginners)

Step 1: Install Java Extension Pack

1. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
2. Search for “Extension Pack for Java”
3. Click Install

Step 2: Configure Java Home for Projects

1. Open VS Code Settings: Ctrl + , (Windows/Linux) or Cmd + , (Mac)
2. Click the “Workspace” tab (not “User”)
3. Search for: java home
4. Type the path to your Java installation

Example paths:

• Windows: C:\Program Files\Java\jdk-17.0.1
• macOS: /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
• Linux: /usr/lib/jvm/java-17-openjdk-amd64

Method 2: Using Settings.json (More Control)

Step 1: Create Workspace Settings

1. Open your project folder in VS Code
2. Create a folder called .vscode in your project
3. Inside .vscode, create a file called settings.json

Step 2: Add Configuration Add this content to settings.json:

{
    "java.configuration.runtimes": [
        {
            "name": "JavaSE-1.8",
            "path": "C:/Program Files/Java/jdk1.8.0_301",
            "default": false
        },
        {
            "name": "JavaSE-11",
            "path": "C:/Program Files/Java/jdk-11.0.12",
            "default": false
        },
        {
            "name": "JavaSE-17",
            "path": "C:/Program Files/Java/jdk-17.0.1",
            "default": true
        }
    ]
}

IMPORTANT: Change the paths to match where YOUR Java versions are installed!

For macOS users, paths look like:

"path": "/Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home"

For Linux users, paths look like:

"path": "/usr/lib/jvm/java-17-openjdk-amd64"

Step 3: Select Java Version Per Project

1. Open Command Palette: Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac)
2. Type: Java: Configure Java Runtime
3. Select the version you want for this project

Method 3: Environment Variables (Affects ALL programs)

Windows:

1. Search “Environment Variables” in Start Menu
2. Click “Environment Variables”
3. Under “System Variables”, find “JAVA_HOME”
4. Click “Edit”
5. Paste the path to your desired Java version
6. Click OK three times
7. Restart VS Code

macOS/Linux:

1. Open Terminal
2. Edit your shell profile: nano ~/.bashrc or nano ~/.zshrc
3. Add: export JAVA_HOME=/path/to/your/jdk
4. Save: Ctrl + O, then Enter, then Ctrl + X
5. Reload: source ~/.bashrc or source ~/.zshrc

---

6. Troubleshooting Guide

Problem 1: “VS Code is not recognized” in Terminal

This means VS Code didn’t add itself to your system PATH

Windows Fix:

1. Uninstall VS Code
2. Reinstall and MAKE SURE to check “Add to PATH” during installation
3. OR add manually:
   • Find VS Code location (usually C:\Users\[YourName]\AppData\Local\Programs\Microsoft VS Code)
   • Add this to PATH in System Environment Variables

macOS Fix:

1. Open VS Code
2. Press Cmd + Shift + P
3. Type “Shell Command: Install ‘code’ command in PATH”
4. Select it and press Enter

Linux Fix:

1. The code command should be automatically available
2. If not, reinstall using the Snap method: sudo snap install code --classic

---

Problem 2: Extensions Won’t Install

“Error while installing extension” message

Fix:

1. Check your internet connection
2. Try installing from command line:
   • Ctrl + P (or Cmd + P on Mac)
   • Type: ext install [extension-name]
3. Disable antivirus temporarily
4. Clear extension cache:
   • Close VS Code
   • Delete %USERPROFILE%\.vscode\extensions folder (Windows)
   • Delete ~/.vscode/extensions (macOS/Linux)

---

Problem 3: Java Extension Pack Not Working

Red squiggly lines everywhere, no code completion

Fix:

1. Check Java is installed: Open terminal and type java -version
2. If not installed, download from Adoptium
3. Set JAVA_HOME environment variable (see Method 3 above)
4. In VS Code, press Ctrl + Shift + P
5. Type “Java: Clean Java Language Server Workspace”
6. Select and confirm to restart

---

Problem 4: Format on Save Not Working

Code doesn’t auto-format when saving

Fix:

1. Check Prettier is installed (see Extensions)
2. Check “Format On Save” is enabled in Settings
3. Make sure no other formatter is conflicting:
   • Open Settings
   • Search: “default formatter”
   • Ensure “Prettier” is selected
4. For specific file types, add this to settings.json:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

---

Problem 5: VS Code Running Very Slow

Laggy performance, high CPU usage

Fix:

1. Disable unused extensions:
   • Go to Extensions view
   • Right-click unused extensions → Disable
2. Exclude large folders from search:
   • Open Settings
   • Search “files exclude”
   • Add patterns like: **/node_modules, **/.git
3. Disable hardware acceleration:
   • Open Command Palette
   • Type “Preferences: Configure Runtime Arguments”
   • Add: "disable-hardware-acceleration": true

---

Problem 6: “Cannot find module” Errors

Red line under imports, module not found

Fix:

1. Open the folder containing your project files (not just a single file)
   • File → Open Folder
2. If Node.js project: Delete node_modules folder and run npm install in terminal
3. If Java project: Right-click project folder and select “Add Folder to Java Source Path”

---

Problem 7: Terminal Not Opening

Terminal panel is blank or shows error

Windows Fix:

1. Press Ctrl + Shift + P
2. Type “Terminal: Select Default Profile”
3. Choose “Command Prompt” or “PowerShell”
4. If neither works, choose “Git Bash” (if installed)

macOS Fix:

1. Default should be zsh
2. If broken, select Terminal: Select Default Profile → bash

Linux Fix:

1. Select appropriate shell (bash, zsh, fish)
2. Ensure terminal permissions are correct

---

Problem 8: Red Error: “The language server crashed”

Usually affects Java, Python, or C++

Fix:

1. Restart VS Code completely
2. If persists, clean the workspace:
   • Open Command Palette
   • Type “[Language]: Clean Language Server Workspace”
   • Example: “Java: Clean Java Language Server Workspace”
3. Check system requirements (some language servers need specific versions)

---

Still Having Problems?

Quick Checklist:

• VS Code is latest version (Help → Check for Updates)
• Computer meets minimum requirements
• Internet connection is stable
• Correct project folder is open
• JAVA_HOME/other paths are set correctly
• VS Code restarted after changes

Get Help:

1. Visit VS Code GitHub Issues
2. Search Stack Overflow
3. Check VS Code Documentation

---

Quick Reference: Keyboard Shortcuts

Action	Windows/Linux	macOS
Open Settings	Ctrl + ,	Cmd + ,
Command Palette	Ctrl + Shift + P	Cmd + Shift + P
Extensions	Ctrl + Shift + X	Cmd + Shift + X
Terminal	Ctrl + `	Cmd + `
Quick File Open	Ctrl + P	Cmd + P
Save File	Ctrl + S	Cmd + S
Search Files	Ctrl + Shift + F	Cmd + Shift + F

---

This guide should help you get started with VS Code. Remember, practice makes perfect—don’t worry if things seem confusing at first. Happy coding! 🚀