Visual Studio Code
Popular code editor by Microsoft with extensive extension marketplace.
Official WebsiteFeatures
Installation
brew install --cask visual-studio-codeapt install codepacman -S codechoco install vscodewinget install Microsoft.VisualStudioCodeWhy Use Visual Studio Code?
Visual Studio Code (VS Code) is an open-source code editor developed by Microsoft. With rich extensions and excellent development experience, it is one of the most popular editors.
Extension Marketplace
Tens of thousands of extensions available. Easy installation of language support, themes, and development tools.
Integrated Terminal
Open terminal within editor to run commands. Manage multiple terminals simultaneously.
Git Integration
Git operations in Source Control panel. Diff, staging, commit, and branch management via GUI.
IntelliSense
Smart autocomplete, parameter info, quick info, and member lists.
Installation
# macOS (Homebrew)
brew install --cask visual-studio-code
# macOS (from official website)
# https://code.visualstudio.com/Download
# Ubuntu/Debian
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code 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]
name=Visual Studio Code
baseurl=https://packages.microsoft.com/yumrepos/vscode
enabled=1
gpgcheck=1
gpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo dnf install code
# Arch Linux
sudo pacman -S code # Open source version
# Or from AUR
yay -S visual-studio-code-bin
# Windows (Winget)
winget install Microsoft.VisualStudioCode
# Windows (Chocolatey)
choco install vscode
# Enable CLI tool
# Command Palette > "Shell Command: Install 'code' command in PATH"Basic Operations
# Open a file
code filename.txt
# Open directory (folder)
code .
code ~/projects/myapp
# Open in new window
code -n filename.txt
# Add to existing window
code -a ~/another-project
# Compare files (diff)
code --diff file1.txt file2.txt
# Jump to specific line
code -g filename.txt:10
# Jump to specific line and column
code -g filename.txt:10:5
# Wait mode (wait until file is closed)
code --wait filename.txt
# Install extension
code --install-extension ms-python.python
# Uninstall extension
code --uninstall-extension ms-python.python
# List installed extensions
code --list-extensions
# Export settings
code --list-extensions > extensions.txtCommon Keyboard Shortcuts
File Navigation
| Key (macOS) | Key (Windows/Linux) | Description |
|---|---|---|
Cmd+P | Ctrl+P | Quick open file |
Cmd+Shift+P | Ctrl+Shift+P | Command Palette |
Cmd+Shift+O | Ctrl+Shift+O | Go to symbol |
Cmd+G | Ctrl+G | Go to line |
Cmd+B | Ctrl+B | Toggle sidebar |
Cmd+J | Ctrl+J | Toggle panel |
Cmd+\ | Ctrl+\ | Split editor |
Editing
| Key (macOS) | Key (Windows/Linux) | Description |
|---|---|---|
Cmd+D | Ctrl+D | Add next word to selection |
Cmd+Shift+L | Ctrl+Shift+L | Select all matching words |
Option+Click | Alt+Click | Add cursor |
Cmd+Shift+K | Ctrl+Shift+K | Delete line |
Option+Up/Down | Alt+Up/Down | Move line up/down |
Shift+Option+Up/Down | Shift+Alt+Up/Down | Duplicate line up/down |
Cmd+/ | Ctrl+/ | Toggle comment |
Cmd+Shift+F | Ctrl+Shift+F | Find in project |
IntelliSense & Code
| Key (macOS) | Key (Windows/Linux) | Description |
|---|---|---|
Ctrl+Space | Ctrl+Space | Show completion suggestions |
F12 | F12 | Go to definition |
Shift+F12 | Shift+F12 | Find references |
F2 | F2 | Rename symbol |
Cmd+. | Ctrl+. | Quick fix/Code action |
Shift+Option+F | Shift+Alt+F | Format document |
Ctrl+- | Alt+Left | Go back |
Terminal
| Key (macOS) | Key (Windows/Linux) | Description |
|---|---|---|
Ctrl+` | Ctrl+` | Toggle terminal |
Ctrl+Shift+` | Ctrl+Shift+` | Create new terminal |
Cmd+\ | Ctrl+\ | Split terminal |
Configuration File
VS Code settings are written in settings.json. Open settings UI with Cmd+,, switch to JSON from icon in top-right.
{
// Editor settings
"editor.fontSize": 14,
"editor.fontFamily": "'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.lineHeight": 1.6,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.wordWrap": "off",
"editor.minimap.enabled": true,
"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": "on",
"editor.smoothScrolling": true,
"editor.renderWhitespace": "selection",
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.inlayHints.enabled": "on",
"editor.linkedEditing": true,
"editor.stickyScroll.enabled": true,
// Format
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
// Auto save
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
// End of line processing
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
// Exclude files
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/__pycache__": true
},
// Workbench
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
"workbench.tree.indent": 16,
// Terminal
"terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
"terminal.integrated.fontSize": 13,
"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.integrated.defaultProfile.linux": "zsh",
// Git
"git.autofetch": true,
"git.confirmSync": false,
"git.enableSmartCommit": true,
// Language-specific settings
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.tabSize": 4
},
"[markdown]": {
"editor.wordWrap": "on"
}
}Recommended Extensions
Open Extensions panel with Cmd+Shift+X.
# Language Support
- Python (ms-python.python)
- Pylance (ms-python.vscode-pylance)
- ESLint (dbaeumer.vscode-eslint)
- Prettier (esbenp.prettier-vscode)
- Go (golang.go)
- Rust Analyzer (rust-lang.rust-analyzer)
# Git
- GitLens (eamodio.gitlens)
- Git Graph (mhutchie.git-graph)
# Editor Enhancements
- Vim (vscodevim.vim)
- Auto Rename Tag (formulahendry.auto-rename-tag)
- Bracket Pair Colorizer (CoenraadS.bracket-pair-colorizer-2)
- Path Intellisense (christian-kohler.path-intellisense)
- Code Spell Checker (streetsidesoftware.code-spell-checker)
# Themes
- One Dark Pro (zhuangtongfa.material-theme)
- Dracula Official (dracula-theme.theme-dracula)
- Material Icon Theme (pkief.material-icon-theme)
# Remote Development
- Remote - SSH (ms-vscode-remote.remote-ssh)
- Remote - Containers (ms-vscode-remote.remote-containers)
- Dev Containers (ms-vscode-remote.remote-containers)
# AI
- GitHub Copilot (github.copilot)
- GitHub Copilot Chat (github.copilot-chat)
# Other
- Live Server (ritwickdey.liveserver)
- Thunder Client (rangav.vscode-thunder-client)
- Docker (ms-azuretools.vscode-docker)
- YAML (redhat.vscode-yaml)
- Markdown All in One (yzhang.markdown-all-in-one)Keymap Configuration
Open keyboard shortcuts with Cmd+K Cmd+S. Detailed customization in keybindings.json.
[
// Toggle terminal focus
{
"key": "ctrl+`",
"command": "workbench.action.terminal.toggleTerminal"
},
// Toggle sidebar
{
"key": "cmd+b",
"command": "workbench.action.toggleSidebarVisibility"
},
// Focus on file explorer
{
"key": "cmd+shift+e",
"command": "workbench.view.explorer"
},
// Move between editor groups
{
"key": "cmd+1",
"command": "workbench.action.focusFirstEditorGroup"
},
{
"key": "cmd+2",
"command": "workbench.action.focusSecondEditorGroup"
},
// Split terminal
{
"key": "cmd+\",
"command": "workbench.action.terminal.split",
"when": "terminalFocus"
},
// Close without saving
{
"key": "cmd+k w",
"command": "workbench.action.closeActiveEditor"
},
// Save all
{
"key": "cmd+alt+s",
"command": "workbench.action.files.saveAll"
}
]Remote Development
With VS Code's remote development, you can develop in SSH or containers.
# Required extensions
- Remote - SSH
- Remote - Containers (Dev Containers)
- Remote - WSL (Windows)
# SSH connection
1. Cmd+Shift+P → "Remote-SSH: Connect to Host..."
2. Enter SSH destination (user@hostname)
3. After connection, VS Code runs on remote
# SSH configuration (~/.ssh/config)
Host myserver
HostName example.com
User username
IdentityFile ~/.ssh/id_rsa
# Dev Containers
1. Create .devcontainer/devcontainer.json in project
2. Cmd+Shift+P → "Dev Containers: Reopen in Container"
# devcontainer.json example
{
"name": "Node.js",
"image": "mcr.microsoft.com/devcontainers/javascript-node:18",
"features": {
"ghcr.io/devcontainers/features/git:1": {}
},
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
},
"postCreateCommand": "npm install"
}Vim Mode
Installing the VSCode Vim extension enables Vim keybindings.
# Install Vim extension
code --install-extension vscodevim.vim
# Vim settings in settings.json
{
// Vim configuration
"vim.leader": "<space>",
"vim.hlsearch": true,
"vim.incsearch": true,
"vim.useSystemClipboard": true,
"vim.smartRelativeLine": true,
// jk to normal mode
"vim.insertModeKeyBindings": [
{
"before": ["j", "k"],
"after": ["<Esc>"]
}
],
// Normal mode keymaps
"vim.normalModeKeyBindingsNonRecursive": [
// Save file
{
"before": ["<leader>", "w"],
"commands": [":w"]
},
// Close file
{
"before": ["<leader>", "q"],
"commands": [":q"]
},
// File explorer
{
"before": ["<leader>", "e"],
"commands": ["workbench.action.toggleSidebarVisibility"]
},
// File search
{
"before": ["<leader>", "f", "f"],
"commands": ["workbench.action.quickOpen"]
},
// Search
{
"before": ["<leader>", "f", "g"],
"commands": ["workbench.action.findInFiles"]
}
],
// EasyMotion
"vim.easymotion": true,
// Surround
"vim.surround": true
}Tips
- •When opening files with
Cmd+P, use@for symbols,:for lines,>for commands. - •Use
Cmd+Dto select matching words sequentially.Cmd+K Cmd+Dto skip and move to next. - •Share settings across machines with "Settings Sync" (GitHub account integration).
- •Share project-specific settings with
.vscode/settings.json. - •GitHub Copilot enables AI-powered code completion and generation (requires subscription).
- •Show breadcrumb symbol list with
Cmd+Shift+.. Convenient for navigating large files. - •Export extensions with
code --list-extensionsand share with team.