Tools
Image Tools
PNG/JPEG to WEbP/AVIF Converter
PNG Compression
Color Extractor to CSS
Image Resizer
Utility Tools
Lorem Ipsum Generator
Markdown Previewer
Regex Tester
Base64 Encoder/Decoder
Color Picker
Productivity Tools
Meta Tag Generator
Fake Data Generator
UUID Generator
Timestamp Converter

Visual Studio Code User Guide

Speed up your workflow and master your development environment with these time-saving tips, hotkeys, and customizations for VS Code.

Essential Hotkeys
Action Windows/Linux macOS
Command Palette Ctrl + Shift + P Cmd + Shift + P
Quick Open(File Search) Ctrl + P Cmd + P
Toggle Terminal Ctrl + `` Cmd + ``
Split Editor Ctrl + \ Cmd + \
Toggle Sidebar Ctrl + B Cmd + B
Comment Line Ctrl + / Cmd + /
Format Document Shift + Alt + F Shift + Option + F
Rename Symbol F2 F2
Multi-cursor Selection Alt + Click Option + Click
Show Problems Panel Ctrl + Shift + M Cmd + Shift + M
Power Features
  1. Multi-Cursor Editing
    • Hold Alt (Windows) or Option (Mac) and click to place multiple cursors.
    • Use Ctrl + D / Cmd + D to select the next instance of a word.
  2. IntelliSense Everywhere
    • Autocompletion and type hints with Ctrl + Space
  3. Command Palette
    • One-stop for all commands: Ctrl + Shift + P / Cmd + Shift + P
  4. Zen Mode
    • Distraction-free mode: Ctrl + K Z / Cmd + K Z
  5. Live Share
    • Collaborate in real time using the Live Share extension.
Customization Tips
Settings Sync
  • Sync themes, extensions, and settings using your GitHub or Microsoft account.
Popular Themes
Font Ligatures
json

"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code, JetBrains Mono, Consolas, monospace"
Must Have Extensions
Extension Name Description
Prettier Code formatter. Supports man languages.
ESLint Find and fix problems with your JavaScript/TypeScript code.
GitLens Powerful tools to manage Git inside VS Code.
Live Server Launch a local dev server with live reload.
REST Client Test APIs directly in the VS Code Editor.
Path Intellisense Auto-complete file paths.
Bracket Pair Colorizer Color matching brackets.
Markdown All in One Enhanced markdown editing.
Pro Tips
  • Drag Tabs between editor windows
  • Use .vscode/settings.json for per-project settings.
  • Right-click → Reveal in Explorer to locate a file quickly.
  • Use Ctrl + Shift + E / Cmd + Shift + E to go to Explorer.
Productivity Boost
  • Breadcrumbs: Toggle file path nav with View → Show Breadcrumbs.
  • Outline Panel: Great for jumping between functions/sections.
  • Workspace Settings: Ideal for large team-based projects.
  • Task Runner: Automate builds and scripts via tasks.json

Additional Docs

Copyright Devsoniq.com. All Rights Reserved.