Welcome to my personal VS Code reference guide. This is where I keep my favorite themes, icon packs, keyboard shortcuts, and productivity ideas. Tailored for web development and daily ninja work! ⚔️
- Night Owl
- GitHub Theme
- One Dark Pro
- Dracula Official
- Correia Github Gruvbox
- GitHub Sharp Theme
- Mayukai Theme
- MacOS Modern Theme
- Fira Code (with ligatures enabled)
- JetBrains Mono
| Extension | Description |
|---|---|
| Prettier | Code formatter for consistent styling |
| ESLint | Linting for JavaScript/TypeScript |
| Code Snapshot | Capture and style code as image snippets |
| GitLens | Git superpowers with blame, history, etc. |
| Colorize | Highlights CSS colors in code |
| CSS Modules | Autocomplete for CSS module class names |
| CSS Var Complete | Autocomplete for CSS custom properties |
| CSS Variable Autocomplete | Suggests CSS variables as you type |
| ES7+ React Snippets | Snippets for React, Redux, and more |
| Highlight on Copy | Temporarily highlights copied code |
| Live Server | Launch a local dev server with live reload |
| npm Intellisense | Autocomplete npm modules in import statements |
| styled-components Snippets | Snippets for styled-components syntax |
| vscode-styled-components | Syntax highlighting and IntelliSense for styled-components |
| Path Intellisense | Autocompletion for file paths |
| REST Client | Test REST APIs within VS Code |
| Tailwind CSS IntelliSense | IntelliSense for Tailwind CSS classes |
| Import Cost | Displays size of imported packages inline |
| styled-jsx Language Server | Syntax highlighting and IntelliSense for styled-jsx |
| Turbo Console Log | Auto-generates smart `console.log` statements |
| Windsurf (Codeium) | AI-powered code autocompletion |
| Code Spell Checker | Spelling checker for code and comments |
| Live Share | Collaborative real-time coding sessions |
| PostCSS Language Support | Support for PostCSS syntax and features |
| Markdown All in One | Essential tools for Markdown editing |
| Console Ninja | Enhances console logs with formatting and filtering |
| Markdown Preview Enhanced | Powerful Markdown preview with diagrams and math |
| Astro | Support for Astro components and syntax |
| change-case | Quickly convert text between different cases |
| MDX | Language support for MDX (Markdown + JSX) |
- Cmd + P / Ctrl + P → Quick file search
- Cmd + Shift + O / Ctrl + Shift + O → Go to symbol in file
- Cmd + Shift + E / Ctrl + Shift + E → Explorer
- Cmd + B / Ctrl + B → Toggle sidebar
- Option + Shift + ↓/↑ / Alt + Shift + ↓/↑ → Copy line down/up
- Cmd + D / Ctrl + D → Multi-cursor select next match
- Cmd + Shift + L / Ctrl + Shift + L → Select all occurrences
- Ctrl + ` → Toggle terminal
- Cmd + Shift + C / Ctrl + Shift + C → Open terminal in editor
- Option + Shift + F / Alt + Shift + F → Format document
- Cmd + K M / Ctrl + K M → Change language mode
VS Code settings are stored in a JSON file that define how your editor behaves. You can save them:
- Globally (applies to all projects)
- Per workspace (specific to a project or repo)
These settings live inside: .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"files.autoSave": "onFocusChange",
"terminal.integrated.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme"
}| Setting | Description |
|---|---|
| editor.formatOnSave | Auto-formats your code on every save. |
| editor.tabSize | Sets 2 spaces per tab — ideal for JS/React devs. |
| files.autoSave | Auto-saves when you switch tabs or windows. |
| terminal.integrated.fontFamily | Uses a custom terminal font (install Fira Code for this). |
| editor.fontLigatures | Enables coding ligatures (e.g. =>, === become elegant symbols). |
| workbench.colorTheme | Uses One Dark Pro (must be installed). |
| workbench.iconTheme | Uses Material Icon Theme for your file explorer. |
🌍 Global (applies everywhere)
-
Open Command Palette:
Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows)
-
Search: Preferences: Open Workspace Settings (JSON)
-
Paste the config above and save.
📦 Project-Only (recommended)
-
In your project root, create a folder:
.vscode/ -
Inside it, create or edit
settings.json -
Paste the same JSON block
-
Save — VS Code will auto-apply for that workspace only.
Set up everything with one command. Create this structure:
vscode-ninja-setup/
├── settings.json
├── setup.sh # for macOS/Linux
└── setup.bat # for Windows🐧 macOS/Linux — setup.sh
#!/bin/bash
# Extensions
code --install-extension zhuangtongfa.Material-theme
code --install-extension PKief.material-icon-theme
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension formulahendry.auto-close-tag
# Settings
cp settings.json ~/Library/Application\ Support/Code/User/settings.json
echo "✅ VS Code Ninja setup complete!"Make it executable:
chmod +x setup.sh
./setup.sh🪟 Windows — setup.bat
@echo off
REM Install extensions
code --install-extension zhuangtongfa.Material-theme
code --install-extension PKief.material-icon-theme
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension formulahendry.auto-close-tag
REM Copy settings
copy settings.json "%APPDATA%\Code\User\settings.json"
echo ✅ VS Code Ninja setup complete!
pauseDouble-click setup.bat to run.
VS Code comes with a built-in feature called Settings Sync, which allows you to:
- Sync extensions
- Sync themes & icons
- Sync keyboard shortcuts
- Sync custom snippets
- Sync settings like font, format-on-save, and more
Settings Sync uses your GitHub or Microsoft account to securely back up your entire VS Code setup to the cloud. Perfect for syncing work/home machines or migrating to a new device.
-
Open Command Palette:
Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows)
-
Search: Turn On Settings Sync
-
Sign in using GitHub or Microsoft
-
Choose what you want to sync:
- Settings
- Extensions
- Keybindings
- Snippets
- UI State
That’s it — your VS Code config is now backed up and portable across devices!
When you install VS Code on a new device, just sign in and Settings Sync will automatically apply your full setup — no need to manually reinstall themes or extensions.