๐ 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
- Launch VS Code
You can now open VS Code from:
- The app menu
- Windows start menu
- Terminal using
code .
- 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:
| Name | Use |
|---|---|
| Python (Microsoft) | Python development |
| Prettier | Code formatter |
| ESLint | Linting for JS/TS |
| Live Server | Launch web server with live reload |
| GitLens | Git enhancements |
| Material Icon Theme | File icons |
| Dracula / One Dark Pro | Popular color themes |
How to Install Extensions:
- Click on Extensions (โงโX / Ctrl+Shift+X).
- Search for an extension.
- 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
| Task | Done |
|---|---|
| Installed VS Code | โ |
| Installed extensions | โ |
| Personalized theme/icons | โ |
| Set up project/workspace | โ |
| Set up Git | โ |
| Language-specific setup | โ |
๐ Learn More