๐Ÿ” What is Visual Studio Code?

Visual Studio Code (VS Code) is a lightweight, free, open-source code editor developed by Microsoft. It supports multiple languages (JavaScript, Python, C++, etc.), has built-in Git support, debugging, IntelliSense, and a rich ecosystem of extensions.

๐Ÿ“ฆ Step 1: Downloading Visual Studio Code

โœ… Official Website:

Go to: https://code.visualstudio.com/

๐Ÿ–ฅ๏ธ For Windows:

  • Click "Download for Windows".
  • Run the downloaded .exe file.
  • Follow the installation wizard:
    • Accept the license agreement.
    • Choose the destination folder.
    • Check "Add to PATH" (important!).
    • Optionally check:
      • "Register Code as editor for supported file types"
      • "Add 'Open with Code' to Windows Explorer context menu"
    • Click Install.
  • Launch VS Code when done.

๐ŸŽ For macOS:

  • Download the .zip file.
  • Open the .zip โ€“ it extracts the Visual Studio Code.app.
  • Drag it into the Applications folder.
  • (Optional) Open Terminal and run the following to add code command to PATH:
    sudo ln -s /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code /usr/local/bin/code

๐Ÿง For Linux:

Ubuntu/Debian:

sudo apt update
sudo apt install wget gpg
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /usr/share/keyrings/
sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

Fedora:

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo dnf check-update
sudo dnf install code

๐Ÿงฐ Step 2: Basic Configuration

  1. Launch VS Code

    You can now open VS Code from:

    • The app menu
    • Windows start menu
    • Terminal using code .
  2. Interface Overview
    • Explorer: View your project folder/files.
    • Search: Global search across files.
    • Source Control: Git integration.
    • Run & Debug: Launch debuggers.
    • Extensions: Install new tools.
    • Settings: Customize your editor.

๐Ÿงฉ Step 3: Installing Extensions

Popular Extensions:

NameUse
Python (Microsoft)Python development
PrettierCode formatter
ESLintLinting for JS/TS
Live ServerLaunch web server with live reload
GitLensGit enhancements
Material Icon ThemeFile icons
Dracula / One Dark ProPopular color themes

How to Install Extensions:

  1. Click on Extensions (โ‡งโŒ˜X / Ctrl+Shift+X).
  2. Search for an extension.
  3. Click Install.

๐Ÿง  Bonus: Sync Settings Across Devices

Settings Sync (via GitHub or Microsoft Account):

Turn on via gear icon in bottom left โ†’ Turn on Settings Sync

Syncs:

  • Settings
  • Extensions
  • Keyboard Shortcuts
  • Themes

โœ… Summary

TaskDone
Installed VS Codeโœ…
Installed extensionsโœ…
Personalized theme/iconsโœ…
Set up project/workspaceโœ…
Set up Gitโœ…
Language-specific setupโœ…

๐Ÿ“š Learn More